mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-08-29 18:31:33 +00:00
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.
This commit is contained in:
@@ -4286,6 +4286,8 @@
|
|||||||
"expandAppRailOnHoverDesc": "Allow the left sidebar app rail to expand when the pointer moves over it",
|
"expandAppRailOnHoverDesc": "Allow the left sidebar app rail to expand when the pointer moves over it",
|
||||||
"settingsNavigation": "Navigation",
|
"settingsNavigation": "Navigation",
|
||||||
"navigationTabsDesc": "Choose which tabs appear in the app rail",
|
"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",
|
"foldersCollapsed": "Folders Collapsed",
|
||||||
"foldersCollapsedDesc": "Collapse folders by default",
|
"foldersCollapsedDesc": "Collapse folders by default",
|
||||||
"confirmExecution": "Confirm Execution",
|
"confirmExecution": "Confirm Execution",
|
||||||
|
|||||||
@@ -862,6 +862,7 @@ function ShareSnippetDialog({
|
|||||||
|
|
||||||
function SnippetCard({
|
function SnippetCard({
|
||||||
snippet,
|
snippet,
|
||||||
|
showCommands,
|
||||||
selectedTabIds,
|
selectedTabIds,
|
||||||
terminalTabs,
|
terminalTabs,
|
||||||
activeTabId,
|
activeTabId,
|
||||||
@@ -879,6 +880,7 @@ function SnippetCard({
|
|||||||
t,
|
t,
|
||||||
}: {
|
}: {
|
||||||
snippet: Snippet;
|
snippet: Snippet;
|
||||||
|
showCommands: boolean;
|
||||||
selectedTabIds: Set<string>;
|
selectedTabIds: Set<string>;
|
||||||
terminalTabs: Tab[];
|
terminalTabs: Tab[];
|
||||||
activeTabId: string;
|
activeTabId: string;
|
||||||
@@ -966,9 +968,11 @@ function SnippetCard({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{showCommands && (
|
||||||
<span className="text-xs text-muted-foreground font-mono px-1 min-w-0 break-all whitespace-pre-wrap">
|
<span className="text-xs text-muted-foreground font-mono px-1 min-w-0 break-all whitespace-pre-wrap">
|
||||||
{snippet.content}
|
{snippet.content}
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
{targetHosts.length > 0 && (
|
{targetHosts.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-1 px-1">
|
<div className="flex flex-wrap gap-1 px-1">
|
||||||
{targetHosts.map((host) => (
|
{targetHosts.map((host) => (
|
||||||
@@ -1246,6 +1250,7 @@ function ExecutionResultDialog({
|
|||||||
|
|
||||||
function VirtualFolderGroup({
|
function VirtualFolderGroup({
|
||||||
folderName,
|
folderName,
|
||||||
|
showCommands,
|
||||||
snippets: folderSnippets,
|
snippets: folderSnippets,
|
||||||
selectedTabIds,
|
selectedTabIds,
|
||||||
terminalTabs,
|
terminalTabs,
|
||||||
@@ -1266,6 +1271,7 @@ function VirtualFolderGroup({
|
|||||||
open,
|
open,
|
||||||
onToggleOpen,
|
onToggleOpen,
|
||||||
}: {
|
}: {
|
||||||
|
showCommands: boolean;
|
||||||
folderName: string;
|
folderName: string;
|
||||||
snippets: Snippet[];
|
snippets: Snippet[];
|
||||||
selectedTabIds: Set<string>;
|
selectedTabIds: Set<string>;
|
||||||
@@ -1312,6 +1318,7 @@ function VirtualFolderGroup({
|
|||||||
>
|
>
|
||||||
{folderSnippets.map((snippet) => (
|
{folderSnippets.map((snippet) => (
|
||||||
<SnippetCard
|
<SnippetCard
|
||||||
|
showCommands={showCommands}
|
||||||
key={snippet.id}
|
key={snippet.id}
|
||||||
snippet={snippet}
|
snippet={snippet}
|
||||||
selectedTabIds={selectedTabIds}
|
selectedTabIds={selectedTabIds}
|
||||||
@@ -1381,6 +1388,10 @@ export function SnippetsPanel({
|
|||||||
const [foldersCollapsedDefault, setFoldersCollapsedDefault] = useState(
|
const [foldersCollapsedDefault, setFoldersCollapsedDefault] = useState(
|
||||||
() => localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
|
() => 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(
|
const [confirmExecution, setConfirmExecution] = useState(
|
||||||
() => localStorage.getItem("confirmSnippetExecution") === "true",
|
() => localStorage.getItem("confirmSnippetExecution") === "true",
|
||||||
);
|
);
|
||||||
@@ -1961,6 +1972,20 @@ export function SnippetsPanel({
|
|||||||
</button>
|
</button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end" className="text-xs w-64 p-2">
|
<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
|
<SettingRow
|
||||||
label={t("newUi.sidebar.userProfile.foldersCollapsed")}
|
label={t("newUi.sidebar.userProfile.foldersCollapsed")}
|
||||||
description={t(
|
description={t(
|
||||||
@@ -2154,6 +2179,7 @@ export function SnippetsPanel({
|
|||||||
>
|
>
|
||||||
{uncategorizedSnippets.map((snippet) => (
|
{uncategorizedSnippets.map((snippet) => (
|
||||||
<SnippetCard
|
<SnippetCard
|
||||||
|
showCommands={showCommands}
|
||||||
key={snippet.id}
|
key={snippet.id}
|
||||||
snippet={snippet}
|
snippet={snippet}
|
||||||
selectedTabIds={selectedTabIds}
|
selectedTabIds={selectedTabIds}
|
||||||
@@ -2251,6 +2277,7 @@ export function SnippetsPanel({
|
|||||||
>
|
>
|
||||||
{folderSnippets.map((snippet) => (
|
{folderSnippets.map((snippet) => (
|
||||||
<SnippetCard
|
<SnippetCard
|
||||||
|
showCommands={showCommands}
|
||||||
key={snippet.id}
|
key={snippet.id}
|
||||||
snippet={snippet}
|
snippet={snippet}
|
||||||
selectedTabIds={selectedTabIds}
|
selectedTabIds={selectedTabIds}
|
||||||
@@ -2291,6 +2318,7 @@ export function SnippetsPanel({
|
|||||||
if (folderSnippets.length === 0) return null;
|
if (folderSnippets.length === 0) return null;
|
||||||
return (
|
return (
|
||||||
<VirtualFolderGroup
|
<VirtualFolderGroup
|
||||||
|
showCommands={showCommands}
|
||||||
key={`virtual-${folderName}`}
|
key={`virtual-${folderName}`}
|
||||||
folderName={folderName}
|
folderName={folderName}
|
||||||
snippets={folderSnippets}
|
snippets={folderSnippets}
|
||||||
|
|||||||
@@ -850,6 +850,7 @@ export function UserProfilePanel({
|
|||||||
"pinAppRail",
|
"pinAppRail",
|
||||||
"expandAppRailOnHover",
|
"expandAppRailOnHover",
|
||||||
"defaultSnippetFoldersCollapsed",
|
"defaultSnippetFoldersCollapsed",
|
||||||
|
"snippetShowCommands",
|
||||||
"confirmSnippetExecution",
|
"confirmSnippetExecution",
|
||||||
"disableUpdateCheck",
|
"disableUpdateCheck",
|
||||||
"confirmTabClose",
|
"confirmTabClose",
|
||||||
|
|||||||
Reference in New Issue
Block a user