Add sidebar and interactive chart components

Introduced new UI components including AppSidebar, ChartAreaInteractive, DataTable, and navigation elements. Updated dependencies in packages/ui/package.json to include @dnd-kit and related libraries for drag-and-drop functionality. Adjusted App.tsx header styling and made supporting changes to Tailwind config and UI primitives.

Author: hotlong

package-lock.json

@@ -158,7 +158,7 @@ function AppContent() {
       <SidebarProvider>
           <AppSidebar objects={{}} appMetadata={currentAppMetadata} />
           <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+            <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
                 <SidebarTrigger className="-ml-1" />
                 <Separator orientation="vertical" className="mr-2 h-4" />
                 <Breadcrumb>

packages/client/src/App.tsx

@@ -30,6 +30,10 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",