feat(tui): add expandable topic list in sidebar

Author: Tarquinen

tui/data/context.ts

@@ -28,7 +28,6 @@ export const createPlaceholderContextSnapshot = (
         available: false,
         activeBlockCount: 0,
         activeBlocks: [],
-        activeBlockTopicTotal: 0,
     },
     messageStatuses: [],
     allTimeStats: { totalTokensSaved: 0, sessionCount: 0 },
@@ -88,8 +87,6 @@ const loadContextSnapshot = async (
         .map((blockID) => state.prune.messages.blocksById.get(blockID))
         .filter((block): block is NonNullable<typeof block> => !!block && !!block.topic)
         .map((block) => ({ topic: block.topic, summary: cleanBlockSummary(block.summary) }))
-    const blocks = allBlocks.slice(0, 5)
-    const topicTotal = allBlocks.length
 
     const notes: string[] = []
     if (persisted) {
@@ -107,8 +104,7 @@ const loadContextSnapshot = async (
         persisted: {
             available: !!persisted,
             activeBlockCount: state.prune.messages.activeBlockIds.size,
-            activeBlocks: blocks,
-            activeBlockTopicTotal: topicTotal,
+            activeBlocks: allBlocks,
             lastUpdated: persisted?.lastUpdated,
         },
         messageStatuses,

tui/shared/types.ts

@@ -17,7 +17,6 @@ export interface DcpPersistedSummary {
     available: boolean
     activeBlockCount: number
     activeBlocks: DcpActiveBlockInfo[]
-    activeBlockTopicTotal: number
     lastUpdated?: string
 }
 

tui/slots/sidebar-top.tsx

@@ -283,9 +283,13 @@ const SidebarContext = (props: {
         ),
     )
 
-    const blocks = createMemo(() => snapshot().persisted.activeBlocks)
-    const topicTotal = createMemo(() => snapshot().persisted.activeBlockTopicTotal)
-    const topicOverflow = createMemo(() => topicTotal() - blocks().length)
+    const TOPIC_LIMIT = 3
+    const allBlocks = createMemo(() => snapshot().persisted.activeBlocks)
+    const [topicsExpanded, setTopicsExpanded] = createSignal(false)
+    const blocks = createMemo(() =>
+        topicsExpanded() ? allBlocks() : allBlocks().slice(0, TOPIC_LIMIT),
+    )
+    const topicOverflow = createMemo(() => allBlocks().length - TOPIC_LIMIT)
 
     const navigateToSummary = (block: DcpActiveBlockInfo) => {
         props.api.route.navigate(props.names.routes.summary, {
@@ -419,12 +423,20 @@ const SidebarContext = (props: {
                             <box flexDirection="row" width="100%" height={1}>
                                 <box flexGrow={1} flexShrink={1} height={1}>
                                     <text {...DIM_TEXT} fg={props.palette.muted}>
-                                        ... {topicOverflow()} more topics
+                                        {topicsExpanded()
+                                            ? `showing all ${allBlocks().length} topics`
+                                            : `... ${topicOverflow()} more topics`}
                                     </text>
                                 </box>
                                 <box flexShrink={0} height={1} paddingLeft={1}>
-                                    <box backgroundColor={props.palette.base} height={1}>
-                                        <text fg={props.palette.accent}> ▼ </text>
+                                    <box
+                                        backgroundColor={props.palette.base}
+                                        height={1}
+                                        onMouseUp={() => setTopicsExpanded(!topicsExpanded())}
+                                    >
+                                        <text fg={props.palette.accent}>
+                                            {topicsExpanded() ? " ▲ " : " ▼ "}
+                                        </text>
                                     </box>
                                 </box>
                             </box>