feat(desktop): Loading more session number per project by button (#5616)

Co-authored-by: Aiden Cline <[email protected]>

packages/desktop/src/context/global-sync.tsx

@@ -99,19 +99,19 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
     }
 
     async function loadSessions(directory: string) {
+      const [store, setStore] = child(directory)
       globalSDK.client.session.list({ directory }).then((x) => {
         const fourHoursAgo = Date.now() - 4 * 60 * 60 * 1000
         const nonArchived = (x.data ?? [])
           .slice()
           .filter((s) => !s.time.archived)
           .sort((a, b) => a.id.localeCompare(b.id))
-        // Include at least 5 sessions, plus any updated in the last hour
+        // Include sessions up to the limit, plus any updated in the last hour
         const sessions = nonArchived.filter((s, i) => {
-          if (i < 5) return true
+          if (i < store.limit) return true
           const updated = new Date(s.time.updated).getTime()
           return updated > fourHoursAgo
         })
-        const [, setStore] = child(directory)
         setStore("session", sessions)
       })
     }

packages/desktop/src/pages/layout.tsx

@@ -497,7 +497,7 @@ export default function Layout(props: ParentProps) {
     const sortable = createSortable(props.project.worktree)
     const slug = createMemo(() => base64Encode(props.project.worktree))
     const name = createMemo(() => getFilename(props.project.worktree))
-    const [store] = globalSync.child(props.project.worktree)
+    const [store, setProjectStore] = globalSync.child(props.project.worktree)
     const sessions = createMemo(() => store.session ?? [])
     const rootSessions = createMemo(() => sessions().filter((s) => !s.parentID))
     const childSessionsByParent = createMemo(() => {
@@ -511,6 +511,11 @@ export default function Layout(props: ParentProps) {
       }
       return map
     })
+    const hasMoreSessions = createMemo(() => store.session.length >= store.limit)
+    const loadMoreSessions = async () => {
+      setProjectStore("limit", (limit) => limit + 10)
+      await globalSync.project.loadSessions(props.project.worktree)
+    }
     const [expanded, setExpanded] = createSignal(true)
     return (
       // @ts-ignore
@@ -583,6 +588,19 @@ export default function Layout(props: ParentProps) {
                       </div>
                     </div>
                   </Show>
+                  <Show when={hasMoreSessions()}>
+                    <div class="relative w-full pl-4 pr-2 py-1">
+                      <Button
+                        variant="ghost"
+                        class="w-full text-12-regular text-text-muted"
+                        size="small"
+                        icon="plus-small"
+                        onClick={loadMoreSessions}
+                      >
+                        Load more
+                      </Button>
+                    </div>
+                  </Show>
                 </nav>
               </Collapsible.Content>
             </Collapsible>