pages reorder by dragging; the list panel is gone

The grip drags and the row is the drop target — a Link is draggable by default
and drags its URL, so making the row itself draggable fights the browser for what
the gesture means.

The list rearranges as the pointer crosses a row rather than on drop, and the
write happens once at the end: PUT /pages/order takes the whole set, because an
order is a property of the set.

/fofos-admin/pages was a list of cards beside a nav that already lists the pages.
Two lists of the same thing, and the one you were looking at was never the one
you had clicked. It redirects to the first page now.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-01 09:02:02 +01:00
co-authored by Claude Opus 5
parent ce1eb43d51
commit ca023eb651
2 changed files with 106 additions and 14 deletions
+22 -2
View File
@@ -1,12 +1,12 @@
import { Navigate } from 'react-router';
import { href, useNav } from './routes';
import { pageParam, usePages } from './usePages';
import { DEFAULT_SECTION } from './sections';
import { sectionFor, sectionOpen, type SectionKey } from './sections';
import { AdministrationPanel } from './AdministrationPanel';
import { MediaPanel } from './MediaPanel';
import { GalleriesPanel } from './sections/GalleriesPanel';
import { LayoutPanel } from './sections/LayoutPanel';
import { PagesPanel } from './sections/PagesPanel';
import { PageBuilderPanel } from './sections/PageBuilderPanel';
import { ViewModeProvider } from './ViewMode';
import { MessagesPanel } from './MessagesPanel';
@@ -46,7 +46,6 @@ import { useReady } from './useReady';
*/
const PANELS: Partial<Record<SectionKey, () => React.JSX.Element>> = {
layout: LayoutPanel,
pages: PagesPanel,
galleries: GalleriesPanel,
messages: MessagesPanel,
administration: AdministrationPanel,
@@ -63,6 +62,7 @@ export const DetailPanel = () => {
addressable: `/fofos-admin/pages` is the list, `/fofos-admin/pages/home` is that page.
*/
const { section: selected, item: selectedPage, atIndex } = useNav();
const { pages } = usePages();
const { ready, rootSet, loading } = useReady();
@@ -92,6 +92,26 @@ export const DetailPanel = () => {
const wanted = sectionFor(selected);
const current = sectionOpen(wanted, { ready, rootSet }) ? wanted : sectionFor('administration');
/*
Pages has no panel of its own any more.
It was a list of cards — a title, a slug, a menu label, per page — beside a nav that already lists
the pages. Two lists of the same thing, and the one you were looking at was never the one you had
clicked. The nav IS the list now, ordered by dragging it, so the section itself is only a way in.
`/fofos-admin/pages` therefore means "the first one", which is what somebody pressing Pages wants
and what the nav's own row already implied.
*/
if (current.key === 'pages' && !selectedPage) {
const first = pages?.[0];
if (first) return <Navigate to={href('pages', pageParam(first))} replace />;
return (
<div className="flex size-full items-center justify-center p-6 text-xs text-muted-foreground">
{pages ? 'This site has no pages yet.' : 'Loading…'}
</div>
);
}
const Panel =
current.key === 'pages' && selectedPage ? PageBuilderPanel : current.built ? PANELS[current.key] : undefined;