Move project switcher into activity rail

Add the project switcher as the first activity rail item and remove the title-bar project switcher path.

Drop the obsolete title-bar project mode setting and make rail expansion snap instead of animating layout width.

Author: mehmetozguldev

src/features/file-system/stores/file-system.store.ts

@@ -555,11 +555,7 @@ export const useFileSystemStore = createSelectors(
         const hasOpenWorkspace =
           !!get().rootFolderPath || useWorkspaceTabsStore.getState().projectTabs.length > 0;
 
-        if (
-          settings.openFoldersInNewWindow &&
-          settings.titleBarProjectMode === "window" &&
-          hasOpenWorkspace
-        ) {
+        if (settings.openFoldersInNewWindow && hasOpenWorkspace) {
           await createAppWindow({
             path: selected,
             isDirectory: true,

src/features/file-system/stores/recent-folders.store.ts

@@ -94,11 +94,7 @@ export const useRecentFoldersStore = create<RecentFoldersState & RecentFoldersAc
               return;
             }
 
-            if (
-              settings.openFoldersInNewWindow &&
-              settings.titleBarProjectMode === "window" &&
-              hasOpenWorkspace
-            ) {
+            if (settings.openFoldersInNewWindow && hasOpenWorkspace) {
               await createAppWindow({
                 path: folderPath,
                 isDirectory: true,

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

@@ -1,3 +1,9 @@
+import { convertFileSrc } from "@tauri-apps/api/core";
+import {
+  FolderIcon as Folder,
+  HardDrivesIcon as HardDrives,
+  PlusIcon as Plus,
+} from "@phosphor-icons/react";
 import { memo, type ReactNode } from "react";
 import { CollaborationSidebarView } from "@/features/collaboration/components/collaboration-sidebar";
 import { DockerSidebar } from "@/features/docker/components/docker-sidebar";
@@ -12,9 +18,11 @@ import { OutlineSidebar } from "@/features/outline/components/outline-sidebar";
 import { useSettingsStore } from "@/features/settings/stores/settings.store";
 import { useBufferStore } from "@/features/editor/stores/buffer.store";
 import { useUIState } from "@/features/window/stores/ui-state.store";
+import { useWorkspaceTabsStore } from "@/features/window/stores/workspace-tabs.store";
 import { useAuthStore } from "@/features/window/stores/auth.store";
 import { useExtensionViews } from "@/extensions/ui/hooks/use-extension-views";
 import { ExtensionErrorBoundary } from "@/extensions/ui/components/extension-error-boundary";
+import { Button } from "@/ui/button";
 import { SidebarPanel } from "@/ui/sidebar";
 import { cn } from "@/utils/cn";
 
@@ -34,6 +42,58 @@ interface SidebarActivityRailProps {
   expanded?: boolean;
 }
 
+const getProjectNameFromPath = (path?: string) => {
+  if (!path) return "Open Project";
+  const parts = path.split(/[\\/]/).filter(Boolean);
+  return parts[parts.length - 1] || path;
+};
+
+const isRemoteProjectPath = (path?: string) => path?.startsWith("remote://") === true;
+
+function SidebarProjectSwitcher({ expanded }: { expanded: boolean }) {
+  const rootFolderPath = useFileSystemStore((state) => state.rootFolderPath);
+  const projectTabs = useWorkspaceTabsStore.use.projectTabs();
+  const setIsProjectPickerVisible = useUIState((state) => state.setIsProjectPickerVisible);
+  const activeProject = projectTabs.find((tab) => tab.isActive);
+  const projectName = activeProject?.name || getProjectNameFromPath(rootFolderPath);
+  const projectPath = activeProject?.path || rootFolderPath;
+  const customIcon = activeProject?.customIcon;
+  const isRemote = isRemoteProjectPath(projectPath);
+
+  const icon = customIcon ? (
+    <img
+      src={convertFileSrc(customIcon)}
+      alt=""
+      className="size-4 shrink-0 rounded-[var(--app-radius-control-sm)] object-contain"
+    />
+  ) : isRemote ? (
+    <HardDrives className="size-4" weight="duotone" />
+  ) : projectPath ? (
+    <Folder className="size-4" weight="duotone" />
+  ) : (
+    <Plus className="size-4" weight="duotone" />
+  );
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      tooltip={expanded ? undefined : projectName}
+      tooltipSide="right"
+      onClick={() => setIsProjectPickerVisible(true)}
+      className={cn(
+        expanded
+          ? "h-9 w-full justify-start gap-2 px-2.5"
+          : "min-h-6 min-w-7 rounded-[var(--app-radius-control-sm)] px-0",
+      )}
+      aria-label="Switch project"
+    >
+      {icon}
+      {expanded ? <span className="min-w-0 truncate">{projectName}</span> : null}
+    </Button>
+  );
+}
+
 export const SidebarActivityRail = memo(({ expanded = false }: SidebarActivityRailProps) => {
   const isGitViewActive = useUIState((state) => state.isGitViewActive);
   const isGitHubPRsViewActive = useUIState((state) => state.isGitHubPRsViewActive);
@@ -54,10 +114,12 @@ export const SidebarActivityRail = memo(({ expanded = false }: SidebarActivityRa
   return (
     <div
       className={cn(
-        "athas-sidebar-rail flex shrink-0 items-start pb-1.5 transition-[width] duration-[var(--app-duration-fast)] ease-[var(--app-ease-smooth)]",
+        "athas-sidebar-rail flex shrink-0 flex-col items-start pb-1.5",
         expanded ? "w-40 px-1.5 pt-1" : "w-[3.5rem] px-0.5 pt-1",
       )}
     >
+      <SidebarProjectSwitcher expanded={expanded} />
+      <div className={cn("my-1 h-px shrink-0 bg-border/60", expanded ? "w-full" : "mx-auto w-7")} />
       <SidebarPaneSelector
         activeSidebarView={activeSidebarView}
         isGitViewActive={isGitViewActive}

src/features/settings/components/tabs/appearance-settings.tsx

@@ -33,7 +33,6 @@ export const AppearanceSettings = () => {
       openFoldersInNewWindow: state.settings.openFoldersInNewWindow,
       syncSystemTheme: state.settings.syncSystemTheme,
       theme: state.settings.theme,
-      titleBarProjectMode: state.settings.titleBarProjectMode,
       uiFontFamily: state.settings.uiFontFamily,
       uiFontSize: state.settings.uiFontSize,
       windowTransparency: state.settings.windowTransparency,
@@ -43,11 +42,6 @@ export const AppearanceSettings = () => {
   const registeredThemes = useRegisteredThemes();
   const registeredIconThemes = useRegisteredIconThemes();
 
-  const titleBarProjectModeOptions = [
-    { value: "tabs", label: "Tabs" },
-    { value: "window", label: "Window" },
-  ];
-
   const themeOptions = useMemo(
     () =>
       registeredThemes.map((theme) => ({
@@ -348,29 +342,9 @@ export const AppearanceSettings = () => {
           />
         </SettingRow>
 
-        <SettingRow
-          label="Title Bar Project Mode"
-          description="Show project tabs or a single window-style title in the custom title bar"
-          onReset={() =>
-            updateSetting("titleBarProjectMode", getDefaultSetting("titleBarProjectMode"))
-          }
-          canReset={settings.titleBarProjectMode !== getDefaultSetting("titleBarProjectMode")}
-        >
-          <Select
-            value={settings.titleBarProjectMode}
-            options={titleBarProjectModeOptions}
-            onChange={(value) => updateSetting("titleBarProjectMode", value as "tabs" | "window")}
-            className={SETTINGS_CONTROL_WIDTHS.default}
-            size="md"
-            variant="default"
-            searchable
-            searchableTrigger="input"
-          />
-        </SettingRow>
-
         <SettingRow
           label="Open Projects In New Window"
-          description="In window title mode, opening another folder uses a separate window when a project is already open"
+          description="Opening another folder uses a separate window when a project is already open"
           onReset={() =>
             updateSetting("openFoldersInNewWindow", getDefaultSetting("openFoldersInNewWindow"))
           }

src/features/settings/config/default-settings.ts

@@ -62,7 +62,6 @@ export const defaultSettings: Settings = {
   nativeMenuBar: false,
   compactMenuBar: true,
   windowTransparency: true,
-  titleBarProjectMode: "window",
   headerTrailingItemsOrder: [...HEADER_TRAILING_ITEM_IDS],
   sidebarActivityItemsOrder: [...SIDEBAR_ACTIVITY_ITEM_IDS],
   footerLeadingItemsOrder: [...FOOTER_LEADING_ITEM_IDS],

src/features/settings/config/search-index.ts

@@ -418,14 +418,6 @@ export const settingsSearchIndex: SettingSearchRecord[] = [
     description: "Use translucent app chrome and transparent native windows where supported",
     keywords: ["window", "transparency", "transparent", "translucent", "glass", "chrome"],
   },
-  {
-    id: "appearance-title-bar-project-mode",
-    tab: "appearance",
-    section: "Layout",
-    label: "Title Bar Project Mode",
-    description: "Show project tabs or a single window-style title in the custom title bar",
-    keywords: ["title", "bar", "project", "tabs", "window", "mode"],
-  },
   {
     id: "appearance-open-folders-new-window",
     tab: "appearance",

src/features/settings/lib/settings-sync.ts

@@ -46,7 +46,6 @@ type SyncableSettingsKey =
   | "autoThemeDark"
   | "compactMenuBar"
   | "windowTransparency"
-  | "titleBarProjectMode"
   | "headerTrailingItemsOrder"
   | "sidebarActivityItemsOrder"
   | "footerLeadingItemsOrder"
@@ -138,7 +137,6 @@ const SYNCABLE_SETTINGS_KEYS: SyncableSettingsKey[] = [
   "autoThemeDark",
   "compactMenuBar",
   "windowTransparency",
-  "titleBarProjectMode",
   "headerTrailingItemsOrder",
   "sidebarActivityItemsOrder",
   "footerLeadingItemsOrder",

src/features/settings/types/settings.types.ts

@@ -67,7 +67,6 @@ export interface Settings {
   nativeMenuBar: boolean;
   compactMenuBar: boolean;
   windowTransparency: boolean;
-  titleBarProjectMode: "tabs" | "window";
   headerTrailingItemsOrder: HeaderTrailingItemId[];
   sidebarActivityItemsOrder: Array<SidebarActivityItemId | string>;
   footerLeadingItemsOrder: FooterLeadingItemId[];

src/features/window/components/title-bar/custom-title-bar.tsx

@@ -32,7 +32,6 @@ import { AccountMenu } from "../account-menu";
 import ProjectPicker from "../project-picker";
 import RunActionsButton from "../run-actions-button";
 import { type HeaderItem, orderHeaderItems, placeHeaderItemsBeforeAccount } from "./header-items";
-import { TitleBarProjectArea } from "./title-bar-project-area";
 import { WindowControls } from "./window-controls";
 import WindowMenuBar from "../window-menu-bar";
 
@@ -43,7 +42,6 @@ interface CustomTitleBarProps {
 
 const CustomTitleBar = ({ showMinimal = false }: CustomTitleBarProps) => {
   const nativeMenuBar = useSettingsStore((state) => state.settings.nativeMenuBar);
-  const titleBarProjectMode = useSettingsStore((state) => state.settings.titleBarProjectMode);
   const compactMenuBar = useSettingsStore((state) => state.settings.compactMenuBar);
   const isAIChatVisible = useSettingsStore((state) => state.settings.isAIChatVisible);
   const headerTrailingItemsOrder = useSettingsStore(
@@ -331,8 +329,6 @@ const CustomTitleBar = ({ showMinimal = false }: CustomTitleBarProps) => {
           {sidebarToggle}
         </div>
 
-        <TitleBarProjectArea mode={titleBarProjectMode} />
-
         {/* Account menu */}
         <div className="flex h-8 items-center">
           <div className="flex items-center gap-1">
@@ -369,9 +365,6 @@ const CustomTitleBar = ({ showMinimal = false }: CustomTitleBarProps) => {
           </div>
         </div>
       </div>
-
-      <TitleBarProjectArea mode={titleBarProjectMode} />
-
       {/* Right side */}
       <div className="z-20 flex items-center">
         <div className="flex items-center gap-1">