@hienlh/ppm 0.2.20 → 0.2.21

package/src/web/components/layout/project-bar.tsx

@@ -0,0 +1,329 @@
+import { useState, useCallback } from "react";
+import { Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, Bug } from "lucide-react";
+import { openBugReport } from "@/lib/report-bug";
+import { useProjectStore, resolveOrder } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { resolveProjectColor, PROJECT_PALETTE } from "@/lib/project-palette";
+import { getProjectInitials } from "@/lib/project-avatar";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { AddProjectForm } from "@/components/layout/add-project-form";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Avatar circle
+// ---------------------------------------------------------------------------
+function ProjectAvatar({ name, color, active, allNames }: {
+  name: string; color: string; active: boolean; allNames: string[];
+}) {
+  const initials = getProjectInitials(name, allNames);
+  return (
+    <div
+      className={cn(
+        "size-10 rounded-full flex items-center justify-center text-xs font-bold text-white select-none shrink-0",
+        active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+      )}
+      style={{ background: color }}
+    >
+      {initials}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Color picker popover (inline in dialog)
+// ---------------------------------------------------------------------------
+function ColorPicker({ current, onChange }: { current: string; onChange: (c: string) => void }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {PROJECT_PALETTE.map((c) => (
+        <button
+          key={c}
+          type="button"
+          onClick={() => onChange(c)}
+          className={cn(
+            "size-8 rounded-full border-2 transition-all",
+            current === c ? "border-primary scale-110" : "border-transparent hover:scale-105",
+          )}
+          style={{ background: c }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ProjectBar
+// ---------------------------------------------------------------------------
+export function ProjectBar() {
+  const { projects, activeProject, setActiveProject, setProjectColor, moveProject, renameProject, deleteProject, customOrder } = useProjectStore();
+  const openTab = useTabStore((s) => s.openTab);
+  const version = useSettingsStore((s) => s.version);
+  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+
+  const ordered = resolveOrder(projects, customOrder);
+  const allNames = ordered.map((p) => p.name);
+
+  // Rename dialog
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [renameTarget, setRenameTarget] = useState("");
+  const [renameValue, setRenameValue] = useState("");
+
+  // Delete confirm dialog
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState("");
+
+  // Add project dialog
+  const [addOpen, setAddOpen] = useState(false);
+
+  // Color picker dialog
+  const [colorOpen, setColorOpen] = useState(false);
+  const [colorTarget, setColorTarget] = useState("");
+  const [colorValue, setColorValue] = useState("");
+  const [colorSaving, setColorSaving] = useState(false);
+
+  const openRename = useCallback((name: string) => {
+    setRenameTarget(name);
+    setRenameValue(name);
+    setRenameOpen(true);
+  }, []);
+
+  const openDelete = useCallback((name: string) => {
+    setDeleteTarget(name);
+    setDeleteOpen(true);
+  }, []);
+
+  const openColor = useCallback((name: string, currentColor: string) => {
+    setColorTarget(name);
+    setColorValue(currentColor);
+    setColorOpen(true);
+  }, []);
+
+  async function handleRename() {
+    if (!renameValue.trim() || renameValue === renameTarget) { setRenameOpen(false); return; }
+    try { await renameProject(renameTarget, renameValue.trim()); } catch { /* ignore */ }
+    setRenameOpen(false);
+  }
+
+  async function handleDelete() {
+    try { await deleteProject(deleteTarget); } catch { /* ignore */ }
+    setDeleteOpen(false);
+  }
+
+  async function handleColorSave() {
+    setColorSaving(true);
+    try {
+      await setProjectColor(colorTarget, colorValue);
+      setColorOpen(false);
+    } catch (e) {
+      console.error("Failed to save color:", e);
+    } finally {
+      setColorSaving(false);
+    }
+  }
+
+  function handleAddProject() {
+    setAddOpen(true);
+  }
+
+  function handleSettings() {
+    openTab({ type: "settings", title: "Settings", projectId: null, closable: true });
+  }
+
+  return (
+    <aside className="hidden md:flex flex-col w-[52px] min-w-[52px] bg-background border-r border-border overflow-hidden">
+      {/* Logo + version */}
+      <div className="shrink-0 flex flex-col items-center justify-center h-[41px] border-b border-border gap-0.5">
+        <span className="text-[11px] font-bold text-primary leading-none">PPM</span>
+        {version && (
+          <span className="text-[8px] text-text-subtle leading-none">v{version}</span>
+        )}
+      </div>
+
+      {/* Project avatar list */}
+      <div className="flex-1 overflow-y-auto py-2 flex flex-col items-center gap-2 min-h-0">
+        {ordered.map((project, idx) => {
+          const color = resolveProjectColor(project.color, idx);
+          const isActive = activeProject?.name === project.name;
+          return (
+            <ContextMenu key={project.name}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <ContextMenuTrigger asChild>
+                    <button
+                      onClick={() => setActiveProject(project)}
+                      className="p-1 rounded-lg hover:bg-surface-elevated transition-colors"
+                    >
+                      <ProjectAvatar name={project.name} color={color} active={isActive} allNames={allNames} />
+                    </button>
+                  </ContextMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-[200px]">
+                  <p className="font-medium">{project.name}</p>
+                  <p className="text-xs text-text-subtle truncate">{project.path}</p>
+                </TooltipContent>
+              </Tooltip>
+              <ContextMenuContent>
+                <ContextMenuItem onClick={() => openRename(project.name)}>
+                  <Pencil className="size-3.5 mr-2" /> Rename
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => openColor(project.name, color)}>
+                  <Palette className="size-3.5 mr-2" /> Change Color
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem
+                  disabled={idx === 0}
+                  onClick={() => moveProject(project.name, "up")}
+                >
+                  <ChevronUp className="size-3.5 mr-2" /> Move Up
+                </ContextMenuItem>
+                <ContextMenuItem
+                  disabled={idx === ordered.length - 1}
+                  onClick={() => moveProject(project.name, "down")}
+                >
+                  <ChevronDown className="size-3.5 mr-2" /> Move Down
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem
+                  className="text-destructive focus:text-destructive"
+                  onClick={() => openDelete(project.name)}
+                >
+                  <Trash2 className="size-3.5 mr-2" /> Delete
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
+          );
+        })}
+
+        {/* Add project button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleAddProject}
+              className="size-10 rounded-full border-2 border-dashed border-border flex items-center justify-center text-text-subtle hover:border-primary hover:text-primary transition-colors"
+            >
+              <Plus className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Add Project</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Footer: report bug + settings */}
+      <div className="shrink-0 flex flex-col items-center gap-1 py-2 border-t border-border">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleReportBug}
+              className="flex items-center justify-center size-8 rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
+            >
+              <Bug className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Report Bug</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleSettings}
+              className="flex items-center justify-center size-8 rounded-md text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
+            >
+              <Settings className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Settings</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Add project dialog */}
+      <Dialog open={addOpen} onOpenChange={setAddOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Add Project</DialogTitle>
+          </DialogHeader>
+          <AddProjectForm
+            onSuccess={() => setAddOpen(false)}
+            onCancel={() => setAddOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Rename dialog */}
+      <Dialog open={renameOpen} onOpenChange={setRenameOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Rename Project</DialogTitle>
+          </DialogHeader>
+          <input
+            type="text"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleRename(); }}
+            className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+            autoFocus
+          />
+          <DialogFooter>
+            <button onClick={() => setRenameOpen(false)} className="px-3 py-1.5 text-sm text-text-secondary hover:text-foreground transition-colors">
+              Cancel
+            </button>
+            <button onClick={handleRename} className="px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
+              Rename
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirm dialog */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Delete Project</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-text-secondary">
+            Remove <strong className="text-foreground">{deleteTarget}</strong> from PPM? The files on disk won't be deleted.
+          </p>
+          <DialogFooter>
+            <button onClick={() => setDeleteOpen(false)} className="px-3 py-1.5 text-sm text-text-secondary hover:text-foreground transition-colors">
+              Cancel
+            </button>
+            <button onClick={handleDelete} className="px-3 py-1.5 text-sm bg-destructive text-white rounded-md hover:bg-destructive/90 transition-colors">
+              Delete
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Color picker dialog */}
+      <Dialog open={colorOpen} onOpenChange={setColorOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Change Color</DialogTitle>
+          </DialogHeader>
+          <ColorPicker current={colorValue} onChange={setColorValue} />
+          <DialogFooter>
+            <button onClick={() => setColorOpen(false)} className="px-3 py-1.5 text-sm text-text-secondary hover:text-foreground transition-colors">
+              Cancel
+            </button>
+            <button onClick={handleColorSave} disabled={colorSaving} className="px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50">
+              {colorSaving ? "Saving…" : "Save"}
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </aside>
+  );
+}

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -0,0 +1,345 @@
+import { useState, useRef, useCallback } from "react";
+import { X, Check, Plus, Settings, ChevronUp, ChevronDown, Pencil, Trash2, Palette, ArrowLeft } from "lucide-react";
+import { useProjectStore, resolveOrder } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { AddProjectForm } from "@/components/layout/add-project-form";
+import { resolveProjectColor, PROJECT_PALETTE } from "@/lib/project-palette";
+import { getProjectInitials } from "@/lib/project-avatar";
+import { cn } from "@/lib/utils";
+
+interface ProjectBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// Action sheet for long-press context menu
+interface ActionSheetItem {
+  label: string;
+  icon: React.ElementType;
+  onClick: () => void;
+  destructive?: boolean;
+}
+
+function ProjectAvatar({ name, color, allNames }: { name: string; color: string; allNames: string[] }) {
+  const initials = getProjectInitials(name, allNames);
+  return (
+    <div
+      className="size-10 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
+      style={{ background: color }}
+    >
+      {initials}
+    </div>
+  );
+}
+
+export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps) {
+  const { projects, activeProject, setActiveProject, setProjectColor, moveProject, renameProject, deleteProject, customOrder } = useProjectStore();
+  const openTab = useTabStore((s) => s.openTab);
+  const version = useSettingsStore((s) => s.version);
+
+  const ordered = resolveOrder(projects, customOrder);
+  const allNames = ordered.map((p) => p.name);
+
+  // View: "list" | "add"
+  const [view, setView] = useState<"list" | "add">("list");
+
+  // Long-press state for action sheet
+  const [actionTarget, setActionTarget] = useState<string | null>(null);
+  const [actionColor, setActionColor] = useState("");
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Rename inline state
+  const [renameTarget, setRenameTarget] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+
+  const startLongPress = useCallback((name: string) => {
+    longPressTimer.current = setTimeout(() => setActionTarget(name), 400);
+  }, []);
+
+  const cancelLongPress = useCallback(() => {
+    if (longPressTimer.current) { clearTimeout(longPressTimer.current); longPressTimer.current = null; }
+  }, []);
+
+  function handleClose() {
+    setView("list");
+    onClose();
+  }
+
+  function handleSelectProject(name: string) {
+    const project = projects.find((p) => p.name === name);
+    if (project) { setActiveProject(project); handleClose(); }
+  }
+
+  function handleAddProject() {
+    setView("add");
+  }
+
+  function handleSettings() {
+    openTab({ type: "settings", title: "Settings", projectId: null, closable: true });
+    handleClose();
+  }
+
+  async function handleRename() {
+    if (!renameTarget || !renameValue.trim() || renameValue === renameTarget) {
+      setRenameTarget(null);
+      return;
+    }
+    try { await renameProject(renameTarget, renameValue.trim()); } catch { /* ignore */ }
+    setRenameTarget(null);
+  }
+
+  async function handleDelete(name: string) {
+    setActionTarget(null);
+    try { await deleteProject(name); } catch { /* ignore */ }
+  }
+
+  async function handleColorSave(name: string, color: string) {
+    try {
+      await setProjectColor(name, color);
+      setColorPickerOpen(false);
+      setActionTarget(null);
+    } catch (e) {
+      console.error("Failed to save color:", e);
+    }
+  }
+
+  const actionProject = actionTarget ? ordered.find((p) => p.name === actionTarget) : null;
+  const actionIdx = actionTarget ? ordered.findIndex((p) => p.name === actionTarget) : -1;
+
+  const actionItems: ActionSheetItem[] = actionTarget ? [
+    {
+      label: "Rename",
+      icon: Pencil,
+      onClick: () => {
+        setRenameValue(actionTarget);
+        setRenameTarget(actionTarget);
+        setActionTarget(null);
+      },
+    },
+    {
+      label: "Change Color",
+      icon: Palette,
+      onClick: () => {
+        const idx = ordered.findIndex((p) => p.name === actionTarget);
+        const project = ordered[idx];
+        setActionColor(resolveProjectColor(project?.color, idx));
+        setColorPickerOpen(true);
+      },
+    },
+    ...(actionIdx > 0 ? [{
+      label: "Move Up",
+      icon: ChevronUp,
+      onClick: async () => {
+        await moveProject(actionTarget, "up");
+        setActionTarget(null);
+      },
+    }] : []),
+    ...(actionIdx < ordered.length - 1 ? [{
+      label: "Move Down",
+      icon: ChevronDown,
+      onClick: async () => {
+        await moveProject(actionTarget, "down");
+        setActionTarget(null);
+      },
+    }] : []),
+    {
+      label: "Delete",
+      icon: Trash2,
+      destructive: true,
+      onClick: () => handleDelete(actionTarget),
+    },
+  ] : [];
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={cn(
+          "fixed inset-0 z-50 md:hidden transition-opacity duration-200",
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+        onClick={handleClose}
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      />
+
+      {/* Sheet */}
+      <div
+        className={cn(
+          "fixed bottom-0 left-0 right-0 z-50 md:hidden bg-background rounded-t-2xl border-t border-border shadow-2xl",
+          "transition-transform duration-300 ease-out",
+          isOpen ? "translate-y-0" : "translate-y-full",
+        )}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-border" />
+        </div>
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+          <div className="flex items-center gap-2">
+            {view === "add" && (
+              <button
+                onClick={() => setView("list")}
+                className="flex items-center justify-center size-7 rounded-md hover:bg-surface-elevated transition-colors"
+              >
+                <ArrowLeft className="size-4" />
+              </button>
+            )}
+            <span className="text-sm font-semibold">{view === "add" ? "Add Project" : "Projects"}</span>
+          </div>
+          <button
+            onClick={handleClose}
+            className="flex items-center justify-center size-7 rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* Add project form */}
+        {view === "add" && (
+          <div className="px-4 py-4">
+            <AddProjectForm
+              onSuccess={() => { setView("list"); onClose(); }}
+              onCancel={() => setView("list")}
+              footerClassName="pt-2"
+            />
+          </div>
+        )}
+
+        {/* Project list */}
+        <div className={view === "add" ? "hidden" : "max-h-[60vh] overflow-y-auto"}>
+          {ordered.map((project, idx) => {
+            const color = resolveProjectColor(project.color, idx);
+            const isActive = activeProject?.name === project.name;
+            const isRenaming = renameTarget === project.name;
+
+            return (
+              <div
+                key={project.name}
+                className={cn(
+                  "flex items-center gap-3 px-4 py-3 transition-colors active:bg-surface-elevated",
+                  isActive && "bg-accent/10",
+                )}
+                onClick={() => !isRenaming && handleSelectProject(project.name)}
+                onTouchStart={() => startLongPress(project.name)}
+                onTouchEnd={cancelLongPress}
+                onTouchMove={cancelLongPress}
+              >
+                <ProjectAvatar name={project.name} color={color} allNames={allNames} />
+
+                <div className="flex-1 min-w-0">
+                  {isRenaming ? (
+                    <input
+                      type="text"
+                      value={renameValue}
+                      onChange={(e) => setRenameValue(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleRename();
+                        if (e.key === "Escape") setRenameTarget(null);
+                      }}
+                      onBlur={handleRename}
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-full bg-transparent border-b border-primary text-sm outline-none"
+                      autoFocus
+                    />
+                  ) : (
+                    <p className="text-sm font-medium truncate">{project.name}</p>
+                  )}
+                  <p className="text-xs text-text-subtle truncate">{project.path}</p>
+                </div>
+
+                {isActive && <Check className="size-4 text-primary shrink-0" />}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Footer actions */}
+        <div className="border-t border-border">
+          <button
+            onClick={handleAddProject}
+            className="w-full flex items-center gap-3 px-4 py-3 text-text-secondary hover:bg-surface-elevated transition-colors"
+          >
+            <Plus className="size-4 shrink-0" />
+            <span className="text-sm">Add Project</span>
+          </button>
+        </div>
+        <div className="flex items-center justify-between px-4 py-3 border-t border-border">
+          <button
+            onClick={handleSettings}
+            className="flex items-center gap-2 text-text-secondary hover:text-foreground transition-colors"
+          >
+            <Settings className="size-4" />
+            <span className="text-sm">Settings</span>
+          </button>
+          {version && <span className="text-xs text-text-subtle">v{version}</span>}
+        </div>
+      </div>
+
+      {/* Long-press action sheet */}
+      {actionTarget && !colorPickerOpen && (
+        <>
+          <div className="fixed inset-0 z-[60] md:hidden" onClick={() => setActionTarget(null)} />
+          <div className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface border-t border-border rounded-t-2xl shadow-2xl animate-in slide-in-from-bottom-2 duration-150">
+            <div className="px-4 py-2 border-b border-border">
+              <p className="text-xs font-medium text-text-secondary">{actionTarget}</p>
+            </div>
+            {actionItems.map((item) => {
+              const Icon = item.icon;
+              return (
+                <button
+                  key={item.label}
+                  onClick={item.onClick}
+                  className={cn(
+                    "w-full flex items-center gap-3 px-4 py-3 text-sm transition-colors active:bg-surface-elevated",
+                    item.destructive ? "text-destructive" : "text-foreground",
+                  )}
+                >
+                  <Icon className="size-4 shrink-0" />
+                  {item.label}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Color picker sheet */}
+      {colorPickerOpen && actionTarget && (
+        <>
+          <div className="fixed inset-0 z-[60] md:hidden" onClick={() => { setColorPickerOpen(false); setActionTarget(null); }} />
+          <div className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface border-t border-border rounded-t-2xl shadow-2xl p-4 space-y-4">
+            <p className="text-sm font-medium">Change Color</p>
+            <div className="flex flex-wrap gap-3">
+              {PROJECT_PALETTE.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setActionColor(c)}
+                  className={cn(
+                    "size-9 rounded-full border-2 transition-all",
+                    actionColor === c ? "border-primary scale-110" : "border-transparent",
+                  )}
+                  style={{ background: c }}
+                />
+              ))}
+            </div>
+            <div className="flex gap-2 pt-2">
+              <button
+                onClick={() => { setColorPickerOpen(false); setActionTarget(null); }}
+                className="flex-1 py-2 text-sm text-text-secondary border border-border rounded-md"
+              >Cancel</button>
+              <button
+                onClick={() => handleColorSave(actionTarget, actionColor)}
+                className="flex-1 py-2 text-sm bg-primary text-white rounded-md"
+              >Save</button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}