feat(sidebar): add expandable sections for sidebar (#4132)

Co-authored-by: GitHub Action <action@github.com>

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -1,5 +1,5 @@
 import { useSync } from "@tui/context/sync"
-import { createMemo, For, Show, Switch, Match } from "solid-js"
+import { createMemo, For, Show, Switch, Match, createSignal } from "solid-js"
 import { useTheme } from "../../context/theme"
 import { Locale } from "@/util/locale"
 import path from "path"
@@ -13,6 +13,11 @@ export function Sidebar(props: { sessionID: string }) {
   const todo = createMemo(() => sync.data.todo[props.sessionID] ?? [])
   const messages = createMemo(() => sync.data.message[props.sessionID] ?? [])
 
+  const [mcpExpanded, setMcpExpanded] = createSignal(true)
+  const [diffExpanded, setDiffExpanded] = createSignal(true)
+  const [todoExpanded, setTodoExpanded] = createSignal(true)
+  const [lspExpanded, setLspExpanded] = createSignal(true)
+
   const cost = createMemo(() => {
     const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
     return new Intl.NumberFormat("en-US", {
@@ -55,9 +60,13 @@ export function Sidebar(props: { sessionID: string }) {
           </box>
           <Show when={Object.keys(sync.data.mcp).length > 0}>
             <box>
+              <box flexDirection="row" gap={1} onMouseDown={() => setMcpExpanded(!mcpExpanded())}>
+                <text fg={theme.text}>{mcpExpanded() ? "▼" : "▶"}</text>
                 <text fg={theme.text}>
                   <b>MCP</b>
                 </text>
+              </box>
+              <Show when={mcpExpanded()}>
                 <For each={Object.entries(sync.data.mcp)}>
                   {([key, item]) => (
                     <box flexDirection="row" gap={1}>
@@ -86,13 +95,18 @@ export function Sidebar(props: { sessionID: string }) {
                     </box>
                   )}
                 </For>
+              </Show>
             </box>
           </Show>
           <Show when={sync.data.lsp.length > 0}>
             <box>
+              <box flexDirection="row" gap={1} onMouseDown={() => setLspExpanded(!lspExpanded())}>
+                <text fg={theme.text}>{lspExpanded() ? "▼" : "▶"}</text>
                 <text fg={theme.text}>
                   <b>LSP</b>
                 </text>
+              </box>
+              <Show when={lspExpanded()}>
                 <For each={sync.data.lsp}>
                   {(item) => (
                     <box flexDirection="row" gap={1}>
@@ -113,13 +127,18 @@ export function Sidebar(props: { sessionID: string }) {
                     </box>
                   )}
                 </For>
+              </Show>
             </box>
           </Show>
           <Show when={todo().length > 0}>
             <box>
+              <box flexDirection="row" gap={1} onMouseDown={() => setTodoExpanded(!todoExpanded())}>
+                <text fg={theme.text}>{todoExpanded() ? "▼" : "▶"}</text>
                 <text fg={theme.text}>
                   <b>Todo</b>
                 </text>
+              </box>
+              <Show when={todoExpanded()}>
                 <For each={todo()}>
                   {(todo) => (
                     <text style={{ fg: todo.status === "in_progress" ? theme.success : theme.textMuted }}>
@@ -127,13 +146,18 @@ export function Sidebar(props: { sessionID: string }) {
                     </text>
                   )}
                 </For>
+              </Show>
             </box>
           </Show>
           <Show when={diff().length > 0}>
             <box>
+              <box flexDirection="row" gap={1} onMouseDown={() => setDiffExpanded(!diffExpanded())}>
+                <text fg={theme.text}>{diffExpanded() ? "▼" : "▶"}</text>
                 <text fg={theme.text}>
                   <b>Modified Files</b>
                 </text>
+              </box>
+              <Show when={diffExpanded()}>
                 <For each={diff() || []}>
                   {(item) => {
                     const file = createMemo(() => {
@@ -159,6 +183,7 @@ export function Sidebar(props: { sessionID: string }) {
                     )
                   }}
                 </For>
+              </Show>
             </box>
           </Show>
         </box>