nobalmako 1.0.0

package/src/components/EditTeamDialog.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Edit, Shield, Palette, Type, AlignLeft } from "lucide-react";
+import { useTeams } from "@/hooks/use-teams";
+
+interface EditTeamDialogProps {
+  teamId: string;
+  children?: React.ReactNode;
+}
+
+export default function EditTeamDialog({ teamId, children }: EditTeamDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { teams } = useTeams();
+  const queryClient = useQueryClient();
+
+  const team = teams?.find(t => t.id === teamId);
+
+  useEffect(() => {
+    if (team && open) {
+      setName(team.name);
+      setDescription(team.description || "");
+      setColor(team.color || "#3b82f6");
+    }
+  }, [team, open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/teams', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: teamId, name, description, color }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ['teams'] });
+      } else {
+        setError(data.error || "Failed to update team");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm">
+            <Edit className="h-4 w-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2 mb-1">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+              <Shield className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Edit Project</DialogTitle>
+          </div>
+          <DialogDescription>
+            Update project metadata and branding for {team?.name}.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6 pt-4">
+          {error && (
+            <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+              {error}
+            </div>
+          )}
+          
+          <div className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name" className="flex items-center gap-2">
+                <Type className="h-3.5 w-3.5 text-muted-foreground" />
+                Project Name
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Acme API"
+                required
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="description" className="flex items-center gap-2">
+                <AlignLeft className="h-3.5 w-3.5 text-muted-foreground" />
+                Description <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                className="resize-none min-h-[100px] bg-muted/30 border-muted"
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="color" className="flex items-center gap-2">
+                <Palette className="h-3.5 w-3.5 text-muted-foreground" />
+                Identity Color
+              </Label>
+              <div className="flex items-center gap-4">
+                <Input
+                  id="color"
+                  type="color"
+                  value={color}
+                  onChange={(e) => setColor(e.target.value)}
+                  className="w-14 h-11 p-1 rounded-md border-muted cursor-pointer"
+                  disabled={isLoading}
+                />
+                <div className="flex-1 px-3 py-2 bg-muted/30 border border-muted rounded-md flex items-center justify-between">
+                  <span className="text-sm font-mono uppercase font-semibold text-muted-foreground">
+                    {color}
+                  </span>
+                  <div 
+                    className="w-4 h-4 rounded-full shadow-sm" 
+                    style={{ backgroundColor: color }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading} className="px-8">
+              {isLoading ? "Updating..." : "Update Project"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/EditVariableDialog.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Edit, Eye, EyeOff, Database, Key, Type, AlignLeft, ShieldCheck, Calendar } from "lucide-react";
+import { useVariables } from "@/hooks/use-variables";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface EditVariableDialogProps {
+  variableId: string;
+  children?: React.ReactNode;
+}
+
+export default function EditVariableDialog({ variableId, children }: EditVariableDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [key, setKey] = useState("");
+  const [value, setValue] = useState("");
+  const [description, setDescription] = useState("");
+  const [isSecret, setIsSecret] = useState(true);
+  const [expiresAt, setExpiresAt] = useState("");
+  const [showValue, setShowValue] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { variables } = useVariables();
+  const queryClient = useQueryClient();
+
+  const variable = variables?.find(v => v.id === variableId);
+
+  useEffect(() => {
+    if (variable && open) {
+      setKey(variable.key);
+      setValue(variable.value);
+      setDescription(variable.description || "");
+      setIsSecret(variable.isSecret);
+      setExpiresAt(variable.expiresAt ? new Date(variable.expiresAt).toISOString().split('T')[0] : "");
+      setShowValue(false);
+    }
+  }, [variable, open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/variables', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: variableId, key, value, description, isSecret, expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ['variables'] });
+      } else {
+        setError(data.error || "Failed to update variable");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <Edit className="h-4 w-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2 mb-1">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+              <Database className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Edit Variable</DialogTitle>
+          </div>
+          <DialogDescription>
+            Update the key, value, or security settings for this variable.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6 pt-4">
+          {error && (
+            <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+              {error}
+            </div>
+          )}
+          
+          <div className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="key" className="flex items-center gap-2">
+                <Type className="h-3.5 w-3.5 text-muted-foreground" />
+                Variable Key
+              </Label>
+              <Input
+                id="key"
+                value={key}
+                onChange={(e) => setKey(e.target.value)}
+                placeholder="e.g. DATABASE_URL"
+                required
+                disabled={isLoading}
+                className="bg-muted/30 border-muted font-mono text-sm"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="value" className="flex items-center gap-2">
+                  <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                  Value
+                </Label>
+                {isSecret && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-muted-foreground"
+                    onClick={() => setShowValue(!showValue)}
+                    disabled={isLoading}
+                  >
+                    {showValue ? <EyeOff className="h-3.5 w-3.5 mr-1.5" /> : <Eye className="h-3.5 w-3.5 mr-1.5" />}
+                    {showValue ? "Hide" : "Show"}
+                  </Button>
+                )}
+              </div>
+              <div className="relative">
+                <Input
+                  id="value"
+                  type={isSecret && !showValue ? "password" : "text"}
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  placeholder="Enter variable value"
+                  required
+                  disabled={isLoading}
+                  className="bg-muted/30 border-muted font-mono text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="description" className="flex items-center gap-2">
+                <AlignLeft className="h-3.5 w-3.5 text-muted-foreground" />
+                Description <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Input
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="What is this variable for?"
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="expiresAt" className="flex items-center gap-2">
+                <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
+                Expiration Date <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Input
+                id="expiresAt"
+                type="date"
+                value={expiresAt}
+                onChange={(e) => setExpiresAt(e.target.value)}
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="flex items-center space-x-3 p-3 bg-primary/5 rounded-lg border border-primary/10">
+              <Checkbox
+                id="isSecret"
+                checked={isSecret}
+                onCheckedChange={(checked) => setIsSecret(!!checked)}
+                disabled={isLoading}
+                className="data-[state=checked]:bg-primary"
+              />
+              <div className="grid gap-1.5 leading-none">
+                <Label
+                  htmlFor="isSecret"
+                  className="text-sm font-medium leading-none cursor-pointer flex items-center gap-2"
+                >
+                  <ShieldCheck className="h-3.5 w-3.5 text-primary" />
+                  Encrypt as Secret
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Secrets are encrypted at rest and masked in the UI by default.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading} className="px-8 shadow-sm">
+              {isLoading ? "Updating..." : "Update Variable"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}