Administration sits at the foot of the panel, not the end of the list

it was last in SECTIONS, so it rendered as the tenth row and then stopped —
directly under Messages, with empty panel beneath it. that is the bottom of the
LIST. what it wanted is the bottom of the PANEL, the way Update-all sits in the
plugins nav.

`mt-auto` on a second group, divided by the same border the rows already use. it
holds whether there are ten sections or two, and it does not need a spacer element
to push it down.

the split is a `pinned` flag on the section rather than the nav testing for the
key. which sections are the client's site and which are this plugin's own
machinery is a fact about the section, and the nav should be reading it, not
knowing it. one array still — `sectionFor` and `isSectionKey` have to resolve
every key, and a second exported list is a second place to forget one.

the row body came out into `renderRow` so both groups draw the same row. no
change to what a row looks like.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-29 00:20:39 +01:00
co-authored by Claude Opus 5
parent 7eec2ec51d
commit 5e96274ebd
3 changed files with 57 additions and 32 deletions
+1 -1
View File
@@ -35,7 +35,7 @@ import type { PluginManifest } from '@@/plugins/manifest';
*/
export const manifest: PluginManifest = {
publisher: 'officerdev',
version: '2026.08.29.02',
version: '2026.08.29.03',
platform: '>=1.0.0',
label: 'Fofos',
+46 -31
View File
@@ -22,6 +22,15 @@ import { DEFAULT_SECTION, SECTIONS, isSectionKey, type SectionKey } from './sect
* from the same value the detail panel reads, which is the one place it can come from.
*/
/**
* The nav has a FOOT.
*
* Everything above it is a part of the client's site, in sitemap order. Below the divider is this
* plugin's own machinery, which is not a page and does not belong in a list of them — the same split
* the plugins nav makes with Update-all, and the reason it sits at the bottom of the panel rather than
* at the bottom of the list. `mt-auto` pins it there whether there are ten sections or two.
*/
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'
@@ -32,40 +41,46 @@ export const NavPanel = () => {
const raw = params.get('section');
const active: SectionKey = isSectionKey(raw) ? raw : DEFAULT_SECTION;
const renderRow = (section: (typeof SECTIONS)[number]) => {
const Icon = section.icon;
// Everything else in the URL is preserved. This is one screen of a workspace, and the global
// query string carries state that belongs to the shell rather than to this panel.
const search = new URLSearchParams(params);
search.set('section', section.key);
return (
<Link
key={section.key}
to={{ search: `?${search.toString()}` }}
replace
className={rowClass(active === section.key)}
>
<Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
<span className="min-w-0 flex-1">
<span className="flex items-baseline gap-2">
<span className={`truncate text-sm ${section.built ? '' : 'text-muted-foreground'}`}>{section.label}</span>
{/* Dimmed and labelled rather than hidden. A nav that shows only what is finished gives
no sense of what the thing is for — see sections.ts. */}
{!section.built && (
<span className="text-[10px] tracking-wide text-muted-foreground/70 uppercase">soon</span>
)}
</span>
<span className="block truncate text-xs text-muted-foreground">{section.hint}</span>
</span>
</Link>
);
};
return (
<nav className="flex size-full flex-col overflow-auto">
{SECTIONS.map((section) => {
const Icon = section.icon;
<div className="flex flex-col">{SECTIONS.filter((section) => !section.pinned).map(renderRow)}</div>
// Everything else in the URL is preserved. This is one screen of a workspace, and the global
// query string carries state that belongs to the shell rather than to this panel.
const search = new URLSearchParams(params);
search.set('section', section.key);
return (
<Link
key={section.key}
to={{ search: `?${search.toString()}` }}
replace
className={rowClass(active === section.key)}
>
<Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
<span className="min-w-0 flex-1">
<span className="flex items-baseline gap-2">
<span className={`truncate text-sm ${section.built ? '' : 'text-muted-foreground'}`}>
{section.label}
</span>
{/* Dimmed and labelled rather than hidden. A nav that shows only what is finished gives
no sense of what the thing is for — see sections.ts. */}
{!section.built && (
<span className="text-[10px] tracking-wide text-muted-foreground/70 uppercase">soon</span>
)}
</span>
<span className="block truncate text-xs text-muted-foreground">{section.hint}</span>
</span>
</Link>
);
})}
{/* Separated by the same border the rows use, so it reads as the end of the panel rather than as
one more page of the site. `border-t` and not `border-t-2`: it is a divider, not a heading. */}
<div className="mt-auto flex flex-col border-t border-border">
{SECTIONS.filter((section) => section.pinned).map(renderRow)}
</div>
</nav>
);
};
+10
View File
@@ -48,6 +48,15 @@ export type Section = {
/** The fofos path this reads, relative to the plugin's mount. Null when nothing is built. */
path: string | null;
built: boolean;
/**
* Pinned to the FOOT of the nav rather than sitting in the list.
*
* A flag rather than the nav hard-coding a key, because "which sections are the site's and which are
* the plugin's own" is a fact about the section. It is also why this stays in one array: `sectionFor`
* and `isSectionKey` have to resolve every key, and a second exported list would be a second place to
* forget one.
*/
pinned?: boolean;
};
export const SECTIONS: Section[] = [
@@ -135,6 +144,7 @@ export const SECTIONS: Section[] = [
hint: 'Where fofos is, and the token to reach it',
path: null,
built: true,
pinned: true,
},
];