file preview, which never worked here and had to be built rather than fixed

on /files the viewer is NOT part of the file browser. `useFileViewerPanels` lives on
the SCREEN and swaps the whole workspace layout when `?view=` appears, opening a
viewer panel beside the browser. a plugin renders its own defaultLayout and has no
such hook — so double-clicking a file in this panel set `?view=` and nothing on earth
read it.

which means it never worked here. it LOOKED like it did for one deploy, because
`urlPath` was navigating to /files, where that screen did the work — so the bug I
introduced and then removed is the only reason anybody saw a preview.

the panel reads `?view=` itself now and renders FileViewerView, which the platform
exports for exactly this. OVER the browser rather than beside it: this panel is one
column of a two-column screen, and splitting it again would give a preview the width
of a phone.

closing clears `view` and `viewRoot` and leaves `media` alone, so you land back in
the folder you were in rather than at the top.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-29 09:19:11 +01:00
co-authored by Claude Opus 5
parent 21935cbc27
commit 1d820fc9d4
2 changed files with 38 additions and 2 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.24',
version: '2026.08.29.25',
platform: '>=1.0.0',
label: 'Fofos',
+37 -1
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router';
import { FolderOpen, TriangleAlert } from 'lucide-react';
import { FileBrowserApp } from 'officerdev';
import { FileBrowserApp, FileViewerView } from 'officerdev';
import { useClient } from 'hooks/useClient';
/**
@@ -40,6 +41,10 @@ export const MediaPanel = () => {
const clientRef = useRef(client);
clientRef.current = client;
const [params, setParams] = useSearchParams();
// Set by the browser when a file is double-clicked. Nothing else on this screen reads it.
const viewPath = params.get('view');
const [settings, setSettings] = useState<Settings | null>(null);
const [denied, setDenied] = useState(false);
@@ -102,6 +107,37 @@ export const MediaPanel = () => {
`panelId` stays alongside: the URL covers a reload or a shared link, panelId covers a panel
re-opened later, which the URL cannot.
*/
/*
── The preview, which needed doing here rather than coming for free ──
On /files the viewer is not part of the browser: `useFileViewerPanels` lives on the SCREEN and swaps
the whole workspace layout when `?view=` appears, opening a viewer panel beside it. A plugin renders
its own `defaultLayout` and has no such hook, so double-clicking a file here set `?view=` and nothing
ever read it. It looked like it worked only while `urlPath` was navigating to /files, where that
screen did the work.
So the panel reads `?view=` itself and shows the viewer over the browser. Over rather than beside,
because this panel is one column of a two-column screen — splitting it again would leave a preview
the width of a phone.
Closing clears `view` and leaves `media` alone, so you come back to the folder you were in rather
than the top.
*/
if (viewPath) {
return (
<FileViewerView
filePath={viewPath}
fileName={viewPath.slice(viewPath.lastIndexOf('/') + 1)}
onClose={() => {
const next = new URLSearchParams(params);
next.delete('view');
next.delete('viewRoot');
setParams(next);
}}
/>
);
}
return <FileBrowserApp basePath={base} rootLabel="Media" pathParam="media" panelId="fofos-admin-media" />;
};