the marketplace is browsed by tag, not scrolled

/marketplace was a list of every plugin on the left and a preview on the right.
that is a fine control panel and a poor shop: twenty-one rows sorted by nothing
anybody cares about, where "something for my calendar" means reading all of them.

now: tags down the left with counts, cards in a grid on the right, and clicking
a card takes over the panel with a back link. three things about the shape.

BOTH the filter and the selection are in the URL — ?tag= and ?selected=. a
filter in component state is lost on Back, so filtering, opening a plugin and
pressing Back would drop you in an unfiltered grid having lost your place.
browser Back works for free for the same reason. selecting a tag also CLEARS the
selection, because a detail for a plugin outside the new filter is a page the
grid you are now looking at cannot return to.

the detail REPLACES the grid rather than sitting beside it. a grid needs the
width and a detail beside one gets half of it; neither reads well. the back link
drops ?selected= and keeps ?tag=, which is the entire point of putting the
filter there.

the panel KEYS are unchanged though both components were replaced. a stored
layout names them, and renaming would drop everyone back to the default
arrangement for nothing — the key identifies a slot, not an implementation.

two things found on the way. PluginItem and AvailablePlugin had no tags, so the
api now carries them on both branches — from the manifest for a plugin that is
here, from the catalogue for one that is not, same field either way. and the
screen used useDashboardState, which persists the whole tree: the panels this
ships would never have reached anyone who had opened it before. useAuthoredLayout
takes the structure from source and persists only sizes, which is what an
authored screen wants.

21/22 -> 22/78 as well: the left panel holds seven tags now, not twenty-one
rows, and the width is worth more to the grid.

verified: bundle contains the new panels, api returns tags for all 21 with none
missing the field.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043

src/apps/officer-web/Screens/Dashboard/Plugins/PluginsScreen.tsx

@@ -1,6 +1,6 @@
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
-import { useDashboardState } from 'state/useDashboardState';
+import { useAuthoredLayout } from 'state/useAuthoredLayout';
 import { defaultLayout } from './defaultLayout';
 
 // /plugins — what is in the tree, what is installed, and the four verbs that change it.
@@ -11,7 +11,11 @@ import { defaultLayout } from './defaultLayout';
 // Not the app store. That installs sidecars from a catalogue, provisioning containers and asking
 // questions; this installs plugins from `platform/plugins/`, and asks nothing.
 export const PluginsScreen = () => {
-  const workspace = useDashboardState<LayoutNode>('screens/plugins', defaultLayout);
+  // `useAuthoredLayout`, not `useDashboardState`: the STRUCTURE here is ours and comes from source on
+  // every render, while only the sizes are the user's and persisted. Under the old hook the whole tree
+  // was stored, so the panels this screen ships today would never have reached anyone who had opened it
+  // before — they would still be looking at the list-and-preview this replaced.
+  const workspace = useAuthoredLayout('screens/plugins', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">

src/apps/officer-web/Screens/Dashboard/Plugins/defaultLayout.ts

@@ -8,7 +8,9 @@ export const defaultLayout: LayoutNode = {
   id: 'plugins-root',
   direction: 'horizontal',
   children: [
-    { node: { type: 'panel', id: 'plugins-list', appType: 'plugins-list' }, size: 32 },
-    { node: { type: 'panel', id: 'plugin-detail', appType: 'plugin-detail' }, size: 68 },
+    // 22/78, not 32/68. The left panel was a list of every plugin and needed the room; it is a list of
+    // seven tags now, and the grid on the right is what benefits from the width — one more card per row.
+    { node: { type: 'panel', id: 'plugins-list', appType: 'plugins-list' }, size: 22 },
+    { node: { type: 'panel', id: 'plugin-detail', appType: 'plugin-detail' }, size: 78 },
   ],
 };