tower-studio 0.1.1 → 0.1.3

package/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,662 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import {
+  Archive, Plus, Pencil, Trash2,
+  MoreHorizontal, ChevronsLeft, Tag, FileText, FolderOpen, Gauge,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createWorkspace, updateWorkspace, deleteWorkspace } from "@/actions/workspace-actions";
+import { getLabelsForWorkspace, createLabel, deleteLabel } from "@/actions/label-actions";
+import { useI18n } from "@/lib/i18n";
+import { toast } from "sonner";
+
+const WORKSPACE_ICONS: string[] = ["\u{1F4CB}","\u{1F680}","\u{1F3AF}","\u{1F4A1}","\u{1F527}","\u{1F4E6}","\u{1F3A8}","\u{1F4CA}","\u{1F52C}","\u{1F31F}","\u{1F4DD}","\u{1F3D7}\uFE0F"];
+
+interface WorkspaceItem {
+  id: string;
+  name: string;
+  description: string | null;
+  updatedAt: Date;
+}
+
+interface AppSidebarProps {
+  workspaces: WorkspaceItem[];
+}
+
+export function AppSidebar({ workspaces }: AppSidebarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { t } = useI18n();
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Read collapsed state from localStorage after hydration to avoid mismatch
+  useEffect(() => {
+    const saved = localStorage.getItem("sidebar-collapsed");
+    if (saved === "true") setCollapsed(true);
+  }, []);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showLabelManager, setShowLabelManager] = useState(false);
+  const [labelManagerWsId, setLabelManagerWsId] = useState<string | null>(null);
+  const [dialogName, setDialogName] = useState("");
+  const [dialogIcon, setDialogIcon] = useState(WORKSPACE_ICONS[0]);
+  const [editingWsId, setEditingWsId] = useState<string | null>(null);
+
+  const activeWorkspaceId = pathname.split("/workspaces/")[1]?.split("/")[0];
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem("sidebar-collapsed", String(next));
+      return next;
+    });
+  }, []);
+
+  const handleCreate = useCallback(async () => {
+    if (!dialogName.trim()) return;
+    const ws = await createWorkspace({ name: dialogName.trim(), description: dialogIcon });
+    setDialogName("");
+    setDialogIcon(WORKSPACE_ICONS[0]);
+    setShowCreateDialog(false);
+    router.refresh();
+    router.push(`/workspaces/${ws.id}`);
+  }, [dialogName, dialogIcon, router]);
+
+  const handleEdit = useCallback(async () => {
+    if (!dialogName.trim() || !editingWsId) return;
+    await updateWorkspace(editingWsId, { name: dialogName.trim(), description: dialogIcon });
+    setDialogName("");
+    setShowEditDialog(false);
+    setEditingWsId(null);
+    router.refresh();
+  }, [dialogName, dialogIcon, editingWsId, router]);
+
+  const openEditDialog = useCallback((ws: WorkspaceItem) => {
+    setEditingWsId(ws.id);
+    setDialogName(ws.name);
+    setDialogIcon(ws.description && WORKSPACE_ICONS.includes(ws.description) ? ws.description : WORKSPACE_ICONS[0]);
+    setShowEditDialog(true);
+  }, []);
+
+  const handleDelete = useCallback(async (id: string, name: string) => {
+    if (workspaces.length <= 1) {
+      toast.error(t("sidebar.lastWorkspaceError"));
+      return;
+    }
+    if (!confirm(t("sidebar.deleteConfirm", { name }))) return;
+    try {
+      await deleteWorkspace(id);
+      router.refresh();
+      if (activeWorkspaceId === id) router.push("/workspaces");
+    } catch {
+      toast.error(t("sidebar.lastWorkspaceError"));
+    }
+  }, [activeWorkspaceId, router, t, workspaces.length]);
+
+  const openLabelManager = useCallback((wsId: string) => {
+    setLabelManagerWsId(wsId);
+    setShowLabelManager(true);
+  }, []);
+
+  const getIcon = (ws: WorkspaceItem) => {
+    if (ws.description && WORKSPACE_ICONS.includes(ws.description)) return ws.description;
+    return ws.name.charAt(0).toUpperCase();
+  };
+
+  // Collapsed view
+  if (collapsed) {
+    return (
+      <aside className="flex h-screen w-14 flex-col items-center border-r border-border bg-sidebar py-3">
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                onClick={toggleCollapsed}
+                className="mb-4 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 ring-1 ring-primary/20 transition-transform hover:scale-105"
+              />
+            }
+          >
+            <img src="/logo.png" alt="Tower" className="h-6 w-6 rounded" />
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>{t("sidebar.expand")}</TooltipContent>
+        </Tooltip>
+
+        <ScrollArea className="flex-1 min-h-0"><div className="flex flex-col items-center gap-1 px-0.5 pt-1">
+          {workspaces.map((ws) => {
+            const isActive = activeWorkspaceId === ws.id;
+            const icon = getIcon(ws);
+            return (
+              <Tooltip key={ws.id}>
+                <TooltipTrigger
+                  render={
+                    <button
+                      onClick={() => { if (!isActive) router.push(`/workspaces/${ws.id}`); }}
+                      className={`flex h-9 w-9 items-center justify-center rounded-lg transition-all ${
+                        isActive
+                          ? "ring-1 ring-primary/20 text-foreground cursor-default"
+                          : "text-muted-foreground hover:text-foreground cursor-pointer"
+                      }`}
+                    />
+                  }
+                >
+                  <span className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-sm">
+                    {WORKSPACE_ICONS.includes(icon) ? icon : <span className="text-xs font-semibold">{icon}</span>}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>{ws.name}</TooltipContent>
+              </Tooltip>
+            );
+          })}
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  data-tour="create-workspace"
+                  onClick={() => setShowCreateDialog(true)}
+                  className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                />
+              }
+            >
+              <Plus className="h-4 w-4" />
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>{t("sidebar.newWorkspace")}</TooltipContent>
+          </Tooltip>
+        </div></ScrollArea>
+
+        <div className="mt-2 flex flex-col items-center gap-1">
+          {(() => {
+            const wsId = activeWorkspaceId || workspaces[0]?.id;
+            if (!wsId) return null;
+            return (
+              <>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        onClick={() => router.push(`/workspaces/${wsId}/notes`)}
+                        className={`rounded-lg p-2 transition-colors ${
+                          pathname.includes("/notes")
+                            ? "text-foreground bg-accent"
+                            : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                        }`}
+                      />
+                    }
+                  >
+                    <FileText className="h-4 w-4" />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>{t("sidebar.notes")}</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        onClick={() => router.push(`/workspaces/${wsId}/assets`)}
+                        className={`rounded-lg p-2 transition-colors ${
+                          pathname.includes("/assets")
+                            ? "text-foreground bg-accent"
+                            : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                        }`}
+                      />
+                    }
+                  >
+                    <FolderOpen className="h-4 w-4" />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>{t("sidebar.assets")}</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        onClick={() => router.push(`/workspaces/${wsId}/archive`)}
+                        className={`rounded-lg p-2 transition-colors ${
+                          pathname.includes("/archive")
+                            ? "text-foreground bg-accent"
+                            : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                        }`}
+                      />
+                    }
+                  >
+                    <Archive className="h-4 w-4" />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>{t("sidebar.archive")}</TooltipContent>
+                </Tooltip>
+              </>
+            );
+          })()}
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  onClick={() => router.push("/missions")}
+                  className={`rounded-lg p-2 transition-colors ${
+                    pathname === "/missions"
+                      ? "text-foreground bg-accent"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                  }`}
+                />
+              }
+            >
+              <Gauge className="h-4 w-4" />
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>{t("missions.navLabel")}</TooltipContent>
+          </Tooltip>
+        </div>
+
+        <WorkspaceDialog
+          open={showCreateDialog}
+          onOpenChange={setShowCreateDialog}
+          title={t("workspace.create")}
+          name={dialogName}
+          onNameChange={setDialogName}
+          icon={dialogIcon}
+          onIconChange={setDialogIcon}
+          onSubmit={handleCreate}
+          submitLabel={t("common.create")}
+          nameLabel={t("workspace.name")}
+          iconLabel={t("workspace.icon")}
+          namePlaceholder={t("workspace.namePlaceholder")}
+          cancelLabel={t("common.cancel")}
+        />
+      </aside>
+    );
+  }
+
+  // Expanded view
+  return (
+    <aside className="noise relative flex h-screen w-56 flex-col border-r border-border bg-sidebar">
+      {/* Logo */}
+      <div className="relative z-10 flex items-center gap-3 px-4 py-4">
+        <img src="/logo.png" alt="Tower" className="h-9 w-9 rounded-lg" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold tracking-tight text-foreground">Tower</div>
+          <div className="text-[10px] font-medium uppercase tracking-widest text-muted-foreground">Studio</div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={toggleCollapsed}
+          className="text-muted-foreground"
+          title={t("sidebar.collapse")}
+        >
+          <ChevronsLeft className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Workspace Header */}
+      <div className="relative z-10 flex items-center justify-between px-4 py-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t("sidebar.workspace")}</span>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="text-muted-foreground"
+          data-tour="create-workspace"
+          onClick={() => { setDialogName(""); setDialogIcon(WORKSPACE_ICONS[0]); setShowCreateDialog(true); }}
+          title={t("sidebar.newWorkspace")}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Workspace List */}
+      <ScrollArea className="relative z-10 mt-2 flex-1 min-h-0">
+        <div className="px-2 py-1">
+        {workspaces.map((ws) => {
+          const isActive = activeWorkspaceId === ws.id;
+          const icon = getIcon(ws);
+
+          return (
+            <div
+              key={ws.id}
+              className={`group relative flex items-center rounded-lg transition-all ${
+                isActive ? "bg-accent ring-1 ring-primary/15" : "hover:bg-accent/60"
+              }`}
+            >
+              <button
+                onClick={() => { if (!isActive) router.push(`/workspaces/${ws.id}`); }}
+                className={`flex flex-1 items-center gap-2.5 px-3 py-2.5 text-left ${isActive ? "cursor-default" : "cursor-pointer"}`}
+              >
+                <span className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-sm">
+                  {WORKSPACE_ICONS.includes(icon) ? icon : <span className="text-xs font-semibold text-muted-foreground">{icon}</span>}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className={`truncate text-sm font-medium ${isActive ? "text-foreground" : "text-secondary-foreground"}`}>
+                    {ws.name}
+                  </div>
+                  <div className="text-[11px] text-muted-foreground">{formatTime(ws.updatedAt)}</div>
+                </div>
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <button
+                      className="mr-2 rounded-md p-1 text-muted-foreground opacity-0 transition-all hover:bg-background hover:text-foreground group-hover:opacity-100"
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  }
+                >
+                  <MoreHorizontal className="h-3.5 w-3.5" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" side="right">
+                  <DropdownMenuItem onClick={() => openEditDialog(ws)}>
+                    <Pencil className="mr-2 h-3.5 w-3.5" />
+                    {t("sidebar.rename")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => openLabelManager(ws.id)}>
+                    <Tag className="mr-2 h-3.5 w-3.5" />
+                    {t("sidebar.manageLabels")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className={workspaces.length <= 1 ? "text-muted-foreground opacity-50" : "text-rose-400"}
+                    disabled={workspaces.length <= 1}
+                    onClick={() => handleDelete(ws.id, ws.name)}
+                  >
+                    <Trash2 className="mr-2 h-3.5 w-3.5" />
+                    {t("sidebar.delete")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          );
+        })}
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      <Link
+        href="/missions"
+        className={`relative z-10 flex items-center gap-2 border-t border-border px-4 py-3 text-[11px] cursor-pointer transition-colors ${
+          pathname === "/missions"
+            ? "text-foreground"
+            : "text-muted-foreground hover:text-foreground"
+        }`}
+      >
+        <Gauge className="h-3.5 w-3.5" />
+        <span>{t("missions.navLabel")}</span>
+      </Link>
+      {(() => {
+        const wsId = activeWorkspaceId || workspaces[0]?.id;
+        if (!wsId) return null;
+        return (
+          <>
+            <Link
+              href={`/workspaces/${wsId}/notes`}
+              className="relative z-10 flex items-center gap-2 border-t border-border px-4 py-3 text-[11px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+            >
+              <FileText className="h-3.5 w-3.5" />
+              <span>{t("sidebar.notes")}</span>
+            </Link>
+            <Link
+              href={`/workspaces/${wsId}/assets`}
+              className="relative z-10 flex items-center gap-2 px-4 py-3 text-[11px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+            >
+              <FolderOpen className="h-3.5 w-3.5" />
+              <span>{t("sidebar.assets")}</span>
+            </Link>
+            <Link
+              href={`/workspaces/${wsId}/archive`}
+              className="relative z-10 flex items-center gap-2 px-4 py-3 text-[11px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+            >
+              <Archive className="h-3.5 w-3.5" />
+              <span>{t("sidebar.archive")}</span>
+            </Link>
+          </>
+        );
+      })()}
+
+      {/* Create Dialog */}
+      <WorkspaceDialog
+        open={showCreateDialog}
+        onOpenChange={setShowCreateDialog}
+        title={t("workspace.create")}
+        name={dialogName}
+        onNameChange={setDialogName}
+        icon={dialogIcon}
+        onIconChange={setDialogIcon}
+        onSubmit={handleCreate}
+        submitLabel={t("common.create")}
+        nameLabel={t("workspace.name")}
+        iconLabel={t("workspace.icon")}
+        namePlaceholder={t("workspace.namePlaceholder")}
+        cancelLabel={t("common.cancel")}
+      />
+
+      {/* Edit Dialog */}
+      <WorkspaceDialog
+        open={showEditDialog}
+        onOpenChange={(open) => { setShowEditDialog(open); if (!open) setEditingWsId(null); }}
+        title={t("workspace.edit")}
+        name={dialogName}
+        onNameChange={setDialogName}
+        icon={dialogIcon}
+        onIconChange={setDialogIcon}
+        onSubmit={handleEdit}
+        submitLabel={t("common.save")}
+        nameLabel={t("workspace.name")}
+        iconLabel={t("workspace.icon")}
+        namePlaceholder={t("workspace.namePlaceholder")}
+        cancelLabel={t("common.cancel")}
+      />
+
+      {/* Label Manager Dialog */}
+      {labelManagerWsId && (
+        <LabelManagerDialog
+          open={showLabelManager}
+          onOpenChange={(open) => { setShowLabelManager(open); if (!open) setLabelManagerWsId(null); }}
+          workspaceId={labelManagerWsId}
+        />
+      )}
+    </aside>
+  );
+}
+
+// Reusable workspace create/edit dialog
+function WorkspaceDialog({
+  open, onOpenChange, title, name, onNameChange, icon, onIconChange, onSubmit, submitLabel,
+  nameLabel, iconLabel, namePlaceholder, cancelLabel,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  name: string;
+  onNameChange: (name: string) => void;
+  icon: string;
+  onIconChange: (icon: string) => void;
+  onSubmit: () => void;
+  submitLabel: string;
+  nameLabel: string;
+  iconLabel: string;
+  namePlaceholder: string;
+  cancelLabel: string;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{nameLabel}</label>
+            <Input
+              placeholder={namePlaceholder}
+              value={name}
+              onChange={(e) => onNameChange(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && e.preventDefault()}
+              className="mt-1.5"
+            />
+          </div>
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{iconLabel}</label>
+            <div className="mt-1.5 grid grid-cols-6 gap-1.5">
+              {WORKSPACE_ICONS.map((emoji) => (
+                <button
+                  key={emoji}
+                  onClick={() => onIconChange(emoji)}
+                  className={`flex h-10 w-10 items-center justify-center rounded-lg text-lg transition-all ${
+                    icon === emoji
+                      ? "bg-primary/15 ring-2 ring-primary/30 scale-110"
+                      : "bg-muted hover:bg-accent"
+                  }`}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{cancelLabel}</Button>
+          <Button
+            onClick={onSubmit}
+            disabled={!name.trim()}
+            className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
+          >
+            {submitLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Label color presets
+const LABEL_COLORS = ["#3b82f6", "#ef4444", "#f59e0b", "#10b981", "#8b5cf6", "#ec4899", "#06b6d4", "#f97316"];
+
+interface LabelItem {
+  id: string;
+  name: string;
+  color: string;
+  isBuiltin: boolean;
+}
+
+function LabelManagerDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workspaceId: string;
+}) {
+  const { t } = useI18n();
+  const [labels, setLabels] = useState<LabelItem[]>([]);
+  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState(LABEL_COLORS[0]);
+
+  useEffect(() => {
+    if (open) {
+      getLabelsForWorkspace(workspaceId).then(setLabels);
+    }
+  }, [open, workspaceId]);
+
+  const handleAdd = async () => {
+    if (!newName.trim()) return;
+    await createLabel({ name: newName.trim(), color: newColor, workspaceId });
+    const updated = await getLabelsForWorkspace(workspaceId);
+    setLabels(updated);
+    setNewName("");
+  };
+
+  const handleDelete = async (id: string) => {
+    await deleteLabel(id);
+    setLabels((prev) => prev.filter((l) => l.id !== id));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("label.manage")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 py-2">
+          {/* Existing labels */}
+          {labels.map((label) => (
+            <div key={label.id} className="flex items-center gap-2">
+              <span
+                className="h-3 w-3 rounded-full"
+                style={{ backgroundColor: label.color }}
+              />
+              <span className="flex-1 text-sm text-foreground">{label.name}</span>
+              {label.isBuiltin ? (
+                <span className="text-[10px] text-muted-foreground">
+                  {t("label.builtin")}
+                </span>
+              ) : (
+                <button
+                  onClick={() => handleDelete(label.id)}
+                  className="text-xs text-rose-400 hover:text-rose-300"
+                >
+                  {t("common.delete")}
+                </button>
+              )}
+            </div>
+          ))}
+          {/* Add new */}
+          <div className="border-t border-border pt-3">
+            <div className="flex items-center gap-2">
+              <Input
+                placeholder={t("label.name")}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && e.preventDefault()}
+                className="flex-1 h-8"
+              />
+              <Button
+                size="sm"
+                onClick={handleAdd}
+                disabled={!newName.trim()}
+                className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
+              >
+                {t("label.add")}
+              </Button>
+            </div>
+            {/* Color presets */}
+            <div className="mt-2 flex gap-1.5">
+              {LABEL_COLORS.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => setNewColor(c)}
+                  className={`h-5 w-5 rounded-full transition-all ${newColor === c ? "ring-2 ring-offset-2 ring-offset-background ring-foreground/30 scale-110" : ""}`}
+                  style={{ backgroundColor: c }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function formatTime(date: Date): string {
+  const now = Date.now();
+  const diff = now - new Date(date).getTime();
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}