From e2d03394e123748088f1149b4c636bd84f2f76e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Fri, 28 Aug 2026 23:50:37 +0100 Subject: [PATCH] the marketplace nav, in the house section style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit taken from fofos-admin/web/NavPanel.tsx, which is the pattern from here on. three changes, each doing a job rather than being a preference: SEPARATION. `border-b border-border` on every row, replacing gapped pills. a gapped list leaves the boundary between one item and the next to guesswork; a ruled edge says where a row ends. THE LABEL IS NO LONGER MUTED. it was `text-duck-dark/70` — every row whispering, with nothing for the eye to land on. the muting moves down to the second line, where a count genuinely is secondary. THE COUNT MOVES OUT OF THE RIGHT-HAND COLUMN. it was a number at the far edge at 60% opacity, which is where the eye goes last. as the row's second line — "3 plugins" — it is read WITH the label rather than hunted for, and it gives every row the same two-line shape the fofos panel has. active is `bg-muted`, a filled row, rather than a tinted label. colour on the text was carrying both "this is a link" and "this one is selected", which is why nothing looked selected. the footer moved to the same border and the same `muted-foreground` token rather than the duck palette, so it sits under the rows instead of looking like another kind of thing. Co-Authored-By: Claude Opus 5 Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043 --- .../officerdev/src/apps/Plugins/TagNav.tsx | 94 +++++++++++-------- 1 file changed, 54 insertions(+), 40 deletions(-) diff --git a/src/workspaces/officerdev/src/apps/Plugins/TagNav.tsx b/src/workspaces/officerdev/src/apps/Plugins/TagNav.tsx index 10551806..ef8d1bbd 100644 --- a/src/workspaces/officerdev/src/apps/Plugins/TagNav.tsx +++ b/src/workspaces/officerdev/src/apps/Plugins/TagNav.tsx @@ -32,14 +32,31 @@ const TAG_ICONS: Record = { Fun: 'Gamepad2', }; -const ROW = 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors w-full text-left'; +/* + The house section-nav row, taken from `fofos-admin/web/NavPanel.tsx`. + + Three things carry the look, and each is doing a job: + + `border-b border-border` — the SEPARATION. Gapped pills read as a floating list where the boundary + between one item and the next is guesswork; a ruled edge says where a row ends. + + The label is NOT muted. It was `text-duck-dark/70`, so every row whispered and the eye had nothing to + land on. The muting moves to the line BELOW it, where a count is genuinely secondary. + + Active is `bg-muted` — a filled row rather than a tinted label. Colour on the text was carrying both + "this is a link" and "this one is selected", which is why nothing looked selected. +*/ +const rowClass = (active: boolean) => + `flex w-full items-start gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors ${ + active ? 'bg-muted' : 'hover:bg-muted/50' + }`; export const TagNav = () => { const { plugins, available, broken, orphans, isLoading, updateAll, updatingAll } = usePlugins(); const [params] = useSearchParams(); const active = params.get('tag'); - if (isLoading) return
Loading…
; + if (isLoading) return
Loading…
; // Counted over everything the grid can show — installed and available together — so a number here // always matches what clicking it produces. @@ -65,61 +82,58 @@ export const TagNav = () => { return { search: `?${next}` }; }; + /** One row: icon, a label that is actually legible, and what it holds underneath. */ + const row = ( + key: string, + to: ReturnType, + Icon: typeof Package, + label: string, + n: number, + on: boolean, + ) => ( + + + + {label} + {/* The count moves here from the right-hand column. It was a number floating at the edge at 60% + opacity, which is where the eye goes last; as the row's second line it is read WITH the label + rather than hunted for. */} + + {n} plugin{n === 1 ? '' : 's'} + + + + ); + return (