lotobo/toolbox-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

feat: redesign Toolbox navigation and personalization

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-23 00:33:03 +02:00
parent 587aadb79b
commit 67ba5e3eca
25 changed files with 1075 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/App.test.tsx
View File

@@ -1,4 +1,10 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import {
fireEvent,
render,
screen,
waitFor,
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, expect, it, vi } from 'vitest';
import App from './App';
@@ -16,14 +22,14 @@ describe('portal UI', () => {
await screen.findByRole('heading', { name: 'PDF Workbench' })
).toBeInTheDocument();
expect(
screen.getByText(
screen.getAllByText(
'Local processing · no file uploads declared · no telemetry declared'
)
).toBeInTheDocument();
).toHaveLength(3);
const sourceLinks = screen.getAllByRole('link', {
name: 'Source and license',
});
expect(sourceLinks).toHaveLength(2);
expect(sourceLinks).toHaveLength(4);
expect(
sourceLinks.find(
(link) =>
@@ -33,10 +39,15 @@ describe('portal UI', () => {
).toHaveAttribute('rel', 'noopener noreferrer');
expect(
sourceLinks.find((link) =>
link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.1.0')
link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.4.0')
)
).toBeDefined();
const launch = screen.getByRole('link', { name: /open tool/i });
expect(
screen.queryByRole('region', { name: 'Pinned' })
).not.toBeInTheDocument();
const launch = screen
.getAllByRole('link', { name: 'PDF Workbench' })
.find((link) => link.classList.contains('app-card__launch-link'))!;
expect(
new URL(launch.getAttribute('href')!).searchParams.get('toolbox')
).toContain('toolbox.catalog.json');
@@ -47,7 +58,15 @@ describe('portal UI', () => {
'de.add-ideas.pdf-tools'
)
);
expect(screen.getByText('Pinned')).toBeInTheDocument();
expect(screen.getByRole('region', { name: 'Pinned' })).toContainElement(
screen.getByTestId('app-card-de.add-ideas.pdf-tools')
);
expect(
screen.queryByRole('button', { name: /Move PDF Workbench/i })
).not.toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Reorder PDF Workbench' })
).toBeInTheDocument();
await user.click(
screen.getByRole('button', { name: 'Hide PDF Workbench' })
@@ -61,6 +80,144 @@ describe('portal UI', () => {
).toBeInTheDocument();
});
it('lists contextual destinations in the Apps menu', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup();
render(<App />);
await screen.findByRole('heading', { name: 'PDF Workbench' });
await user.click(screen.getByText('Apps').closest('summary')!);
const navigation = screen.getByRole('navigation', {
name: 'Toolbox applications',
});
const destination = within(navigation).getByRole('link', {
name: 'XSLT Workbench',
});
expect(
new URL(destination.getAttribute('href')!).searchParams.get('toolbox')
).toContain('toolbox.catalog.json');
});
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' }));
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' }));
fireEvent(
window,
new StorageEvent('storage', {
key: PREFERENCES_KEY,
newValue: JSON.stringify({
version: 1,
pinned: [],
order: [
'de.add-ideas.pdf-tools',
'de.add-ideas.xslt-tools',
'de.add-ideas.onenote-tools',
],
hidden: [],
theme: 'light',
}),
})
);
expect(document.documentElement).toHaveAttribute('data-theme', 'light');
});
it('supports keyboard drag ordering from each tile grip', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
render(<App />);
await screen.findByRole('heading', { name: 'PDF Workbench' });
const cards = [
screen.getByTestId('app-card-de.add-ideas.pdf-tools'),
screen.getByTestId('app-card-de.add-ideas.xslt-tools'),
screen.getByTestId('app-card-de.add-ideas.onenote-tools'),
];
cards.forEach((card, index) => {
const rect = {
x: index * 220,
y: 0,
width: 200,
height: 320,
top: 0,
right: index * 220 + 200,
bottom: 320,
left: index * 220,
toJSON: () => ({}),
} as DOMRect;
card.getBoundingClientRect = () => rect;
card.getClientRects = () => [rect] as unknown as DOMRectList;
});
const grip = screen.getByRole('button', { name: 'Reorder PDF Workbench' });
grip.focus();
fireEvent.keyDown(grip, { key: ' ', code: 'Space' });
await waitFor(() => expect(grip).toHaveAttribute('aria-pressed', 'true'));
await new Promise((resolve) => setTimeout(resolve, 0));
fireEvent.keyDown(document, { key: 'ArrowRight', code: 'ArrowRight' });
fireEvent.keyDown(document, { key: ' ', code: 'Space' });
await waitFor(() => {
const tools = screen.getByRole('region', { name: 'Tools' });
expect(
within(tools)
.getAllByRole('heading', { level: 3 })
.map((heading) => heading.textContent)
).toEqual(['XSLT Workbench', 'PDF Workbench', 'OneNote Reader']);
});
expect(
JSON.parse(localStorage.getItem(PREFERENCES_KEY) ?? '{}').order
).toEqual([
'de.add-ideas.xslt-tools',
'de.add-ideas.pdf-tools',
'de.add-ideas.onenote-tools',
]);
});
it('filters by clickable tags and clears an active tag', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup();
render(<App />);
const merge = await screen.findByRole('button', { name: '#merge' });
await user.click(merge);
expect(merge).toHaveAttribute('aria-pressed', 'true');
expect(
screen.getByRole('heading', { name: 'PDF Workbench' })
).toBeInTheDocument();
expect(
screen.queryByRole('heading', { name: 'XSLT Workbench' })
).not.toBeInTheDocument();
expect(
screen.queryByRole('heading', { name: 'OneNote Reader' })
).not.toBeInTheDocument();
await user.click(screen.getByRole('button', { name: '#merge' }));
expect(
await screen.findByRole('heading', { name: 'XSLT Workbench' })
).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'OneNote Reader' })
).toBeInTheDocument();
});
it('opens the standard help control and explains tile interaction', 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: 'Help' }));
expect(
screen.getByRole('dialog', { name: 'Choose and arrange your tools' })
).toHaveTextContent('click anywhere on a tool tile');
await user.click(screen.getByRole('button', { name: 'Close help' }));
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
it('shows a recoverable catalogue error', async () => {
const fetchMock = vi
.fn()

379
src/App.tsx
View File

@@ -1,13 +1,33 @@
import {
DndContext,
KeyboardSensor,
PointerSensor,
closestCenter,
useSensor,
useSensors,
type DragEndEvent,
} from '@dnd-kit/core';
import {
SortableContext,
rectSortingStrategy,
sortableKeyboardCoordinates,
} from '@dnd-kit/sortable';
import {
ToolboxHeader,
type ToolboxHeaderApp,
} from '@add-ideas/toolbox-shell-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { AppCard } from './components/AppCard';
import { HelpPanel } from './components/HelpPanel';
import { Logo } from './components/Logo';
import { PreferencesPanel } from './components/PreferencesPanel';
import { contextualLaunchUrl, loadCatalogue } from './catalogue';
import { cleanPreferences, sortAppIds } from './preferences';
import { cleanPreferences, reorderWithinIds, sortAppIds } from './preferences';
import type { LoadedCatalogue, ResolvedApp } from './types';
import { usePreferences } from './usePreferences';
const CATALOGUE_HREF = './toolbox.catalog.json';
const PORTAL_SOURCE = 'https://git.add-ideas.de/zemion/toolbox-portal';
type LoadState =
| { status: 'loading' }
@@ -17,9 +37,11 @@ type LoadState =
function appMatches(
app: ResolvedApp,
query: string,
category: string
category: string,
tag: string
): boolean {
if (category && !app.categories.includes(category)) return false;
if (tag && !app.tags.includes(tag)) return false;
if (!query) return true;
const haystack = [app.name, app.description, ...app.categories, ...app.tags]
.join(' ')
@@ -27,15 +49,84 @@ function appMatches(
return haystack.includes(query.toLocaleLowerCase());
}
interface AppSectionProps {
activeTag: string;
apps: ResolvedApp[];
catalogueUrl: string;
hiddenIds: readonly string[];
id: string;
onCategory: (category: string) => void;
onHide: (id: string) => void;
onPin: (id: string) => void;
onTag: (tag: string) => void;
pinned: boolean;
title: string;
}
function AppSection({
activeTag,
apps,
catalogueUrl,
hiddenIds,
id,
onCategory,
onHide,
onPin,
onTag,
pinned,
title,
}: AppSectionProps) {
if (apps.length === 0) return null;
return (
<section className="app-section" aria-labelledby={`${id}-title`}>
<header className="app-section__header">
<h2 id={`${id}-title`}>{title}</h2>
<span>{apps.length}</span>
</header>
<SortableContext
id={id}
items={apps.map((app) => app.id)}
strategy={rectSortingStrategy}
>
<div className="app-grid">
{apps.map((app) => (
<AppCard
key={app.id}
app={app}
catalogueUrl={catalogueUrl}
contextualUrl={contextualLaunchUrl}
pinned={pinned}
hidden={hiddenIds.includes(app.id)}
activeTag={activeTag}
onCategory={onCategory}
onPin={() => onPin(app.id)}
onHide={() => onHide(app.id)}
onTag={onTag}
/>
))}
</div>
</SortableContext>
</section>
);
}
export default function App() {
const [loadState, setLoadState] = useState<LoadState>({ status: 'loading' });
const [reloadKey, setReloadKey] = useState(0);
const [query, setQuery] = useState('');
const [category, setCategory] = useState('');
const [activeTag, setActiveTag] = useState('');
const [showHidden, setShowHidden] = useState(false);
const [settingsOpen, setSettingsOpen] = useState(false);
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 sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
);
useEffect(() => {
const controller = new AbortController();
@@ -91,8 +182,26 @@ export default function App() {
}, [apps, preferences]);
const visibleApps = orderedApps.filter((app) => {
const hidden = preferences.hidden.includes(app.id);
return (showHidden || !hidden) && appMatches(app, query.trim(), category);
return (
(showHidden || !hidden) &&
appMatches(app, query.trim(), category, activeTag)
);
});
const pinnedApps = visibleApps.filter((app) =>
preferences.pinned.includes(app.id)
);
const regularApps = visibleApps.filter(
(app) => !preferences.pinned.includes(app.id)
);
const headerApps: ToolboxHeaderApp[] = apps.map((app) => ({
id: app.id,
name: app.name,
href: app.isExternal
? app.entryUrl
: contextualLaunchUrl(app.entryUrl, loaded?.catalogueUrl.href ?? ''),
newTab: !app.launchModes.includes('navigate'),
}));
function toggleListItem(field: 'pinned' | 'hidden', id: string) {
setPreferences((current) => ({
@@ -103,25 +212,26 @@ export default function App() {
}));
}
function moveApp(id: string, direction: -1 | 1) {
const pinned = preferences.pinned.includes(id);
const peers = visibleApps.filter(
(app) => preferences.pinned.includes(app.id) === pinned
function handleDragEnd(event: DragEndEvent) {
if (!event.over) return;
const activeId = String(event.active.id);
const overId = String(event.over.id);
const activePinned = preferences.pinned.includes(activeId);
if (activePinned !== preferences.pinned.includes(overId)) return;
const peers = (activePinned ? pinnedApps : regularApps).map(
(app) => app.id
);
const currentIndex = peers.findIndex((app) => app.id === id);
const target = peers[currentIndex + direction];
if (!target) return;
setPreferences((current) => {
const currentPosition = current.order.indexOf(id);
const targetPosition = current.order.indexOf(target.id);
if (currentPosition < 0 || targetPosition < 0) return current;
const order = [...current.order];
[order[currentPosition], order[targetPosition]] = [
order[targetPosition]!,
order[currentPosition]!,
];
return { ...current, order };
});
setPreferences((current) => ({
...current,
order: reorderWithinIds(current.order, activeId, overId, peers),
}));
}
function clearFilters() {
setQuery('');
setCategory('');
setActiveTag('');
if (preferences.hidden.length > 0) setShowHidden(true);
}
const title = loaded?.catalogue.name ?? 'add·ideas Toolbox';
@@ -131,49 +241,92 @@ export default function App() {
<>
<div
className="site-shell"
inert={settingsOpen}
aria-hidden={settingsOpen || undefined}
inert={dialogOpen}
aria-hidden={dialogOpen || undefined}
>
<a className="skip-link" href="#main-content">
Skip to tools
</a>
<header className="site-header">
<div className="header-inner">
<a
className="brand"
href={loaded ? loaded.homeUrl : './'}
aria-label={`${title} home`}
>
<Logo />
<span>
<strong>{brand}</strong>
<small>Toolbox</small>
</span>
</a>
<button
className="settings-button"
type="button"
onClick={() => setSettingsOpen(true)}
>
<span aria-hidden="true">☼</span> Personalize
</button>
</div>
</header>
<ToolboxHeader
className="portal-header"
title={title}
iconUrl="./favicon.svg"
theme={preferences.theme}
homeHref={loaded?.homeUrl ?? './'}
homeLabel={brand}
helpAction={{ onClick: () => setHelpOpen(true) }}
sourceHref={PORTAL_SOURCE}
sourceLabel="Toolbox source on Gitea"
onPersonalize={() => setSettingsOpen(true)}
apps={headerApps}
allAppsHref="#main-content"
/>
<main id="main-content">
<section className="hero" aria-labelledby="page-title">
<p className="eyebrow">
Privacy details up front · useful by default
</p>
<h1 id="page-title">
Your document tools,
<br />
<span>in one calm place.</span>
</h1>
<p className="hero-copy">
Focused browser utilities with a privacy disclosure for each tool.
Choose one and keep your work moving.
</p>
<div className="hero-intro">
<p className="eyebrow">
Privacy details up front · useful by default
</p>
<h2 id="page-title">
Your document tools,
<br />
<span>in one calm place.</span>
</h2>
<p className="hero-copy">
Focused browser utilities with a privacy disclosure for each
tool. Choose one and keep your work moving.
</p>
</div>
{loaded && (
<section className="tool-controls" aria-label="Find a tool">
<label className="search-field">
<span className="visually-hidden">Search tools</span>
<span aria-hidden="true">⌕</span>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search tools"
type="search"
/>
</label>
<label className="category-field">
<span className="visually-hidden">Filter by category</span>
<select
value={category}
onChange={(event) => setCategory(event.target.value)}
>
<option value="">All categories</option>
{categories.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
</label>
{activeTag && (
<button
className="active-filter"
type="button"
onClick={() => setActiveTag('')}
>
#{activeTag} <span aria-hidden="true">×</span>
<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>
)}
</section>
)}
</section>
{loadState.status === 'loading' && (
@@ -205,43 +358,6 @@ export default function App() {
{loaded && (
<>
<section className="tool-controls" aria-label="Find a tool">
<label className="search-field">
<span className="visually-hidden">Search tools</span>
<span aria-hidden="true">⌕</span>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search tools"
type="search"
/>
</label>
<label className="category-field">
<span className="visually-hidden">Filter by category</span>
<select
value={category}
onChange={(event) => setCategory(event.target.value)}
>
<option value="">All categories</option>
{categories.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
</label>
{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>
)}
</section>
{apps.length === 0 && loaded.unavailable.length === 0 && (
<section className="state-card">
<span className="state-icon" aria-hidden="true">
@@ -264,43 +380,51 @@ export default function App() {
<p>
Try another search or category, or show your hidden tools.
</p>
<button
type="button"
onClick={() => {
setQuery('');
setCategory('');
setShowHidden(true);
}}
>
<button type="button" onClick={clearFilters}>
Clear filters
</button>
</section>
)}
{visibleApps.length > 0 && (
<section className="app-grid" aria-label="Available tools">
{visibleApps.map((app) => {
const pinned = preferences.pinned.includes(app.id);
const peers = visibleApps.filter(
(peer) => preferences.pinned.includes(peer.id) === pinned
);
return (
<AppCard
key={app.id}
app={app}
catalogueUrl={loaded.catalogueUrl.href}
contextualUrl={contextualLaunchUrl}
pinned={pinned}
hidden={preferences.hidden.includes(app.id)}
first={peers[0]?.id === app.id}
last={peers.at(-1)?.id === app.id}
onPin={() => toggleListItem('pinned', app.id)}
onHide={() => toggleListItem('hidden', app.id)}
onMove={(direction) => moveApp(app.id, direction)}
/>
);
})}
</section>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<div className="app-sections" aria-label="Available tools">
<AppSection
id="pinned-apps"
title="Pinned"
apps={pinnedApps}
pinned
activeTag={activeTag}
catalogueUrl={loaded.catalogueUrl.href}
hiddenIds={preferences.hidden}
onCategory={setCategory}
onPin={(id) => toggleListItem('pinned', id)}
onHide={(id) => toggleListItem('hidden', id)}
onTag={(tag) =>
setActiveTag((current) => (current === tag ? '' : tag))
}
/>
<AppSection
id="regular-apps"
title="Tools"
apps={regularApps}
pinned={false}
activeTag={activeTag}
catalogueUrl={loaded.catalogueUrl.href}
hiddenIds={preferences.hidden}
onCategory={setCategory}
onPin={(id) => toggleListItem('pinned', id)}
onHide={(id) => toggleListItem('hidden', id)}
onTag={(tag) =>
setActiveTag((current) => (current === tag ? '' : tag))
}
/>
</div>
</DndContext>
)}
{loaded.unavailable.length > 0 && (
@@ -332,9 +456,9 @@ export default function App() {
</span>
</p>
<span>
Portal v0.1.0 ·{' '}
Portal v0.2.0 ·{' '}
<a
href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.1.0"
href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.0"
target="_blank"
rel="noopener noreferrer"
>
@@ -351,6 +475,7 @@ export default function App() {
onChange={setPreferences}
onClose={closeSettings}
/>
<HelpPanel open={helpOpen} onClose={closeHelp} />
</>
);
}

6
src/catalogue.test.ts
View File

@@ -5,12 +5,12 @@ import { catalogue, catalogueFetch } from './test/fixtures';
afterEach(() => vi.unstubAllGlobals());
describe('catalogue loading', () => {
it('loads and resolves an internal app using the shared contract', async () => {
it('loads and resolves internal apps using the shared contract', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const loaded = await loadCatalogue('/toolbox.catalog.json');
expect(loaded.catalogue.name).toBe('add·ideas Toolbox');
expect(loaded.homeUrl).toBe('http://localhost:3000/');
expect(loaded.apps).toHaveLength(1);
expect(loaded.apps).toHaveLength(3);
expect(loaded.apps[0]).toMatchObject({
id: 'de.add-ideas.pdf-tools',
name: 'PDF Workbench',
@@ -38,6 +38,8 @@ describe('catalogue loading', () => {
const loaded = await loadCatalogue('/toolbox.catalog.json');
expect(loaded.apps.map((app) => app.id)).toEqual([
'de.add-ideas.pdf-tools',
'de.add-ideas.xslt-tools',
'de.add-ideas.onenote-tools',
]);
expect(loaded.unavailable).toHaveLength(1);
expect(loaded.unavailable[0]?.reason).toMatch(/HTTP 404/);

114
src/components/AppCard.tsx
View File

@@ -1,3 +1,5 @@
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { ResolvedApp } from '../types';
interface AppCardProps {
@@ -5,11 +7,11 @@ interface AppCardProps {
catalogueUrl: string;
hidden: boolean;
pinned: boolean;
first: boolean;
last: boolean;
activeTag: string;
onCategory: (category: string) => void;
onHide: () => void;
onMove: (direction: -1 | 1) => void;
onPin: () => void;
onTag: (tag: string) => void;
contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
}
@@ -55,21 +57,35 @@ export function AppCard({
catalogueUrl,
hidden,
pinned,
first,
last,
activeTag,
onCategory,
onHide,
onMove,
onPin,
onTag,
contextualUrl,
}: AppCardProps) {
const {
attributes,
isDragging,
listeners,
setActivatorNodeRef,
setNodeRef,
transform,
transition,
} = useSortable({ id: app.id });
const launchUrl = app.isExternal
? app.entryUrl
: contextualUrl(app.entryUrl, catalogueUrl);
const target = app.launchModes.includes('navigate') ? undefined : '_blank';
return (
<article
className={`app-card${hidden ? ' app-card--hidden' : ''}`}
ref={setNodeRef}
className={`app-card${hidden ? ' app-card--hidden' : ''}${
isDragging ? ' app-card--dragging' : ''
}`}
data-testid={`app-card-${app.id}`}
style={{ transform: CSS.Transform.toString(transform), transition }}
>
<div className="app-card__top">
<div className="app-card__icon" aria-hidden="true">
@@ -83,6 +99,17 @@ export function AppCard({
className="app-card__actions"
aria-label={`Personalize ${app.name}`}
>
<button
ref={setActivatorNodeRef}
{...attributes}
{...listeners}
className="icon-button drag-handle"
type="button"
aria-label={`Reorder ${app.name}`}
title="Drag to reorder"
>
<span aria-hidden="true">⠿</span>
</button>
<button
className={`icon-button${pinned ? ' is-active' : ''}`}
type="button"
@@ -93,24 +120,6 @@ export function AppCard({
>
<span aria-hidden="true">⌁</span>
</button>
<button
className="icon-button"
type="button"
aria-label={`Move ${app.name} earlier`}
disabled={first}
onClick={() => onMove(-1)}
>
<span aria-hidden="true">←</span>
</button>
<button
className="icon-button"
type="button"
aria-label={`Move ${app.name} later`}
disabled={last}
onClick={() => onMove(1)}
>
<span aria-hidden="true">→</span>
</button>
<button
className="icon-button"
type="button"
@@ -123,7 +132,16 @@ export function AppCard({
</div>
<div className="app-card__body">
<div className="title-line">
<h2>{app.name}</h2>
<h3>
<a
className="app-card__launch-link"
href={launchUrl}
target={target}
rel={target ? 'noopener noreferrer' : undefined}
>
{app.name}
</a>
</h3>
{pinned && <span className="status-chip">Pinned</span>}
{hidden && (
<span className="status-chip status-chip--muted">Hidden</span>
@@ -135,11 +153,33 @@ export function AppCard({
<p>{app.description}</p>
<PrivacySummary app={app} />
<RequirementSummary app={app} />
<div className="tag-row" aria-label="Categories">
{app.categories.slice(0, 3).map((category) => (
<span key={category}>{category}</span>
))}
</div>
{app.categories.length > 0 && (
<div className="category-row" aria-label="Categories">
{app.categories.slice(0, 3).map((category) => (
<button
type="button"
key={category}
onClick={() => onCategory(category)}
>
{category}
</button>
))}
</div>
)}
{app.tags.length > 0 && (
<div className="tag-row" aria-label="Tags">
{app.tags.map((tag) => (
<button
type="button"
key={tag}
aria-pressed={activeTag === tag}
onClick={() => onTag(tag)}
>
#{tag}
</button>
))}
</div>
)}
</div>
<footer className="app-card__footer">
<div className="app-card__meta">
@@ -157,15 +197,9 @@ export function AppCard({
</a>
)}
</div>
<a
className="launch-button"
href={launchUrl}
target={target}
rel={target ? 'noopener noreferrer' : undefined}
>
{target ? 'Open in new tab' : 'Open tool'}{' '}
<span aria-hidden="true">↗</span>
</a>
<span className="open-hint">
Open tool <span aria-hidden="true">↗</span>
</span>
</footer>
</article>
);

109
src/components/HelpPanel.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { useEffect, useRef } from 'react';
interface HelpPanelProps {
open: boolean;
onClose: () => void;
}
export function HelpPanel({ open, onClose }: HelpPanelProps) {
const panel = useRef<HTMLElement>(null);
useEffect(() => {
if (!open) return;
const returnFocus =
document.activeElement instanceof HTMLElement
? document.activeElement
: null;
const dialog = panel.current;
const focusable = () =>
dialog
? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]
: [];
focusable()[0]?.focus();
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault();
onClose();
return;
}
if (event.key !== 'Tab') return;
const elements = focusable();
const first = elements[0];
const last = elements.at(-1);
if (!first || !last) return;
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
returnFocus?.focus();
};
}, [open, onClose]);
if (!open) return null;
return (
<div
className="dialog-backdrop"
role="presentation"
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
>
<section
ref={panel}
className="help-panel"
role="dialog"
aria-modal="true"
aria-labelledby="help-title"
tabIndex={-1}
>
<header>
<div>
<p className="eyebrow">Toolbox guide</p>
<h2 id="help-title">Choose and arrange your tools</h2>
</div>
<button
className="close-button"
type="button"
aria-label="Close help"
onClick={onClose}
>
×
</button>
</header>
<div className="help-steps">
<p>
<strong>Open:</strong> click anywhere on a tool tile that is not a
control.
</p>
<p>
<strong>Filter:</strong> search, choose a category, or click a tag.
Click the selected tag again to clear it.
</p>
<p>
<strong>Arrange:</strong> pin frequently used tools into their own
section, then drag the grip to reorder. The grip also supports
keyboard dragging with Space, arrow keys, and Escape.
</p>
<p>
<strong>Privacy:</strong> each tile reports its declared processing,
uploads, telemetry, and browser requirements before you open it.
</p>
</div>
</section>
</div>
);
}
const FOCUSABLE_SELECTOR = [
'a[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(',');

1
src/main.tsx
View File

@@ -1,5 +1,6 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@add-ideas/toolbox-shell-react/styles.css';
import App from './App';
import './styles.css';

36
src/preferences.test.ts
View File

@@ -3,9 +3,9 @@ import {
PREFERENCES_KEY,
cleanPreferences,
defaultPreferences,
moveId,
parsePreferences,
readPreferences,
reorderWithinIds,
sortAppIds,
writePreferences,
} from './preferences';
@@ -51,7 +51,7 @@ describe('preferences', () => {
).toThrow(/pinned/i);
});
it('cleans stale ids, pins first, and supports personal ordering', () => {
it('cleans stale ids and applies personal ordering without mixing sections', () => {
const cleaned = cleanPreferences(
{
version: 1,
@@ -65,14 +65,36 @@ describe('preferences', () => {
expect(cleaned.order).toEqual(['app.two', 'app.one', 'app.three']);
expect(cleaned.hidden).toEqual([]);
expect(sortAppIds(['app.one', 'app.two', 'app.three'], cleaned)).toEqual([
'app.three',
'app.two',
'app.one',
]);
expect(moveId(cleaned.order, 'app.one', -1)).toEqual([
'app.one',
'app.two',
'app.three',
]);
expect(
reorderWithinIds(
['pin.one', 'tool.one', 'pin.two', 'tool.two'],
'pin.two',
'pin.one',
['pin.one', 'pin.two']
)
).toEqual(['pin.two', 'tool.one', 'pin.one', 'tool.two']);
expect(
reorderWithinIds(cleaned.order, 'app.one', 'app.two', [
'app.two',
'app.one',
])
).toEqual(['app.one', 'app.two', 'app.three']);
});
it('does not reorder across peer groups or for an unknown drop target', () => {
const order = ['pin.one', 'tool.one', 'pin.two'];
expect(
reorderWithinIds(order, 'pin.one', 'tool.one', ['pin.one', 'pin.two'])
).toBe(order);
expect(
reorderWithinIds(order, 'missing', 'pin.one', ['pin.one', 'pin.two'])
).toBe(order);
expect(reorderWithinIds(order, 'pin.one', 'pin.one', ['pin.one'])).toBe(
order
);
});
});

106
src/preferences.ts
View File

@@ -1,66 +1,31 @@
import type { ThemeMode } from './types';
export const PREFERENCES_KEY = '@add-ideas/toolbox-portal:v1:preferences';
export interface Preferences {
version: 1;
pinned: string[];
order: string[];
hidden: string[];
theme: ThemeMode;
}
import {
TOOLBOX_PREFERENCES_KEY,
defaultToolboxPreferences,
parseToolboxPreferences,
readToolboxPreferences,
writeToolboxPreferences,
type ToolboxPreferences,
} from '@add-ideas/toolbox-contract';
export const PREFERENCES_KEY = TOOLBOX_PREFERENCES_KEY;
export type Preferences = ToolboxPreferences;
export const defaultPreferences: Preferences = {
version: 1,
...defaultToolboxPreferences,
pinned: [],
order: [],
hidden: [],
theme: 'system',
};
function uniqueStrings(value: unknown, field: string): string[] {
if (
!Array.isArray(value) ||
value.some((item) => typeof item !== 'string' || item.length === 0)
)
throw new Error(`${field} must be an array of non-empty strings.`);
return [...new Set(value)];
}
export function parsePreferences(value: unknown): Preferences {
if (typeof value !== 'object' || value === null || Array.isArray(value)) {
throw new Error('Preferences must be a JSON object.');
}
const candidate = value as Record<string, unknown>;
if (candidate.version !== 1)
throw new Error('Unsupported preferences version.');
const theme = candidate.theme;
if (!['light', 'dark', 'system'].includes(String(theme)))
throw new Error('Invalid theme preference.');
return {
version: 1,
pinned: uniqueStrings(candidate.pinned, 'pinned'),
order: uniqueStrings(candidate.order, 'order'),
hidden: uniqueStrings(candidate.hidden, 'hidden'),
theme: theme as ThemeMode,
};
}
export const parsePreferences = parseToolboxPreferences;
export function readPreferences(storage: Storage = localStorage): Preferences {
const value = storage.getItem(PREFERENCES_KEY);
if (!value) return { ...defaultPreferences };
try {
return parsePreferences(JSON.parse(value));
} catch {
return { ...defaultPreferences };
}
return readToolboxPreferences(storage);
}
export function writePreferences(
preferences: Preferences,
storage: Storage = localStorage
): void {
storage.setItem(PREFERENCES_KEY, JSON.stringify(preferences));
writeToolboxPreferences(preferences, storage);
}
export function cleanPreferences(
@@ -84,27 +49,36 @@ export function sortAppIds(
preferences: Preferences
): string[] {
const order = new Map(preferences.order.map((id, index) => [id, index]));
const pinned = new Set(preferences.pinned);
return [...appIds].sort((left, right) => {
const pinDifference = Number(pinned.has(right)) - Number(pinned.has(left));
if (pinDifference) return pinDifference;
return (
return [...appIds].sort(
(left, right) =>
(order.get(left) ?? Number.MAX_SAFE_INTEGER) -
(order.get(right) ?? Number.MAX_SAFE_INTEGER)
);
});
);
}
export function moveId(
export function reorderWithinIds(
order: string[],
id: string,
direction: -1 | 1
activeId: string,
overId: string,
peerIds: readonly string[]
): string[] {
const current = order.indexOf(id);
if (current < 0) return order;
const target = current + direction;
if (target < 0 || target >= order.length) return order;
const next = [...order];
[next[current], next[target]] = [next[target]!, next[current]!];
return next;
if (activeId === overId) return order;
const peers = new Set(peerIds);
if (!peers.has(activeId) || !peers.has(overId)) return order;
const orderedPeers = order.filter((id) => peers.has(id));
for (const id of peerIds) {
if (!orderedPeers.includes(id)) orderedPeers.push(id);
}
const from = orderedPeers.indexOf(activeId);
const to = orderedPeers.indexOf(overId);
if (from < 0 || to < 0) return order;
const [moved] = orderedPeers.splice(from, 1);
if (!moved) return order;
orderedPeers.splice(to, 0, moved);
let peerIndex = 0;
return order.map((id) =>
peers.has(id) ? (orderedPeers[peerIndex++] ?? id) : id
);
}

292
src/styles.css
View File

@@ -17,6 +17,10 @@
--shadow: 0 16px 44px rgba(24, 34, 68, 0.08);
}
:root[data-theme='light'] {
color-scheme: light;
}
:root[data-theme='dark'] {
color-scheme: dark;
--bg: #0f1422;
@@ -119,63 +123,13 @@ summary:focus-visible {
transform: translateY(0);
}
.site-header {
position: sticky;
z-index: 20;
top: 0;
border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(16px);
}
.header-inner,
.portal-header .toolbox-shell__bar,
main,
.site-footer {
width: min(1160px, calc(100% - 2.5rem));
margin-inline: auto;
}
.header-inner {
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--text);
text-decoration: none;
}
.brand .logo {
color: var(--brand);
}
.brand > span {
display: grid;
line-height: 1.05;
}
.brand strong {
font-family: Inter, Avenir, 'Segoe UI', ui-sans-serif, sans-serif;
font-size: 1.03rem;
letter-spacing: -0.025em;
}
.brand small {
margin-top: 0.22rem;
color: var(--muted);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.settings-button,
.state-card button,
.preferences-actions button {
border: 1px solid var(--line);
@@ -185,11 +139,6 @@ main,
font-weight: 600;
}
.settings-button {
padding: 0.62rem 0.82rem;
}
.settings-button:hover,
.state-card button:hover,
.preferences-actions button:hover {
border-color: var(--brand);
@@ -201,8 +150,15 @@ main {
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
align-items: end;
gap: clamp(2rem, 6vw, 5rem);
padding: clamp(3.5rem, 7vw, 6.8rem) 0 clamp(2.5rem, 5vw, 4.2rem);
}
.hero-intro {
max-width: 750px;
padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(3rem, 6vw, 5.2rem);
}
.eyebrow {
@@ -214,7 +170,7 @@ main {
text-transform: uppercase;
}
.hero h1 {
.hero h2 {
margin: 0;
font-family: Inter, Avenir, 'Segoe UI', ui-sans-serif, sans-serif;
font-size: clamp(2.65rem, 7vw, 5.65rem);
@@ -222,7 +178,7 @@ main {
letter-spacing: -0.065em;
}
.hero h1 span {
.hero h2 span {
color: var(--brand);
}
@@ -235,10 +191,14 @@ main {
}
.tool-controls {
display: flex;
align-items: center;
display: grid;
align-content: end;
gap: 0.75rem;
margin-bottom: 1.5rem;
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,
@@ -252,7 +212,7 @@ main {
}
.search-field {
width: min(360px, 100%);
width: 100%;
padding: 0 0.85rem;
gap: 0.55rem;
}
@@ -275,7 +235,7 @@ main {
}
.category-field {
min-width: 175px;
width: 100%;
padding: 0 0.65rem;
}
@@ -287,7 +247,7 @@ main {
display: flex;
align-items: center;
gap: 0.45rem;
margin-left: auto;
margin: 0.15rem 0 0;
color: var(--muted);
cursor: pointer;
font-size: 0.88rem;
@@ -299,14 +259,56 @@ main {
accent-color: var(--brand);
}
.active-filter {
justify-self: start;
padding: 0.4rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand);
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.app-sections {
display: grid;
gap: 2.4rem;
}
.app-section__header {
display: flex;
align-items: baseline;
gap: 0.65rem;
margin-bottom: 0.85rem;
}
.app-section__header h2 {
margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
font-size: 1.25rem;
letter-spacing: -0.025em;
}
.app-section__header span {
min-width: 1.55rem;
padding: 0.16rem 0.4rem;
border-radius: 999px;
background: var(--surface-soft);
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
text-align: center;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
padding-bottom: 2rem;
}
.app-card {
position: relative;
min-height: 340px;
display: flex;
flex-direction: column;
@@ -321,6 +323,12 @@ main {
box-shadow 180ms ease;
}
.app-card--dragging {
z-index: 5;
opacity: 0.82;
box-shadow: 0 24px 65px rgba(24, 34, 68, 0.22);
}
.app-card:hover {
border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
transform: translateY(-2px);
@@ -360,10 +368,21 @@ main {
}
.app-card__actions {
position: relative;
z-index: 2;
display: flex;
gap: 0.15rem;
}
.drag-handle {
touch-action: none;
cursor: grab;
}
.drag-handle:active {
cursor: grabbing;
}
.icon-button,
.close-button {
width: 32px;
@@ -400,15 +419,39 @@ main {
gap: 0.45rem;
}
.title-line h2 {
.title-line h3 {
margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
font-size: 1.3rem;
letter-spacing: -0.025em;
}
.app-card__launch-link {
color: var(--text);
text-decoration: none;
}
.app-card__launch-link::after {
position: absolute;
z-index: 1;
inset: 0;
content: '';
}
.app-card__launch-link:focus-visible {
outline: none;
}
.app-card:has(.app-card__launch-link:focus-visible) {
outline: 3px solid color-mix(in srgb, var(--accent) 70%, var(--brand));
outline-offset: 3px;
}
.status-chip,
.tag-row span {
.tag-row button,
.category-row button {
position: relative;
z-index: 2;
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand);
@@ -419,6 +462,7 @@ main {
.status-chip {
padding: 0.22rem 0.48rem;
text-transform: uppercase;
pointer-events: none;
}
.status-chip--muted {
@@ -442,17 +486,37 @@ main {
font-weight: 650;
}
.tag-row {
.tag-row,
.category-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 1rem;
}
.tag-row span {
.tag-row button,
.category-row button {
padding: 0.28rem 0.52rem;
border: 0;
background: var(--surface-soft);
color: var(--muted);
font: inherit;
cursor: pointer;
}
.category-row {
margin-top: 1rem;
}
.tag-row {
margin-top: 0.55rem;
}
.tag-row button:hover,
.category-row button:hover,
.tag-row button[aria-pressed='true'] {
background: var(--brand-soft);
color: var(--brand);
}
.app-card__footer {
@@ -477,28 +541,15 @@ main {
.source-link,
.site-footer a {
position: relative;
z-index: 2;
color: var(--brand);
}
.launch-button {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.62rem 0.82rem;
border-radius: 0.65rem;
background: var(--brand);
color: var(--surface);
.open-hint {
color: var(--brand);
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
}
:root[data-theme='dark'] .launch-button {
color: #11182a;
}
.launch-button:hover {
background: var(--brand-hover);
}
.state-card {
@@ -609,7 +660,8 @@ main {
backdrop-filter: blur(5px);
}
.preferences-panel {
.preferences-panel,
.help-panel {
width: min(560px, 100%);
max-height: calc(100vh - 2rem);
overflow: auto;
@@ -620,23 +672,47 @@ main {
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}
.preferences-panel > header {
.preferences-panel > header,
.help-panel > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.preferences-panel h2 {
.preferences-panel h2,
.help-panel h2 {
margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
letter-spacing: -0.025em;
}
.preferences-panel .eyebrow {
.preferences-panel .eyebrow,
.help-panel .eyebrow {
margin-bottom: 0.5rem;
}
.help-steps {
display: grid;
gap: 0.85rem;
margin-top: 1.4rem;
}
.help-steps p {
margin: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--surface-soft);
color: var(--muted);
font-size: 0.9rem;
line-height: 1.55;
}
.help-steps strong {
color: var(--text);
}
.close-button {
flex: 0 0 auto;
background: var(--surface-soft);
@@ -754,31 +830,19 @@ main {
}
@media (max-width: 700px) {
.header-inner,
.portal-header .toolbox-shell__bar,
main,
.site-footer {
width: min(100% - 1.4rem, 1160px);
}
.header-inner {
min-height: 66px;
}
.settings-button {
font-size: 0;
}
.settings-button span {
font-size: 1.15rem;
}
.hero {
grid-template-columns: 1fr;
padding-top: 3.8rem;
}
.tool-controls {
align-items: stretch;
flex-direction: column;
width: 100%;
}
.search-field,
@@ -790,6 +854,10 @@ main {
margin: 0.25rem 0;
}
.app-grid {
grid-template-columns: 1fr;
}
.app-card {
min-height: 320px;
}
@@ -802,6 +870,16 @@ main {
}
}
@media (min-width: 701px) and (max-width: 960px) {
.hero {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
}
.app-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,

42
src/test/fixtures.ts
View File

@@ -7,7 +7,7 @@ export const pdfManifest: ToolboxAppManifest = {
schemaVersion: 1,
id: 'de.add-ideas.pdf-tools',
name: 'PDF Workbench',
version: '0.3.4',
version: '0.4.0',
description: 'Page-level PDF operations performed locally in the browser.',
entry: './',
icon: './favicon.svg',
@@ -35,13 +35,47 @@ export const pdfManifest: ToolboxAppManifest = {
},
};
export const xsltManifest: ToolboxAppManifest = {
...pdfManifest,
id: 'de.add-ideas.xslt-tools',
name: 'XSLT Workbench',
version: '0.4.0',
description: 'Transform XML locally with XSLT in the browser.',
icon: './xslt.svg',
categories: ['documents', 'developer'],
tags: ['transform', 'xml'],
source: {
repository: 'https://git.add-ideas.de/zemion/xslt-tools',
license: 'AGPL-3.0-only',
},
};
export const onenoteManifest: ToolboxAppManifest = {
...pdfManifest,
id: 'de.add-ideas.onenote-tools',
name: 'OneNote Reader',
version: '0.3.0',
description: 'Inspect OneNote packages locally in the browser.',
icon: './onenote.svg',
categories: ['documents', 'notes'],
tags: ['onepkg', 'import'],
source: {
repository: 'https://git.add-ideas.de/zemion/onenote-tools',
license: 'AGPL-3.0-only',
},
};
export const catalogue: ToolboxCatalog = {
schemaVersion: 1,
id: 'de.add-ideas.toolbox',
name: 'add·ideas Toolbox',
home: './',
theme: { mode: 'system', brand: 'add·ideas' },
apps: [{ manifest: './apps/pdf/toolbox-app.json', enabled: true }],
apps: [
{ manifest: './apps/pdf/toolbox-app.json', enabled: true },
{ manifest: './apps/xslt/toolbox-app.json', enabled: true },
{ manifest: './apps/onenote/toolbox-app.json', enabled: true },
],
};
export function catalogueFetch(overrides: Record<string, Response> = {}) {
@@ -56,6 +90,10 @@ export function catalogueFetch(overrides: Record<string, Response> = {}) {
return Response.json(catalogue);
if (url.pathname.endsWith('/apps/pdf/toolbox-app.json'))
return Response.json(pdfManifest);
if (url.pathname.endsWith('/apps/xslt/toolbox-app.json'))
return Response.json(xsltManifest);
if (url.pathname.endsWith('/apps/onenote/toolbox-app.json'))
return Response.json(onenoteManifest);
return new Response('Not found', { status: 404 });
};
}

18
src/usePreferences.ts
View File

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import {
PREFERENCES_KEY,
defaultPreferences,
parsePreferences,
readPreferences,
writePreferences,
type Preferences,
@@ -43,5 +44,22 @@ export function usePreferences(): [
}
}, [preferences]);
useEffect(() => {
const handleStorage = (event: StorageEvent) => {
if (event.key !== PREFERENCES_KEY) return;
if (event.newValue === null) {
setPreferences({ ...defaultPreferences });
return;
}
try {
setPreferences(parsePreferences(JSON.parse(event.newValue)));
} catch {
setPreferences({ ...defaultPreferences });
}
};
globalThis.addEventListener('storage', handleStorage);
return () => globalThis.removeEventListener('storage', handleStorage);
}, []);
return [preferences, setPreferences, initial.storageAvailable];
}