feat: Implement view management features with a new UI for editing and listing views

- Added a resizable panel layout in the studio app to display the view list alongside the main application.
- Refactored the studio store to include new methods for fetching and managing route views.
- Introduced a new DataItemForm component for configuring data items in views.
- Created a ViewEditor component for adding and editing views, including data items and queries.
- Enhanced the ViewList component to support searching, adding, editing, and deleting views.
- Updated UI components (Button, Checkbox, Dialog, Input, Label, Table) for better styling and functionality.
- Added environment configuration for API URL.
- Introduced a new workspace configuration for pnpm.

web/src/components/ui/dialog.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const Dialog = ({ open, onOpenChange, children }: { open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode }) => {
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={() => onOpenChange(false)} />
+      <div className="relative z-50 w-full max-w-2xl max-h-[90vh] overflow-auto bg-white rounded-lg shadow-lg p-6">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left mb-4", className)} {...props}>
+    {children}
+  </div>
+)
+
+const DialogTitle = ({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h2 className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props}>
+    {children}
+  </h2>
+)
+
+const DialogContent = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("", className)} {...props}>
+    {children}
+  </div>
+)
+
+const DialogFooter = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-4", className)} {...props}>
+    {children}
+  </div>
+)
+
+export { Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter }