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/apps/studio/index.tsx

@@ -2,9 +2,18 @@ import { toast, ToastContainer } from 'react-toastify';
 import { useStudioStore } from './store.ts';
 import { useEffect, useState } from 'react';
 import { MonitorPlay, Play } from 'lucide-react';
+import { Panel, Group } from 'react-resizable-panels'
+import { ViewList } from '../view/list.tsx';
 export const AppProvider = () => {
-  return <main className='w-full'>
-    <App />
+  return <main className='w-full h-screen flex flex-col overflow-hidden'>
+    <Group className="h-full flex-1 overflow-hidden">
+      <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r overflow-auto">
+        <ViewList />
+      </Panel>
+      <Panel>
+        <App />
+      </Panel>
+    </Group>
     <ToastContainer
       position="top-right"
       autoClose={3000}
@@ -28,12 +37,12 @@ interface RouteItem {
 }
 
 export const App = () => {
-  const { routes, getRoutes, run } = useStudioStore();
+  const { routes, getRouteList, run } = useStudioStore();
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
 
   useEffect(() => {
-    getRoutes();
+    getRouteList();
   }, []);
 
   const toggleDescription = (id: string) => {
@@ -58,7 +67,7 @@ export const App = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto p-6">
+    <div className="max-w-5xl mx-auto p-6 h-full overflow-auto">
       <div className="space-y-1">
         {routes.map((route: RouteItem) => {
           const isExpanded = expandedIds.has(route.id);