-
-
-
On this device
-
Personalize your toolbox
-
- ×
-
-
+
+
On this device
+
Personalize your toolbox
+
- Browser storage is unavailable. Changes will last only until this
- page closes.
-
- )}
-
-
- Appearance
-
- {(['system', 'light', 'dark'] as const).map((theme) => (
- setTheme(theme)}
- >
- {theme.slice(0, 1).toLocaleUpperCase() + theme.slice(1)}
-
- ))}
-
-
-
-
-
- {preferences.pinned.length}
- Pinned
-
-
- {preferences.hidden.length}
- Hidden
-
-
- {preferences.order.length}
- Ordered
-
-
- 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 && (
+
+ Browser storage is unavailable. Changes will last only until this page
+ closes.
+ )}
-
-
- Export JSON
-
-
fileInput.current?.click()}>
- Import JSON
-
-
-
{
- onChange({ ...defaultPreferences });
- setMessage('Preferences reset.');
- }}
- >
- Reset
-
+
+ Appearance
+
+ {(['system', 'light', 'dark'] as const).map((theme) => (
+ setTheme(theme)}
+ >
+ {theme.slice(0, 1).toLocaleUpperCase() + theme.slice(1)}
+
+ ))}
-
- {message}
-
-
-
+
+ {preferences.pinned.length}
+ Pinned
+
+
+ {preferences.hidden.length}
+ Hidden
+
+
+ {preferences.order.length}
+ Ordered
+
+
+ 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.
+
+
+
+
+ Export JSON
+
+ fileInput.current?.click()}>
+ Import JSON
+
+ {
+ onChange({ ...defaultPreferences });
+ setMessage('Preferences reset.');
+ }}
+ >
+ Reset
+
+
+
+ {message}
+
+
);
}
-
-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(',');
diff --git a/src/styles.css b/src/styles.css
index 717cb19..278f378 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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);
diff --git a/src/test/fixtures.ts b/src/test/fixtures.ts
index 59367bd..1749151 100644
--- a/src/test/fixtures.ts
+++ b/src/test/fixtures.ts
@@ -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'],