polish: update TopBar and navigation integration

- Refactor TopBar component
- Update navigation integration with new panel system
- Layout adjustments for panel features

Author: jonathanlab

src/renderer/App.tsx

@@ -1,16 +1,13 @@
 import { MainLayout } from "@components/MainLayout";
-import { DragDropProvider } from "@dnd-kit/react";
 import { AuthScreen } from "@features/auth/components/AuthScreen";
 import { useAuthStore } from "@features/auth/stores/authStore";
-import { useDragDropHandlers } from "@features/panels";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { initializePostHog } from "@renderer/lib/analytics";
 import { useEffect, useState } from "react";
 
 function App() {
   const { isAuthenticated, initializeOAuth } = useAuthStore();
   const [isLoading, setIsLoading] = useState(true);
-  const dragDropHandlers = useDragDropHandlers();
 
   // Initialize PostHog analytics
   useEffect(() => {
@@ -32,9 +29,7 @@ function App() {
     );
   }
 
-  const content = isAuthenticated ? <MainLayout /> : <AuthScreen />;
-
-  return <DragDropProvider {...dragDropHandlers}>{content}</DragDropProvider>;
+  return isAuthenticated ? <MainLayout /> : <AuthScreen />;
 }
 
 export default App;

src/renderer/components/MainLayout.tsx

@@ -1,7 +1,7 @@
 import { MainSidebar } from "@components/MainSidebar";
-import { TopBar } from "@components/ui/topnav/TopBar";
 import { StatusBar } from "@components/StatusBar";
 import { UpdatePrompt } from "@components/UpdatePrompt";
+import { TopBar } from "@components/ui/topnav/TopBar";
 import { CommandMenu } from "@features/command/components/CommandMenu";
 import { SettingsView } from "@features/settings/components/SettingsView";
 import { TaskDetail } from "@features/task-detail/components/TaskDetail";
@@ -17,8 +17,14 @@ import { Toaster } from "sonner";
 
 export function MainLayout() {
   const { setCliMode } = useLayoutStore();
-  const { view, toggleSettings, navigateToTaskList, navigateToTask, goBack, goForward } =
-    useNavigationStore();
+  const {
+    view,
+    toggleSettings,
+    navigateToTaskList,
+    navigateToTask,
+    goBack,
+    goForward,
+  } = useNavigationStore();
   useIntegrations();
   const [commandMenuOpen, setCommandMenuOpen] = useState(false);
 

src/renderer/components/ui/topnav/TopBar.tsx

@@ -1,61 +1,69 @@
-import { Box, Flex, IconButton, TextField } from '@radix-ui/themes'
-import { ChevronLeftIcon, ChevronRightIcon, MagnifyingGlassIcon, GearIcon } from '@radix-ui/react-icons'
-import { useNavigationStore } from '@stores/navigationStore'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  GearIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
+import { Box, Flex, IconButton, TextField } from "@radix-ui/themes";
+import { useNavigationStore } from "@stores/navigationStore";
 
 interface TopBarProps {
-    onSearchClick?: () => void
+  onSearchClick?: () => void;
 }
 
 export const TopBar = ({ onSearchClick }: TopBarProps) => {
-    const { goBack, goForward, canGoBack, canGoForward, toggleSettings } = useNavigationStore()
+  const { goBack, goForward, canGoBack, canGoForward, toggleSettings } =
+    useNavigationStore();
 
-    return (
-        <Flex className="w-full h-10 border-b border-gray-6" align="center" justify="between" px="2" gap="3">
-                <Flex gap="1" className="flex-shrink-0 ml-20">
-                    <IconButton
-                        size="1"
-                        variant="ghost"
-                        onClick={goBack}
-                        disabled={!canGoBack()}
-                        className={canGoBack() ? 'cursor-pointer' : 'cursor-not-allowed'}
-                    >
-                        <ChevronLeftIcon />
-                    </IconButton>
-                    <IconButton
-                        size="1"
-                        variant="ghost"
-                        onClick={goForward}
-                        disabled={!canGoForward()}
-                        className={canGoForward() ? 'cursor-pointer' : 'cursor-not-allowed'}
-                    >
-                        <ChevronRightIcon />
-                    </IconButton>
-                </Flex>
-            <Box className="flex-1 max-w-[500px]">
-                <TextField.Root
-                    size="1"
-                    placeholder="Search..."
-                    onClick={onSearchClick}
-                    className="cursor-pointer"
-                    readOnly
-                >
-                    <TextField.Slot>
-                        <MagnifyingGlassIcon height="14" width="14" />
-                    </TextField.Slot>
-                    <TextField.Slot>
-                        <Box className="text-xs text-gray-10">⌘P</Box>
-                    </TextField.Slot>
-                </TextField.Root>
-            </Box>
-            <Flex gap="1">
-                <IconButton
-                    size="1"
-                    variant="ghost"
-                    onClick={toggleSettings}
-                >
-                    <GearIcon />
-                </IconButton>
-            </Flex>
-        </Flex>
-    )
-}
+  return (
+    <Flex
+      className="h-10 min-h-10 w-full border-gray-6 border-b"
+      align="center"
+      justify="between"
+      px="2"
+      gap="3"
+    >
+      <Flex gap="1" className="ml-20 flex-shrink-0">
+        <IconButton
+          size="1"
+          variant="ghost"
+          onClick={goBack}
+          disabled={!canGoBack()}
+          className={canGoBack() ? "cursor-pointer" : "cursor-not-allowed"}
+        >
+          <ChevronLeftIcon />
+        </IconButton>
+        <IconButton
+          size="1"
+          variant="ghost"
+          onClick={goForward}
+          disabled={!canGoForward()}
+          className={canGoForward() ? "cursor-pointer" : "cursor-not-allowed"}
+        >
+          <ChevronRightIcon />
+        </IconButton>
+      </Flex>
+      <Box className="max-w-[500px] flex-1">
+        <TextField.Root
+          size="1"
+          placeholder="Search..."
+          onClick={onSearchClick}
+          className="cursor-pointer"
+          readOnly
+        >
+          <TextField.Slot>
+            <MagnifyingGlassIcon height="14" width="14" />
+          </TextField.Slot>
+          <TextField.Slot>
+            <Box className="text-gray-10 text-xs">⌘P</Box>
+          </TextField.Slot>
+        </TextField.Root>
+      </Box>
+      <Flex gap="1">
+        <IconButton size="1" variant="ghost" onClick={toggleSettings}>
+          <GearIcon />
+        </IconButton>
+      </Flex>
+    </Flex>
+  );
+};

src/renderer/stores/navigationStore.ts

@@ -1,6 +1,6 @@
+import { track } from "@renderer/lib/analytics";
 import type { Task } from "@shared/types";
 import { create } from "zustand";
-import { track } from "@renderer/lib/analytics";
 import { ANALYTICS_EVENTS } from "@/types/analytics";
 
 type ViewType = "task-list" | "task-detail" | "settings";