feat: release toolbox portal 0.1.0
This commit is contained in:
172
src/components/AppCard.tsx
Normal file
172
src/components/AppCard.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import type { ResolvedApp } from '../types';
|
||||
|
||||
interface AppCardProps {
|
||||
app: ResolvedApp;
|
||||
catalogueUrl: string;
|
||||
hidden: boolean;
|
||||
pinned: boolean;
|
||||
first: boolean;
|
||||
last: boolean;
|
||||
onHide: () => void;
|
||||
onMove: (direction: -1 | 1) => void;
|
||||
onPin: () => void;
|
||||
contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
|
||||
}
|
||||
|
||||
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 <p className="requirements">Needs {requirements.join(' · ')}</p>;
|
||||
}
|
||||
|
||||
function PrivacySummary({ app }: { app: ResolvedApp }) {
|
||||
if (!app.privacy)
|
||||
return (
|
||||
<p className="privacy-summary">
|
||||
External destination · review its privacy terms
|
||||
</p>
|
||||
);
|
||||
if (app.privacy.label)
|
||||
return <p className="privacy-summary">{app.privacy.label}</p>;
|
||||
const processing = {
|
||||
local: 'Local processing',
|
||||
remote: 'Remote processing',
|
||||
mixed: 'Local and remote capabilities',
|
||||
}[app.privacy.processing];
|
||||
return (
|
||||
<p className="privacy-summary">
|
||||
{processing} ·{' '}
|
||||
{app.privacy.fileUploads
|
||||
? 'file/data transmission declared'
|
||||
: 'no file uploads declared'}{' '}
|
||||
· {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppCard({
|
||||
app,
|
||||
catalogueUrl,
|
||||
hidden,
|
||||
pinned,
|
||||
first,
|
||||
last,
|
||||
onHide,
|
||||
onMove,
|
||||
onPin,
|
||||
contextualUrl,
|
||||
}: AppCardProps) {
|
||||
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' : ''}`}
|
||||
data-testid={`app-card-${app.id}`}
|
||||
>
|
||||
<div className="app-card__top">
|
||||
<div className="app-card__icon" aria-hidden="true">
|
||||
{app.iconUrl ? (
|
||||
<img src={app.iconUrl} alt="" loading="lazy" />
|
||||
) : (
|
||||
<span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="app-card__actions"
|
||||
aria-label={`Personalize ${app.name}`}
|
||||
>
|
||||
<button
|
||||
className={`icon-button${pinned ? ' is-active' : ''}`}
|
||||
type="button"
|
||||
aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
|
||||
aria-pressed={pinned}
|
||||
title={pinned ? 'Unpin' : 'Pin'}
|
||||
onClick={onPin}
|
||||
>
|
||||
<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"
|
||||
aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
|
||||
onClick={onHide}
|
||||
>
|
||||
<span aria-hidden="true">{hidden ? '○' : '—'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-card__body">
|
||||
<div className="title-line">
|
||||
<h2>{app.name}</h2>
|
||||
{pinned && <span className="status-chip">Pinned</span>}
|
||||
{hidden && (
|
||||
<span className="status-chip status-chip--muted">Hidden</span>
|
||||
)}
|
||||
{app.isExternal && (
|
||||
<span className="status-chip status-chip--muted">External</span>
|
||||
)}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<footer className="app-card__footer">
|
||||
<div className="app-card__meta">
|
||||
<span className="version">
|
||||
{app.version ? `v${app.version}` : 'External service'}
|
||||
</span>
|
||||
{app.sourceUrl && (
|
||||
<a
|
||||
className="source-link"
|
||||
href={app.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Source and license
|
||||
</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>
|
||||
</footer>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
36
src/components/Logo.tsx
Normal file
36
src/components/Logo.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
interface LogoProps {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export function Logo({ size = 38 }: LogoProps) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="logo"
|
||||
height={size}
|
||||
viewBox="0 0 48 48"
|
||||
width={size}
|
||||
>
|
||||
<path
|
||||
d="M7 14.5 24 5l17 9.5v19L24 43 7 33.5z"
|
||||
fill="currentColor"
|
||||
opacity=".12"
|
||||
/>
|
||||
<path
|
||||
d="m8 15 16 9 16-9M24 24v18"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
<path
|
||||
d="m16 10.5 16 9v9L24 33l-8-4.5z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
237
src/components/PreferencesPanel.tsx
Normal file
237
src/components/PreferencesPanel.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
|
||||
import {
|
||||
defaultPreferences,
|
||||
parsePreferences,
|
||||
type Preferences,
|
||||
} from '../preferences';
|
||||
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 });
|
||||
}
|
||||
|
||||
function exportPreferences() {
|
||||
const blob = new Blob([`${JSON.stringify(preferences, null, 2)}\n`], {
|
||||
type: 'application/json',
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = 'toolbox-preferences.json';
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
setMessage('Preferences exported.');
|
||||
}
|
||||
|
||||
async function importPreferences(event: ChangeEvent<HTMLInputElement>) {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = '';
|
||||
if (!file) return;
|
||||
try {
|
||||
const imported = parsePreferences(JSON.parse(await file.text()));
|
||||
onChange(imported);
|
||||
setMessage('Preferences imported.');
|
||||
} catch (error) {
|
||||
setMessage(
|
||||
error instanceof Error
|
||||
? `Import failed: ${error.message}`
|
||||
: 'Import failed.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dialog-backdrop"
|
||||
role="presentation"
|
||||
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
|
||||
>
|
||||
<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>
|
||||
|
||||
{!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.
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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(',');
|
||||
Reference in New Issue
Block a user