fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Administration is a section, not an overlay

Browse Source 
the connection form — where fofos is, and the token — was reached through
`?config=1` and a link in the detail header, because it was not one of the nine
sections. it is now the tenth, called Administration, last in the nav.

that removes the overlay and the second route to it. the two could disagree: the
form covered whatever section was selected underneath, so the nav highlighted one
thing while the panel showed another, and an unconfigured plugin rendered the form
with no header at all — which reads as the selected section being broken rather
than as one setup step not done yet. unconfigured now goes to Administration and
the header says so.

`site` and `administration` are deliberately separate and the file says why. Site
settings is the CLIENT's — partners, social links, contact details, all of it
public copy. Administration is Officer's end: how this plugin reaches fofos, and
whatever else it will need to know. nothing in it ever appears on the site, and
the people who touch the two are not the same people.

`path: null`, alone among the sections: it reads nothing from fofos, which is why
it keeps working when fofos is unreachable and the others do not.

the header's settings link is replaced by the section's own hint, so the row still
says what it is once you are in it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-29 00:18:13 +01:00
co-authored by Claude Opus 5
parent fe77250aa4
commit 7eec2ec51d
4 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manifest.ts
+1 -1
View File
@@ -35,7 +35,7 @@ import type { PluginManifest } from '@@/plugins/manifest';
*/
export const manifest: PluginManifest = {
publisher: 'officerdev',
version: '2026.08.29.01',
version: '2026.08.29.02',
platform: '>=1.0.0',
label: 'Fofos',
web/DetailPanel.tsx
+22 -25
View File
@@ -1,6 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Link, useSearchParams } from 'react-router';
import { Settings } from 'lucide-react';
import { useSearchParams } from 'react-router';
import { useClient } from 'hooks/useClient';
import { DEFAULT_SECTION, isSectionKey, sectionFor, type SectionKey } from './sections';
import { ConnectionPanel } from './ConnectionPanel';
@@ -12,15 +11,21 @@ import { useFofosChanged } from './channel';
* The right column: whichever section the nav has selected.
*
* It reads `?section=` from the URL rather than being handed it — the two panels are siblings in a
* workspace and neither owns the other. `?config=1` renders the connection form over the top of
* whatever is selected, so settings are addressable too.
* workspace and neither owns the other.
*
* ── There used to be a `?config=1` ──
*
* The connection form was an overlay reached from a link in this header, because it was not one of the
* sections. Now it IS one — Administration — so the overlay is gone and so is the link. A second route
* to the same screen is a second thing to keep correct, and the two disagreed the moment a section was
* selected underneath a form that covered it.
*
* ── The unconfigured check lives HERE, once ──
*
* Every section needs a connection, so every section would otherwise have to handle its absence and
* each would word it slightly differently. Asking `/status` once and rendering the connection form
* instead of any section is one answer for all nine, and it makes "not connected yet" read as a setup
* step rather than as nine broken lists.
* Every OTHER section needs a connection, so each would otherwise have to handle its absence and each
* would word it slightly differently. Asking `/status` once and sending an unconfigured plugin to
* Administration is one answer for all of them, and it makes "not connected yet" read as a setup step
* rather than as nine broken lists.
*/
type Status = { configured: boolean; lastProbeOk: boolean | null };
@@ -37,13 +42,13 @@ type Status = { configured: boolean; lastProbeOk: boolean | null };
*/
const PANELS: Partial<Record<SectionKey, () => React.JSX.Element>> = {
messages: MessagesPanel,
administration: ConnectionPanel,
};
export const DetailPanel = () => {
const [params] = useSearchParams();
const raw = params.get('section');
const section: SectionKey = isSectionKey(raw) ? raw : DEFAULT_SECTION;
const showingConfig = params.get('config') === '1';
const selected: SectionKey = isSectionKey(raw) ? raw : DEFAULT_SECTION;
const client = useClient();
const clientRef = useRef(client);
@@ -72,13 +77,12 @@ export const DetailPanel = () => {
return <div className="flex size-full items-center justify-center p-6 text-sm text-muted-foreground">Loading…</div>;
}
if (showingConfig || !configured) return <ConnectionPanel />;
const current = sectionFor(section);
// Everything but `config`, so the settings link keeps the section underneath it.
const configSearch = new URLSearchParams(params);
configSearch.set('config', '1');
/*
Unconfigured, so Administration regardless of what the nav says. The header then NAMES it, which is
the part the overlay could not do: the form used to appear under whichever row happened to be
highlighted, so it read as that section being broken rather than as one step not done yet.
*/
const current = sectionFor(configured ? selected : 'administration');
const Panel = current.built ? PANELS[current.key] : undefined;
@@ -86,14 +90,7 @@ export const DetailPanel = () => {
<div className="flex size-full flex-col overflow-hidden">
<div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2">
<h2 className="truncate text-sm font-medium">{current.label}</h2>
{/* A real link, so the settings are addressable and cmd-clickable like anything else. */}
<Link
to={{ search: `?${configSearch.toString()}` }}
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
>
<Settings className="size-3.5" />
Connection
</Link>
<span className="truncate text-xs text-muted-foreground">{current.hint}</span>
</div>
<div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>
web/NavPanel.tsx
+2 -4
View File
@@ -37,12 +37,10 @@ export const NavPanel = () => {
{SECTIONS.map((section) => {
const Icon = section.icon;
// Everything else in the URL is preserved. `?config=1` is the one that matters — opening the
// settings and then clicking a section should leave the settings, not silently keep them open
// underneath.
// 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);
search.delete('config');
return (
<Link
web/sections.ts
+25 -3
View File
@@ -1,13 +1,21 @@
import type { LucideIcon } from 'lucide-react';
import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail } from 'lucide-react';
import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail, Cog } from 'lucide-react';
/**
* The sections of the fofos admin, in nav order.
*
* ── The order is the client's site, not the database's ──
*
* It follows the sitemap: the pages someone edits most, first. Site settings and Messages sit at the
* bottom because they are not pages — one is configuration and the other is an inbox.
* It follows the sitemap: the pages someone edits most, first. Site settings, Messages and
* Administration sit at the bottom because they are not pages — the site's settings, an inbox, and the
* plugin's own machinery.
*
* ── `site` and `administration` are different things ──
*
* "Site settings" is the CLIENT's — partners, social links, contact details, all of it public copy that
* whoever edits the site edits. "Administration" is OFFICER's end: where fofos is, how to reach it, and
* whatever else this plugin needs to know to do its job. One is content, the other is plumbing, and the
* people who touch them are not the same people. Nothing in Administration ever appears on the site.
*
* ── `built` ──
*
@@ -20,6 +28,7 @@ import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail
*/
export type SectionKey =
| 'administration'
| 'messages'
| 'site'
| 'about'
@@ -114,6 +123,19 @@ export const SECTIONS: Section[] = [
path: '/fofos-admin/messages',
built: true,
},
{
/*
Last, and `path: null` — it reads nothing from fofos. Every other section is a window onto the
client's site; this one is the window onto the connection itself, which is why it keeps working
when fofos is unreachable and the others do not.
*/
key: 'administration',
label: 'Administration',
icon: Cog,
hint: 'Where fofos is, and the token to reach it',
path: null,
built: true,
},
];
/** Where the detail panel goes when the URL says nothing, or says something it does not recognise. */