feat: add panels ui (#118)

Author: jonathanlab

package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^2.0.52",
+    "@dnd-kit/react": "^0.1.21",
     "@phosphor-icons/react": "^2.1.10",
     "@posthog/agent": "1.16.4",
     "@radix-ui/react-icons": "^1.3.2",
@@ -93,6 +94,7 @@
     "react-hook-form": "^7.64.0",
     "react-hotkeys-hook": "^4.4.4",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "uuid": "^9.0.1",
     "zod": "^4.1.12",

pnpm-lock.yaml

@@ -1,9 +1,11 @@
 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 { Flex, Spinner, Text } from "@radix-ui/themes";
 import { initializePostHog } from "@renderer/lib/analytics";
 import { useEffect, useState } from "react";
+import { useDragDropHandlers } from "@/renderer/hooks/useDragDropHandlers";
 import { useRecordingQuerySync } from "@/renderer/hooks/useRecordingQuerySync";
 import {
   initializeRecordingService,
@@ -13,6 +15,7 @@ import {
 function App() {
   const { isAuthenticated, initializeOAuth } = useAuthStore();
   const [isLoading, setIsLoading] = useState(true);
+  const dragDropHandlers = useDragDropHandlers();
 
   useRecordingQuerySync();
 
@@ -52,7 +55,9 @@ function App() {
     );
   }
 
-  return isAuthenticated ? <MainLayout /> : <AuthScreen />;
+  const content = isAuthenticated ? <MainLayout /> : <AuthScreen />;
+
+  return <DragDropProvider {...dragDropHandlers}>{content}</DragDropProvider>;
 }
 
 export default App;

src/renderer/App.tsx

@@ -132,7 +132,7 @@ export function MainLayout() {
         </Box>
       </Flex>
 
-      <StatusBar onOpenSettings={handleOpenSettings} />
+      <StatusBar />
 
       <CommandMenu open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />
       <UpdatePrompt />

src/renderer/components/MainLayout.tsx

@@ -0,0 +1,16 @@
+import { ThemeWrapper } from "@components/ThemeWrapper";
+import { queryClient } from "@renderer/lib/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+import type React from "react";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+export const Providers: React.FC<ProvidersProps> = ({ children }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeWrapper>{children}</ThemeWrapper>
+    </QueryClientProvider>
+  );
+};

src/renderer/components/Providers.tsx

@@ -0,0 +1,64 @@
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import { Box, Flex, Text } from "@radix-ui/themes";
+import { usePanelStore } from "@stores/panelStore";
+import type React from "react";
+
+interface DraggablePanelProps {
+  id: string;
+  label: string;
+  children: React.ReactNode;
+}
+
+export const DraggablePanel: React.FC<DraggablePanelProps> = ({
+  id,
+  label,
+  children,
+}) => {
+  const { ref: draggableRef, isDragging } = useDraggable({
+    id: `panel-${id}`,
+    data: { panelId: id },
+  });
+
+  const { ref: droppableRef, isDropTarget } = useDroppable({
+    id: `drop-${id}`,
+    data: { panelId: id },
+  });
+
+  const draggingTabPanelId = usePanelStore((state) => state.draggingTabPanelId);
+
+  return (
+    <Box
+      ref={droppableRef}
+      height="100%"
+      className="flex flex-col transition-all duration-100 ease-in-out"
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        border:
+          isDropTarget && draggingTabPanelId !== id
+            ? "2px solid var(--accent-9)"
+            : "none",
+      }}
+    >
+      <Flex
+        ref={draggableRef}
+        align="center"
+        justify="between"
+        px="3"
+        py="2"
+        className="cursor-grab select-none border-b"
+        style={{
+          backgroundColor: "var(--gray-3)",
+          borderColor: "var(--gray-6)",
+        }}
+      >
+        <Text size="2" weight="medium" color="gray">
+          {label}
+        </Text>
+      </Flex>
+
+      <Box flexGrow="1" className="overflow-hidden">
+        {children}
+      </Box>
+    </Box>
+  );
+};