@hienlh/ppm 0.2.21 → 0.4.0

package/src/web/components/layout/command-palette.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import {
   Terminal,
   MessageSquare,
@@ -7,11 +7,14 @@ import {
   Settings,
   Search,
   FileCode,
+  FolderOpen,
+  Loader2,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
+import { api } from "@/lib/api-client";
 
 interface CommandItem {
   id: string;
@@ -20,26 +23,45 @@ interface CommandItem {
   icon: React.ElementType;
   action: () => void;
   keywords?: string;
-  group: "action" | "file";
+  group: "action" | "file" | "fs";
 }
 
 /** Recursively flatten file tree into file-only list */
-function flattenFiles(nodes: FileNode[], prefix = ""): { name: string; path: string }[] {
+function flattenFiles(nodes: FileNode[]): { name: string; path: string }[] {
   const result: { name: string; path: string }[] = [];
   for (const node of nodes) {
     if (node.type === "file") {
       result.push({ name: node.name, path: node.path });
     }
     if (node.children) {
-      result.push(...flattenFiles(node.children, node.path));
+      result.push(...flattenFiles(node.children));
     }
   }
   return result;
 }
 
-export function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
+/** Check if query looks like an absolute path (Unix: /, ~/ | Windows: C:\, ~\) */
+function isPathQuery(q: string): boolean {
+  return q.startsWith("/") || q.startsWith("~/") || q.startsWith("~\\") || /^[A-Za-z]:[/\\]/.test(q);
+}
+
+/** Extract the directory portion of a path for API call */
+function extractDir(q: string): string {
+  // Normalize to forward slash for splitting
+  const normalized = q.replace(/\\/g, "/");
+  if (normalized.endsWith("/")) return q;
+  const lastSlash = Math.max(normalized.lastIndexOf("/"), q.lastIndexOf("\\"));
+  return lastSlash > 0 ? q.slice(0, lastSlash + 1) : q;
+}
+
+// Cache: dir path → file list
+const fsCache = new Map<string, string[]>();
+
+export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boolean; onClose: () => void; initialQuery?: string }) {
   const [query, setQuery] = useState("");
   const [selectedIdx, setSelectedIdx] = useState(0);
+  const [fsFiles, setFsFiles] = useState<string[]>([]);
+  const [fsLoading, setFsLoading] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -47,6 +69,36 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
   const activeProject = useProjectStore((s) => s.activeProject);
   const fileTree = useFileStore((s) => s.tree);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
+  const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
+  const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
+
+  // Fetch filesystem files when path query changes directory
+  const fetchFsFiles = useCallback(async (dir: string) => {
+    if (fsCache.has(dir)) {
+      setFsFiles(fsCache.get(dir)!);
+      return;
+    }
+    setFsLoading(true);
+    try {
+      const files = await api.get<string[]>(`/api/fs/list?dir=${encodeURIComponent(dir)}`);
+      fsCache.set(dir, files);
+      setFsFiles(files);
+    } catch {
+      setFsFiles([]);
+    } finally {
+      setFsLoading(false);
+    }
+  }, []);
+
+  // When query changes and looks like a path, fetch files
+  useEffect(() => {
+    if (!isPathQuery(query)) {
+      setFsFiles([]);
+      return;
+    }
+    const dir = extractDir(query);
+    fetchFsFiles(dir);
+  }, [query, fetchFsFiles]);
 
   // Action commands
   const actionCommands = useMemo<CommandItem[]>(() => {
@@ -63,11 +115,20 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action" },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action" },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action" },
-      { id: "settings", label: "Settings", icon: Settings, action: openNewTab("settings", "Settings"), keywords: "config preferences", group: "action" },
+      {
+        id: "settings", label: "Settings", icon: Settings,
+        action: () => {
+          if (sidebarCollapsed) toggleSidebar();
+          setSidebarActiveTab("settings");
+          onClose();
+        },
+        keywords: "config preferences theme",
+        group: "action",
+      },
     ];
-  }, [activeProject, openTab, onClose]);
+  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar]);
 
-  // File commands — derived from file store tree
+  // File commands — derived from file store tree (project files)
   const fileCommands = useMemo<CommandItem[]>(() => {
     const projectId = activeProject?.name ?? null;
     const meta = activeProject ? { projectName: activeProject.name } : undefined;
@@ -93,12 +154,56 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
     }));
   }, [fileTree, activeProject, openTab, onClose]);
 
