From e1bd7a756d724a89bea7a0f5b6db28bfaf4286eb Mon Sep 17 00:00:00 2001 From: Kiet Ho Date: Sun, 1 Feb 2026 09:23:59 -0800 Subject: [PATCH 01/11] feat(desktop): add right sidebar tabs for Changes and Files views Add tab switcher at the top of the right sidebar to switch between Changes and Files views. The Files view is currently a placeholder. --- .../WorkspaceView/Sidebar/index.tsx | 72 ++++++++++++++++++- .../src/renderer/stores/sidebar-state.ts | 12 ++++ 2 files changed, 81 insertions(+), 3 deletions(-) diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx index d024bbcffbc..d50a8f6ad94 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx @@ -1,12 +1,57 @@ +import { Button } from "@superset/ui/button"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip"; import { useParams } from "@tanstack/react-router"; import { useCallback } from "react"; +import { LuFile, LuGitCompareArrows } from "react-icons/lu"; import { electronTrpc } from "renderer/lib/electron-trpc"; -import { SidebarMode, useSidebarStore } from "renderer/stores/sidebar-state"; +import { + RightSidebarTab, + SidebarMode, + useSidebarStore, +} from "renderer/stores/sidebar-state"; import { useTabsStore } from "renderer/stores/tabs/store"; import type { ChangeCategory, ChangedFile } from "shared/changes-types"; import { useScrollContext } from "../ChangesContent"; import { ChangesView } from "./ChangesView"; +function TabButton({ + isActive, + onClick, + children, + tooltip, +}: { + isActive: boolean; + onClick: () => void; + children: React.ReactNode; + tooltip: string; +}) { + return ( + + + + + + {tooltip} + + + ); +} + +function FilesView() { + return ( +
+ Files view coming soon +
+ ); +} + export function Sidebar() { const { workspaceId } = useParams({ strict: false }); const { data: workspace } = electronTrpc.workspaces.get.useQuery( @@ -14,7 +59,8 @@ export function Sidebar() { { enabled: !!workspaceId }, ); const worktreePath = workspace?.worktreePath; - const { currentMode } = useSidebarStore(); + const { currentMode, rightSidebarTab, setRightSidebarTab } = + useSidebarStore(); const isExpanded = currentMode === SidebarMode.Changes; const addFileViewerPane = useTabsStore((s) => s.addFileViewerPane); @@ -74,7 +120,27 @@ export function Sidebar() { return ( ); } diff --git a/apps/desktop/src/renderer/stores/sidebar-state.ts b/apps/desktop/src/renderer/stores/sidebar-state.ts index ea9c43f76c2..b198741e3aa 100644 --- a/apps/desktop/src/renderer/stores/sidebar-state.ts +++ b/apps/desktop/src/renderer/stores/sidebar-state.ts @@ -6,6 +6,11 @@ export enum SidebarMode { Changes = "changes", } +export enum RightSidebarTab { + Changes = "changes", + Files = "files", +} + const DEFAULT_SIDEBAR_WIDTH = 250; export const MIN_SIDEBAR_WIDTH = 200; export const MAX_SIDEBAR_WIDTH = 500; @@ -17,11 +22,13 @@ interface SidebarState { currentMode: SidebarMode; lastMode: SidebarMode; isResizing: boolean; + rightSidebarTab: RightSidebarTab; toggleSidebar: () => void; setSidebarOpen: (open: boolean) => void; setSidebarWidth: (width: number) => void; setMode: (mode: SidebarMode) => void; setIsResizing: (isResizing: boolean) => void; + setRightSidebarTab: (tab: RightSidebarTab) => void; } export const useSidebarStore = create()( @@ -34,6 +41,7 @@ export const useSidebarStore = create()( currentMode: SidebarMode.Tabs, lastMode: SidebarMode.Tabs, isResizing: false, + rightSidebarTab: RightSidebarTab.Changes, toggleSidebar: () => { const { isSidebarOpen, lastOpenSidebarWidth, currentMode, lastMode } = @@ -102,6 +110,10 @@ export const useSidebarStore = create()( setIsResizing: (isResizing) => { set({ isResizing }); }, + + setRightSidebarTab: (tab) => { + set({ rightSidebarTab: tab }); + }, }), { name: "sidebar-store", From 98a9a08989be254783eefa1130e0228e98d13ef7 Mon Sep 17 00:00:00 2001 From: Kiet Ho Date: Sun, 1 Feb 2026 09:26:25 -0800 Subject: [PATCH 02/11] feat(desktop): add text labels to right sidebar tab buttons --- .../WorkspaceView/Sidebar/index.tsx | 49 ++++++++----------- 1 file changed, 20 insertions(+), 29 deletions(-) diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx index d50a8f6ad94..29242b79ae3 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx @@ -1,5 +1,4 @@ import { Button } from "@superset/ui/button"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip"; import { useParams } from "@tanstack/react-router"; import { useCallback } from "react"; import { LuFile, LuGitCompareArrows } from "react-icons/lu"; @@ -17,30 +16,24 @@ import { ChangesView } from "./ChangesView"; function TabButton({ isActive, onClick, - children, - tooltip, + icon, + label, }: { isActive: boolean; onClick: () => void; - children: React.ReactNode; - tooltip: string; + icon: React.ReactNode; + label: string; }) { return ( - - - - - - {tooltip} - - + ); } @@ -120,21 +113,19 @@ export function Sidebar() { return (