@knotpad/app 0.1.0 → 0.1.2

package/components/settings/workspace-settings-client.tsx

@@ -1,363 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { useRouter } from "next/navigation";
-import { Trash2 } from "lucide-react";
-import type { KanbanStatusConfig } from "@/lib/kanban-status";
-import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
-
-const HEX_MAP: Record<string, string> = {
-  "border-zinc-700": "#3f3f46",
-  "border-red-700": "#b91c1c",
-  "border-orange-700": "#c2410c",
-  "border-amber-700": "#b45309",
-  "border-yellow-700": "#a16207",
-  "border-lime-700": "#4d7c0f",
-  "border-green-700": "#15803d",
-  "border-emerald-700": "#047857",
-  "border-teal-700": "#0f766e",
-  "border-cyan-700": "#0e7490",
-  "border-sky-700": "#0369a1",
-  "border-blue-700": "#1d4ed8",
-  "border-indigo-700": "#4338ca",
-  "border-violet-700": "#6d28d9",
-  "border-purple-700": "#7e22ce",
-  "border-fuchsia-700": "#a21caf",
-  "border-pink-700": "#be185d",
-  "border-rose-700": "#be123c",
-};
-
-function closestColorClass(hex: string): string {
-  const t = hex.replace("#", "");
-  const tr = parseInt(t.slice(0, 2), 16);
-  const tg = parseInt(t.slice(2, 4), 16);
-  const tb = parseInt(t.slice(4, 6), 16);
-  let best = "border-zinc-700";
-  let bestDist = Infinity;
-  for (const [cls, h] of Object.entries(HEX_MAP)) {
-    const s = h.replace("#", "");
-    const sr = parseInt(s.slice(0, 2), 16);
-    const sg = parseInt(s.slice(2, 4), 16);
-    const sb = parseInt(s.slice(4, 6), 16);
-    const dist = Math.sqrt((tr - sr) ** 2 + (tg - sg) ** 2 + (tb - sb) ** 2);
-    if (dist < bestDist) {
-      bestDist = dist;
-      best = cls;
-    }
-  }
-  return best;
-}
-
-function hexForClass(cls: string): string {
-  return HEX_MAP[cls] ?? "#3f3f46";
-}
-
-function ColorPicker({
-  value,
-  onChange,
-  disabled,
-}: {
-  value: string;
-  onChange: (cls: string) => void;
-  disabled?: boolean;
-}) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={() => inputRef.current?.click()}
-      style={{ backgroundColor: hexForClass(value) }}
-      className="relative h-6 w-6 shrink-0 rounded-full ring-1 ring-white/20 transition-transform hover:scale-110 disabled:opacity-50 disabled:hover:scale-100"
-      title="Pick colour"
-    >
-      <input
-        ref={inputRef}
-        type="color"
-        value={hexForClass(value)}
-        disabled={disabled}
-        onChange={(e) => onChange(closestColorClass(e.target.value))}
-        className="pointer-events-none absolute opacity-0"
-      />
-    </button>
-  );
-}
-
-type Props = {
-  workspace: { id: string; name: string; slug: string };
-  kanbanStatuses: KanbanStatusConfig[];
-  canEdit: boolean;
-};
-
-export function WorkspaceSettingsClient({ workspace, kanbanStatuses, canEdit }: Props) {
-  const router = useRouter();
-  const [name, setName] = useState(workspace.name);
-  const [statuses, setStatuses] = useState<KanbanStatusConfig[]>(kanbanStatuses);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState("");
-  const [deleteConfirm, setDeleteConfirm] = useState<{ open: boolean; index: number }>({ open: false, index: -1 });
-
-  const isDirty = useMemo(() => {
-    if (name !== workspace.name) return true;
-    if (JSON.stringify(statuses) !== JSON.stringify(kanbanStatuses)) return true;
-    return false;
-  }, [name, statuses, workspace.name, kanbanStatuses]);
-
-  useEffect(() => {
-    if (!isDirty) return;
-    function handler(e: BeforeUnloadEvent) {
-      e.preventDefault();
-    }
-    window.addEventListener("beforeunload", handler);
-    return () => window.removeEventListener("beforeunload", handler);
-  }, [isDirty]);
-
-  const handleDiscard = useCallback(() => {
-    setName(workspace.name);
-    setStatuses(kanbanStatuses);
-    setError("");
-    setSaved(false);
-  }, [workspace.name, kanbanStatuses]);
-
-  function updateStatus(index: number, patch: Partial<KanbanStatusConfig>) {
-    setStatuses((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)));
-  }
-
-  function moveStatus(index: number, direction: -1 | 1) {
-    const newIndex = index + direction;
-    if (newIndex < 0 || newIndex >= statuses.length) return;
-    setStatuses((prev) => {
-      const next = [...prev];
-      const [removed] = next.splice(index, 1);
-      next.splice(newIndex, 0, removed);
-      return next.map((s, i) => ({ ...s, order: i }));
-    });
-  }
-
-  function addStatus() {
-    const existingKeys = new Set(statuses.map((s) => s.key));
-    let idx = 1;
-    while (existingKeys.has(`STATUS_${idx}`)) idx++;
-    setStatuses((prev) => [
-      ...prev,
-      {
-        key: `STATUS_${idx}`,
-        label: "New Status",
-        color: "border-zinc-700",
-        order: prev.length,
-        isVisible: true,
-      },
-    ]);
-  }
-
-  function removeStatus(index: number) {
-    setDeleteConfirm({ open: true, index });
-  }
-
-  async function confirmDeleteStatus() {
-    const { index } = deleteConfirm;
-    setStatuses((prev) =>
-      prev
-        .filter((_, i) => i !== index)
-        .map((s, i) => ({ ...s, order: i }))
-    );
-    setDeleteConfirm({ open: false, index: -1 });
-  }
-
-  async function handleSave(e: React.FormEvent) {
-    e.preventDefault();
-    setSaving(true);
-    setError("");
-    setSaved(false);
-
-    try {
-      const [workspaceRes, statusesRes] = await Promise.all([
-        fetch("/api/workspace", {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name }),
-        }),
-        fetch("/api/workspace/kanban-statuses", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ statuses }),
-        }),
-      ]);
-
-      setSaving(false);
-
-      const workspaceOk = workspaceRes.ok;
-      const statusesOk = statusesRes.ok;
-
-      if (!workspaceOk) {
-        const d = await workspaceRes.json().catch(() => ({}));
-        setError(d.error ?? "Failed to save workspace name");
-        return;
-      }
-      if (!statusesOk) {
-        const d = await statusesRes.json().catch(() => ({}));
-        setError(d.error ?? "Failed to save Kanban statuses");
-        return;
-      }
-
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
-      router.refresh();
-    } catch {
-      setSaving(false);
-      setError("Failed to save");
-    }
-  }
-
-  return (
-    <form onSubmit={handleSave} className="max-w-lg space-y-10">
-      {/* Workspace name */}
-      <div className="space-y-6">
-        <div>
-          <h2 className="text-base font-semibold text-zinc-200">Workspace</h2>
-          <p className="text-sm text-zinc-500 mt-1">
-            Manage your workspace name and settings.
-          </p>
-        </div>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <label className="text-sm font-medium text-zinc-300">Workspace name</label>
-            <input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={!canEdit}
-              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus disabled:opacity-50"
-            />
-          </div>
-          <div className="space-y-1">
-            <label className="text-sm font-medium text-zinc-300">Slug</label>
-            <input
-              value={workspace.slug}
-              disabled
-              className="w-full rounded-md border border-zinc-800 bg-zinc-900/50 px-3 py-2 text-sm text-zinc-500"
-            />
-            <p className="text-xs text-zinc-600">Slug cannot be changed after creation.</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Kanban statuses */}
-      <div className="space-y-6">
-        <div>
-          <h2 className="text-base font-semibold text-zinc-200">Kanban Statuses</h2>
-          <p className="text-sm text-zinc-500 mt-1">
-            Customise the labels, order, and border colours for your Kanban columns.
-          </p>
-        </div>
-        <div className="space-y-2">
-          {statuses.map((status, i) => (
-            <div
-              key={status.key}
-              className="flex items-center gap-3 rounded-md border border-zinc-800 bg-zinc-900/40 px-3 py-2.5"
-            >
-              <div className="flex flex-col gap-0.5">
-                <button
-                  type="button"
-                  disabled={i === 0 || !canEdit}
-                  onClick={() => moveStatus(i, -1)}
-                  className="text-zinc-600 hover:text-zinc-400 disabled:opacity-30 disabled:hover:text-zinc-600"
-                >
-                  ▲
-                </button>
-                <button
-                  type="button"
-                  disabled={i === statuses.length - 1 || !canEdit}
-                  onClick={() => moveStatus(i, 1)}
-                  className="text-zinc-600 hover:text-zinc-400 disabled:opacity-30 disabled:hover:text-zinc-600"
-                >
-                  ▼
-                </button>
-              </div>
-
-              <div className="flex flex-1 items-center gap-3">
-                <ColorPicker
-                  value={status.color}
-                  onChange={(c) => updateStatus(i, { color: c })}
-                  disabled={!canEdit}
-                />
-                <input
-                  value={status.label}
-                  onChange={(e) => updateStatus(i, { label: e.target.value })}
-                  disabled={!canEdit}
-                  className="flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus disabled:opacity-50"
-                />
-              </div>
-
-              {canEdit && (
-                <button
-                  type="button"
-                  onClick={() => removeStatus(i)}
-                  className="text-zinc-600 hover:text-red-400 transition-colors"
-                  title="Delete status"
-                >
-                  <Trash2 size={14} />
-                </button>
-              )}
-
-              <div className="h-8 w-1.5 rounded-full" style={{ backgroundColor: hexForClass(status.color) }} />
-            </div>
-          ))}
-        </div>
-        {canEdit && (
-          <button
-            type="button"
-            onClick={addStatus}
-            className="rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 transition-colors"
-          >
-            + Add status
-          </button>
-        )}
-      </div>
-
-      {/* Unified save */}
-      {error && <p className="text-sm text-red-400">{error}</p>}
-      {canEdit && (
-        <div className="flex items-center gap-3">
-          {isDirty && (
-            <>
-              <span className="text-sm text-zinc-400">Unsaved changes</span>
-              <button
-                type="button"
-                onClick={handleDiscard}
-                className="rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 transition-colors"
-              >
-                Discard
-              </button>
-            </>
-          )}
-          <button
-            type="submit"
-            disabled={saving || !isDirty}
-            className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
-          >
-            {saving ? "Saving…" : saved ? "Saved ✓" : "Save changes"}
-          </button>
-        </div>
-      )}
-
-      {/* Company info */}
-      <div className="pt-6 border-t border-zinc-800">
-        <p className="text-[11px] text-zinc-700">
-          Knotpad is a product of Nexstrive Services · Registration: 202303272747 (TR0292898-P) · Kuala Lumpur, Malaysia
-        </p>
-      </div>
-
-      {/* Confirmation dialog */}
-      <ConfirmDangerAction
-        open={deleteConfirm.open}
-        title="Delete Status"
-        body="Delete this status? Tasks currently using it will remain but won't appear in Kanban columns."
-        confirmLabel="Delete"
-        cancelLabel="Cancel"
-        onConfirm={confirmDeleteStatus}
-        onClose={() => setDeleteConfirm({ open: false, index: -1 })}
-      />
-    </form>
-  );
-}