-  const allCommands = useMemo(() => [...actionCommands, ...fileCommands], [actionCommands, fileCommands]);
+  // Filesystem commands — from cached API results
+  const fsCommands = useMemo<CommandItem[]>(() => {
+    const projectId = activeProject?.name ?? null;
+    const meta = activeProject ? { projectName: activeProject.name } : undefined;
+
+    return fsFiles.map((fp) => {
+      const name = fp.split("/").pop() ?? fp;
+      return {
+        id: `fs:${fp}`,
+        label: name,
+        hint: fp,
+        icon: FolderOpen,
+        group: "fs" as const,
+        keywords: fp,
+        action: () => {
+          openTab({
+            type: "editor",
+            title: name,
+            projectId,
+            metadata: { ...meta, filePath: fp },
+            closable: true,
+          });
+          onClose();
+        },
+      };
+    });
+  }, [fsFiles, activeProject, openTab, onClose]);
+
+  const allCommands = useMemo(
+    () => [...actionCommands, ...fileCommands],
+    [actionCommands, fileCommands],
+  );
 
   const filtered = useMemo(() => {
-    if (!query.trim()) return actionCommands; // show only actions when empty
+    // Path mode — search filesystem results using filename portion only
+    if (isPathQuery(query)) {
+      // Extract the part after the last / as the filename filter
+      const lastSlash = query.lastIndexOf("/");
+      const fileFilter = lastSlash >= 0 ? query.slice(lastSlash + 1).toLowerCase() : "";
+      if (!fileFilter) return fsCommands.slice(0, 50); // show all if query ends with /
+      return fsCommands.filter((c) => {
+        const name = c.label.toLowerCase();
+        const path = (c.keywords ?? "").toLowerCase();
+        return name.includes(fileFilter) || path.includes(fileFilter);
+      }).slice(0, 50);
+    }
+
+    // Normal mode
+    if (!query.trim()) return actionCommands;
     const q = query.toLowerCase();
-    // Fuzzy-ish: every character of query must appear in order
     const matchesFuzzy = (text: string) => {
       let ti = 0;
       for (let qi = 0; qi < q.length; qi++) {
@@ -111,13 +216,14 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
     return allCommands.filter(
       (c) => matchesFuzzy(c.label.toLowerCase()) || (c.keywords && matchesFuzzy(c.keywords.toLowerCase())),
     );
-  }, [allCommands, actionCommands, query]);
+  }, [allCommands, actionCommands, fsCommands, query]);
 
   // Reset state when opening
   useEffect(() => {
     if (open) {
-      setQuery("");
+      setQuery(initialQuery);
       setSelectedIdx(0);
+      setFsFiles([]);
       requestAnimationFrame(() => inputRef.current?.focus());
     }
   }, [open]);
@@ -158,6 +264,8 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
 
   if (!open) return null;
 
+  const pathMode = isPathQuery(query);
+
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]" onClick={onClose}>
       <div className="fixed inset-0 bg-black/50" />
@@ -174,18 +282,28 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search actions & files..."
+            placeholder="Search actions & files... (type / or ~/ for filesystem)"
             className="flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle"
           />
+          {fsLoading && <Loader2 className="size-3.5 animate-spin text-text-subtle shrink-0" />}
           <kbd className="hidden sm:inline-flex items-center rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] text-text-subtle font-mono">
             ESC
           </kbd>
         </div>
 
+        {/* Path mode hint */}
+        {pathMode && !fsLoading && fsFiles.length === 0 && query.length < 4 && (
+          <div className="px-3 py-2 text-xs text-text-subtle border-b border-border/50">
+            Type a directory path to browse files (e.g. ~/Projects/)
+          </div>
+        )}
+
         {/* Results */}
         <div ref={listRef} className="max-h-72 overflow-y-auto py-1">
           {filtered.length === 0 ? (
-            <p className="px-3 py-4 text-sm text-text-subtle text-center">No results</p>
+            <p className="px-3 py-4 text-sm text-text-subtle text-center">
+              {fsLoading ? "Searching..." : "No results"}
+            </p>
           ) : (
             filtered.map((cmd, i) => {
               const Icon = cmd.icon;
@@ -211,6 +329,18 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
             })
           )}
         </div>
+
+        {/* Shortcut hint */}
+        <div className="flex items-center justify-center gap-1.5 border-t border-border px-3 py-1.5">
+          <span className="text-[10px] text-text-subtle">Press</span>
+          <kbd className="inline-flex items-center rounded border border-border bg-surface px-1 py-0.5 text-[10px] text-text-subtle font-mono">
+            Shift
+          </kbd>
+          <kbd className="inline-flex items-center rounded border border-border bg-surface px-1 py-0.5 text-[10px] text-text-subtle font-mono">
+            Shift
+          </kbd>
+          <span className="text-[10px] text-text-subtle">to open this palette</span>
+        </div>
       </div>
     </div>
   );

package/src/web/components/layout/draggable-tab.tsx

