fix: stabilize Toolbox navigation layout
This commit is contained in:
163
src/App.test.tsx
163
src/App.test.tsx
@@ -39,12 +39,17 @@ describe('portal UI', () => {
|
||||
).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
expect(
|
||||
sourceLinks.find((link) =>
|
||||
link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.4.0')
|
||||
link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.4.1')
|
||||
)
|
||||
).toBeDefined();
|
||||
expect(
|
||||
screen.queryByRole('region', { name: 'Pinned' })
|
||||
).not.toBeInTheDocument();
|
||||
const showHidden = screen.getByRole('checkbox', {
|
||||
name: 'Show hidden (0)',
|
||||
});
|
||||
expect(showHidden).toBeDisabled();
|
||||
expect(showHidden).not.toBeChecked();
|
||||
const launch = screen
|
||||
.getAllByRole('link', { name: 'PDF Workbench' })
|
||||
.find((link) => link.classList.contains('app-card__launch-link'))!;
|
||||
@@ -74,10 +79,74 @@ describe('portal UI', () => {
|
||||
expect(
|
||||
screen.queryByRole('heading', { name: 'PDF Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: /show hidden/i }));
|
||||
expect(showHidden).toBeEnabled();
|
||||
expect(showHidden).toHaveAccessibleName('Show hidden (1)');
|
||||
fireEvent.click(showHidden);
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'PDF Workbench' })
|
||||
).toBeInTheDocument();
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Show PDF Workbench' })
|
||||
);
|
||||
expect(showHidden).toBeDisabled();
|
||||
expect(showHidden).not.toBeChecked();
|
||||
});
|
||||
|
||||
it('keeps search and category controls together and filters with each', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
|
||||
const search = screen.getByRole('searchbox', { name: 'Search tools' });
|
||||
const category = screen.getByRole('combobox', {
|
||||
name: 'Filter by category',
|
||||
});
|
||||
expect(search.closest('.tool-controls')).toBe(
|
||||
category.closest('.tool-controls')
|
||||
);
|
||||
|
||||
await user.type(search, 'xslt');
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'XSLT Workbench' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole('heading', { name: 'PDF Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
await user.clear(search);
|
||||
await user.selectOptions(category, 'notes');
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'OneNote Reader' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole('heading', { name: 'XSLT Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clears search filters without revealing hidden tools', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Hide PDF Workbench' })
|
||||
);
|
||||
await user.type(
|
||||
screen.getByRole('searchbox', { name: 'Search tools' }),
|
||||
'no tool has this phrase'
|
||||
);
|
||||
await user.click(screen.getByRole('button', { name: 'Clear filters' }));
|
||||
|
||||
expect(
|
||||
screen.queryByRole('heading', { name: 'PDF Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'XSLT Workbench' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('checkbox', { name: 'Show hidden (1)' })
|
||||
).not.toBeChecked();
|
||||
});
|
||||
|
||||
it('lists contextual destinations in the Apps menu', async () => {
|
||||
@@ -85,7 +154,7 @@ describe('portal UI', () => {
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
await user.click(screen.getByText('Apps').closest('summary')!);
|
||||
await user.click(screen.getByRole('button', { name: 'Apps' }));
|
||||
const navigation = screen.getByRole('navigation', {
|
||||
name: 'Toolbox applications',
|
||||
});
|
||||
@@ -97,18 +166,70 @@ describe('portal UI', () => {
|
||||
).toContain('toolbox.catalog.json');
|
||||
});
|
||||
|
||||
it('uses the shared accessible header identity and control order', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
|
||||
const header = document.querySelector<HTMLElement>('.portal-header')!;
|
||||
expect(
|
||||
within(header).getByRole('heading', { level: 1, name: 'Toolbox' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
within(header).getByText('Local-first browser tools')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('heading', {
|
||||
level: 2,
|
||||
name: 'Your document tools, in one calm place.',
|
||||
})
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getAllByRole('heading', {
|
||||
name: 'Your document tools, in one calm place.',
|
||||
})
|
||||
).toHaveLength(1);
|
||||
|
||||
const personalize = within(header).getByRole('button', {
|
||||
name: 'Personalize',
|
||||
});
|
||||
const apps = within(header).getByRole('button', { name: 'Apps' });
|
||||
const source = within(header).getByRole('link', {
|
||||
name: 'Toolbox source on Gitea',
|
||||
});
|
||||
const help = within(header).getByRole('button', { name: 'Help' });
|
||||
const brand = within(header).getByRole('link', {
|
||||
name: 'add·ideas Toolbox',
|
||||
});
|
||||
expect(
|
||||
personalize.compareDocumentPosition(apps) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
apps.compareDocumentPosition(source) & Node.DOCUMENT_POSITION_FOLLOWING
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
source.compareDocumentPosition(help) & Node.DOCUMENT_POSITION_FOLLOWING
|
||||
).toBeTruthy();
|
||||
expect(brand.querySelector('img')).toHaveAttribute('src', './favicon.svg');
|
||||
});
|
||||
|
||||
it('persists an explicit appearance and accepts cross-tab updates', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
await user.click(screen.getByRole('button', { name: 'Personalize' }));
|
||||
const personalize = screen.getByRole('button', { name: 'Personalize' });
|
||||
await user.click(personalize);
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'Personalize your toolbox' })
|
||||
).toBeInTheDocument();
|
||||
await user.click(screen.getByRole('button', { name: 'Dark' }));
|
||||
expect(document.documentElement).toHaveAttribute('data-theme', 'dark');
|
||||
await waitFor(() =>
|
||||
expect(localStorage.getItem(PREFERENCES_KEY)).toContain('"theme":"dark"')
|
||||
);
|
||||
await user.click(screen.getByRole('button', { name: 'Close preferences' }));
|
||||
await user.click(personalize);
|
||||
|
||||
fireEvent(
|
||||
window,
|
||||
@@ -208,14 +329,16 @@ describe('portal UI', () => {
|
||||
it('opens the standard help control and explains tile interaction', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
const { container } = render(<App />);
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' });
|
||||
await user.click(screen.getByRole('button', { name: 'Help' }));
|
||||
expect(
|
||||
screen.getByRole('dialog', { name: 'Choose and arrange your tools' })
|
||||
).toHaveTextContent('click anywhere on a tool tile');
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
|
||||
await user.click(screen.getByRole('button', { name: 'Close help' }));
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
|
||||
});
|
||||
|
||||
it('shows a recoverable catalogue error', async () => {
|
||||
@@ -249,31 +372,35 @@ describe('portal UI', () => {
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('contains preference focus and restores it to Personalize', async () => {
|
||||
it('hosts compact preferences in the shared Personalize popover', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
const { container } = render(<App />);
|
||||
const personalize = screen.getByRole('button', { name: 'Personalize' });
|
||||
|
||||
await user.click(personalize);
|
||||
const dialog = screen.getByRole('dialog', {
|
||||
const heading = screen.getByRole('heading', {
|
||||
name: 'Personalize your toolbox',
|
||||
});
|
||||
const close = screen.getByRole('button', { name: 'Close preferences' });
|
||||
expect(close).toHaveFocus();
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
|
||||
expect(dialog).toBeInTheDocument();
|
||||
const popover = screen.getByRole('dialog', { name: 'Personalize Toolbox' });
|
||||
expect(popover).toContainElement(heading);
|
||||
expect(popover).not.toHaveAttribute('aria-modal');
|
||||
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
|
||||
expect(screen.getByText(/does not transmit them/i)).toHaveTextContent(
|
||||
/Trusted code in another Toolbox app on this site can access same-origin storage/i
|
||||
);
|
||||
|
||||
const reset = screen.getByRole('button', { name: 'Reset' });
|
||||
reset.focus();
|
||||
await user.tab();
|
||||
expect(close).toHaveFocus();
|
||||
expect(
|
||||
screen.getByRole('button', { name: 'Export JSON' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('button', { name: 'Import JSON' })
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();
|
||||
|
||||
await user.keyboard('{Escape}');
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole('dialog', { name: 'Personalize Toolbox' })
|
||||
).not.toBeInTheDocument();
|
||||
expect(personalize).toHaveFocus();
|
||||
});
|
||||
});
|
||||
|
||||
76
src/App.tsx
76
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} />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
|
||||
import { useRef, useState, type ChangeEvent } from 'react';
|
||||
import {
|
||||
defaultPreferences,
|
||||
parsePreferences,
|
||||
@@ -7,83 +7,19 @@ import {
|
||||
import type { ThemeMode } from '../types';
|
||||
|
||||
interface PreferencesPanelProps {
|
||||
open: boolean;
|
||||
preferences: Preferences;
|
||||
storageAvailable: boolean;
|
||||
onChange: (preferences: Preferences) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PreferencesPanel({
|
||||
open,
|
||||
preferences,
|
||||
storageAvailable,
|
||||
onChange,
|
||||
onClose,
|
||||
}: PreferencesPanelProps) {
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
const panel = useRef<HTMLElement>(null);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const returnFocus =
|
||||
document.activeElement instanceof HTMLElement
|
||||
? document.activeElement
|
||||
: null;
|
||||
const dialog = panel.current;
|
||||
const focusableElements = () =>
|
||||
dialog
|
||||
? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
|
||||
(element) => !element.hasAttribute('disabled')
|
||||
)
|
||||
: [];
|
||||
|
||||
focusableElements()[0]?.focus();
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (event.key !== 'Tab') return;
|
||||
|
||||
const elements = focusableElements();
|
||||
if (elements.length === 0) {
|
||||
event.preventDefault();
|
||||
dialog?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const first = elements[0]!;
|
||||
const last = elements.at(-1)!;
|
||||
const activeElement = document.activeElement;
|
||||
if (
|
||||
event.shiftKey &&
|
||||
(activeElement === first || !dialog?.contains(activeElement))
|
||||
) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (
|
||||
!event.shiftKey &&
|
||||
(activeElement === last || !dialog?.contains(activeElement))
|
||||
) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
returnFocus?.focus();
|
||||
};
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
function setTheme(theme: ThemeMode) {
|
||||
onChange({ ...preferences, theme });
|
||||
}
|
||||
@@ -119,119 +55,90 @@ export function PreferencesPanel({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dialog-backdrop"
|
||||
role="presentation"
|
||||
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
|
||||
<section
|
||||
className="preferences-content"
|
||||
aria-labelledby="preferences-title"
|
||||
>
|
||||
<section
|
||||
ref={panel}
|
||||
className="preferences-panel"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="preferences-title"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<p className="eyebrow">On this device</p>
|
||||
<h2 id="preferences-title">Personalize your toolbox</h2>
|
||||
</div>
|
||||
<button
|
||||
className="close-button"
|
||||
type="button"
|
||||
aria-label="Close preferences"
|
||||
onClick={onClose}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
<span>Pinned</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{preferences.hidden.length}</strong>
|
||||
<span>Hidden</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{preferences.order.length}</strong>
|
||||
<span>Ordered</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="preferences-copy">
|
||||
The portal stores pins, visibility, order, and appearance in this
|
||||
browser and does not transmit them. Trusted code in another Toolbox
|
||||
app on this site can access same-origin storage. Export a JSON backup
|
||||
to move them to another device.
|
||||
{!storageAvailable && (
|
||||
<p className="inline-warning" role="status">
|
||||
Browser storage is unavailable. Changes will last only until this page
|
||||
closes.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="preferences-actions">
|
||||
<button type="button" onClick={exportPreferences}>
|
||||
Export JSON
|
||||
</button>
|
||||
<button type="button" onClick={() => fileInput.current?.click()}>
|
||||
Import JSON
|
||||
</button>
|
||||
<input
|
||||
ref={fileInput}
|
||||
className="visually-hidden"
|
||||
type="file"
|
||||
tabIndex={-1}
|
||||
accept="application/json,.json"
|
||||
onChange={importPreferences}
|
||||
/>
|
||||
<button
|
||||
className="danger-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onChange({ ...defaultPreferences });
|
||||
setMessage('Preferences reset.');
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<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>
|
||||
<p className="action-message" role="status" aria-live="polite">
|
||||
{message}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div className="preference-summary">
|
||||
<div>
|
||||
<strong>{preferences.pinned.length}</strong>
|
||||
<span>Pinned</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{preferences.hidden.length}</strong>
|
||||
<span>Hidden</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{preferences.order.length}</strong>
|
||||
<span>Ordered</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="preferences-copy">
|
||||
The portal stores pins, visibility, order, and appearance in this
|
||||
browser and does not transmit them. Trusted code in another Toolbox app
|
||||
on this site can access same-origin storage. Export a JSON backup to
|
||||
move them to another device.
|
||||
</p>
|
||||
|
||||
<div className="preferences-actions">
|
||||
<button type="button" onClick={exportPreferences}>
|
||||
Export JSON
|
||||
</button>
|
||||
<button type="button" onClick={() => fileInput.current?.click()}>
|
||||
Import JSON
|
||||
</button>
|
||||
<input
|
||||
ref={fileInput}
|
||||
className="visually-hidden"
|
||||
type="file"
|
||||
tabIndex={-1}
|
||||
accept="application/json,.json"
|
||||
onChange={importPreferences}
|
||||
/>
|
||||
<button
|
||||
className="danger-button"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onChange({ ...defaultPreferences });
|
||||
setMessage('Preferences reset.');
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
<p className="action-message" role="status" aria-live="polite">
|
||||
{message}
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const FOCUSABLE_SELECTOR = [
|
||||
'a[href]',
|
||||
'button:not([disabled])',
|
||||
'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])',
|
||||
].join(',');
|
||||
|
||||
@@ -123,7 +123,6 @@ summary:focus-visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.portal-header .toolbox-shell__bar,
|
||||
main,
|
||||
.site-footer {
|
||||
width: min(1160px, calc(100% - 2.5rem));
|
||||
@@ -192,13 +191,9 @@ main {
|
||||
|
||||
.tool-controls {
|
||||
display: grid;
|
||||
align-content: end;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 10.5rem);
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.search-field,
|
||||
@@ -212,7 +207,7 @@ main {
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 0.85rem;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
@@ -235,7 +230,7 @@ main {
|
||||
}
|
||||
|
||||
.category-field {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 0.65rem;
|
||||
}
|
||||
|
||||
@@ -244,15 +239,21 @@ main {
|
||||
}
|
||||
|
||||
.hidden-toggle {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 0.45rem;
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.hidden-toggle--disabled {
|
||||
cursor: default;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.hidden-toggle input {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
@@ -260,6 +261,7 @@ main {
|
||||
}
|
||||
|
||||
.active-filter {
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
|
||||
@@ -660,7 +662,6 @@ main {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.preferences-panel,
|
||||
.help-panel {
|
||||
width: min(560px, 100%);
|
||||
max-height: calc(100vh - 2rem);
|
||||
@@ -672,7 +673,6 @@ main {
|
||||
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.preferences-panel > header,
|
||||
.help-panel > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -680,18 +680,48 @@ main {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.preferences-panel h2,
|
||||
.help-panel h2 {
|
||||
margin: 0;
|
||||
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.preferences-panel .eyebrow,
|
||||
.help-panel .eyebrow {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.portal-header .toolbox-shell__personalize-popover {
|
||||
width: min(26rem, calc(100vw - 1.5rem));
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preferences-content {
|
||||
padding: 0.35rem;
|
||||
color: var(--toolbox-text, var(--text));
|
||||
}
|
||||
|
||||
.preferences-heading {
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.preferences-content h2 {
|
||||
margin: 0;
|
||||
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.portal-header .preferences-kicker {
|
||||
margin: 0 0 0.3rem;
|
||||
padding: 0;
|
||||
color: var(--toolbox-accent, var(--brand));
|
||||
font-size: 0.68rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.help-steps {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
@@ -721,7 +751,7 @@ main {
|
||||
}
|
||||
|
||||
.theme-choice {
|
||||
margin: 1.5rem 0;
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
@@ -767,7 +797,7 @@ main {
|
||||
.preference-summary > div {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
padding: 0.9rem;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.7rem;
|
||||
text-align: center;
|
||||
@@ -775,7 +805,7 @@ main {
|
||||
|
||||
.preference-summary strong {
|
||||
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.preference-summary span,
|
||||
@@ -785,8 +815,11 @@ main {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.preferences-copy {
|
||||
margin: 1.1rem 0;
|
||||
.portal-header .preferences-copy {
|
||||
margin: 0.9rem 0;
|
||||
padding: 0;
|
||||
color: var(--toolbox-muted, var(--muted));
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
@@ -797,7 +830,7 @@ main {
|
||||
}
|
||||
|
||||
.preferences-actions button {
|
||||
padding: 0.62rem 0.78rem;
|
||||
padding: 0.52rem 0.68rem;
|
||||
}
|
||||
|
||||
.preferences-actions .danger-button {
|
||||
@@ -805,12 +838,16 @@ main {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.action-message {
|
||||
.portal-header .action-message {
|
||||
min-height: 1.2em;
|
||||
margin: 0.8rem 0 0;
|
||||
padding: 0;
|
||||
color: var(--toolbox-muted, var(--muted));
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.inline-warning {
|
||||
.portal-header .inline-warning {
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
|
||||
@@ -830,7 +867,6 @@ main {
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.portal-header .toolbox-shell__bar,
|
||||
main,
|
||||
.site-footer {
|
||||
width: min(100% - 1.4rem, 1160px);
|
||||
@@ -870,6 +906,23 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.tool-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-field,
|
||||
.category-field,
|
||||
.active-filter,
|
||||
.hidden-toggle {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.hidden-toggle {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) and (max-width: 960px) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
|
||||
|
||||
@@ -7,7 +7,7 @@ export const pdfManifest: ToolboxAppManifest = {
|
||||
schemaVersion: 1,
|
||||
id: 'de.add-ideas.pdf-tools',
|
||||
name: 'PDF Workbench',
|
||||
version: '0.4.0',
|
||||
version: '0.4.1',
|
||||
description: 'Page-level PDF operations performed locally in the browser.',
|
||||
entry: './',
|
||||
icon: './favicon.svg',
|
||||
@@ -39,7 +39,7 @@ export const xsltManifest: ToolboxAppManifest = {
|
||||
...pdfManifest,
|
||||
id: 'de.add-ideas.xslt-tools',
|
||||
name: 'XSLT Workbench',
|
||||
version: '0.4.0',
|
||||
version: '0.4.1',
|
||||
description: 'Transform XML locally with XSLT in the browser.',
|
||||
icon: './xslt.svg',
|
||||
categories: ['documents', 'developer'],
|
||||
@@ -54,7 +54,7 @@ export const onenoteManifest: ToolboxAppManifest = {
|
||||
...pdfManifest,
|
||||
id: 'de.add-ideas.onenote-tools',
|
||||
name: 'OneNote Reader',
|
||||
version: '0.3.0',
|
||||
version: '0.3.1',
|
||||
description: 'Inspect OneNote packages locally in the browser.',
|
||||
icon: './onenote.svg',
|
||||
categories: ['documents', 'notes'],
|
||||
|
||||
Reference in New Issue
Block a user