package/components/settings/workspace-settings-form.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-type Workspace = { id: string; name: string; slug: string };
-
-export function WorkspaceSettingsForm({
-  workspace,
-  canEdit,
-}: {
-  workspace: Workspace;
-  canEdit: boolean;
-}) {
-  const router = useRouter();
-  const [name, setName] = useState(workspace.name);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState("");
-
-  async function handleSave(e: React.FormEvent) {
-    e.preventDefault();
-    setSaving(true);
-    setError("");
-    const res = await fetch("/api/workspace", {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ name }),
-    });
-    setSaving(false);
-    if (res.ok) {
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
-      router.refresh();
-    } else {
-      const d = await res.json();
-      setError(d.error ?? "Failed to save");
-    }
-  }
-
-  return (
-    <form onSubmit={handleSave} className="space-y-4">
-      <div className="space-y-1">
-        <label className="text-sm font-medium text-zinc-300">Workspace name</label>
-        <input
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          disabled={!canEdit}
-          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus disabled:opacity-50"
-        />
-      </div>
-      <div className="space-y-1">
-        <label className="text-sm font-medium text-zinc-300">Slug</label>
-        <input
-          value={workspace.slug}
-          disabled
-          className="w-full rounded-md border border-zinc-800 bg-zinc-900/50 px-3 py-2 text-sm text-zinc-500"
-        />
-        <p className="text-xs text-zinc-600">Slug cannot be changed after creation.</p>
-      </div>
-      {error && <p className="text-sm text-red-400">{error}</p>}
-      {canEdit && (
-        <button
-          type="submit"
-          disabled={saving}
-          className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
-        >
-          {saving ? "Saving…" : saved ? "Saved ✓" : "Save changes"}
-        </button>
-      )}
-    </form>
-  );
-}