@@ -26,8 +26,10 @@ export function DraggableTab({
       )}
       <button
         ref={tabRef}
+        data-tab-item
         draggable
         onClick={onSelect}
+        onAuxClick={(e) => { if (e.button === 1 && tab.closable) { e.preventDefault(); onClose(); } }}
         onDragStart={onDragStart}
         onDragOver={onDragOver}
         onDragEnd={onDragEnd}

package/src/web/components/layout/editor-panel.tsx

@@ -1,11 +1,18 @@
 import { Suspense, lazy } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Terminal, MessageSquare, GitBranch } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 import type { TabType } from "@/stores/tab-store";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
 import { cn } from "@/lib/utils";
 
+const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
+  { type: "terminal", label: "Terminal", icon: Terminal },
+  { type: "chat", label: "AI Chat", icon: MessageSquare },
+  { type: "git-graph", label: "Git Graph", icon: GitBranch },
+];
+
 const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
   terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
   chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
@@ -37,15 +44,13 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
         panelCount > 1 && "border border-transparent",
         panelCount > 1 && isFocused && "border-primary/30",
       )}
-      onClick={() => usePanelStore.getState().setFocusedPanel(panelId)}
+      onMouseDown={() => { if (usePanelStore.getState().focusedPanelId !== panelId) usePanelStore.getState().setFocusedPanel(panelId); }}
     >
       <TabBar panelId={panelId} />
 
       <div className="flex-1 overflow-hidden relative">
         {panel.tabs.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-text-secondary text-sm">
-            Drop a tab here
-          </div>
+          <EmptyPanel panelId={panelId} />
         ) : (
           panel.tabs.map((tab) => {
             const Component = TAB_COMPONENTS[tab.type];
@@ -64,3 +69,37 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
     </div>
   );
 }
+
+function EmptyPanel({ panelId }: { panelId: string }) {
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  function openTab(type: TabType) {
+    const needsProject = type !== "settings";
+    const metadata = needsProject && activeProject ? { projectName: activeProject.name } : undefined;
+    usePanelStore.getState().openTab(
+      { type, title: QUICK_OPEN_TABS.find((t) => t.type === type)?.label ?? type, metadata, projectId: activeProject?.name ?? null, closable: true },
+      panelId,
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-4 text-text-secondary">
+      <p className="text-sm">Open a tab to get started</p>
+      <div className="flex flex-col md:flex-row flex-wrap justify-center gap-2">
+        {QUICK_OPEN_TABS.map((opt) => {
+          const Icon = opt.icon;
+          return (
+            <button
+              key={opt.type}
+              onClick={() => openTab(opt.type)}
+              className="flex items-center gap-2 px-4 py-2 rounded-md border border-border bg-surface hover:bg-surface-elevated text-sm text-foreground transition-colors"
+            >
+              <Icon className="size-4" />
+              {opt.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/web/components/layout/sidebar.tsx

@@ -1,21 +1,62 @@
-import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, MessageSquare } from "lucide-react";
+import { useCallback, useRef } from "react";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
-import { ChatHistoryPanel } from "@/components/chat/chat-history-panel";
+import { SettingsTab } from "@/components/settings/settings-tab";
 import { cn } from "@/lib/utils";
 
 const TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "git", label: "Git", icon: GitBranch },
-  { id: "history", label: "History", icon: MessageSquare },
+  { id: "settings", label: "Settings", icon: Settings },
 ];
 
+function ResizeHandle({ onResize }: { onResize: (width: number) => void }) {
+  const dragging = useRef(false);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+    const target = e.currentTarget as HTMLElement;
+    target.setPointerCapture(e.pointerId);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragging.current) return;
+    // Sidebar starts after the project bar (48px wide)
+    const projectBarWidth = 48;
+    const newWidth = e.clientX - projectBarWidth;
+    onResize(newWidth);
+  }, [onResize]);
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    dragging.current = false;
+    const target = e.currentTarget as HTMLElement;
+    target.releasePointerCapture(e.pointerId);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+
+  return (
+    <div
+      className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 transition-colors z-10"
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    />
+  );
+}
+
 export function Sidebar() {
   const { activeProject } = useProjectStore();
   const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
+  const sidebarWidth = useSettingsStore((s) => s.sidebarWidth);
   const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
+  const setSidebarWidth = useSettingsStore((s) => s.setSidebarWidth);
   const sidebarActiveTab = useSettingsStore((s) => s.sidebarActiveTab);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
 
@@ -34,8 +75,11 @@ export function Sidebar() {
   }
 
   return (
-    <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-hidden">
-      {/* Tab bar (replaces old header) */}
+    <aside
+      className="hidden md:flex flex-col bg-background border-r border-border overflow-hidden relative"
+      style={{ width: sidebarWidth, minWidth: 200, maxWidth: 600 }}
+    >
+      {/* Tab bar */}
       <div className="flex items-center h-[41px] border-b border-border shrink-0">
         {TABS.map((tab) => {
           const Icon = tab.icon;
@@ -79,11 +123,13 @@ export function Sidebar() {
         {sidebarActiveTab === "git" && (
           <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
         )}
-        {sidebarActiveTab === "history" && (
-          <ChatHistoryPanel projectName={activeProject?.name} />
+        {sidebarActiveTab === "settings" && (
+          <SettingsTab />
         )}
       </div>
 
+      {/* Resize handle */}
+      <ResizeHandle onResize={setSidebarWidth} />
     </aside>
   );
 }

package/src/web/components/layout/tab-bar.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from "react";
 import {
-  X,
   Plus,
   Terminal,
   MessageSquare,
@@ -9,17 +8,11 @@ import {
   Settings,
   FileCode,
 } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
+import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { DraggableTab } from "./draggable-tab";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
@@ -31,13 +24,6 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   settings: Settings,
 };
 
-const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
-  { type: "terminal", label: "Terminal" },
-  { type: "chat", label: "AI Chat" },
-  { type: "git-graph", label: "Git Graph" },
-  { type: "settings", label: "Settings" },
-];
-
 interface TabBarProps {
   panelId?: string;
 }
@@ -45,6 +31,7 @@ interface TabBarProps {
 export function TabBar({ panelId }: TabBarProps) {
   const activeProject = useProjectStore((s) => s.activeProject);
   const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const scrollRef = useRef<HTMLDivElement>(null);
   const prevTabCount = useRef(0);
 
   // Read tabs from panel-store if panelId given, else from tab-store (focused)
@@ -65,20 +52,20 @@ export function TabBar({ panelId }: TabBarProps) {
     prevTabCount.current = tabs.length;
   }, [tabs.length, activeTabId]);
 
-  function handleNewTab(type: TabType) {
-    const needsProject = type === "git-graph" || type === "git-diff" || type === "terminal" || type === "chat";
-    const metadata = needsProject ? { projectName: activeProject?.name } : undefined;
+  /** Double-click on empty bar area → open command palette */
+  function handleBarDoubleClick(e: React.MouseEvent) {
+    // Only trigger if clicking directly on the bar or scroll container (not on a tab)
+    const target = e.target as HTMLElement;
+    if (target.closest("[data-tab-item]")) return;
+    openCommandPalette();
+  }
 
-    usePanelStore.getState().openTab(
-      {
-        type,
-        title: NEW_TAB_OPTIONS.find((o) => o.type === type)?.label ?? type,
-        metadata,
-        projectId: activeProject?.name ?? null,
-        closable: true,
-      },
-      effectivePanelId,
-    );
+  /** Right-click on empty bar area → open command palette */
+  function handleBarContextMenu(e: React.MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (target.closest("[data-tab-item]")) return;
+    e.preventDefault();
+    openCommandPalette();
   }
 
   return (
@@ -86,8 +73,14 @@ export function TabBar({ panelId }: TabBarProps) {
       className="hidden md:flex items-center h-[41px] border-b border-border bg-background"
       onDragOver={handleDragOverBar}
       onDrop={handleDrop}
+      onDoubleClick={handleBarDoubleClick}
+      onContextMenu={handleBarContextMenu}
     >
-      <ScrollArea className="flex-1">
+      {/* Scrollable tabs + sticky + button */}
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-x-auto overflow-y-hidden min-w-0 scrollbar-none"
+      >
         <div className="flex items-center gap-0.5 px-2 py-1">
           {tabs.map((tab, i) => (
             <DraggableTab
@@ -111,28 +104,17 @@ export function TabBar({ panelId }: TabBarProps) {
           {dropIndex !== null && dropIndex >= tabs.length && (
             <div className="w-0.5 h-6 bg-primary rounded-full" />
           )}
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
 
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button className="flex items-center justify-center size-8 mx-1 rounded-md text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors">
+          {/* + button — inside flow, sticky when overflowing */}
+          <button
+            onClick={openCommandPalette}
+            title="Open command palette (Shift+Shift)"
+            className="flex items-center justify-center size-7 shrink-0 sticky right-1 rounded-md text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors bg-background"
+          >
             <Plus className="size-4" />
           </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {NEW_TAB_OPTIONS.map((opt) => {
-            const Icon = TAB_ICONS[opt.type];
-            return (
-              <DropdownMenuItem key={opt.type} onClick={() => handleNewTab(opt.type)}>
-                <Icon className="size-4 mr-2" />
-                {opt.label}
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </div>
+      </div>
     </div>
   );
 }