feat(layout): add vertical feature tabs sidebar

- Add featureTabsLayout atom with vertical as default
- Create VerticalFeatureTabs component with resizable width
- Support project drag-and-drop reordering in vertical mode
- Add layout toggle in Settings dialog
- Simplify profile menu (remove redundant nav items)

Author: MarkShawn2020

src/App.tsx

@@ -6,7 +6,7 @@ import {
   HomeIcon, ReaderIcon, GearIcon, LayersIcon, CubeIcon, ChatBubbleIcon,
   DoubleArrowLeftIcon,
 } from "@radix-ui/react-icons";
-import { GlobalHeader } from "./components/GlobalHeader";
+import { GlobalHeader, VerticalFeatureTabs } from "./components/GlobalHeader";
 import { setAutoCopyOnSelect, getAutoCopyOnSelect } from "./components/Terminal";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent as CollapsibleBody } from "./components/ui/collapsible";
 import { Switch } from "./components/ui/switch";
@@ -24,7 +24,7 @@ import type {
   TemplatesCatalog, UserProfile,
 } from "./types";
 import { useAtom } from "jotai";
-import { sidebarCollapsedAtom, marketplaceCategoryAtom, shortenPathsAtom, profileAtom, navigationStateAtom, viewAtom, viewHistoryAtom, historyIndexAtom } from "./store";
+import { sidebarCollapsedAtom, marketplaceCategoryAtom, shortenPathsAtom, profileAtom, navigationStateAtom, viewAtom, viewHistoryAtom, historyIndexAtom, featureTabsLayoutAtom, workspaceDataAtom } from "./store";
 import { AppConfigContext, useAppConfig, type AppConfig } from "./context";
 import { FEATURES, FEATURE_ICONS } from "./constants";
 // Modular views
@@ -103,6 +103,8 @@ function App() {
   }, [setNavigationState]);
 
   const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+  const [featureTabsLayout] = useAtom(featureTabsLayoutAtom);
+  const [workspace] = useAtom(workspaceDataAtom);
   const [marketplaceCategory, setMarketplaceCategory] = useAtom(marketplaceCategoryAtom);
   const [catalog, setCatalog] = useState<TemplatesCatalog | null>(null);
   const [homeDir, setHomeDir] = useState("");
