fix: stabilize Toolbox navigation layout

src/App.tsx

@@ -116,13 +116,14 @@ export default function App() {
   const [query, setQuery] = useState('');
   const [category, setCategory] = useState('');
   const [activeTag, setActiveTag] = useState('');
-  const [showHidden, setShowHidden] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [shownHiddenIds, setShownHiddenIds] = useState<
+    readonly string[] | null
+  >(null);
   const [helpOpen, setHelpOpen] = useState(false);
   const [preferences, setPreferences, storageAvailable] = usePreferences();
-  const closeSettings = useCallback(() => setSettingsOpen(false), []);
   const closeHelp = useCallback(() => setHelpOpen(false), []);
-  const dialogOpen = settingsOpen || helpOpen;
+  const showHidden =
+    preferences.hidden.length > 0 && shownHiddenIds === preferences.hidden;
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -231,33 +232,37 @@ export default function App() {
     setQuery('');
     setCategory('');
     setActiveTag('');
-    if (preferences.hidden.length > 0) setShowHidden(true);
+    setShownHiddenIds(null);
   }
 
-  const title = loaded?.catalogue.name ?? 'add·ideas Toolbox';
-  const brand = loaded?.catalogue.theme.brand ?? 'add·ideas';
-
   return (
     <>
       <div
         className="site-shell"
-        inert={dialogOpen}
-        aria-hidden={dialogOpen || undefined}
+        inert={helpOpen}
+        aria-hidden={helpOpen || undefined}
       >
         <a className="skip-link" href="#main-content">
           Skip to tools
         </a>
         <ToolboxHeader
           className="portal-header"
-          title={title}
-          iconUrl="./favicon.svg"
+          title="Toolbox"
+          subtitle="Local-first browser tools"
           theme={preferences.theme}
           homeHref={loaded?.homeUrl ?? './'}
-          homeLabel={brand}
+          homeLabel="add·ideas Toolbox"
+          brandIconUrl="./favicon.svg"
           helpAction={{ onClick: () => setHelpOpen(true) }}
           sourceHref={PORTAL_SOURCE}
           sourceLabel="Toolbox source on Gitea"
-          onPersonalize={() => setSettingsOpen(true)}
+          personalizeContent={
+            <PreferencesPanel
+              preferences={preferences}
+              storageAvailable={storageAvailable}
+              onChange={setPreferences}
+            />
+          }
           apps={headerApps}
           allAppsHref="#main-content"
         />
@@ -270,8 +275,7 @@ export default function App() {
               </p>
               <h2 id="page-title">
                 Your document tools,
-                <br />
-                <span>in one calm place.</span>
+                <br /> <span>in one calm place.</span>
               </h2>
               <p className="hero-copy">
                 Focused browser utilities with a privacy disclosure for each
@@ -315,16 +319,25 @@ export default function App() {
                     <span className="visually-hidden">Clear tag filter</span>
                   </button>
                 )}
-                {preferences.hidden.length > 0 && (
-                  <label className="hidden-toggle">
-                    <input
-                      type="checkbox"
-                      checked={showHidden}
-                      onChange={(event) => setShowHidden(event.target.checked)}
-                    />
-                    Show hidden ({preferences.hidden.length})
-                  </label>
-                )}
+                <label
+                  className={`hidden-toggle${
+                    preferences.hidden.length === 0
+                      ? ' hidden-toggle--disabled'
+                      : ''
+                  }`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={showHidden}
+                    disabled={preferences.hidden.length === 0}
+                    onChange={(event) =>
+                      setShownHiddenIds(
+                        event.target.checked ? preferences.hidden : null
+                      )
+                    }
+                  />
+                  Show hidden ({preferences.hidden.length})
+                </label>
               </section>
             )}
           </section>
@@ -456,9 +469,9 @@ export default function App() {
             </span>
           </p>
           <span>
-            Portal v0.2.0 ·{' '}
+            Portal v0.2.1 ·{' '}
             <a
-              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.0"
+              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.1"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -468,13 +481,6 @@ export default function App() {
         </footer>
       </div>
 
-      <PreferencesPanel
-        open={settingsOpen}
-        preferences={preferences}
-        storageAvailable={storageAvailable}
-        onChange={setPreferences}
-        onClose={closeSettings}
-      />
       <HelpPanel open={helpOpen} onClose={closeHelp} />
     </>
   );