Cancel Job

patch.diff

@@ -0,0 +1,6 @@
+--- src/components/viz/top-nav/WorkspaceModeSelector.tsx
++++ src/components/viz/top-nav/WorkspaceModeSelector.tsx
+@@ -8,3 +8,3 @@
+ import { cn } from '@/lib/utils';
+-import { WORKSPACE_MODES, type WorkspaceModeId } from './workspaceModes';
++import { WORKSPACE_MODES } from './workspaceModes';

patch2.diff

@@ -0,0 +1,7 @@
+--- src/components/viz/top-nav/WorkspaceModeSelector.tsx
++++ src/components/viz/top-nav/WorkspaceModeSelector.tsx
+@@ -23,3 +23,3 @@
+
+-  const handleModeChange = (mode: WorkspaceModeId) => {
++  const handleModeChange = (mode: typeof WORKSPACE_MODES[number]['id']) => {
+     setWorkspaceMode(mode);

src/components/viz/top-nav/WorkspaceModeSelector.tsx.orig

@@ -0,0 +1,102 @@
+import { Check, ChevronDown } from 'lucide-react';
+import { useVizStore } from '@/stores/vizStore';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { WORKSPACE_MODES, type WorkspaceModeId } from './workspaceModes';
+
+export function WorkspaceModeSelector() {
+  const {
+    workspaceMode,
+    setWorkspaceMode,
+    setAiSidebarOpen,
+    setSidebarTab,
+    setExplorerOpen,
+    setInspectorOpen,
+  } = useVizStore();
+
+  const currentMode = WORKSPACE_MODES.find((m) => m.id === workspaceMode) || WORKSPACE_MODES[0];
+
+  const handleModeChange = (mode: WorkspaceModeId) => {
+    setWorkspaceMode(mode);
+
+    if (window.innerWidth < 1024) {
+      setExplorerOpen(false);
+      setAiSidebarOpen(false);
+      setInspectorOpen(false);
+      return;
+    }
+
+    setExplorerOpen(true);
+
+    if (mode === 'focus') {
+      setAiSidebarOpen(false);
+      setInspectorOpen(false);
+    } else if (mode === 'analysis') {
+      setAiSidebarOpen(true);
+      setSidebarTab('analysis');
+      setInspectorOpen(false);
+    } else if (mode === 'learning') {
+      setAiSidebarOpen(true);
+      setSidebarTab('learning');
+      setInspectorOpen(false);
+    } else if (mode === 'full') {
+      setAiSidebarOpen(true);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="group flex items-center gap-1.5 h-7 pl-2 pr-1.5 rounded-md text-xs font-medium text-zinc-400 hover:text-white hover:bg-zinc-800/80 transition-all duration-200 select-none outline-none cursor-pointer">
+        <currentMode.icon className="h-3.5 w-3.5 shrink-0 transition-colors text-[#8b949e] group-hover:text-[#e6edf3]" />
+        {/* Show label on lg+, icon-only on tablet */}
+        <span className="hidden lg:inline font-sans truncate max-w-[110px]">{currentMode.label}</span>
+        <ChevronDown className="h-3 w-3 opacity-60 group-hover:opacity-100 transition-opacity shrink-0" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" sideOffset={6} className="w-72 bg-[#161b22] border-[rgba(240,246,252,0.1)] shadow-2xl z-[100] p-1.5 rounded-md">
+        <div className="px-2.5 py-1.5 text-[9px] font-semibold text-[#8b949e] uppercase tracking-wider select-none font-mono">
+          Workspace Layout
+        </div>
+        <div className="space-y-0.5">
+          {WORKSPACE_MODES.map((mode) => {
+            const isSelected = workspaceMode === mode.id;
+            return (
+              <DropdownMenuItem
+                key={mode.id}
+                onClick={() => handleModeChange(mode.id)}
+                className={cn(
+                  'flex items-start gap-3 cursor-pointer p-2.5 focus:bg-[rgba(240,246,252,0.1)] focus:text-[#e6edf3] rounded-sm text-xs transition-colors',
+                  isSelected ? 'bg-[#1c2128] text-[#e6edf3]' : 'text-[#8b949e]'
+                )}
+              >
+                <div className={cn(
+                  'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-[rgba(240,246,252,0.1)]',
+                  isSelected ? 'bg-[#161b22]' : 'bg-[#0d1117]'
+                )}>
+                  <mode.icon className={cn("h-3.5 w-3.5", isSelected ? mode.color : "text-[#8b949e]")} />
+                </div>
+
+                <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+                  <div className="flex items-center justify-between">
+                    <span className={cn('font-medium', isSelected ? 'text-[#e6edf3]' : 'text-[#e6edf3]')}>
+                      {mode.label}
+                    </span>
+                    {isSelected && <Check className="h-3.5 w-3.5 text-[#e6edf3] shrink-0" />}
+                  </div>
+                  <span className="text-[10px] leading-relaxed text-[#8b949e] font-sans font-normal">
+                    {mode.description}
+                  </span>
+                </div>
+              </DropdownMenuItem>
+            );
+          })}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}