From 55b1a41de2dc6b7808588cc58441eecb650d8540 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 29 Jan 2025 14:17:45 -0800
Subject: [PATCH] Added dummy settings page

---
 .../components/{ => nav-item}/nav-item.tsx    |   0
 .../settings-modal/settings-modal.tsx         | 109 ++++++++++++++++++
 app/w/components/sidebar/sidebar.tsx          |  21 ++--
 3 files changed, 123 insertions(+), 7 deletions(-)
 rename app/w/components/sidebar/components/{ => nav-item}/nav-item.tsx (100%)
 create mode 100644 app/w/components/sidebar/components/settings-modal/settings-modal.tsx

diff --git a/app/w/components/sidebar/components/nav-item.tsx b/app/w/components/sidebar/components/nav-item/nav-item.tsx
similarity index 100%
rename from app/w/components/sidebar/components/nav-item.tsx
rename to app/w/components/sidebar/components/nav-item/nav-item.tsx
diff --git a/app/w/components/sidebar/components/settings-modal/settings-modal.tsx b/app/w/components/sidebar/components/settings-modal/settings-modal.tsx
new file mode 100644
index 0000000000..6caad0019e
--- /dev/null
+++ b/app/w/components/sidebar/components/settings-modal/settings-modal.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { useState } from 'react'
+
+export function SettingsModal({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const [envVars, setEnvVars] = useState<{ key: string; value: string }[]>([
+    { key: '', value: '' },
+  ])
+
+  const addEnvVar = () => {
+    setEnvVars([...envVars, { key: '', value: '' }])
+  }
+
+  const updateEnvVar = (
+    index: number,
+    field: 'key' | 'value',
+    value: string
+  ) => {
+    const newEnvVars = [...envVars]
+    newEnvVars[index][field] = value
+    setEnvVars(newEnvVars)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] p-6">
+        <DialogHeader className="pb-4">
+          <DialogTitle className="text-lg font-medium leading-none">
+            Environment Variables
+          </DialogTitle>
+        </DialogHeader>
+        <div className="max-h-[400px] overflow-y-auto scrollbar-hide">
+          <div className="space-y-4">
+            {envVars.map((envVar, index) => (
+              <div key={index} className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label
+                    htmlFor={`key-${index}`}
+                    className="text-sm font-medium leading-none"
+                  >
+                    Key
+                  </Label>
+                  <Input
+                    id={`key-${index}`}
+                    value={envVar.key}
+                    onChange={(e) => updateEnvVar(index, 'key', e.target.value)}
+                    placeholder="API_KEY"
+                    className="placeholder:text-muted-foreground/50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label
+                    htmlFor={`value-${index}`}
+                    className="text-sm font-medium leading-none"
+                  >
+                    Value
+                  </Label>
+                  <Input
+                    id={`value-${index}`}
+                    value={envVar.value}
+                    onChange={(e) =>
+                      updateEnvVar(index, 'value', e.target.value)
+                    }
+                    type="password"
+                    placeholder="Enter value"
+                    className="placeholder:text-muted-foreground/50"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={addEnvVar}
+          className="mt-4 w-full border bg-card shadow-sm hover:bg-accent/50"
+        >
+          Add Variable
+        </Button>
+        <div className="flex justify-end space-x-3 pt-6">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-card shadow-sm hover:bg-accent/50"
+          >
+            Cancel
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>Save Changes</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/w/components/sidebar/sidebar.tsx b/app/w/components/sidebar/sidebar.tsx
index fd1d56e70b..f6c4905e31 100644
--- a/app/w/components/sidebar/sidebar.tsx
+++ b/app/w/components/sidebar/sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { NavItem } from './components/nav-item'
+import { NavItem } from './components/nav-item/nav-item'
 import { Settings, Plus } from 'lucide-react'
 import {
   Tooltip,
@@ -12,6 +12,8 @@ import { AgentIcon } from '@/components/icons'
 import { useWorkflowRegistry } from '@/stores/workflow/workflow-registry'
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
+import { useState } from 'react'
+import { SettingsModal } from './components/settings-modal/settings-modal'
 
 export function Sidebar() {
   const WORKFLOW_COLORS = [
@@ -23,6 +25,7 @@ export function Sidebar() {
   ]
   const { workflows, addWorkflow } = useWorkflowRegistry()
   const router = useRouter()
+  const [showSettings, setShowSettings] = useState(false)
 
   const handleCreateWorkflow = () => {
     const id = crypto.randomUUID()
@@ -84,20 +87,24 @@ export function Sidebar() {
         </div>
       </nav>
 
-      <nav className="flex flex-col items-center gap-4 px-2 py-5">
+      <nav className="flex flex-col items-center gap-4 px-2 py-[18px]">
         <Tooltip>
           <TooltipTrigger asChild>
-            <Link
-              href="#"
-              className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setShowSettings(true)}
+              className="flex !h-9 !w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
             >
-              <Settings className="h-5 w-5" />
+              <Settings className="!h-5 !w-5" />
               <span className="sr-only">Settings</span>
-            </Link>
+            </Button>
           </TooltipTrigger>
           <TooltipContent side="right">Settings</TooltipContent>
         </Tooltip>
       </nav>
+
+      <SettingsModal open={showSettings} onOpenChange={setShowSettings} />
     </aside>
   )
 }