tweak: only show dropdown for 3+ items (#4345)

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

@@ -60,13 +60,19 @@ 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>
+              <box
+                flexDirection="row"
+                gap={1}
+                onMouseDown={() => Object.keys(sync.data.mcp).length > 2 && setMcpExpanded(!mcpExpanded())}
+              >
+                <Show when={Object.keys(sync.data.mcp).length > 2}>
+                  <text fg={theme.text}>{mcpExpanded() ? "▼" : "▶"}</text>
+                </Show>
                 <text fg={theme.text}>
                   <b>MCP</b>
                 </text>
               </box>
-              <Show when={mcpExpanded()}>
+              <Show when={Object.keys(sync.data.mcp).length <= 2 || mcpExpanded()}>
                 <For each={Object.entries(sync.data.mcp)}>
                   {([key, item]) => (
                     <box flexDirection="row" gap={1}>
@@ -100,13 +106,19 @@ export function Sidebar(props: { sessionID: string }) {
           </Show>
           <Show when={sync.data.lsp.length > 0}>
             <box>
-              <box flexDirection="row" gap={1} onMouseDown={() => setLspExpanded(!lspExpanded())}>
-                <text fg={theme.text}>{lspExpanded() ? "▼" : "▶"}</text>
+              <box
+                flexDirection="row"
+                gap={1}
+                onMouseDown={() => sync.data.lsp.length > 2 && setLspExpanded(!lspExpanded())}
+              >
+                <Show when={sync.data.lsp.length > 2}>
+                  <text fg={theme.text}>{lspExpanded() ? "▼" : "▶"}</text>
+                </Show>
                 <text fg={theme.text}>
                   <b>LSP</b>
                 </text>
               </box>
-              <Show when={lspExpanded()}>
+              <Show when={sync.data.lsp.length <= 2 || lspExpanded()}>
                 <For each={sync.data.lsp}>
                   {(item) => (
                     <box flexDirection="row" gap={1}>
@@ -132,13 +144,19 @@ export function Sidebar(props: { sessionID: string }) {
           </Show>
           <Show when={todo().length > 0}>
             <box>
-              <box flexDirection="row" gap={1} onMouseDown={() => setTodoExpanded(!todoExpanded())}>
-                <text fg={theme.text}>{todoExpanded() ? "▼" : "▶"}</text>
+              <box
+                flexDirection="row"
+                gap={1}
+                onMouseDown={() => todo().length > 2 && setTodoExpanded(!todoExpanded())}
+              >
+                <Show when={todo().length > 2}>
+                  <text fg={theme.text}>{todoExpanded() ? "▼" : "▶"}</text>
+                </Show>
                 <text fg={theme.text}>
                   <b>Todo</b>
                 </text>
               </box>
-              <Show when={todoExpanded()}>
+              <Show when={todo().length <= 2 || todoExpanded()}>
                 <For each={todo()}>
                   {(todo) => (
                     <text style={{ fg: todo.status === "in_progress" ? theme.success : theme.textMuted }}>
@@ -151,13 +169,19 @@ export function Sidebar(props: { sessionID: string }) {
           </Show>
           <Show when={diff().length > 0}>
             <box>
-              <box flexDirection="row" gap={1} onMouseDown={() => setDiffExpanded(!diffExpanded())}>
-                <text fg={theme.text}>{diffExpanded() ? "▼" : "▶"}</text>
+              <box
+                flexDirection="row"
+                gap={1}
+                onMouseDown={() => diff().length > 2 && setDiffExpanded(!diffExpanded())}
+              >
+                <Show when={diff().length > 2}>
+                  <text fg={theme.text}>{diffExpanded() ? "▼" : "▶"}</text>
+                </Show>
                 <text fg={theme.text}>
                   <b>Modified Files</b>
                 </text>
               </box>
-              <Show when={diffExpanded()}>
+              <Show when={diff().length <= 2 || diffExpanded()}>
                 <For each={diff() || []}>
                   {(item) => {
                     const file = createMemo(() => {