fix: reverse Toolbox header orientation

src/components/PreferencesPanel.tsx

@@ -1,10 +1,10 @@
 import { useRef, useState, type ChangeEvent } from 'react';
+import { ToolboxPersonalizePanel } from '@add-ideas/toolbox-shell-react';
 import {
   defaultPreferences,
   parsePreferences,
   type Preferences,
 } from '../preferences';
-import type { ThemeMode } from '../types';
 
 interface PreferencesPanelProps {
   preferences: Preferences;
@@ -20,10 +20,6 @@ export function PreferencesPanel({
   const fileInput = useRef<HTMLInputElement>(null);
   const [message, setMessage] = useState('');
 
-  function setTheme(theme: ThemeMode) {
-    onChange({ ...preferences, theme });
-  }
-
   function exportPreferences() {
     const blob = new Blob([`${JSON.stringify(preferences, null, 2)}\n`], {
       type: 'application/json',
@@ -55,39 +51,11 @@ export function PreferencesPanel({
   }
 
   return (
-    <section
-      className="preferences-content"
-      aria-labelledby="preferences-title"
+    <ToolboxPersonalizePanel
+      theme={preferences.theme}
+      onThemeChange={(theme) => onChange({ ...preferences, theme })}
+      storageAvailable={storageAvailable}
     >
-      <div className="preferences-heading">
-        <p className="preferences-kicker">On this device</p>
-        <h2 id="preferences-title">Personalize your toolbox</h2>
-      </div>
-
-      {!storageAvailable && (
-        <p className="inline-warning" role="status">
-          Browser storage is unavailable. Changes will last only until this page
-          closes.
-        </p>
-      )}
-
-      <fieldset className="theme-choice">
-        <legend>Appearance</legend>
-        <div>
-          {(['system', 'light', 'dark'] as const).map((theme) => (
-            <button
-              key={theme}
-              type="button"
-              aria-pressed={preferences.theme === theme}
-              className={preferences.theme === theme ? 'is-selected' : ''}
-              onClick={() => setTheme(theme)}
-            >
-              {theme.slice(0, 1).toLocaleUpperCase() + theme.slice(1)}
-            </button>
-          ))}
-        </div>
-      </fieldset>
-
       <div className="preference-summary">
         <div>
           <strong>{preferences.pinned.length}</strong>
@@ -139,6 +107,6 @@ export function PreferencesPanel({
       <p className="action-message" role="status" aria-live="polite">
         {message}
       </p>
-    </section>
+    </ToolboxPersonalizePanel>
   );
 }