package/components/sync/conflict-viewer.tsx

@@ -1,247 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { X, CheckCircle2, Loader2, AlertTriangle } from "lucide-react";
-
-type Conflict = {
-  id: string;
-  entityType: string;
-  entityId: string;
-  label: string;
-  localValue: string;
-  cloudValue: string;
-  createdAt: string;
-};
-
-type Props = {
-  onClose: () => void;
-  onResolved?: () => void;
-};
-
-export function ConflictViewer({ onClose, onResolved }: Props) {
-  const [conflicts, setConflicts] = useState<Conflict[]>([]);
-  const [selected, setSelected] = useState<Conflict | null>(null);
-  const [customValue, setCustomValue] = useState("");
-  const [resolving, setResolving] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [resolveError, setResolveError] = useState<string | null>(null);
-
-  async function loadConflicts() {
-    setLoading(true);
-    setLoadError(null);
-    try {
-      const res = await fetch("/api/sync/conflicts");
-      if (!res.ok) throw new Error(`${res.status}`);
-      const data = await res.json();
-      setConflicts(data);
-      if (data.length > 0) setSelected((prev) => prev ?? data[0]);
-    } catch {
-      setLoadError("Couldn't load conflicts — check your connection and try again.");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    loadConflicts();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (selected) setCustomValue(selected.localValue);
-  }, [selected]);
-
-  async function resolve(resolution: "local" | "cloud" | "custom") {
-    if (!selected) return;
-    setResolving(true);
-    setResolveError(null);
-    try {
-      const res = await fetch(`/api/sync/conflicts/${selected.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          resolution,
-          value: resolution === "custom" ? customValue : undefined,
-        }),
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error((body as { error?: string }).error ?? `${res.status}`);
-      }
-      const remaining = conflicts.filter((c) => c.id !== selected.id);
-      setConflicts(remaining);
-      setSelected(remaining[0] ?? null);
-      if (remaining.length === 0) {
-        onResolved?.();
-        onClose();
-      }
-    } catch (err) {
-      setResolveError((err as Error).message ?? "Resolution failed — please try again.");
-    } finally {
-      setResolving(false);
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="flex w-[900px] max-w-[95vw] max-h-[85vh] flex-col rounded-xl border border-zinc-700 bg-zinc-950 shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-zinc-800 px-6 py-4">
-          <div className="flex items-center gap-2">
-            <AlertTriangle size={16} className="text-amber-400" />
-            <h2 className="text-sm font-semibold text-zinc-100">
-              Sync Conflicts
-            </h2>
-            {conflicts.length > 0 && (
-              <span className="rounded-full bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-400">
-                {conflicts.length} remaining
-              </span>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            className="flex h-7 w-7 items-center justify-center rounded text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        {loading && (
-          <div className="flex flex-1 items-center justify-center py-16 text-zinc-500">
-            <Loader2 size={20} className="animate-spin" />
-          </div>
-        )}
-
-        {!loading && loadError && (
-          <div className="flex flex-1 flex-col items-center justify-center gap-3 py-16">
-            <AlertTriangle size={24} className="text-red-400" />
-            <p className="text-sm text-red-300">{loadError}</p>
-            <button
-              onClick={loadConflicts}
-              className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-700"
-            >
-              Retry
-            </button>
-          </div>
-        )}
-
-        {!loading && !loadError && conflicts.length === 0 && (
-          <div className="flex flex-1 flex-col items-center justify-center gap-3 py-16">
-            <CheckCircle2 size={32} className="text-emerald-500" />
-            <p className="text-sm text-zinc-400">All conflicts resolved</p>
-          </div>
-        )}
-
-        {!loading && !loadError && selected && (
-          <div className="flex flex-1 min-h-0">
-            {/* Conflict list (left sidebar) */}
-            {conflicts.length > 1 && (
-              <aside className="w-52 shrink-0 border-r border-zinc-800 overflow-y-auto py-2">
-                {conflicts.map((c) => (
-                  <button
-                    key={c.id}
-                    onClick={() => setSelected(c)}
-                    className={`w-full px-4 py-2.5 text-left text-xs transition-colors ${
-                      selected.id === c.id
-                        ? "bg-zinc-800 text-zinc-100"
-                        : "text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200"
-                    }`}
-                  >
-                    <p className="truncate font-medium">{c.label}</p>
-                    <p className="text-zinc-600 capitalize">{c.entityType}</p>
-                  </button>
-                ))}
-              </aside>
-            )}
-
-            {/* Diff view */}
-            <div className="flex flex-1 min-w-0 flex-col overflow-hidden">
-              <div className="border-b border-zinc-800 px-6 py-3">
-                <p className="text-xs text-zinc-500">
-                  <span className="font-medium text-zinc-300">{selected.label}</span>
-                  {" · "}
-                  <span className="capitalize">{selected.entityType}</span>
-                  {" · "}
-                  <span>{new Date(selected.createdAt).toLocaleString()}</span>
-                </p>
-              </div>
-
-              <div className="grid flex-1 min-h-0 grid-cols-2 divide-x divide-zinc-800">
-                {/* Local version */}
-                <div className="flex flex-col min-h-0 overflow-hidden">
-                  <div className="border-b border-zinc-800 bg-zinc-900/50 px-4 py-2">
-                    <p className="text-xs font-medium text-blue-400">Local version</p>
-                    <p className="text-[10px] text-zinc-600">Your unsync'd changes</p>
-                  </div>
-                  <pre className="flex-1 overflow-auto p-4 text-xs leading-relaxed text-zinc-300 whitespace-pre-wrap font-mono">
-                    {selected.localValue}
-                  </pre>
-                </div>
-
-                {/* Cloud version */}
-                <div className="flex flex-col min-h-0 overflow-hidden">
-                  <div className="border-b border-zinc-800 bg-zinc-900/50 px-4 py-2">
-                    <p className="text-xs font-medium text-purple-400">Cloud version</p>
-                    <p className="text-[10px] text-zinc-600">Changes from another device</p>
-                  </div>
-                  <pre className="flex-1 overflow-auto p-4 text-xs leading-relaxed text-zinc-300 whitespace-pre-wrap font-mono">
-                    {selected.cloudValue}
-                  </pre>
-                </div>
-              </div>
-
-              {/* Custom edit */}
-              <div className="border-t border-zinc-800 px-6 py-3">
-                <p className="mb-2 text-xs text-zinc-500">
-                  Or edit a merged version manually:
-                </p>
-                <textarea
-                  value={customValue}
-                  onChange={(e) => setCustomValue(e.target.value)}
-                  rows={3}
-                  className="w-full resize-none rounded border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs text-zinc-200 font-mono placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none ring-focus"
-                />
-              </div>
-
-              {/* Actions */}
-              <div className="border-t border-zinc-800 px-6 py-4 flex items-center justify-between gap-3">
-                <div className="flex-1 min-w-0">
-                  {resolveError ? (
-                    <p className="text-xs text-red-400 truncate">{resolveError}</p>
-                  ) : (
-                    <p className="text-xs text-zinc-600">Choose which version to keep, or save your manual edit.</p>
-                  )}
-                </div>
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => resolve("local")}
-                    disabled={resolving}
-                    className="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors"
-                  >
-                    Keep local
-                  </button>
-                  <button
-                    onClick={() => resolve("cloud")}
-                    disabled={resolving}
-                    className="rounded-md bg-purple-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-purple-500 disabled:opacity-50 transition-colors"
-                  >
-                    Keep cloud
-                  </button>
-                  <button
-                    onClick={() => resolve("custom")}
-                    disabled={resolving || !customValue.trim()}
-                    className="rounded-md bg-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-600 disabled:opacity-50 transition-colors"
-                  >
-                    Save edit
-                  </button>
-                  {resolving && <Loader2 size={14} className="animate-spin text-zinc-500" />}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}