fix(web): move mobile status back into card header next to username
Earlier change made the badge the editable trigger and demoted it into the body's Status row. That separated status from the row identifier on mobile, which read as 'where is this status from?'. Move the EditableCell-with-StatusBadge back into the card header, right after the username, and drop the body Status row entirely. Mobile now matches desktop's information density: identifier + status badge inline, edit via badge click.
This commit is contained in:
parent
43533c3485
commit
9771bb72c5
@ -237,10 +237,23 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
|
|||||||
const k = (f: string) => `${row.username}::${f}`;
|
const k = (f: string) => `${row.username}::${f}`;
|
||||||
return (
|
return (
|
||||||
<div key={row.username} className="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/60">
|
<div key={row.username} className="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/60">
|
||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between gap-3">
|
||||||
<span className="font-mono text-base font-semibold text-zinc-900">
|
<div className="flex min-w-0 items-center gap-3">
|
||||||
{row.username}
|
<span className="shrink-0 font-mono text-base font-semibold text-zinc-900">
|
||||||
</span>
|
{row.username}
|
||||||
|
</span>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<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} />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<DeleteButton
|
<DeleteButton
|
||||||
label={row.username}
|
label={row.username}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -260,17 +273,6 @@ export default function AccountsTable({ initial, prefixPattern }: Props) {
|
|||||||
onSave={(v) => saveCell(row.username, "password", v)}
|
onSave={(v) => saveCell(row.username, "password", v)}
|
||||||
/>
|
/>
|
||||||
</CardRow>
|
</CardRow>
|
||||||
<CardRow label="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)}
|
|
||||||
renderView={(v) => <StatusBadge status={v} />}
|
|
||||||
/>
|
|
||||||
</CardRow>
|
|
||||||
<CardRow label="Link">
|
<CardRow label="Link">
|
||||||
<EditableCell
|
<EditableCell
|
||||||
value={row.link}
|
value={row.link}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user