Align Windows UI with macOS preview 0.3

windows/tauri/src/features/layout/components/main-layout.tsx

@@ -30,6 +30,7 @@ import {
   MainSidebar,
   SidebarActivityRail,
 } from "./sidebar/main-sidebar";
+import { PluginActivityRail } from "./plugin-activity-rail";
 import { WelcomeScreen } from "./welcome-screen";
 
 const CommandPalette = lazy(() => import("@/features/command-palette/components/command-palette"));
@@ -75,19 +76,14 @@ export function MainLayout() {
   usePaneKeyboard();
 
   const isSidebarVisible = useUIState((state) => state.isSidebarVisible);
-  const activityRailExpanded = useSettingsStore((state) => state.settings.activityRailExpanded);
-  const activityRailWidth = useSettingsStore((state) => state.settings.activityRailWidth);
   const sidebarWidth = useSettingsStore((state) => state.settings.sidebarWidth);
   const showStatusBar = useSettingsStore((state) => state.settings.showStatusBar);
   const isDatabaseConnectionVisible = useUIState((state) => state.isDatabaseConnectionVisible);
   const setIsDatabaseConnectionVisible = useUIState(
     (state) => state.setIsDatabaseConnectionVisible,
   );
-  const renderedActivityRailWidth = activityRailExpanded
-    ? activityRailWidth
-    : COLLAPSED_ACTIVITY_RAIL_WIDTH;
   const leftPaneReservedWidth =
-    renderedActivityRailWidth + (isSidebarVisible ? sidebarWidth : 0);
+    COLLAPSED_ACTIVITY_RAIL_WIDTH + (isSidebarVisible ? sidebarWidth : 0);
   const vimRelativeLineNumbers = useSettingsStore((state) => state.settings.vimRelativeLineNumbers);
   const relativeLineNumbers = useVimStore.use.relativeLineNumbers();
   const { setRelativeLineNumbers } = useVimStore.use.actions();
@@ -271,7 +267,7 @@ export function MainLayout() {
               className="flex flex-1 flex-row overflow-hidden pr-(--lithe-workbench-gap)"
               style={{ minHeight: 0 }}
             >
-              <SidebarActivityRail expanded={activityRailExpanded} />
+              <SidebarActivityRail expanded={false} />
               <ResizablePane
                 position="left"
                 widthKey="sidebarWidth"
@@ -298,6 +294,7 @@ export function MainLayout() {
                 )}
               </div>
 
+              <PluginActivityRail />
             </div>
 
             {terminalWidthMode === "full" && deferredSurfacesReady && (

windows/tauri/src/features/layout/components/plugin-activity-rail.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { PuzzlePieceIcon } from "@/ui/icons";
+import Tooltip from "@/ui/tooltip";
+
+export function PluginActivityRail() {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <aside
+      aria-label="Plugins"
+      className="flex w-9.5 shrink-0 flex-col items-center bg-surface pt-1"
+    >
+      <Tooltip content="Plugins" side="left">
+        <button
+          type="button"
+          className={`flex size-7.5 items-center justify-center rounded-sm text-subtle-foreground transition-colors hover:bg-accent hover:text-foreground ${
+            selected ? "bg-selected text-foreground" : ""
+          }`}
+          onClick={() => setSelected((value) => !value)}
+          aria-pressed={selected}
+          aria-label="Plugins"
+        >
+          <PuzzlePieceIcon className="size-4.5" />
+        </button>
+      </Tooltip>
+    </aside>
+  );
+}

windows/tauri/src/features/layout/components/sidebar/main-sidebar.tsx

@@ -35,8 +35,7 @@ import {
   useWorkspaceTabsStore,
   type ProjectTab,
 } from "@/features/window/stores/workspace-tabs.store";
-import { SidebarListItem, SidebarPanel } from "@/ui/sidebar";
-import Tooltip from "@/ui/tooltip";
+import { SidebarPanel } from "@/ui/sidebar";
 import { cn } from "@/utils/cn";
 import {
   ContextMenu,
@@ -77,7 +76,7 @@ interface SidebarActivityRailProps {
   expanded?: boolean;
 }
 
-export const COLLAPSED_ACTIVITY_RAIL_WIDTH = 40;
+export const COLLAPSED_ACTIVITY_RAIL_WIDTH = 38;
 const DEFAULT_ACTIVITY_RAIL_WIDTH = 160;
 const MIN_ACTIVITY_RAIL_WIDTH = 140;
 const MAX_ACTIVITY_RAIL_WIDTH = 320;
@@ -197,10 +196,7 @@ export const SidebarActivityRail = memo(({ expanded = false }: SidebarActivityRa
         icon: <GearIcon />,
       },
     ],
-    [
-      coreFeatures.git,
-      coreFeatures.search,
-    ],
+    [coreFeatures.git, coreFeatures.search],
   );
 
   const setActivityRailItemVisible = useCallback(
@@ -761,53 +757,49 @@ export const SidebarActivityRail = memo(({ expanded = false }: SidebarActivityRa
   );
 });
 
-export const MainSidebar = memo(
-  ({ activeView, isGitActive }: MainSidebarProps) => {
-    const uiGitViewActive = useUIState((state) => state.isGitViewActive);
-    const uiActiveSidebarView = useUIState((state) => state.activeSidebarView);
-    const isGitViewActive = isGitActive ?? uiGitViewActive;
-    const activeSidebarView = activeView ?? uiActiveSidebarView;
-
-    const handleFileSelect = useFileSystemStore.use.handleFileSelect?.();
-    const rootFolderPath = useFileSystemStore.use.rootFolderPath?.();
-
-    const coreFeatures = useSettingsStore((state) => state.settings.coreFeatures);
-    const activePaneId: SidebarView = isGitViewActive
-      ? "git"
-      : activeSidebarView;
-    const allPaneEntries: SidebarPaneEntry[] = [
-      ...(coreFeatures.git
-        ? [
-            {
-              id: "git" as const,
-              content: (
-                <GitView
-                  repoPath={rootFolderPath}
-                  onFileSelect={handleFileSelect}
-                  isActive={isGitViewActive}
-                />
-              ),
-            },
-          ]
-        : []),
-      {
-        id: "files",
-        content: <FileExplorerPane />,
-      },
-    ];
-    const paneEntries = allPaneEntries;
-    const activePane = (() => {
-      const requestedIndex = paneEntries.findIndex((pane) => pane.id === activePaneId);
-      if (requestedIndex >= 0) return paneEntries[requestedIndex];
-
-      return paneEntries[0] ?? null;
-    })();
-    return (
-      <div className="flex h-full min-h-0" data-external-file-drop-scope="sidebar">
-        <SidebarPanel className={cn("min-w-0 flex-1 overflow-hidden bg-transparent")}>
-          <div className="h-full min-h-0 overflow-hidden">{activePane?.content ?? null}</div>
-        </SidebarPanel>
-      </div>
-    );
-  },
-);
+export const MainSidebar = memo(({ activeView, isGitActive }: MainSidebarProps) => {
+  const uiGitViewActive = useUIState((state) => state.isGitViewActive);
+  const uiActiveSidebarView = useUIState((state) => state.activeSidebarView);
+  const isGitViewActive = isGitActive ?? uiGitViewActive;
+  const activeSidebarView = activeView ?? uiActiveSidebarView;
+
+  const handleFileSelect = useFileSystemStore.use.handleFileSelect?.();
+  const rootFolderPath = useFileSystemStore.use.rootFolderPath?.();
+
+  const coreFeatures = useSettingsStore((state) => state.settings.coreFeatures);
+  const activePaneId: SidebarView = isGitViewActive ? "git" : activeSidebarView;
+  const allPaneEntries: SidebarPaneEntry[] = [
+    ...(coreFeatures.git
+      ? [
+          {
+            id: "git" as const,
+            content: (
+              <GitView
+                repoPath={rootFolderPath}
+                onFileSelect={handleFileSelect}
+                isActive={isGitViewActive}
+              />
+            ),
+          },
+        ]
+      : []),
+    {
+      id: "files",
+      content: <FileExplorerPane />,
+    },
+  ];
+  const paneEntries = allPaneEntries;
+  const activePane = (() => {
+    const requestedIndex = paneEntries.findIndex((pane) => pane.id === activePaneId);
+    if (requestedIndex >= 0) return paneEntries[requestedIndex];
+
+    return paneEntries[0] ?? null;
+  })();
+  return (
+    <div className="flex h-full min-h-0" data-external-file-drop-scope="sidebar">
+      <SidebarPanel className={cn("min-w-0 flex-1 overflow-hidden bg-transparent")}>
+        <div className="h-full min-h-0 overflow-hidden">{activePane?.content ?? null}</div>
+      </SidebarPanel>
+    </div>
+  );
+});