Needs {requirements.join(' · ')}
; +function MoveIcon() { + return ( + + ); } -function PrivacySummary({ app }: { app: ResolvedApp }) { - if (!app.privacy) - return ( -- External destination · review its privacy terms -
- ); - if (app.privacy.label) - return{app.privacy.label}
; - const processing = { - local: 'Local processing', - remote: 'Remote processing', - mixed: 'Local and remote capabilities', - }[app.privacy.processing]; +function LightBulbIcon() { return ( -- {processing} ·{' '} - {app.privacy.fileUploads - ? 'file/data transmission declared' - : 'no file uploads declared'}{' '} - · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'} -
+ + ); +} + +function PinIcon() { + return ( + + ); +} + +function VisibilityIcon({ hidden }: { hidden: boolean }) { + return ( + ); } @@ -57,13 +61,12 @@ export function AppCard({ catalogueUrl, hidden, pinned, - activeTag, - onCategory, + onDetails, onHide, onPin, - onTag, contextualUrl, }: AppCardProps) { + const titleId = useId(); const { attributes, isDragging, @@ -84,10 +87,23 @@ export function AppCard({ className={`app-card${hidden ? ' app-card--hidden' : ''}${ isDragging ? ' app-card--dragging' : '' }`} + aria-labelledby={titleId} data-testid={`app-card-${app.id}`} style={{ transform: CSS.Transform.toString(transform), transition }} > -
+
+
+
-
+
+
+
+
+ );
+}
diff --git a/src/components/HelpPanel.tsx b/src/components/HelpPanel.tsx
index f97d151..67cfe36 100644
--- a/src/components/HelpPanel.tsx
+++ b/src/components/HelpPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { ModalPanel } from './ModalPanel';
interface HelpPanelProps {
open: boolean;
@@ -6,104 +6,46 @@ interface HelpPanelProps {
}
export function HelpPanel({ open, onClose }: HelpPanelProps) {
- const panel = useRef(null);
-
- useEffect(() => {
- if (!open) return;
- const returnFocus =
- document.activeElement instanceof HTMLElement
- ? document.activeElement
- : null;
- const dialog = panel.current;
- const focusable = () =>
- dialog
- ? [...dialog.querySelectorAll(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 (
-
-
-
);
}
diff --git a/src/components/AppDetailsPanel.tsx b/src/components/AppDetailsPanel.tsx
new file mode 100644
index 0000000..d58804d
--- /dev/null
+++ b/src/components/AppDetailsPanel.tsx
@@ -0,0 +1,172 @@
+import { useId } from 'react';
+import type { ResolvedApp } from '../types';
+import { shortToolTitle } from '../toolPresentation';
+import { ModalPanel } from './ModalPanel';
+
+interface AppDetailsPanelProps {
+ activeTag: string;
+ app: ResolvedApp;
+ catalogueUrl: string;
+ hidden: boolean;
+ pinned: boolean;
+ contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
+ onCategory: (category: string) => void;
+ onClose: () => void;
+ onTag: (tag: string) => void;
+}
+
+function RequirementSummary({ app }: { app: ResolvedApp }) {
+ if (!app.requirements) return null;
+ const requirements = [
+ app.requirements.secureContext && 'Secure context',
+ app.requirements.workers && 'Web workers',
+ app.requirements.indexedDb && 'IndexedDB',
+ app.requirements.crossOriginIsolated && 'Cross-origin isolation',
+ ].filter(Boolean);
+ if (requirements.length === 0) return null;
+ return
-
- - - {app.name} - -
- {pinned && Pinned} - {hidden && ( - Hidden - )} - {app.isExternal && ( - External - )} -{app.description}
-
- {app.categories.slice(0, 3).map((category) => (
-
- ))}
-
- )}
- {app.tags.length > 0 && (
-
- {app.tags.map((tag) => (
-
- ))}
-
- )}
- Needs {requirements.join(' · ')}
; +} + +function PrivacySummary({ app }: { app: ResolvedApp }) { + if (!app.privacy) + return ( ++ External destination · review its privacy terms +
+ ); + if (app.privacy.label) + return{app.privacy.label}
; + const processing = { + local: 'Local processing', + remote: 'Remote processing', + mixed: 'Local and remote capabilities', + }[app.privacy.processing]; + return ( ++ {processing} ·{' '} + {app.privacy.fileUploads + ? 'file/data transmission declared' + : 'no file uploads declared'}{' '} + · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'} +
+ ); +} + +export function AppDetailsPanel({ + activeTag, + app, + catalogueUrl, + hidden, + pinned, + contextualUrl, + onCategory, + onClose, + onTag, +}: AppDetailsPanelProps) { + const titleId = useId(); + const launchUrl = app.isExternal + ? app.entryUrl + : contextualUrl(app.entryUrl, catalogueUrl); + const target = app.launchModes.includes('navigate') ? undefined : '_blank'; + + return ( +
+
+
+
+
+
+ Tool information
+
+
+ {app.name}
+ {pinned && Pinned} + {hidden && ( + Hidden + )} + {app.isExternal && ( + External + )} +
+
+
+
+ {app.description}
+
+ {app.categories.slice(0, 3).map((category) => (
+
+ ))}
+
+ )}
+ {app.tags.length > 0 && (
+
+ {app.tags.map((tag) => (
+
+ ))}
+
+ )}
+ event.target === event.currentTarget && onClose()}
+
-
-
-
-
);
}
-
-const FOCUSABLE_SELECTOR = [
- 'a[href]',
- 'button:not([disabled])',
- 'input:not([disabled])',
- 'select:not([disabled])',
- '[tabindex]:not([tabindex="-1"])',
-].join(',');
diff --git a/src/components/ModalPanel.tsx b/src/components/ModalPanel.tsx
new file mode 100644
index 0000000..6105cce
--- /dev/null
+++ b/src/components/ModalPanel.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+interface ModalPanelProps {
+ children: ReactNode;
+ className: string;
+ labelledBy: string;
+ onClose: () => void;
+}
+
+export function ModalPanel({
+ children,
+ className,
+ labelledBy,
+ onClose,
+}: ModalPanelProps) {
+ const panel = useRef(null);
+
+ useEffect(() => {
+ const returnFocus =
+ document.activeElement instanceof HTMLElement
+ ? document.activeElement
+ : null;
+ const dialog = panel.current;
+ const focusable = () =>
+ dialog
+ ? [...dialog.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+ (element) => !element.hasAttribute('disabled')
+ )
+ : [];
+
+ (focusable()[0] ?? dialog)?.focus();
+ const previousOverflow = document.documentElement.style.overflow;
+ document.documentElement.style.overflow = 'hidden';
+
+ 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) {
+ event.preventDefault();
+ dialog?.focus();
+ return;
+ }
+
+ const active = document.activeElement;
+ if (!dialog?.contains(active)) {
+ event.preventDefault();
+ (event.shiftKey ? last : first).focus();
+ } else if (event.shiftKey && active === first) {
+ event.preventDefault();
+ last.focus();
+ } else if (!event.shiftKey && active === last) {
+ event.preventDefault();
+ first.focus();
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ document.documentElement.style.overflow = previousOverflow;
+ if (returnFocus?.isConnected) returnFocus.focus();
+ };
+ }, [onClose]);
+
+ return (
+ = {
+ 'de.add-ideas.pdf-tools': {
+ title: 'PDF',
+ description: 'Arrange PDF pages locally.',
+ },
+ 'de.add-ideas.xslt-tools': {
+ title: 'XSLT',
+ description: 'Transform XML locally.',
+ },
+ 'de.add-ideas.onenote-tools': {
+ title: 'OneNote',
+ description: 'Open OneNote files locally.',
+ },
+};
+
+export function shortToolTitle(app: ResolvedApp): string {
+ return (
+ PRESENTATION[app.id]?.title ??
+ app.name.replace(/\s+(?:reader|tools?|workbench)$/iu, '')
+ );
+}
+
+export function shortToolDescription(app: ResolvedApp): string {
+ return PRESENTATION[app.id]?.description ?? app.description;
+}
-
-
- Toolbox guide
-Choose and arrange your tools
-
-
+
+
+
+ - Open: click anywhere on a tool tile that is not a - control. -
-- Filter: search, choose a category, or click a tag. - Click the selected tag again to clear it. -
-- Arrange: 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. -
-- Privacy: each tile reports its declared processing, - uploads, telemetry, and browser requirements before you open it. -
+
+
-
- Toolbox guide
+Choose and arrange your tools
+
+ + Open: click anywhere on a tool tile that is not a + control. +
++ Details: use the light bulb to review privacy, + requirements, categories, tags, version, and source before opening. +
++ Filter: search, choose a category, or select a tag + from a tool's information panel. Select the tag again to clear it. +
++ Arrange: 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. +
+
+ event.target === event.currentTarget && onClose()
+ }
+ >
+
+ {children}
+
+
+ );
+}
+
+const FOCUSABLE_SELECTOR = [
+ 'a[href]',
+ 'button:not([disabled])',
+ 'input:not([disabled])',
+ 'select:not([disabled])',
+ 'textarea:not([disabled])',
+ '[tabindex]:not([tabindex="-1"])',
+].join(',');
diff --git a/src/styles.css b/src/styles.css
index fb0df20..268c14a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -125,8 +125,9 @@ summary:focus-visible {
main,
.site-footer {
- width: min(1160px, calc(100% - 2.5rem));
+ width: min(100%, 90rem);
margin-inline: auto;
+ padding-inline: 1rem;
}
.state-card button,
@@ -305,23 +306,31 @@ main {
.app-grid {
display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 1.1rem;
+ grid-template-columns: repeat(
+ auto-fill,
+ minmax(min(10.5rem, 100%), 11.75rem)
+ );
+ align-items: start;
+ justify-content: start;
+ gap: 0.9rem;
}
.app-card {
position: relative;
- min-height: 340px;
+ aspect-ratio: 1;
+ min-width: 0;
display: flex;
flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
overflow: hidden;
+ padding: 1rem 0.85rem 0.75rem;
border: 1px solid var(--line);
- border-radius: 1.2rem;
+ border-radius: 1rem;
background: var(--surface);
box-shadow: var(--shadow);
transition:
border-color 180ms ease,
- transform 180ms ease,
box-shadow 180ms ease;
}
@@ -333,33 +342,35 @@ main {
.app-card:hover {
border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
- transform: translateY(-2px);
box-shadow: 0 20px 54px rgba(24, 34, 68, 0.13);
}
.app-card--hidden {
border-style: dashed;
- opacity: 0.7;
+ background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
}
-.app-card__top {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- padding: 1.35rem 1.35rem 0;
+.app-card__face {
+ min-height: 0;
+ display: grid;
+ flex: 1;
+ align-content: center;
+ justify-items: center;
+ padding: 0.2rem 0.25rem 0;
+ text-align: center;
}
.app-card__icon {
- width: 52px;
- height: 52px;
+ width: 3.6rem;
+ height: 3.6rem;
display: grid;
place-items: center;
overflow: hidden;
- border-radius: 0.95rem;
+ border-radius: 0.9rem;
background: var(--brand-soft);
color: var(--brand);
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
- font-size: 1.45rem;
+ font-size: 1.35rem;
font-weight: 700;
}
@@ -369,51 +380,130 @@ main {
object-fit: contain;
}
-.app-card__actions {
- position: relative;
- z-index: 2;
- display: flex;
- gap: 0.15rem;
+.app-card__face h3 {
+ margin: 0.7rem 0 0;
+ font-family: Inter, Avenir, 'Segoe UI', sans-serif;
+ font-size: 1.05rem;
+ letter-spacing: -0.025em;
+}
+
+.app-card__face p {
+ display: -webkit-box;
+ margin: 0.35rem 0 0;
+ overflow: hidden;
+ color: var(--muted);
+ font-size: 0.72rem;
+ line-height: 1.35;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
}
.drag-handle {
- touch-action: none;
+ position: absolute;
+ z-index: 2;
+ top: 50%;
+ left: 0.35rem;
+ width: 1.7rem;
+ height: 2.25rem;
+ display: grid;
+ place-items: center;
+ padding: 0;
+ border: 1px solid var(--line);
+ border-radius: 0.55rem;
+ background: var(--surface);
+ color: var(--muted);
+ opacity: 0;
cursor: grab;
+ pointer-events: none;
+ touch-action: none;
+ transform: translate(-0.2rem, -50%);
+ transition:
+ opacity 150ms ease,
+ color 150ms ease,
+ transform 150ms ease;
+}
+
+.app-card:hover .drag-handle,
+.app-card:focus-within .drag-handle,
+.drag-handle:focus-visible {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translate(0, -50%);
+}
+
+.drag-handle:hover {
+ color: var(--brand);
}
.drag-handle:active {
cursor: grabbing;
}
+.drag-handle svg {
+ width: 1rem;
+ height: 1rem;
+ fill: currentColor;
+}
+
+.app-card__actions {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ pointer-events: none;
+}
+
.icon-button,
.close-button {
- width: 32px;
- height: 32px;
+ width: 2.15rem;
+ height: 2.15rem;
display: grid;
place-items: center;
- border: 0;
+ padding: 0;
+ border: 1px solid var(--line);
border-radius: 50%;
- background: transparent;
+ background: var(--surface-soft);
color: var(--muted);
cursor: pointer;
}
+.app-card__actions .icon-button {
+ pointer-events: auto;
+}
+
.icon-button:hover:not(:disabled),
.icon-button.is-active {
+ border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
background: var(--brand-soft);
color: var(--brand);
}
+.icon-button svg {
+ width: 1.05rem;
+ height: 1.05rem;
+ fill: none;
+ stroke: currentColor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1.7;
+}
+
+.pin-button svg {
+ transform: rotate(0);
+ transition: transform 180ms ease;
+}
+
+.pin-button.is-active svg {
+ transform: rotate(45deg);
+}
+
.icon-button:disabled {
cursor: not-allowed;
opacity: 0.28;
}
-.app-card__body {
- flex: 1;
- padding: 1.25rem 1.35rem 1rem;
-}
-
.title-line {
display: flex;
flex-wrap: wrap;
@@ -421,10 +511,10 @@ main {
gap: 0.45rem;
}
-.title-line h3 {
+.title-line h2 {
margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
- font-size: 1.3rem;
+ font-size: 1.35rem;
letter-spacing: -0.025em;
}
@@ -472,22 +562,6 @@ main {
color: var(--muted);
}
-.app-card__body > p {
- margin: 0.75rem 0 0;
- color: var(--muted);
- line-height: 1.6;
-}
-
-.app-card__body .requirements {
- font-size: 0.72rem;
-}
-
-.app-card__body .privacy-summary {
- color: var(--text);
- font-size: 0.76rem;
- font-weight: 650;
-}
-
.tag-row,
.category-row {
display: flex;
@@ -521,26 +595,11 @@ main {
color: var(--brand);
}
-.app-card__footer {
- min-height: 68px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1rem;
- padding: 0.85rem 1.35rem;
- border-top: 1px solid var(--line);
-}
-
.version {
color: var(--muted);
font-size: 0.78rem;
}
-.app-card__meta {
- display: grid;
- gap: 0.25rem;
-}
-
.source-link,
.site-footer a {
position: relative;
@@ -548,12 +607,6 @@ main {
color: var(--brand);
}
-.open-hint {
- color: var(--brand);
- font-size: 0.84rem;
- font-weight: 700;
-}
-
.state-card {
max-width: 600px;
margin: 0 auto 5rem;
@@ -657,14 +710,16 @@ main {
inset: 0;
display: grid;
place-items: center;
+ overflow-y: auto;
padding: 1rem;
background: rgba(5, 9, 22, 0.56);
backdrop-filter: blur(5px);
}
-.help-panel {
- width: min(560px, 100%);
+.help-panel,
+.app-info-panel {
max-height: calc(100vh - 2rem);
+ max-height: calc(100dvh - 2rem);
overflow: auto;
padding: 1.5rem;
border: 1px solid var(--line);
@@ -673,6 +728,15 @@ main {
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}
+.help-panel {
+ width: min(560px, 100%);
+}
+
+.app-info-panel {
+ position: relative;
+ width: min(680px, 100%);
+}
+
.help-panel > header {
display: flex;
align-items: flex-start;
@@ -686,6 +750,105 @@ main {
letter-spacing: -0.025em;
}
+.app-info-panel__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.app-info-panel__identity {
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.app-info-panel__icon {
+ width: 4rem;
+ height: 4rem;
+ display: grid;
+ flex: 0 0 auto;
+ place-items: center;
+ overflow: hidden;
+ border-radius: 1rem;
+ background: var(--brand-soft);
+ color: var(--brand);
+ font-size: 1.45rem;
+ font-weight: 700;
+}
+
+.app-info-panel__icon img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.app-info-panel .eyebrow {
+ margin-bottom: 0.4rem;
+}
+
+.app-info-panel__body {
+ margin-top: 1.35rem;
+ padding: 1.1rem;
+ border: 1px solid var(--line);
+ border-radius: 0.85rem;
+ background: var(--surface);
+}
+
+.app-info-panel__description {
+ margin: 0;
+ color: var(--muted);
+ font-size: 1rem;
+ line-height: 1.6;
+}
+
+.app-info-panel__body .privacy-summary {
+ margin: 1rem 0 0;
+ color: var(--text);
+ font-size: 0.8rem;
+ font-weight: 650;
+ line-height: 1.5;
+}
+
+.app-info-panel__body .requirements {
+ margin: 0.55rem 0 0;
+ color: var(--muted);
+ font-size: 0.76rem;
+ line-height: 1.5;
+}
+
+.app-info-panel__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: 1.25rem;
+}
+
+.app-info-panel__meta {
+ display: grid;
+ gap: 0.25rem;
+}
+
+.app-info-panel__launch {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.4rem;
+ padding: 0.7rem 0.9rem;
+ border-radius: 0.7rem;
+ background: var(--brand);
+ color: var(--surface) !important;
+ font-size: 0.85rem;
+ font-weight: 700;
+}
+
+.app-info-panel__launch:hover {
+ background: var(--brand-hover);
+ text-decoration: none;
+}
+
.help-panel .eyebrow {
margin-bottom: 0.5rem;
}
@@ -790,7 +953,8 @@ main {
@media (max-width: 700px) {
main,
.site-footer {
- width: min(100% - 1.4rem, 1160px);
+ width: min(100%, 90rem);
+ padding-inline: 0.7rem;
}
.hero {
@@ -811,14 +975,6 @@ main {
margin: 0.25rem 0;
}
- .app-grid {
- grid-template-columns: 1fr;
- }
-
- .app-card {
- min-height: 320px;
- }
-
.site-footer {
min-height: 130px;
align-items: flex-start;
@@ -842,15 +998,35 @@ main {
.hidden-toggle {
justify-self: start;
}
+
+ .app-info-panel__header,
+ .app-info-panel__footer {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+
+ .app-info-panel__header .close-button {
+ position: absolute;
+ top: 1.1rem;
+ right: 1.1rem;
+ }
+
+ .app-info-panel__identity {
+ padding-right: 2.5rem;
+ }
}
@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 (hover: none) {
+ .drag-handle {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translate(0, -50%);
}
}
diff --git a/src/test/fixtures.ts b/src/test/fixtures.ts
index b5dba95..af1546c 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.2',
+ version: '0.4.3',
description: 'Page-level PDF operations performed locally in the browser.',
entry: './',
icon: './favicon.svg',
@@ -54,7 +54,7 @@ export const onenoteManifest: ToolboxAppManifest = {
...pdfManifest,
id: 'de.add-ideas.onenote-tools',
name: 'OneNote Reader',
- version: '0.3.2',
+ version: '0.3.3',
description: 'Inspect OneNote packages locally in the browser.',
icon: './onenote.svg',
categories: ['documents', 'notes'],
diff --git a/src/toolPresentation.ts b/src/toolPresentation.ts
new file mode 100644
index 0000000..e3bb94c
--- /dev/null
+++ b/src/toolPresentation.ts
@@ -0,0 +1,27 @@
+import type { ResolvedApp } from './types';
+
+const PRESENTATION: Record