@@ -246,6 +248,9 @@ function App() {
           onShowProfileDialog={() => setShowProfileDialog(true)}
           onShowSettings={() => setShowSettings(true)}
         />
+        <div className="flex-1 flex overflow-hidden">
+        {/* Vertical Feature Tabs Sidebar */}
+        {featureTabsLayout === "vertical" && workspace && <VerticalFeatureTabs />}
         <main className="flex-1 overflow-auto">
         {view.type === "home" && (
           <Home
@@ -432,6 +437,7 @@ function App() {
         )}
         {view.type === "feature-todo" && <FeatureTodo feature={view.feature} />}
         </main>
+        </div>
       </div>
     ) : (
     <div className="h-screen bg-canvas flex">
@@ -785,6 +791,7 @@ function App() {
 function AppSettingsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { shortenPaths, setShortenPaths } = useAppConfig();
   const [autoCopy, setAutoCopy] = useState(getAutoCopyOnSelect);
+  const [featureTabsLayout, setFeatureTabsLayout] = useAtom(featureTabsLayoutAtom);
 
   const handleAutoCopyChange = (checked: boolean) => {
     setAutoCopy(checked);
@@ -812,6 +819,34 @@ function AppSettingsDialog({ open, onClose }: { open: boolean; onClose: () => vo
               </div>
               <Switch checked={shortenPaths} onCheckedChange={setShortenPaths} />
             </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-ink">Project tabs layout</p>
+                <p className="text-xs text-muted-foreground">Position of project/feature tabs</p>
+              </div>
+              <div className="flex gap-0.5 p-0.5 bg-muted rounded-lg">
+                <button
+                  onClick={() => setFeatureTabsLayout("horizontal")}
+                  className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
+                    featureTabsLayout === "horizontal"
+                      ? "bg-background text-ink shadow-sm"
+                      : "text-muted-foreground hover:text-ink"
+                  }`}
+                >
+                  Horizontal
+                </button>
+                <button
+                  onClick={() => setFeatureTabsLayout("vertical")}
+                  className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
+                    featureTabsLayout === "vertical"
+                      ? "bg-background text-ink shadow-sm"
+                      : "text-muted-foreground hover:text-ink"
+                  }`}
+                >
+                  Vertical
+                </button>
+              </div>
+            </div>
           </div>
           {/* Terminal */}
           <div className="space-y-3">

src/components/GlobalHeader/GlobalHeader.tsx

@@ -3,12 +3,11 @@ import { useAtom } from "jotai";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   PersonIcon, ChevronLeftIcon, ChevronRightIcon,
-  GearIcon, LayersIcon, CubeIcon,
-  RocketIcon, CounterClockwiseClockIcon, BookmarkIcon,
+  RocketIcon, CounterClockwiseClockIcon, BookmarkIcon, LayersIcon,
 } from "@radix-ui/react-icons";
 import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover";
-import { sidebarCollapsedAtom, profileAtom, workspaceDataAtom, primaryFeatureAtom } from "@/store";
+import { sidebarCollapsedAtom, profileAtom, workspaceDataAtom, primaryFeatureAtom, featureTabsLayoutAtom } from "@/store";
 import { GlobalFeatureTabs } from "./GlobalFeatureTabs";
 import type { View, FeatureType } from "@/types";
 
@@ -39,9 +38,10 @@ export function GlobalHeader({
   const [profile] = useAtom(profileAtom);
   const [workspace] = useAtom(workspaceDataAtom);
   const [primaryFeature, setPrimaryFeature] = useAtom(primaryFeatureAtom);
+  const [featureTabsLayout] = useAtom(featureTabsLayoutAtom);
 
-  // Always show feature tabs when workspace data is available
-  const showFeatureTabs = !!workspace;
+  // Show horizontal feature tabs when workspace data is available AND layout is horizontal
+  const showFeatureTabs = !!workspace && featureTabsLayout === "horizontal";
 
   // Main nav features - use primaryFeature for active state (not affected by profile menu clicks)
   const mainNavFeatures = ["workspace", "chat", "kb-distill", "kb-reference"] as const;
@@ -128,7 +128,6 @@ export function GlobalHeader({
           profile={profile}
           onShowProfileDialog={onShowProfileDialog}
           onShowSettings={onShowSettings}
-          onFeatureClick={onFeatureClick}
         />
       </div>
     );
@@ -176,12 +175,10 @@ function ProfileMenu({
   profile,
   onShowProfileDialog,
   onShowSettings,
-  onFeatureClick,
 }: {
   profile: { nickname: string; avatarUrl: string };
   onShowProfileDialog: () => void;
   onShowSettings: () => void;
-  onFeatureClick?: (feature: FeatureType) => void;
 }) {
   return (
     <div className="pr-4">
@@ -211,32 +208,6 @@ function ProfileMenu({
             >
               Settings
             </button>
-            {onFeatureClick && (
-              <>
-                <div className="h-px bg-border my-1" />
-                <button
-                  onClick={() => onFeatureClick("settings")}
-                  className="w-full text-left px-2 py-1.5 text-sm text-muted-foreground hover:text-ink hover:bg-card-alt rounded-md transition-colors flex items-center gap-2"
-                >
-                  <GearIcon className="w-4 h-4" />
-                  Configuration
-                </button>
-                <button
-                  onClick={() => onFeatureClick("features")}
-                  className="w-full text-left px-2 py-1.5 text-sm text-muted-foreground hover:text-ink hover:bg-card-alt rounded-md transition-colors flex items-center gap-2"
-                >
-                  <LayersIcon className="w-4 h-4" />
-                  Features
-                </button>
-                <button
-                  onClick={() => onFeatureClick("marketplace")}
-                  className="w-full text-left px-2 py-1.5 text-sm text-muted-foreground hover:text-ink hover:bg-card-alt rounded-md transition-colors flex items-center gap-2"
-                >
-                  <CubeIcon className="w-4 h-4" />
-                  Marketplace
-                </button>
-              </>
-            )}
           </div>
         </PopoverContent>
       </Popover>