feat(desktop): add toggleable preset bar below tab strip

apps/desktop/src/lib/trpc/routers/settings/index.ts

@@ -14,6 +14,7 @@ import {
 	DEFAULT_AUTO_APPLY_DEFAULT_PRESET,
 	DEFAULT_CONFIRM_ON_QUIT,
 	DEFAULT_FILE_OPEN_MODE,
+	DEFAULT_SHOW_PRESETS_BAR,
 	DEFAULT_TERMINAL_LINK_BEHAVIOR,
 } from "shared/constants";
 import { DEFAULT_RINGTONE_ID, RINGTONES } from "shared/ringtones";
@@ -397,6 +398,26 @@ export const createSettingsRouter = () => {
 				return { success: true };
 			}),
 
+		getShowPresetsBar: publicProcedure.query(() => {
+			const row = getSettings();
+			return row.showPresetsBar ?? DEFAULT_SHOW_PRESETS_BAR;
+		}),
+
+		setShowPresetsBar: publicProcedure
+			.input(z.object({ enabled: z.boolean() }))
+			.mutation(({ input }) => {
+				localDb
+					.insert(settings)
+					.values({ id: 1, showPresetsBar: input.enabled })
+					.onConflictDoUpdate({
+						target: settings.id,
+						set: { showPresetsBar: input.enabled },
+					})
+					.run();
+
+				return { success: true };
+			}),
+
 		getTerminalLinkBehavior: publicProcedure.query(() => {
 			const row = getSettings();
 			return row.terminalLinkBehavior ?? DEFAULT_TERMINAL_LINK_BEHAVIOR;

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupStrip.tsx

@@ -2,6 +2,7 @@ import { FEATURE_FLAGS } from "@superset/shared/constants";
 import { Button } from "@superset/ui/button";
 import {
 	DropdownMenu,
+	DropdownMenuCheckboxItem,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
@@ -24,6 +25,7 @@ import {
 	useIsDarkTheme,
 } from "renderer/assets/app-icons/preset-icons";
 import { HotkeyTooltipContent } from "renderer/components/HotkeyTooltipContent";
+import { electronTrpc } from "renderer/lib/electron-trpc";
 import { usePresets } from "renderer/react-query/presets";
 import { useTabsStore } from "renderer/stores/tabs/store";
 import { useTabsWithPresets } from "renderer/stores/tabs/useTabsWithPresets";
@@ -55,6 +57,27 @@ export function GroupStrip() {
 	const hasAiChat = useFeatureFlagEnabled(FEATURE_FLAGS.AI_CHAT);
 	const { presets } = usePresets();
 	const isDark = useIsDarkTheme();
+	const utils = electronTrpc.useUtils();
+	const { data: showPresetsBar } =
+		electronTrpc.settings.getShowPresetsBar.useQuery();
+	const setShowPresetsBar = electronTrpc.settings.setShowPresetsBar.useMutation(
+		{
+			onMutate: async ({ enabled }) => {
+				await utils.settings.getShowPresetsBar.cancel();
+				const previous = utils.settings.getShowPresetsBar.getData();
+				utils.settings.getShowPresetsBar.setData(undefined, enabled);
+				return { previous };
+			},
+			onError: (_err, _vars, context) => {
+				if (context?.previous !== undefined) {
+					utils.settings.getShowPresetsBar.setData(undefined, context.previous);
+				}
+			},
+			onSettled: () => {
+				utils.settings.getShowPresetsBar.invalidate();
+			},
+		},
+	);
 	const navigate = useNavigate();
 	const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -270,6 +293,17 @@ export function GroupStrip() {
 								<DropdownMenuSeparator />
 							</>
 						)}
+						{presets.length > 0 && (
+							<DropdownMenuCheckboxItem
+								checked={showPresetsBar ?? false}
+								onCheckedChange={(checked) =>
+									setShowPresetsBar.mutate({ enabled: checked })
+								}
+								onSelect={(e) => e.preventDefault()}
+							>
+								Show Preset Bar
+							</DropdownMenuCheckboxItem>
+						)}
 						<DropdownMenuItem
 							onClick={handleOpenPresetsSettings}
 							className="gap-2"

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/components/PresetsBar/PresetsBar.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@superset/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
+import { useParams } from "@tanstack/react-router";
+import { HiMiniCommandLine } from "react-icons/hi2";
+import {
+	getPresetIcon,
+	useIsDarkTheme,
+} from "renderer/assets/app-icons/preset-icons";
+import { usePresets } from "renderer/react-query/presets";
+import { useTabsWithPresets } from "renderer/stores/tabs/useTabsWithPresets";
+
+export function PresetsBar() {
+	const { workspaceId } = useParams({ strict: false });
+	const { presets } = usePresets();
+	const isDark = useIsDarkTheme();
+	const { openPreset } = useTabsWithPresets();
+
+	if (presets.length === 0) return null;
+
+	return (
+		<div
+			className="flex items-center h-8 border-b border-border bg-background px-2 gap-0.5 overflow-x-auto shrink-0"
+			style={{ scrollbarWidth: "none" }}
+		>
+			{presets.map((preset) => {
+				const icon = getPresetIcon(preset.name, isDark);
+				return (
+					<Tooltip key={preset.id}>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="sm"
+								className="h-6 px-2 gap-1.5 text-xs shrink-0"
+								onClick={() => {
+									if (workspaceId) {
+										openPreset(workspaceId, preset);
+									}
+								}}
+							>
+								{icon ? (
+									<img src={icon} alt="" className="size-3.5 object-contain" />
+								) : (
+									<HiMiniCommandLine className="size-3.5" />
+								)}
+								<span className="truncate max-w-[120px]">
+									{preset.name || "default"}
+								</span>
+							</Button>
+						</TooltipTrigger>
+						{preset.description && (
+							<TooltipContent side="bottom" sideOffset={4}>
+								{preset.description}
+							</TooltipContent>
+						)}
+					</Tooltip>
+				);
+			})}
+		</div>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/components/PresetsBar/index.ts

@@ -0,0 +1 @@
+export { PresetsBar } from "./PresetsBar";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/index.tsx

@@ -1,11 +1,15 @@
+import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useSidebarStore } from "renderer/stores/sidebar-state";
 import { SidebarControl } from "../../SidebarControl";
 import { ContentHeader } from "./ContentHeader";
+import { PresetsBar } from "./components/PresetsBar";
 import { TabsContent } from "./TabsContent";
 import { GroupStrip } from "./TabsContent/GroupStrip";
 
 export function ContentView() {
 	const isSidebarOpen = useSidebarStore((s) => s.isSidebarOpen);
+	const { data: showPresetsBar } =
+		electronTrpc.settings.getShowPresetsBar.useQuery();
 
 	return (
 		<div className="h-full flex flex-col overflow-hidden">
@@ -14,6 +18,7 @@ export function ContentView() {
 			>
 				<GroupStrip />
 			</ContentHeader>
+			{showPresetsBar && <PresetsBar />}
 			<TabsContent />
 		</div>
 	);

apps/desktop/src/shared/constants.ts

@@ -40,6 +40,7 @@ export const DEFAULT_CONFIRM_ON_QUIT = true;
 export const DEFAULT_TERMINAL_LINK_BEHAVIOR = "external-editor" as const;
 export const DEFAULT_FILE_OPEN_MODE = "split-pane" as const;
 export const DEFAULT_AUTO_APPLY_DEFAULT_PRESET = true;
+export const DEFAULT_SHOW_PRESETS_BAR = false;
 export const DEFAULT_TELEMETRY_ENABLED = true;
 
 // External links (documentation, help resources, etc.)

packages/local-db/drizzle/0023_add_show_presets_bar_setting.sql

@@ -0,0 +1 @@
+ALTER TABLE `settings` ADD `show_presets_bar` integer;