From fe26878b38254a6693cac3530576572c682fa5e3 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 3 May 2026 08:13:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20drop=20duplicate=20status=20?=
 =?UTF-8?q?=E2=80=94=20badge=20IS=20the=20editable=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The status column was rendering both a StatusBadge and a separate
EditableCell next to it, so 'done' showed twice in the same cell.
Adds a renderView prop to EditableCell so callers can override the
view-mode display; status now uses the badge as its visual, click-
to-edit behavior intact. Mobile card header drops its standalone
badge for the same reason — the body's Status row now shows the
badge inline.
---
 web/components/accounts-table.tsx | 38 ++++++++++++++-----------------
 web/components/editable-cell.tsx  | 13 +++++++++--
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/web/components/accounts-table.tsx b/web/components/accounts-table.tsx
index 9994393..7278310 100644
--- a/web/components/accounts-table.tsx
+++ b/web/components/accounts-table.tsx
@@ -195,17 +195,15 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
                     />
                   </td>
                   <td className="px-5 py-3 align-middle">
-                    <div className="flex items-center gap-2">
-                      <StatusBadge status={row.status} />
-                      <EditableCell
-                        value={row.status}
-                        label={`status for ${row.username}`}
-                        isCurrentlyEditing={editingKey === k("status")}
-                        onEditStart={() => setEditingKey(k("status"))}
-                        onEditEnd={() => setEditingKey(null)}
-                        onSave={(v) => saveCell(row.username, "status", v)}
-                      />
-                    </div>
+                    <EditableCell
+                      value={row.status}
+                      label={`status for ${row.username}`}
+                      isCurrentlyEditing={editingKey === k("status")}
+                      onEditStart={() => setEditingKey(k("status"))}
+                      onEditEnd={() => setEditingKey(null)}
+                      onSave={(v) => saveCell(row.username, "status", v)}
+                      renderView={(v) => <StatusBadge status={v} />}
+                    />
                   </td>
                   <td className="px-5 py-3 align-middle">
                     <EditableCell
@@ -243,16 +241,13 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
                 <span className="font-mono text-base font-semibold text-zinc-900">
                   {row.username}
                 </span>
-                <div className="flex items-center gap-2">
-                  <StatusBadge status={row.status} />
-                  <DeleteButton
-                    label={row.username}
-                    onClick={() => {
-                      setDeleteError(null);
-                      setDeleteTarget(row.username);
-                    }}
-                  />
-                </div>
+                <DeleteButton
+                  label={row.username}
+                  onClick={() => {
+                    setDeleteError(null);
+                    setDeleteTarget(row.username);
+                  }}
+                />
               </div>
               <dl className="mt-4 space-y-3 border-t border-zinc-100 pt-4">
                 <CardRow label="Password">
@@ -273,6 +268,7 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
                     onEditStart={() => setEditingKey(k("status"))}
                     onEditEnd={() => setEditingKey(null)}
                     onSave={(v) => saveCell(row.username, "status", v)}
+                    renderView={(v) => <StatusBadge status={v} />}
                   />
                 </CardRow>
                 <CardRow label="Link">
diff --git a/web/components/editable-cell.tsx b/web/components/editable-cell.tsx
index 2193d02..259e105 100644
--- a/web/components/editable-cell.tsx
+++ b/web/components/editable-cell.tsx
@@ -9,6 +9,12 @@ type EditableCellProps = {
   isCurrentlyEditing?: boolean;
   onEditStart?: () => void;
   onEditEnd?: () => void;
+  /**
+   * Override how the value is rendered in view mode. Use this to show
+   * something other than plain text (e.g., a status pill) — clicking
+   * the rendered element still starts edit mode.
+   */
+  renderView?: (value: string) => React.ReactNode;
 };
 
 export default function EditableCell({
@@ -18,6 +24,7 @@ export default function EditableCell({
   isCurrentlyEditing,
   onEditStart,
   onEditEnd,
+  renderView,
 }: EditableCellProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
@@ -75,10 +82,12 @@ export default function EditableCell({
         type="button"
         onClick={begin}
         aria-label={label ? `Edit ${label}` : undefined}
-        className="group flex w-full min-w-0 items-start gap-2 -mx-2 rounded-md px-2 py-1 text-left font-mono text-[13px] text-zinc-900 transition-colors hover:bg-zinc-100/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900"
+        className="group flex w-full min-w-0 items-center gap-2 -mx-2 rounded-md px-2 py-1 text-left font-mono text-[13px] text-zinc-900 transition-colors hover:bg-zinc-100/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900"
       >
         <span className="min-w-0 flex-1 break-all">
-          {value || <em className="not-italic text-zinc-400">—</em>}
+          {renderView
+            ? renderView(value)
+            : value || <em className="not-italic text-zinc-400">—</em>}
         </span>
         <span
           aria-hidden="true"