From ae9cce4de3951f535dbb07b6aa89a352075dfba9 Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Tue, 25 Aug 2026 02:15:09 +0800
Subject: [PATCH] feat: compact snippet list option (#1339)

A "Show Commands" toggle in the snippets settings menu hides the command
text under each snippet name, for people who dock the panel on the
narrow right rail and only need the names. Local preference, on by
default.
---
 src/ui/locales/en.json              |  2 ++
 src/ui/sidebar/SnippetsPanel.tsx    | 34 ++++++++++++++++++++++++++---
 src/ui/sidebar/UserProfilePanel.tsx |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/ui/locales/en.json b/src/ui/locales/en.json
index 3f729f75..64d3017c 100644
--- a/src/ui/locales/en.json
+++ b/src/ui/locales/en.json
@@ -4286,6 +4286,8 @@
         "expandAppRailOnHoverDesc": "Allow the left sidebar app rail to expand when the pointer moves over it",
         "settingsNavigation": "Navigation",
         "navigationTabsDesc": "Choose which tabs appear in the app rail",
+        "showSnippetCommands": "Show Commands",
+        "showSnippetCommandsDesc": "Show each snippet's command under its name. Turn off for a compact list.",
         "foldersCollapsed": "Folders Collapsed",
         "foldersCollapsedDesc": "Collapse folders by default",
         "confirmExecution": "Confirm Execution",
diff --git a/src/ui/sidebar/SnippetsPanel.tsx b/src/ui/sidebar/SnippetsPanel.tsx
index 50bc8ebd..f2c7ff62 100644
--- a/src/ui/sidebar/SnippetsPanel.tsx
+++ b/src/ui/sidebar/SnippetsPanel.tsx
@@ -862,6 +862,7 @@ function ShareSnippetDialog({
 
 function SnippetCard({
   snippet,
+  showCommands,
   selectedTabIds,
   terminalTabs,
   activeTabId,
@@ -879,6 +880,7 @@ function SnippetCard({
   t,
 }: {
   snippet: Snippet;
+  showCommands: boolean;
   selectedTabIds: Set<string>;
   terminalTabs: Tab[];
   activeTabId: string;
@@ -966,9 +968,11 @@ function SnippetCard({
             />
           )}
         </div>
-        <span className="text-xs text-muted-foreground font-mono px-1 min-w-0 break-all whitespace-pre-wrap">
-          {snippet.content}
-        </span>
+        {showCommands && (
+          <span className="text-xs text-muted-foreground font-mono px-1 min-w-0 break-all whitespace-pre-wrap">
+            {snippet.content}
+          </span>
+        )}
         {targetHosts.length > 0 && (
           <div className="flex flex-wrap gap-1 px-1">
             {targetHosts.map((host) => (
@@ -1246,6 +1250,7 @@ function ExecutionResultDialog({
 
 function VirtualFolderGroup({
   folderName,
+  showCommands,
   snippets: folderSnippets,
   selectedTabIds,
   terminalTabs,
@@ -1266,6 +1271,7 @@ function VirtualFolderGroup({
   open,
   onToggleOpen,
 }: {
+  showCommands: boolean;
   folderName: string;
   snippets: Snippet[];
   selectedTabIds: Set<string>;
@@ -1312,6 +1318,7 @@ function VirtualFolderGroup({
         >
           {folderSnippets.map((snippet) => (
             <SnippetCard
+              showCommands={showCommands}
               key={snippet.id}
               snippet={snippet}
               selectedTabIds={selectedTabIds}
@@ -1381,6 +1388,10 @@ export function SnippetsPanel({
   const [foldersCollapsedDefault, setFoldersCollapsedDefault] = useState(
     () => localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
   );
+  // Compact list: names only, the command stays in the tooltip/editor.
+  const [showCommands, setShowCommands] = useState(
+    () => localStorage.getItem("snippetShowCommands") !== "false",
+  );
   const [confirmExecution, setConfirmExecution] = useState(
     () => localStorage.getItem("confirmSnippetExecution") === "true",
   );
@@ -1961,6 +1972,20 @@ export function SnippetsPanel({
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="text-xs w-64 p-2">
+                <SettingRow
+                  label={t("newUi.sidebar.userProfile.showSnippetCommands")}
+                  description={t(
+                    "newUi.sidebar.userProfile.showSnippetCommandsDesc",
+                  )}
+                >
+                  <FakeSwitch
+                    checked={showCommands}
+                    onChange={(v) => {
+                      setShowCommands(v);
+                      localStorage.setItem("snippetShowCommands", v.toString());
+                    }}
+                  />
+                </SettingRow>
                 <SettingRow
                   label={t("newUi.sidebar.userProfile.foldersCollapsed")}
                   description={t(
@@ -2154,6 +2179,7 @@ export function SnippetsPanel({
                 >
                   {uncategorizedSnippets.map((snippet) => (
                     <SnippetCard
+                      showCommands={showCommands}
                       key={snippet.id}
                       snippet={snippet}
                       selectedTabIds={selectedTabIds}
@@ -2251,6 +2277,7 @@ export function SnippetsPanel({
                   >
                     {folderSnippets.map((snippet) => (
                       <SnippetCard
+                        showCommands={showCommands}
                         key={snippet.id}
                         snippet={snippet}
                         selectedTabIds={selectedTabIds}
@@ -2291,6 +2318,7 @@ export function SnippetsPanel({
             if (folderSnippets.length === 0) return null;
             return (
               <VirtualFolderGroup
+                showCommands={showCommands}
                 key={`virtual-${folderName}`}
                 folderName={folderName}
                 snippets={folderSnippets}
diff --git a/src/ui/sidebar/UserProfilePanel.tsx b/src/ui/sidebar/UserProfilePanel.tsx
index 5805af30..18560c9e 100644
--- a/src/ui/sidebar/UserProfilePanel.tsx
+++ b/src/ui/sidebar/UserProfilePanel.tsx
@@ -850,6 +850,7 @@ export function UserProfilePanel({
         "pinAppRail",
         "expandAppRailOnHover",
         "defaultSnippetFoldersCollapsed",
+        "snippetShowCommands",
         "confirmSnippetExecution",
         "disableUpdateCheck",
         "confirmTabClose",