[experiment] implement jump URLs

Author: jay3332

package.json

@@ -28,6 +28,7 @@
     "@solid-primitives/media": "^2.1.1",
     "@solid-primitives/set": "^0.4.2",
     "@solidjs/router": "^0.13",
+    "@tanstack/solid-virtual": "^3.13.5",
     "@thisbeyond/solid-dnd": "^0.7.5",
     "cssnano": "^5.1.14",
     "emoji-regex": "^10.3.0",

src/Entrypoint.tsx

@@ -195,8 +195,8 @@ const Entrypoint: Component = () => {
                   <Route path="/loading" component={Loading} />
                   <Route path="/friends/requests" component={FriendRequests} />
                   <Route path="/friends/*" component={FriendsList} />
-                  <Route path="/dms/:channelId" component={DmChannel} />
-                  <Route path="/guilds/:guildId/:channelId" component={GuildChannel} />
+                  <Route path="/dms/:channelId/:messageId?" component={DmChannel} />
+                  <Route path="/guilds/:guildId/:channelId/:messageId?" component={GuildChannel} />
                   <Route path="/guilds/:guildId" component={GuildHome} />
                   <Route path="/invite/:code" component={Invite} />
                   <Route path="/" component={Home} />

src/api/MessageGrouper.ts

@@ -45,20 +45,101 @@ export function authorDefault(): User {
 export default class MessageGrouper {
   private readonly groupsSignal: Signal<MessageGroup[]>
   private currentGroup?: Message[]
-
   private fetchBefore?: bigint
   private fetchLock: boolean = false
+  private loading: Accessor<boolean>
+  private setLoading: Setter<boolean>
   nonced: Map<string, [number, number]>
   noMoreMessages: Accessor<boolean>
   private setNoMoreMessages: Setter<boolean>
+  private oldestMessageId?: Accessor<bigint | undefined>
+  private setOldestMessageId: Setter<bigint | undefined>
+  private newestMessageId?: Accessor<bigint | undefined>
+  private setNewestMessageId: Setter<bigint | undefined>
+  private hasGap: Accessor<boolean>
+  private setHasGap: Setter<boolean>
 
   constructor(
     private readonly api: Api,
     private readonly channelId: bigint,
   ) {
     this.groupsSignal = createSignal([] as MessageGroup[])
     this.nonced = new Map();
-    [this.noMoreMessages, this.setNoMoreMessages] = createSignal(false)
+    [this.noMoreMessages, this.setNoMoreMessages] = createSignal(false);
+    [this.loading, this.setLoading] = createSignal(false);
+    [this.oldestMessageId, this.setOldestMessageId] = createSignal<bigint | undefined>(undefined);
+    [this.newestMessageId, this.setNewestMessageId] = createSignal<bigint | undefined>(undefined);
+    [this.hasGap, this.setHasGap] = createSignal(false);
+  }
+
+  get isLoading() {
+    return this.loading()
+  }
+
+  get hasMessageGap() {
+    return this.hasGap()
+  }
+
+  get oldestLoaded() {
+    return this.oldestMessageId?.()
+  }
+
+  get newestLoaded() {
+    return this.newestMessageId?.()
+  }
+
+  /**
+   * Update the oldest and newest message IDs after message insertion
+   */
+  private updateMessageBoundaries() {
+    let oldestId: bigint | undefined;
+    let newestId: bigint | undefined;
+
+    for (const group of this.groups) {
+      if (group.isDivider) continue;
+      
+      for (const message of group) {
+        if (!oldestId || message.id < oldestId) {
+          oldestId = message.id;
+        }
+        if (!newestId || message.id > newestId) {
+          newestId = message.id;
+        }
+      }
+    }
+
+    this.setOldestMessageId(oldestId);
+    this.setNewestMessageId(newestId);
+  }
+
+  /**
+   * Determines if there is a gap between the current message context and the newest loaded messages
+   */
+  checkForMessageGap() {
+    if (!this.oldestLoaded || !this.newestLoaded) {
+      this.setHasGap(false);
+      return false;
+    }
+
+    // If the difference between newest and oldest is significantly larger than the loaded message count would suggest,
+    // then we likely have a gap
+    const totalMessageCount = this.getTotalMessageCount();
+    const expectedDiff = BigInt(totalMessageCount * 2); // rough estimate assuming uniform message ID distribution
+    const actualDiff = this.newestLoaded - this.oldestLoaded;
+    
+    const hasGap = actualDiff > expectedDiff && actualDiff > BigInt(MESSAGE_HISTORY_LIMIT * 3);
+    this.setHasGap(hasGap);
+    return hasGap;
+  }
+
+  /**
+   * Gets the total number of actual messages (excluding dividers)
+   */
+  getTotalMessageCount(): number {
+    return this.groups.reduce((count, group) => {
+      if (group.isDivider) return count;
+      return count + group.length;
+    }, 0);
   }
 
   /**
@@ -139,27 +220,57 @@ export default class MessageGrouper {
   insertMessages(messages: Message[]) {
     if (messages.length === 0) return
 
+    // Create a set of existing message IDs to avoid duplicates
+    const existingMessageIds = new Set<string>();
+    for (const group of this.groups) {
+      if (group.isDivider) continue;
+      
+      for (const message of group) {
+        existingMessageIds.add(message.id.toString());
+      }
+    }
+    
+    // Filter out duplicate messages
+    const uniqueMessages = messages.filter(message => !existingMessageIds.has(message.id.toString()));
+    
+    if (uniqueMessages.length === 0) return;
+
     let groups = this.groups
     if (this.currentGroup == null) groups.push([])
 
-    let [groupIndex, messageIndex] = this.findCloseMessageIndex(messages[0].id)
-    let lastMessage: Message
+    let [groupIndex, messageIndex] = this.findCloseMessageIndex(uniqueMessages[0].id)
+    let lastMessage: Message | undefined
 
     if (groupIndex <= 0) {
       let firstMessageGroup = groups[0]
-      if (firstMessageGroup.isDivider || groupIndex < 0)
+      if (firstMessageGroup?.isDivider || groupIndex < 0)
         groups = [firstMessageGroup = [], ...groups]
 
-      lastMessage = (<Message[]> firstMessageGroup)[0]
+      // Only set lastMessage if the group actually has messages
+      if (firstMessageGroup.length > 0) {
+        lastMessage = firstMessageGroup[0]
+      }
       groupIndex = 0
     } else {
       lastMessage = (<Message[]> groups[groupIndex])[messageIndex]
     }
 
-    for (const message of messages) {
-      const behavior = this.nextMessageBehavior({ lastMessage, message })
+    for (const message of uniqueMessages) {
+      // Skip divider logic for the first message if we don't have a previous message for reference
+      const behavior = lastMessage 
+        ? this.nextMessageBehavior({ lastMessage, message }) 
+        : false
+
       if (behavior) {
-        if (behavior !== true) groups.splice(++groupIndex, 0, behavior)
+        if (behavior !== true) {
+          // Only add a divider if the dates are actually different
+          const messageDate = new Date(snowflakes.timestamp(message.id)).toDateString()
+          const lastMessageDate = new Date(snowflakes.timestamp(lastMessage!.id)).toDateString()
+          
+          if (messageDate !== lastMessageDate) {
+            groups.splice(++groupIndex, 0, behavior)
+          }
+        }
         groups.splice(++groupIndex, 0, [])
         messageIndex = -1
       }
@@ -171,28 +282,148 @@ export default class MessageGrouper {
 
     this.setGroups([...groups])
     this.currentGroup = last(groups) as any
+    
+    // Update oldest and newest message IDs after inserting messages
+    this.updateMessageBoundaries();
+    
+    // Check if we have a gap in message history
+    this.checkForMessageGap();
+  }
+
+  /**
+   * Finds a message by ID and scrolls to it, loading surrounding messages if needed
+   */
+  async findMessage(id: bigint): Promise<[number, number] | null> {
+    // First check if we already have the message
+    const [groupIndex, messageIndex] = this.findCloseMessageIndex(id)
+    if (groupIndex >= 0) {
+      const group = this.groups[groupIndex]
+      if (!group.isDivider) {
+        const message = group[messageIndex]
+        if (message.id === id) {
+          return [groupIndex, messageIndex]
+        }
+      }
+    }
+
+    // If we don't have the message, load messages around it
+    await this.fetchMessages(id)
+    
+    // Check again after loading
+    const [newGroupIndex, newMessageIndex] = this.findCloseMessageIndex(id)
+    if (newGroupIndex >= 0) {
+      const group = this.groups[newGroupIndex]
+      if (!group.isDivider) {
+        const message = group[newMessageIndex]
+        if (message.id === id) {
+          return [newGroupIndex, newMessageIndex]
+        }
+      }
+    }
+
+    return null
   }
 
   /**
    * Fetches messages from the API and inserts into the grouper.
+   * @param targetId If provided, fetch messages around this ID
+   * @param after If true, fetch messages after the provided targetId or last loaded message
+   * @param before If true, fetch messages before the provided targetId
    */
-  async fetchMessages() {
-    if (this.noMoreMessages() || this.fetchLock)
+  async fetchMessages(targetId?: bigint, after?: boolean, before?: boolean) {
+    if (this.fetchLock)
       return
 
     this.fetchLock = true
+    this.setLoading(true)
     const params: Record<string, any> = { limit: MESSAGE_HISTORY_LIMIT }
-    if (this.fetchBefore != null)
+    
+    if (targetId) {
+      if (after) {
+        // Fetch messages after the target ID
+        params.after = targetId
+      } else if (before) {
+        // Fetch messages before the target ID
+        params.before = targetId
+      } else {
+        // Fetch messages around the target ID
+        params.around = targetId
+      }
+    } else if (after) {
+      // Fetch messages after the oldest loaded message
+      const lastGroup = this.groups[this.groups.length - 1]
+      if (lastGroup && !lastGroup.isDivider && lastGroup.length > 0) {
+        const lastMessage = lastGroup[lastGroup.length - 1]
+        params.after = lastMessage.id
+      } else {
+        // If we have no messages, just return
+        this.fetchLock = false
+        this.setLoading(false)
+        return
+      }
+    } else if (this.fetchBefore != null) {
+      // Fetch messages before the oldest loaded message
       params.before = this.fetchBefore
+    }
 
-    const response = await this.api.request<Message[]>('GET', `/channels/${this.channelId}/messages`, { params })
-    const messages = response.ensureOk().jsonOrThrow()
+    try {
+      const response = await this.api.request<Message[]>('GET', `/channels/${this.channelId}/messages`, { params })
+      const messages = response.ensureOk().jsonOrThrow()
 
-    this.fetchBefore = last(messages)?.id
-    if (messages.length < MESSAGE_HISTORY_LIMIT)
-      this.setNoMoreMessages(true)
-    this.insertMessages(messages.reverse())
-    this.fetchLock = false
+      if (messages.length === 0) {
+        this.fetchLock = false
+        this.setLoading(false)
+        return
+      }
+
+      if (!targetId && !after && !before) {
+        this.fetchBefore = last(messages)?.id
+        if (messages.length < MESSAGE_HISTORY_LIMIT)
+          this.setNoMoreMessages(true)
+      }
+
+      this.insertMessages(messages.reverse())
+      
+      // After inserting messages, check if we still have a gap
+      this.checkForMessageGap();
+    } finally {
+      this.fetchLock = false
+      this.setLoading(false)
+    }
+  }
+
+  /**
+   * Fetches the next chunk of messages to fill the gap between contexts
+   */
+  async fetchNextChunk() {
+    if (!this.oldestLoaded || !this.newestLoaded) return;
+    
+    // Determine whether we should fetch messages after the oldest or before the newest
+    // If the gap is closer to the oldest loaded message, fetch after the oldest
+    // If the gap is closer to the newest loaded message, fetch before the newest
+    
+    const totalMessageCount = this.getTotalMessageCount();
+    
+    // If we have fewer than 50 messages loaded, we need to fetch more messages
+    if (totalMessageCount < 50) {
+      // If we're closer to the oldest message context (likely jumped to an old message)
+      // then fetch messages after the oldest message to move forward in time
+      await this.fetchMessages(this.oldestLoaded, true);
+    } 
+    // Otherwise, if we have a lot of old messages loaded (scrolled up a lot)
+    // then fetch newer messages to move toward present time
+    else {
+      await this.fetchMessages(this.newestLoaded, false, false);
+    }
+  }
+
+  /**
+   * Fetches the latest messages to jump to bottom
+   */
+  async fetchLatestMessages() {
+    this.setGroups([]);
+    this.fetchBefore = undefined;
+    await this.fetchMessages();
   }
 
   private nextMessageBehavior(
@@ -204,10 +435,18 @@ export default class MessageGrouper {
     lastMessage ??= this.lastMessage
     if (!lastMessage) return false
 
-    let timestamp
-    if (!isSameDay(timestamp = snowflakes.timestamp(message.id), snowflakes.timestamp(lastMessage.id)))
+    let timestamp = snowflakes.timestamp(message.id)
+    let lastTimestamp = snowflakes.timestamp(lastMessage.id)
+
+    const dateStr = new Date(timestamp).toDateString()
+    const lastDateStr = new Date(lastTimestamp).toDateString()
+    
+    // only add a day divider if the messages are from different days
+    if (dateStr !== lastDateStr) {
       return { isDivider: true, content: humanizeDate(timestamp) }
+    }
 
+    // group messages if they are from the same author and within 15 minutes
     return message.author_id !== lastMessage.author_id
       || message.id - lastMessage.id > SNOWFLAKE_BOUNDARY
   }

src/components/icons/svg/ArrowDown.tsx

@@ -0,0 +1,10 @@
+import {JSX} from "solid-js";
+
+export default function ArrowDown(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" {...props}>
+      {/*Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
+      <path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
+    </svg>
+  )
+} 

src/components/icons/svg/Bell.tsx

@@ -0,0 +1,10 @@
+import {JSX} from "solid-js";
+
+export default function Bell(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
+      {/*Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
+      <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66.4 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142.1-128-156.8V32c0-17.7-14.3-32-32-32zM160 448c0 17.7 14.3 32 32 32s32-14.3 32-32H160z"/>
+    </svg>
+  )
+}