Compare commits
8 Commits
v0.3.0
...
bda9da044d
| Author | SHA1 | Date | |
|---|---|---|---|
| bda9da044d | |||
| 2c13c56362 | |||
| 803397ff52 | |||
| 21283ce25f | |||
| e44d35fdfb | |||
| 67ba5e3eca | |||
| 587aadb79b | |||
| de51ec0bd5 |
@@ -4,5 +4,5 @@ TRAEFIK_NETWORK=internal
|
||||
TRAEFIK_CERT_RESOLVER=netcup
|
||||
|
||||
# Keep these two values paired when deploying a newer published toolbox release.
|
||||
TOOLBOX_RELEASE_VERSION=0.3.0
|
||||
TOOLBOX_RELEASE_SHA256=718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e
|
||||
TOOLBOX_RELEASE_VERSION=0.4.3
|
||||
TOOLBOX_RELEASE_SHA256=0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522
|
||||
|
||||
@@ -2,8 +2,8 @@ ARG NGINX_IMAGE=nginxinc/nginx-unprivileged:1.31.3-alpine@sha256:18d67281256ded3
|
||||
|
||||
FROM ${NGINX_IMAGE} AS release
|
||||
|
||||
ARG TOOLBOX_RELEASE_VERSION=0.3.0
|
||||
ARG TOOLBOX_RELEASE_SHA256=718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e
|
||||
ARG TOOLBOX_RELEASE_VERSION=0.4.3
|
||||
ARG TOOLBOX_RELEASE_SHA256=0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522
|
||||
ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/zemion/toolbox-portal/releases/download
|
||||
|
||||
RUN set -eu; \
|
||||
|
||||
49
README.md
49
README.md
@@ -1,9 +1,11 @@
|
||||
# add·ideas Toolbox Portal
|
||||
|
||||
`toolbox-portal` is the static launcher and release assembler for the add·ideas
|
||||
browser toolbox. Version `0.1.0` reads one same-origin catalogue, shows each app
|
||||
as a full-page launch card, and keeps personal pins, ordering, visibility, and
|
||||
appearance in the current browser.
|
||||
browser toolbox. Version `0.2.3` reads one same-origin catalogue, shows each app
|
||||
as a compact launch tile, and keeps personal pins, drag-and-drop ordering,
|
||||
visibility, and appearance in the current browser. Pinned tools have their own
|
||||
section; search, category, and clickable tag filters stay close to the tool
|
||||
list.
|
||||
|
||||
The v1 boundary is intentionally small:
|
||||
|
||||
@@ -28,7 +30,7 @@ npm run build
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The package lock resolves the `^0.1.0` SDK range to the published `0.1.1`
|
||||
The package lock resolves the `^0.2.2` SDK ranges to the published `0.2.2`
|
||||
packages. A sibling SDK checkout is only needed when intentionally developing
|
||||
the SDK and portal together.
|
||||
|
||||
@@ -66,7 +68,7 @@ privacy and executable-code warning. Light, dark, and system modes are supported
|
||||
## Production deployment behind Traefik
|
||||
|
||||
The committed `compose.yaml` is the shortest production path. Its release
|
||||
container downloads the immutable Toolbox 0.3.0 ZIP during the image build,
|
||||
container downloads the immutable Toolbox 0.4.3 ZIP during the image build,
|
||||
verifies SHA-256 before extracting it, and then copies only the verified static
|
||||
files into the pinned unprivileged nginx image. Node.js and a local portal
|
||||
assembly are not required on the deployment host.
|
||||
@@ -117,8 +119,8 @@ The app release should also publish a matching `.sha256` sidecar. The manifest
|
||||
must declare the pinned reverse-DNS id and version. Application and portal
|
||||
versions are independent.
|
||||
|
||||
`release/toolbox.lock.json` is the reviewed v0.3.0 lock. Its URLs and checksums
|
||||
pin the published PDF Tools 0.3.4, XSLT Tools 0.3.2, and OneNote Tools 0.2.0
|
||||
`release/toolbox.lock.json` is the reviewed v0.4.3 lock. Its URLs and checksums
|
||||
pin the published PDF Tools 0.4.3, XSLT Tools 0.4.2, and OneNote Tools 0.3.3
|
||||
release bytes. Use
|
||||
`release/toolbox.lock.example.json` as the template for a future release and
|
||||
verify every downloaded asset before committing updated values. Artifacts may be:
|
||||
@@ -140,7 +142,7 @@ npm run assemble -- \
|
||||
--lock release/toolbox.lock.json \
|
||||
--portal-dist dist \
|
||||
--output build/toolbox \
|
||||
--archive build/add-ideas-toolbox-0.3.0.zip
|
||||
--archive build/add-ideas-toolbox-0.4.3.zip
|
||||
```
|
||||
|
||||
Existing output is refused. Pass `--force` only when replacing those exact
|
||||
@@ -160,8 +162,8 @@ build/toolbox/
|
||||
├── xslt/
|
||||
└── onenote/
|
||||
|
||||
build/add-ideas-toolbox-0.3.0.zip
|
||||
build/add-ideas-toolbox-0.3.0.zip.sha256
|
||||
build/add-ideas-toolbox-0.4.3.zip
|
||||
build/add-ideas-toolbox-0.4.3.zip.sha256
|
||||
```
|
||||
|
||||
The assembler verifies SHA-256 before opening an artifact, validates every app
|
||||
@@ -182,7 +184,7 @@ directory separately:
|
||||
```sh
|
||||
npm run package:static -- \
|
||||
--input build/toolbox \
|
||||
--output artifacts/add-ideas-toolbox-0.3.0.zip
|
||||
--output artifacts/add-ideas-toolbox-0.4.3.zip
|
||||
```
|
||||
|
||||
This also emits a `.sha256` sidecar.
|
||||
@@ -199,9 +201,9 @@ normal local XML/XSLT transformations do not require that permission.
|
||||
|
||||
```sh
|
||||
podman build -f Containerfile \
|
||||
-t git.add-ideas.de/zemion/toolbox:0.3.0 .
|
||||
-t git.add-ideas.de/zemion/toolbox:0.4.3 .
|
||||
podman run --rm -p 8080:8080 \
|
||||
git.add-ideas.de/zemion/toolbox:0.3.0
|
||||
git.add-ideas.de/zemion/toolbox:0.4.3
|
||||
```
|
||||
|
||||
For a direct-port local deployment after assembly, use the separate example:
|
||||
@@ -218,8 +220,8 @@ docker login git.add-ideas.de
|
||||
docker buildx build \
|
||||
--platform linux/amd64,linux/arm64 \
|
||||
--file Containerfile.release \
|
||||
--tag git.add-ideas.de/zemion/toolbox:0.3.0 \
|
||||
--tag git.add-ideas.de/zemion/toolbox:0.3 \
|
||||
--tag git.add-ideas.de/zemion/toolbox:0.4.3 \
|
||||
--tag git.add-ideas.de/zemion/toolbox:0.4 \
|
||||
--push .
|
||||
```
|
||||
|
||||
@@ -244,8 +246,8 @@ permission to push code, releases, and container packages.
|
||||
all three apps, switch between them, and confirm the encoded `toolbox`
|
||||
context.
|
||||
5. Verify the distribution with
|
||||
`(cd build && sha256sum -c add-ideas-toolbox-0.3.0.zip.sha256)`.
|
||||
6. Commit the reviewed lock, tag the toolbox release (for example `v0.3.0`), and
|
||||
`(cd build && sha256sum -c add-ideas-toolbox-0.4.3.zip.sha256)`.
|
||||
6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.3`), and
|
||||
push the branch and tag to Gitea.
|
||||
7. In Gitea, open **Releases → New release**, select the tag, and upload the
|
||||
static ZIP plus its `.sha256` file. Do not use a mutable “latest” URL in a
|
||||
@@ -258,12 +260,18 @@ the exact tag, install with `npm ci`, run the same verification/assembly command
|
||||
and upload only the already-created ZIP/checksum and OCI image. The workflow
|
||||
must not re-resolve app versions or substitute a newer release.
|
||||
|
||||
## Planned / existing tools
|
||||
## Existing tools
|
||||
|
||||
| Tool | State and boundary | Principal workflows | Important concrete scope | Critical considerations and integrations |
|
||||
| ------------------- | -------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`pdf-tools`** | Existing; dedicated repository | Merge, split, reorder, rotate and export PDF pages | Thumbnail workspace; multi-document operations; ZIP and PDF output; saved local workspace | Workers and IndexedDB; large-document memory control; future signature inspection through `crypto-tools`; metadata and safe-sharing through `privacy-tools` |
|
||||
| **`xslt-tools`** | Existing; dedicated repository | Develop, test and run XSLT transformations | XML/XSLT editors; transformation results; local files; saved projects; validation and diagnostics | Lazy SaxonJS loading; relocatable assets; useful handoffs to `data-tools`, `schema-tools` and `diff-tools` |
|
||||
| **`onenote-tools`** | Existing rich-reader release; dedicated repository | Open, browse, inspect and export OneNote sections and packages locally | Desktop/unfragmented FSSHTTPB `.one`/`.onetoc2`; none/LZX/MSZIP/Quantum and multi-cabinet `.onepkg`; trees, rich text, images, tables, ink, attachments and export | Native TypeScript worker with no Wasm; bounded parsing, rendering and export; fragmented FSSHTTP fails safely; no editing or pixel-perfect fidelity |
|
||||
|
||||
## Planned tools
|
||||
|
||||
| Tool | State and boundary | Principal workflows | Important concrete scope | Critical considerations and integrations |
|
||||
| -------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`pdf-tools`** | Existing; dedicated repository | Merge, split, reorder, rotate and export PDF pages | Thumbnail workspace; multi-document operations; ZIP and PDF output; saved local workspace | Workers and IndexedDB; large-document memory control; future signature inspection through `crypto-tools`; metadata and safe-sharing through `privacy-tools` |
|
||||
| **`xslt-tools`** | Existing; dedicated repository | Develop, test and run XSLT transformations | XML/XSLT editors; transformation results; local files; saved projects; validation and diagnostics | Lazy SaxonJS loading; relocatable assets; useful handoffs to `data-tools`, `schema-tools` and `diff-tools` |
|
||||
| **`svg-tools`** | Planned; dedicated repository | Source and visual SVG editing | Synchronized DOM tree, code and canvas; optimization; path simplification; symbols; accessibility; animation; sanitization | SVG is potentially active content; previews require sanitization or sandboxing; integrate with `colour-tools`, `token-tools`, `image-tools` and `label-tools` |
|
||||
| **`regex-tools`** | Planned; dedicated repository | Develop, test and apply regular expressions | Corpus mode; replacement preview; capture table; flavour comparison; performance visualization; generated test cases; failing-input minimization | Never claim exact equivalence across regex engines without qualification; bound execution; integrate with `text-tools`, `log-tools` and `minimize-tools` |
|
||||
| **`colour-tools`** | Planned; small-to-medium dedicated repository | Colour conversion, calculation and palette work | sRGB, Display P3, Lab, LCH, OKLab and OKLCH; gamut mapping; contrast; colour-vision simulation; gradients; palette extraction; design-token export | Make colour-space assumptions explicit; distinguish mathematical conversion from display simulation; integrate with SVG, image and token tools |
|
||||
@@ -271,7 +279,6 @@ must not re-resolve app versions or substitute a newer release.
|
||||
| **`barcode-tools`** | Planned; dedicated repository | Generate, inspect and decode QR and barcodes | QR, common one- and two-dimensional codes; camera/image decoding; GS1 assistance; CSV batch generation; quiet-zone and print-size checks; structured payload builders | Treat decoded payloads as untrusted; never open links automatically; camera permission must be optional; integrate with `label-tools`, `contact-tools` and `crypto-tools` |
|
||||
| **`av-tools`** | Planned; large dedicated repository | Light audio and video editing and transcoding | Trim, split, concatenate, crop, resize, normalize, fades, waveform, metadata, chapters, subtitles, thumbnail/contact-sheet generation and export presets | Heavy WASM and worker workloads; temporary-file storage; configurable memory limits; possibly special cross-origin-isolation headers; integrate with `subtitle-tools` and `image-tools` |
|
||||
| **`crypto-tools`** | Planned; dedicated repository | Inspect keys, certificates and signatures; validate chains | X.509 PEM/DER, CSR, CRL, PKCS #8, encrypted PKCS #8, PKCS #12/PFX, JWK/JWKS; key/certificate matching; path construction; hostname, purpose and time checks; CMS/JWS later | Inspection-first; explicit trust anchors; no implication that browser/OS trust stores are used; no private-key persistence; offline revocation first; network checks opt-in; restrictive CSP and worker isolation |
|
||||
| **`onenote-tools`** | Existing rich-reader release; dedicated repository | Open, browse, inspect and export OneNote sections and packages locally | Desktop/unfragmented FSSHTTPB `.one`/`.onetoc2`; none/LZX/MSZIP/Quantum and multi-cabinet `.onepkg`; trees, rich text, images, tables, ink, attachments and export | Native TypeScript worker with no Wasm; bounded parsing, rendering and export; fragmented FSSHTTP fails safely; no editing or pixel-perfect fidelity |
|
||||
| **`data-tools`** | High priority; dedicated repository | Inspect, edit, validate, query and convert structured data | JSON, YAML, TOML, XML, CSV and NDJSON; tree/table/source views; schema inference; flattening; filtering; field mapping; JSONPath-style queries; conversion recipes | Every conversion should disclose information loss, coercion and round-trip instability; XML-specialist workflows hand off to `xslt-tools` |
|
||||
| **`image-tools`** | High priority; dedicated repository | Edit and batch-process raster images | Crop, resize, rotate, compress, convert, contact sheets, sprites, responsive sets, favicon generation, metadata removal and visual quality comparison | Use workers and off-main-thread rendering; preserve or deliberately remove colour profiles; integrate with colour, SVG, PDF and privacy tools |
|
||||
| **`diff-tools`** | High priority; dedicated repository or shared engine plus UI | Compare documents and files semantically | Text; JSON object-aware comparison; XML normalization; CSV keyed comparison; images with overlay/heatmap; archives and directories; PDF pages; optional audio waveform comparison | Normalization and ignored properties must be visible; produce portable reports and standard patch formats where possible |
|
||||
|
||||
@@ -8,6 +8,10 @@ Runtime components used by the portal include:
|
||||
|
||||
- React and React DOM — MIT
|
||||
- `@add-ideas/toolbox-contract` — Apache-2.0
|
||||
- `@add-ideas/toolbox-shell-react` — Apache-2.0
|
||||
- `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, and
|
||||
`@dnd-kit/accessibility` — MIT
|
||||
- `tslib` — 0BSD
|
||||
|
||||
Their complete installed license and notice texts are generated into
|
||||
`THIRD_PARTY_LICENSES.txt` for every production build.
|
||||
|
||||
@@ -3,7 +3,7 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Containerfile
|
||||
image: git.add-ideas.de/zemion/toolbox:0.3.0
|
||||
image: git.add-ideas.de/zemion/toolbox:0.4.3
|
||||
restart: unless-stopped
|
||||
read_only: true
|
||||
ports:
|
||||
|
||||
@@ -6,9 +6,9 @@ services:
|
||||
context: .
|
||||
dockerfile: Containerfile.release
|
||||
args:
|
||||
TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.3.0}"
|
||||
TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e}"
|
||||
image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.3.0}"
|
||||
TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.3}"
|
||||
TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-0c26315c987f7ef6d025c66c21e25999786ede3e971b66495c856117e0b7c522}"
|
||||
image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.3}"
|
||||
restart: unless-stopped
|
||||
read_only: true
|
||||
tmpfs:
|
||||
@@ -25,6 +25,7 @@ services:
|
||||
traefik.enable: "true"
|
||||
traefik.docker.network: "${TRAEFIK_NETWORK:-internal}"
|
||||
traefik.http.routers.addideas-toolbox.rule: "Host(`${TOOLBOX_HOST:-toolbox.add-ideas.de}`)"
|
||||
traefik.http.routers.addideas-toolbox.priority: 900
|
||||
traefik.http.routers.addideas-toolbox.entrypoints: websecure
|
||||
traefik.http.routers.addideas-toolbox.tls: "true"
|
||||
traefik.http.routers.addideas-toolbox.tls.certresolver: "${TRAEFIK_CERT_RESOLVER:-netcup}"
|
||||
|
||||
86
package-lock.json
generated
86
package-lock.json
generated
@@ -1,15 +1,19 @@
|
||||
{
|
||||
"name": "@add-ideas/toolbox-portal",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@add-ideas/toolbox-portal",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.3",
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@add-ideas/toolbox-contract": "^0.1.0",
|
||||
"@add-ideas/toolbox-contract": "^0.2.2",
|
||||
"@add-ideas/toolbox-shell-react": "^0.2.2",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
},
|
||||
@@ -40,11 +44,24 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@add-ideas/toolbox-contract": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.1.1/toolbox-contract-0.1.1.tgz",
|
||||
"integrity": "sha512-0q2whA5Y4SqG4PNNleXYR8nGbT3UYsZ1x+6ZWVmxuc/WjMxmujhD7ilIISmFzmnNdbyEyv/Zpr+U0fnHqGODqw==",
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.2/toolbox-contract-0.2.2.tgz",
|
||||
"integrity": "sha512-VcZ8j4O2PgFaIYgxs6r9u0uPxA+hHKwhCW+omfeVCtbjAAYhH2KhRlBGm0ERVVYcK5kchyzZLXrC4LKWRotVzg==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@add-ideas/toolbox-shell-react": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.2/toolbox-shell-react-0.2.2.tgz",
|
||||
"integrity": "sha512-w/xbLCd50a2Jq7vQ9Z9ygUOuqlOCRkIYlk4vSJx0mf4REJNeMYi3PE2MbaLUC4DkQWyrmatsa5HNT89o0l91BA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@add-ideas/toolbox-contract": "0.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18 <20",
|
||||
"react-dom": ">=18 <20"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
|
||||
@@ -506,6 +523,59 @@
|
||||
"node": ">=20.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/accessibility": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
|
||||
"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/core": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
|
||||
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/accessibility": "^3.1.1",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/sortable": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
|
||||
"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@dnd-kit/core": "^6.3.0",
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/utilities": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
|
||||
"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
|
||||
@@ -4408,9 +4478,7 @@
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"dev": true,
|
||||
"license": "0BSD",
|
||||
"optional": true
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@add-ideas/toolbox-portal",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.3",
|
||||
"license": "AGPL-3.0-only",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
@@ -21,7 +21,11 @@
|
||||
"package:static": "node scripts/package-static.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@add-ideas/toolbox-contract": "^0.1.0",
|
||||
"@add-ideas/toolbox-contract": "^0.2.2",
|
||||
"@add-ideas/toolbox-shell-react": "^0.2.2",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
},
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Corresponding source
|
||||
|
||||
The source code corresponding to add·ideas Toolbox Portal 0.1.0 is available at:
|
||||
The source code corresponding to add·ideas Toolbox Portal 0.2.3 is available at:
|
||||
|
||||
https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.1.0
|
||||
https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.3
|
||||
|
||||
Each bundled application contains its own `SOURCE.md`, license, and third-party
|
||||
license materials. The application sources are also linked from the portal.
|
||||
|
||||
@@ -4,8 +4,9 @@ The add·ideas Toolbox portal is licensed under `AGPL-3.0-only`. An assembled
|
||||
toolbox is a collection of independently licensed works, not a relicensing of
|
||||
every included component under one licence.
|
||||
|
||||
Portal runtime components include React and React DOM (MIT) and
|
||||
`@add-ideas/toolbox-contract` (Apache-2.0). Their complete installed license and
|
||||
notice texts are shipped in `THIRD_PARTY_LICENSES.txt`. Each application remains
|
||||
under its own licence. Application notices are shipped inside its
|
||||
Portal runtime components include React and React DOM (MIT),
|
||||
`@add-ideas/toolbox-contract` and `@add-ideas/toolbox-shell-react`
|
||||
(Apache-2.0), dnd-kit (MIT), and tslib (0BSD). Their complete installed license
|
||||
and notice texts are shipped in `THIRD_PARTY_LICENSES.txt`. Each application
|
||||
remains under its own licence. Application notices are shipped inside its
|
||||
`apps/<slug>/LICENSES/` directory.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"$schema": "./toolbox-release-lock.schema.json",
|
||||
"schemaVersion": 1,
|
||||
"releaseVersion": "0.3.0",
|
||||
"portalVersion": "0.1.0",
|
||||
"releaseVersion": "0.4.3",
|
||||
"portalVersion": "0.2.3",
|
||||
"catalogue": {
|
||||
"id": "de.add-ideas.toolbox",
|
||||
"name": "add·ideas Toolbox",
|
||||
@@ -15,23 +15,23 @@
|
||||
"apps": [
|
||||
{
|
||||
"id": "de.add-ideas.pdf-tools",
|
||||
"version": "0.3.4",
|
||||
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.3.4/pdf-tools-0.3.4.zip",
|
||||
"sha256": "090492aaee4bd5cde51917ee3d9d0c971f071c27b7dbe4c918876ffd752dd930",
|
||||
"version": "0.4.3",
|
||||
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
|
||||
"sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
|
||||
"target": "pdf"
|
||||
},
|
||||
{
|
||||
"id": "de.add-ideas.xslt-tools",
|
||||
"version": "0.3.2",
|
||||
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.3.2/xslt-tools-0.3.2.zip",
|
||||
"sha256": "e1746ac60f7143037ce77d7f04c62f7da39a92d8cef42e7167acb2bc00786de1",
|
||||
"version": "0.4.2",
|
||||
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.2/xslt-tools-0.4.2.zip",
|
||||
"sha256": "daaa821c10c6c6285f97128ba3d923e48efa24449f1fb0a21bf478abaf27499f",
|
||||
"target": "xslt"
|
||||
},
|
||||
{
|
||||
"id": "de.add-ideas.onenote-tools",
|
||||
"version": "0.2.0",
|
||||
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.2.0/onenote-tools-0.2.0.zip",
|
||||
"sha256": "660c8c53bfd2f21875d41910d208d6638995f8dc31ba150ffa57d5591f56b76b",
|
||||
"version": "0.3.3",
|
||||
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
|
||||
"sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
|
||||
"target": "onenote"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"$schema": "./toolbox-release-lock.schema.json",
|
||||
"schemaVersion": 1,
|
||||
"releaseVersion": "0.3.0",
|
||||
"portalVersion": "0.1.0",
|
||||
"releaseVersion": "0.4.3",
|
||||
"portalVersion": "0.2.3",
|
||||
"catalogue": {
|
||||
"id": "de.add-ideas.toolbox",
|
||||
"name": "add·ideas Toolbox",
|
||||
@@ -15,23 +15,23 @@
|
||||
"apps": [
|
||||
{
|
||||
"id": "de.add-ideas.pdf-tools",
|
||||
"version": "0.3.4",
|
||||
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.3.4/pdf-tools-0.3.4.zip",
|
||||
"sha256": "090492aaee4bd5cde51917ee3d9d0c971f071c27b7dbe4c918876ffd752dd930",
|
||||
"version": "0.4.3",
|
||||
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
|
||||
"sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
|
||||
"target": "pdf"
|
||||
},
|
||||
{
|
||||
"id": "de.add-ideas.xslt-tools",
|
||||
"version": "0.3.2",
|
||||
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.3.2/xslt-tools-0.3.2.zip",
|
||||
"sha256": "e1746ac60f7143037ce77d7f04c62f7da39a92d8cef42e7167acb2bc00786de1",
|
||||
"version": "0.4.2",
|
||||
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.2/xslt-tools-0.4.2.zip",
|
||||
"sha256": "daaa821c10c6c6285f97128ba3d923e48efa24449f1fb0a21bf478abaf27499f",
|
||||
"target": "xslt"
|
||||
},
|
||||
{
|
||||
"id": "de.add-ideas.onenote-tools",
|
||||
"version": "0.2.0",
|
||||
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.2.0/onenote-tools-0.2.0.zip",
|
||||
"sha256": "660c8c53bfd2f21875d41910d208d6638995f8dc31ba150ffa57d5591f56b76b",
|
||||
"version": "0.3.3",
|
||||
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
|
||||
"sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
|
||||
"target": "onenote"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -83,7 +83,7 @@ function makeLock(artifact: string, sha256: string) {
|
||||
return {
|
||||
schemaVersion: 1,
|
||||
releaseVersion: '0.1.0',
|
||||
portalVersion: '0.1.0',
|
||||
portalVersion: '0.2.3',
|
||||
catalogue: {
|
||||
id: 'de.add-ideas.toolbox',
|
||||
name: 'Test Toolbox',
|
||||
|
||||
@@ -5,9 +5,15 @@ import { fileURLToPath } from 'node:url';
|
||||
const LICENSE_FILE = /^(?:licen[cs]e|copying|notice)(?:[._-].*)?$/iu;
|
||||
const RUNTIME_PACKAGES = [
|
||||
'@add-ideas/toolbox-contract',
|
||||
'@add-ideas/toolbox-shell-react',
|
||||
'@dnd-kit/accessibility',
|
||||
'@dnd-kit/core',
|
||||
'@dnd-kit/sortable',
|
||||
'@dnd-kit/utilities',
|
||||
'react',
|
||||
'react-dom',
|
||||
'scheduler',
|
||||
'tslib',
|
||||
];
|
||||
|
||||
function compareCodePoints(left, right) {
|
||||
|
||||
525
src/App.test.tsx
525
src/App.test.tsx
@@ -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';
|
||||
@@ -7,39 +13,70 @@ import { catalogue, catalogueFetch } from './test/fixtures';
|
||||
|
||||
afterEach(() => vi.unstubAllGlobals());
|
||||
|
||||
function toolLink(name: string) {
|
||||
return screen.getByRole('link', { name: `Open ${name}` });
|
||||
}
|
||||
|
||||
function queryToolLink(name: string) {
|
||||
return screen.queryByRole('link', { name: `Open ${name}` });
|
||||
}
|
||||
|
||||
function findToolLink(name = 'PDF Workbench') {
|
||||
return screen.findByRole('link', { name: `Open ${name}` });
|
||||
}
|
||||
|
||||
describe('portal UI', () => {
|
||||
it('renders app cards and persists accessible pin/hide controls', async () => {
|
||||
it('renders compact actionable tiles and persists pin/hide controls', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
const launch = await findToolLink();
|
||||
const card = screen.getByTestId('app-card-de.add-ideas.pdf-tools');
|
||||
expect(within(card).getByRole('heading', { level: 3 })).toHaveTextContent(
|
||||
'PDF'
|
||||
);
|
||||
expect(within(card).getByText('Arrange PDF pages locally.')).toBeVisible();
|
||||
expect(
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' })
|
||||
).toBeInTheDocument();
|
||||
screen.getByTestId('app-card-de.add-ideas.xslt-tools')
|
||||
).toHaveTextContent('XSLT');
|
||||
expect(
|
||||
screen.getByText(
|
||||
screen.getByTestId('app-card-de.add-ideas.onenote-tools')
|
||||
).toHaveTextContent('OneNote');
|
||||
expect(
|
||||
screen.queryByText(
|
||||
'Page-level PDF operations performed locally in the browser.'
|
||||
)
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
'Local processing · no file uploads declared · no telemetry declared'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
const sourceLinks = screen.getAllByRole('link', {
|
||||
name: 'Source and license',
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getAllByRole('link', { name: 'Source and license' })
|
||||
).toHaveLength(1);
|
||||
expect(
|
||||
screen.queryByRole('region', { name: 'Pinned' })
|
||||
).not.toBeInTheDocument();
|
||||
const showHidden = screen.getByRole('checkbox', {
|
||||
name: 'Show hidden (0)',
|
||||
});
|
||||
expect(sourceLinks).toHaveLength(2);
|
||||
expect(
|
||||
sourceLinks.find(
|
||||
(link) =>
|
||||
link.getAttribute('href') ===
|
||||
'https://git.add-ideas.de/zemion/pdf-tools'
|
||||
)
|
||||
).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
expect(
|
||||
sourceLinks.find((link) =>
|
||||
link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.1.0')
|
||||
)
|
||||
).toBeDefined();
|
||||
const launch = screen.getByRole('link', { name: /open tool/i });
|
||||
expect(showHidden).toBeDisabled();
|
||||
expect(showHidden).not.toBeChecked();
|
||||
expect(launch).toHaveClass('app-card__launch-link');
|
||||
expect(
|
||||
new URL(launch.getAttribute('href')!).searchParams.get('toolbox')
|
||||
).toContain('toolbox.catalog.json');
|
||||
const actions = within(card).getByRole('group', {
|
||||
name: 'Actions for PDF Workbench',
|
||||
});
|
||||
const info = within(actions).getByRole('button', {
|
||||
name: 'More information about PDF Workbench',
|
||||
});
|
||||
expect(info).toHaveAttribute('aria-haspopup', 'dialog');
|
||||
for (const control of within(actions).getAllByRole('button'))
|
||||
expect(control.closest('a')).toBeNull();
|
||||
expect(launch).not.toContainElement(info);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'Pin PDF Workbench' }));
|
||||
await waitFor(() =>
|
||||
@@ -47,18 +84,413 @@ 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();
|
||||
const unpin = screen.getByRole('button', {
|
||||
name: 'Unpin PDF Workbench',
|
||||
});
|
||||
expect(unpin).toHaveAttribute('aria-pressed', 'true');
|
||||
expect(unpin).toHaveClass('is-active');
|
||||
await waitFor(() => expect(unpin).toHaveFocus());
|
||||
expect(
|
||||
screen.getByRole('button', { name: 'Reorder PDF Workbench' })
|
||||
).toBeInTheDocument();
|
||||
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Hide PDF Workbench' })
|
||||
);
|
||||
expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
|
||||
expect(showHidden).toBeEnabled();
|
||||
expect(showHidden).toHaveAccessibleName('Show hidden (1)');
|
||||
await waitFor(() => expect(showHidden).toHaveFocus());
|
||||
fireEvent.click(showHidden);
|
||||
expect(toolLink('PDF Workbench')).toBeInTheDocument();
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Show PDF Workbench' })
|
||||
);
|
||||
expect(showHidden).toBeDisabled();
|
||||
expect(showHidden).not.toBeChecked();
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.queryByRole('heading', { name: 'PDF Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: /show hidden/i }));
|
||||
screen.getByRole('button', { name: 'Hide PDF Workbench' })
|
||||
).toHaveFocus()
|
||||
);
|
||||
});
|
||||
|
||||
it('moves the full disclosure into an accessible modal', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
const { container } = render(<App />);
|
||||
await findToolLink();
|
||||
const info = screen.getByRole('button', {
|
||||
name: 'More information about PDF Workbench',
|
||||
});
|
||||
|
||||
await user.click(info);
|
||||
const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
|
||||
expect(dialog).toHaveAttribute('aria-modal', 'true');
|
||||
expect(dialog).toHaveTextContent(
|
||||
'Page-level PDF operations performed locally in the browser.'
|
||||
);
|
||||
expect(dialog).toHaveTextContent(
|
||||
'Local processing · no file uploads declared · no telemetry declared'
|
||||
);
|
||||
expect(dialog).toHaveTextContent(
|
||||
'Needs Secure context · Web workers · IndexedDB'
|
||||
);
|
||||
expect(dialog).toHaveTextContent('v0.4.3');
|
||||
expect(
|
||||
screen.getByRole('heading', { name: 'PDF Workbench' })
|
||||
within(dialog).getByRole('button', { name: 'documents' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
within(dialog).getByRole('button', { name: '#merge' })
|
||||
).toBeInTheDocument();
|
||||
const sourceLink = within(dialog).getByRole('link', {
|
||||
name: 'Source and license',
|
||||
});
|
||||
expect(sourceLink).toHaveAttribute(
|
||||
'href',
|
||||
'https://git.add-ideas.de/zemion/pdf-tools'
|
||||
);
|
||||
expect(sourceLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
expect(
|
||||
within(dialog).getByRole('link', { name: 'Open PDF' })
|
||||
).toBeInTheDocument();
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute(
|
||||
'aria-hidden',
|
||||
'true'
|
||||
);
|
||||
expect(document.documentElement).toHaveStyle({ overflow: 'hidden' });
|
||||
|
||||
const close = within(dialog).getByRole('button', {
|
||||
name: 'Close information for PDF Workbench',
|
||||
});
|
||||
expect(close).toHaveFocus();
|
||||
within(dialog).getByRole('link', { name: 'Open PDF' }).focus();
|
||||
await user.tab();
|
||||
expect(close).toHaveFocus();
|
||||
|
||||
await user.keyboard('{Escape}');
|
||||
expect(
|
||||
screen.queryByRole('dialog', { name: 'PDF Workbench' })
|
||||
).not.toBeInTheDocument();
|
||||
expect(info).toHaveFocus();
|
||||
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
|
||||
expect(document.documentElement).not.toHaveStyle({ overflow: 'hidden' });
|
||||
});
|
||||
|
||||
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 findToolLink();
|
||||
|
||||
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(toolLink('XSLT Workbench')).toBeInTheDocument();
|
||||
expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
|
||||
|
||||
await user.clear(search);
|
||||
await user.selectOptions(category, 'notes');
|
||||
expect(toolLink('OneNote Reader')).toBeInTheDocument();
|
||||
expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
|
||||
|
||||
await user.selectOptions(category, '');
|
||||
await user.click(
|
||||
screen.getByRole('button', {
|
||||
name: 'More information about PDF Workbench',
|
||||
})
|
||||
);
|
||||
await user.click(
|
||||
within(screen.getByRole('dialog', { name: 'PDF Workbench' })).getByRole(
|
||||
'button',
|
||||
{ name: 'pdf' }
|
||||
)
|
||||
);
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
expect(category).toHaveValue('pdf');
|
||||
expect(toolLink('PDF Workbench')).toBeInTheDocument();
|
||||
expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps remaining hidden tools visible while editing the hidden set', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await findToolLink();
|
||||
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Hide PDF Workbench' })
|
||||
);
|
||||
const showHidden = screen.getByRole('checkbox', {
|
||||
name: 'Show hidden (1)',
|
||||
});
|
||||
await user.click(showHidden);
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Hide XSLT Workbench' })
|
||||
);
|
||||
expect(showHidden).toHaveAccessibleName('Show hidden (2)');
|
||||
await user.click(
|
||||
screen.getByRole('button', { name: 'Show PDF Workbench' })
|
||||
);
|
||||
|
||||
expect(showHidden).toBeChecked();
|
||||
expect(showHidden).toHaveAccessibleName('Show hidden (1)');
|
||||
expect(toolLink('XSLT Workbench')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clears search filters without revealing hidden tools', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await findToolLink();
|
||||
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(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
|
||||
expect(toolLink('XSLT Workbench')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole('checkbox', { name: 'Show hidden (1)' })
|
||||
).not.toBeChecked();
|
||||
});
|
||||
|
||||
it('lists contextual destinations in the Apps menu', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
render(<App />);
|
||||
await findToolLink();
|
||||
await user.click(screen.getByRole('button', { name: 'Apps' }));
|
||||
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('uses the shared accessible header identity and control order', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
render(<App />);
|
||||
await findToolLink();
|
||||
|
||||
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',
|
||||
});
|
||||
const controls = within(header).getByRole('group', {
|
||||
name: 'Toolbox controls',
|
||||
});
|
||||
expect(
|
||||
Array.from(controls.children, (element) =>
|
||||
element.getAttribute('aria-label')
|
||||
)
|
||||
).toEqual(['Help', 'Toolbox source on Gitea', 'Apps', 'Personalize']);
|
||||
expect(help.compareDocumentPosition(source)).toBe(
|
||||
Node.DOCUMENT_POSITION_FOLLOWING
|
||||
);
|
||||
expect(source.compareDocumentPosition(apps)).toBe(
|
||||
Node.DOCUMENT_POSITION_FOLLOWING
|
||||
);
|
||||
expect(apps.compareDocumentPosition(personalize)).toBe(
|
||||
Node.DOCUMENT_POSITION_FOLLOWING
|
||||
);
|
||||
expect(
|
||||
Array.from(
|
||||
header.querySelector('.toolbox-shell__bar')?.children ?? [],
|
||||
(element) => element.className
|
||||
)
|
||||
).toEqual([
|
||||
'toolbox-shell__brand',
|
||||
'toolbox-shell__identity',
|
||||
'toolbox-shell__controls',
|
||||
]);
|
||||
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 findToolLink();
|
||||
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(personalize);
|
||||
|
||||
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 findToolLink();
|
||||
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: 188,
|
||||
height: 188,
|
||||
top: 0,
|
||||
right: index * 220 + 188,
|
||||
bottom: 188,
|
||||
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', 'PDF', 'OneNote']);
|
||||
});
|
||||
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 />);
|
||||
await findToolLink();
|
||||
await user.click(
|
||||
screen.getByRole('button', {
|
||||
name: 'More information about PDF Workbench',
|
||||
})
|
||||
);
|
||||
const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
|
||||
await user.click(within(dialog).getByRole('button', { name: '#merge' }));
|
||||
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
expect(toolLink('PDF Workbench')).toBeInTheDocument();
|
||||
expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
|
||||
expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
|
||||
|
||||
const activeTag = screen.getByRole('button', {
|
||||
name: /#merge.*Clear tag filter/i,
|
||||
});
|
||||
await user.click(activeTag);
|
||||
expect(await findToolLink('XSLT Workbench')).toBeInTheDocument();
|
||||
expect(toolLink('OneNote Reader')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens the standard help control and explains tile interaction', async () => {
|
||||
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
|
||||
const user = userEvent.setup();
|
||||
const { container } = render(<App />);
|
||||
await findToolLink();
|
||||
const help = screen.getByRole('button', { name: 'Help' });
|
||||
await user.click(help);
|
||||
const dialog = screen.getByRole('dialog', {
|
||||
name: 'Choose and arrange your tools',
|
||||
});
|
||||
expect(dialog).toHaveTextContent('click anywhere on a tool tile');
|
||||
expect(dialog).toHaveTextContent('use the light bulb');
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
|
||||
expect(container.querySelector('.site-shell')).toHaveAttribute(
|
||||
'aria-hidden',
|
||||
'true'
|
||||
);
|
||||
const close = within(dialog).getByRole('button', { name: 'Close help' });
|
||||
expect(close).toHaveFocus();
|
||||
await user.tab();
|
||||
expect(close).toHaveFocus();
|
||||
await user.keyboard('{Escape}');
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
|
||||
expect(help).toHaveFocus();
|
||||
});
|
||||
|
||||
it('shows a recoverable catalogue error', async () => {
|
||||
@@ -72,9 +504,7 @@ describe('portal UI', () => {
|
||||
await screen.findByRole('heading', { name: 'Toolbox unavailable' })
|
||||
).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
|
||||
expect(
|
||||
await screen.findByRole('heading', { name: 'PDF Workbench' })
|
||||
).toBeInTheDocument();
|
||||
expect(await findToolLink()).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows a dedicated empty state for a valid catalogue', async () => {
|
||||
@@ -92,31 +522,42 @@ 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).toContainElement(screen.getByText('On this device'));
|
||||
expect(
|
||||
within(popover).getByRole('group', { name: 'Appearance' })
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
popover.querySelector('.toolbox-shell__preferences-content')
|
||||
).toBeInTheDocument();
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
434
src/App.tsx
434
src/App.tsx
@@ -1,25 +1,51 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
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, useRef, useState } from 'react';
|
||||
import { AppCard } from './components/AppCard';
|
||||
import { AppDetailsPanel } from './components/AppDetailsPanel';
|
||||
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' }
|
||||
| { status: 'error'; message: string }
|
||||
| { status: 'ready'; value: LoadedCatalogue };
|
||||
|
||||
type PortalOverlay =
|
||||
{ kind: 'help' } | { kind: 'details'; appId: string } | null;
|
||||
|
||||
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 +53,81 @@ function appMatches(
|
||||
return haystack.includes(query.toLocaleLowerCase());
|
||||
}
|
||||
|
||||
interface AppSectionProps {
|
||||
apps: ResolvedApp[];
|
||||
catalogueUrl: string;
|
||||
hiddenIds: readonly string[];
|
||||
id: string;
|
||||
onDetails: (id: string) => void;
|
||||
onHide: (id: string) => void;
|
||||
onPin: (id: string) => void;
|
||||
pinned: boolean;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function AppSection({
|
||||
apps,
|
||||
catalogueUrl,
|
||||
hiddenIds,
|
||||
id,
|
||||
onDetails,
|
||||
onHide,
|
||||
onPin,
|
||||
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)}
|
||||
onDetails={() => onDetails(app.id)}
|
||||
onPin={() => onPin(app.id)}
|
||||
onHide={() => onHide(app.id)}
|
||||
/>
|
||||
))}
|
||||
</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 [showHidden, setShowHidden] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [activeTag, setActiveTag] = useState('');
|
||||
const [shownHiddenIds, setShownHiddenIds] = useState<
|
||||
readonly string[] | null
|
||||
>(null);
|
||||
const [overlay, setOverlay] = useState<PortalOverlay>(null);
|
||||
const hiddenToggle = useRef<HTMLInputElement>(null);
|
||||
const [preferences, setPreferences, storageAvailable] = usePreferences();
|
||||
const closeSettings = useCallback(() => setSettingsOpen(false), []);
|
||||
const closeOverlay = useCallback(() => setOverlay(null), []);
|
||||
const showHidden =
|
||||
preferences.hidden.length > 0 &&
|
||||
shownHiddenIds?.some((id) => preferences.hidden.includes(id)) === true;
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
@@ -57,6 +149,11 @@ export default function App() {
|
||||
|
||||
const loaded = loadState.status === 'ready' ? loadState.value : undefined;
|
||||
const apps = useMemo(() => loaded?.apps ?? [], [loaded]);
|
||||
const detailsApp =
|
||||
overlay?.kind === 'details'
|
||||
? apps.find((app) => app.id === overlay.appId)
|
||||
: undefined;
|
||||
const overlayOpen = overlay?.kind === 'help' || detailsApp !== undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaded) return;
|
||||
@@ -91,89 +188,182 @@ 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) {
|
||||
const keepCardVisible = field === 'pinned' || showHidden;
|
||||
if (field === 'hidden' && showHidden && !preferences.hidden.includes(id)) {
|
||||
setShownHiddenIds((current) => [...new Set([...(current ?? []), id])]);
|
||||
}
|
||||
setPreferences((current) => ({
|
||||
...current,
|
||||
[field]: current[field].includes(id)
|
||||
? current[field].filter((item) => item !== id)
|
||||
: [...current[field], id],
|
||||
}));
|
||||
window.requestAnimationFrame(() => {
|
||||
if (!keepCardVisible) {
|
||||
hiddenToggle.current?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
function moveApp(id: string, direction: -1 | 1) {
|
||||
const pinned = preferences.pinned.includes(id);
|
||||
const peers = visibleApps.filter(
|
||||
(app) => preferences.pinned.includes(app.id) === pinned
|
||||
);
|
||||
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 };
|
||||
const action = field === 'pinned' ? 'pin' : 'visibility';
|
||||
[
|
||||
...document.querySelectorAll<HTMLButtonElement>(
|
||||
`[data-card-action="${action}"]`
|
||||
),
|
||||
]
|
||||
.find((button) => button.dataset.appId === id)
|
||||
?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
const title = loaded?.catalogue.name ?? 'add·ideas Toolbox';
|
||||
const brand = loaded?.catalogue.theme.brand ?? 'add·ideas';
|
||||
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
|
||||
);
|
||||
setPreferences((current) => ({
|
||||
...current,
|
||||
order: reorderWithinIds(current.order, activeId, overId, peers),
|
||||
}));
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
setQuery('');
|
||||
setCategory('');
|
||||
setActiveTag('');
|
||||
setShownHiddenIds(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="site-shell"
|
||||
inert={settingsOpen}
|
||||
aria-hidden={settingsOpen || undefined}
|
||||
inert={overlayOpen}
|
||||
aria-hidden={overlayOpen || 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="Toolbox"
|
||||
subtitle="Local-first browser tools"
|
||||
theme={preferences.theme}
|
||||
homeHref={loaded?.homeUrl ?? './'}
|
||||
homeLabel="add·ideas Toolbox"
|
||||
brandIconUrl="./favicon.svg"
|
||||
helpAction={{ onClick: () => setOverlay({ kind: 'help' }) }}
|
||||
sourceHref={PORTAL_SOURCE}
|
||||
sourceLabel="Toolbox source on Gitea"
|
||||
personalizeContent={
|
||||
<PreferencesPanel
|
||||
preferences={preferences}
|
||||
storageAvailable={storageAvailable}
|
||||
onChange={setPreferences}
|
||||
/>
|
||||
}
|
||||
apps={headerApps}
|
||||
allAppsHref="#main-content"
|
||||
/>
|
||||
|
||||
<main id="main-content">
|
||||
<section className="hero" aria-labelledby="page-title">
|
||||
<div className="hero-intro">
|
||||
<p className="eyebrow">
|
||||
Privacy details up front · useful by default
|
||||
</p>
|
||||
<h1 id="page-title">
|
||||
<h2 id="page-title">
|
||||
Your document tools,
|
||||
<br />
|
||||
<span>in one calm place.</span>
|
||||
</h1>
|
||||
<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.
|
||||
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>
|
||||
)}
|
||||
<label
|
||||
className={`hidden-toggle${
|
||||
preferences.hidden.length === 0
|
||||
? ' hidden-toggle--disabled'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={hiddenToggle}
|
||||
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>
|
||||
|
||||
{loadState.status === 'loading' && (
|
||||
@@ -205,43 +395,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 +417,47 @@ 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}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="app-sections" aria-label="Available tools">
|
||||
<AppSection
|
||||
id="pinned-apps"
|
||||
title="Pinned"
|
||||
apps={pinnedApps}
|
||||
pinned
|
||||
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)}
|
||||
hiddenIds={preferences.hidden}
|
||||
onDetails={(id) =>
|
||||
setOverlay({ kind: 'details', appId: id })
|
||||
}
|
||||
onPin={(id) => toggleListItem('pinned', id)}
|
||||
onHide={(id) => toggleListItem('hidden', id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
<AppSection
|
||||
id="regular-apps"
|
||||
title="Tools"
|
||||
apps={regularApps}
|
||||
pinned={false}
|
||||
catalogueUrl={loaded.catalogueUrl.href}
|
||||
hiddenIds={preferences.hidden}
|
||||
onDetails={(id) =>
|
||||
setOverlay({ kind: 'details', appId: id })
|
||||
}
|
||||
onPin={(id) => toggleListItem('pinned', id)}
|
||||
onHide={(id) => toggleListItem('hidden', id)}
|
||||
/>
|
||||
</div>
|
||||
</DndContext>
|
||||
)}
|
||||
|
||||
{loaded.unavailable.length > 0 && (
|
||||
@@ -332,9 +489,9 @@ export default function App() {
|
||||
</span>
|
||||
</p>
|
||||
<span>
|
||||
Portal v0.1.0 ·{' '}
|
||||
Portal v0.2.3 ·{' '}
|
||||
<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.3"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@@ -344,13 +501,26 @@ export default function App() {
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<PreferencesPanel
|
||||
open={settingsOpen}
|
||||
preferences={preferences}
|
||||
storageAvailable={storageAvailable}
|
||||
onChange={setPreferences}
|
||||
onClose={closeSettings}
|
||||
<HelpPanel open={overlay?.kind === 'help'} onClose={closeOverlay} />
|
||||
{detailsApp && loaded ? (
|
||||
<AppDetailsPanel
|
||||
app={detailsApp}
|
||||
catalogueUrl={loaded.catalogueUrl.href}
|
||||
contextualUrl={contextualLaunchUrl}
|
||||
pinned={preferences.pinned.includes(detailsApp.id)}
|
||||
hidden={preferences.hidden.includes(detailsApp.id)}
|
||||
activeTag={activeTag}
|
||||
onCategory={(nextCategory) => {
|
||||
setCategory(nextCategory);
|
||||
closeOverlay();
|
||||
}}
|
||||
onTag={(tag) => {
|
||||
setActiveTag((current) => (current === tag ? '' : tag));
|
||||
closeOverlay();
|
||||
}}
|
||||
onClose={closeOverlay}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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/);
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import { useId } from 'react';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { shortToolDescription, shortToolTitle } from '../toolPresentation';
|
||||
import type { ResolvedApp } from '../types';
|
||||
|
||||
interface AppCardProps {
|
||||
@@ -5,48 +9,74 @@ interface AppCardProps {
|
||||
catalogueUrl: string;
|
||||
hidden: boolean;
|
||||
pinned: boolean;
|
||||
first: boolean;
|
||||
last: boolean;
|
||||
onDetails: () => void;
|
||||
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 MoveIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 20 80" aria-hidden="true">
|
||||
<circle cx="7" cy="5" r="1.2" />
|
||||
<circle cx="13" cy="5" r="1.2" />
|
||||
<circle cx="7" cy="10" r="1.2" />
|
||||
<circle cx="13" cy="10" r="1.2" />
|
||||
<circle cx="7" cy="15" r="1.2" />
|
||||
<circle cx="13" cy="15" r="1.2" />
|
||||
<circle cx="7" cy="20" r="1.2" />
|
||||
<circle cx="13" cy="20" r="1.2" />
|
||||
<circle cx="7" cy="25" r="1.2" />
|
||||
<circle cx="13" cy="25" r="1.2" />
|
||||
<circle cx="7" cy="30" r="1.2" />
|
||||
<circle cx="13" cy="30" r="1.2" />
|
||||
<circle cx="7" cy="35" r="1.2" />
|
||||
<circle cx="13" cy="35" r="1.2" />
|
||||
<circle cx="7" cy="40" r="1.2" />
|
||||
<circle cx="13" cy="40" r="1.2" />
|
||||
<circle cx="7" cy="45" r="1.2" />
|
||||
<circle cx="13" cy="45" r="1.2" />
|
||||
<circle cx="7" cy="50" r="1.2" />
|
||||
<circle cx="13" cy="50" r="1.2" />
|
||||
<circle cx="7" cy="55" r="1.2" />
|
||||
<circle cx="13" cy="55" r="1.2" />
|
||||
<circle cx="7" cy="60" r="1.2" />
|
||||
<circle cx="13" cy="60" r="1.2" />
|
||||
<circle cx="7" cy="65" r="1.2" />
|
||||
<circle cx="13" cy="65" r="1.2" />
|
||||
<circle cx="7" cy="70" r="1.2" />
|
||||
<circle cx="13" cy="70" r="1.2" />
|
||||
<circle cx="7" cy="75" r="1.2" />
|
||||
<circle cx="13" cy="75" r="1.2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivacySummary({ app }: { app: ResolvedApp }) {
|
||||
if (!app.privacy)
|
||||
function LightBulbIcon() {
|
||||
return (
|
||||
<p className="privacy-summary">
|
||||
External destination · review its privacy terms
|
||||
</p>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 18h6M10 21h4" />
|
||||
<path d="M8.4 14.8A6 6 0 1 1 15.6 14.8c-.9.7-1.4 1.4-1.6 2.2h-4c-.2-.8-.7-1.5-1.6-2.2Z" />
|
||||
</svg>
|
||||
);
|
||||
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];
|
||||
}
|
||||
|
||||
function PinIcon() {
|
||||
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>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M8 3h8l-1 6 3 3v2H6v-2l3-3-1-6Z" />
|
||||
<path d="M12 14v7" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function VisibilityIcon({ hidden }: { hidden: boolean }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M3 12s3.2-5 9-5 9 5 9 5-3.2 5-9 5-9-5-9-5Z" />
|
||||
<circle cx="12" cy="12" r="2.3" />
|
||||
{!hidden && <path d="m4 4 16 16" />}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,23 +85,49 @@ export function AppCard({
|
||||
catalogueUrl,
|
||||
hidden,
|
||||
pinned,
|
||||
first,
|
||||
last,
|
||||
onDetails,
|
||||
onHide,
|
||||
onMove,
|
||||
onPin,
|
||||
contextualUrl,
|
||||
}: AppCardProps) {
|
||||
const titleId = useId();
|
||||
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' : ''
|
||||
}`}
|
||||
aria-labelledby={titleId}
|
||||
data-testid={`app-card-${app.id}`}
|
||||
style={{ transform: CSS.Transform.toString(transform), transition }}
|
||||
>
|
||||
<div className="app-card__top">
|
||||
<button
|
||||
ref={setActivatorNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="drag-handle"
|
||||
type="button"
|
||||
aria-label={`Reorder ${app.name}`}
|
||||
title="Drag to reorder"
|
||||
>
|
||||
<MoveIcon />
|
||||
</button>
|
||||
|
||||
<div className="app-card__face">
|
||||
<div className="app-card__icon" aria-hidden="true">
|
||||
{app.iconUrl ? (
|
||||
<img src={app.iconUrl} alt="" loading="lazy" />
|
||||
@@ -79,94 +135,60 @@ export function AppCard({
|
||||
<span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 id={titleId}>
|
||||
<a
|
||||
className="app-card__launch-link"
|
||||
href={launchUrl}
|
||||
target={target}
|
||||
rel={target ? 'noopener noreferrer' : undefined}
|
||||
aria-label={`Open ${app.name}`}
|
||||
>
|
||||
{shortToolTitle(app)}
|
||||
</a>
|
||||
</h3>
|
||||
<p>{shortToolDescription(app)}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="app-card__actions"
|
||||
aria-label={`Personalize ${app.name}`}
|
||||
role="group"
|
||||
aria-label={`Actions for ${app.name}`}
|
||||
>
|
||||
<button
|
||||
className={`icon-button${pinned ? ' is-active' : ''}`}
|
||||
className="icon-button info-button"
|
||||
type="button"
|
||||
aria-label={`More information about ${app.name}`}
|
||||
aria-haspopup="dialog"
|
||||
title="More information"
|
||||
data-details-trigger={app.id}
|
||||
onClick={onDetails}
|
||||
>
|
||||
<LightBulbIcon />
|
||||
</button>
|
||||
<button
|
||||
className={`icon-button pin-button${pinned ? ' is-active' : ''}`}
|
||||
type="button"
|
||||
data-app-id={app.id}
|
||||
data-card-action="pin"
|
||||
aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
|
||||
aria-pressed={pinned}
|
||||
title={pinned ? 'Unpin' : 'Pin'}
|
||||
onClick={onPin}
|
||||
>
|
||||
<span aria-hidden="true">⌁</span>
|
||||
<PinIcon />
|
||||
</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"
|
||||
className="icon-button visibility-button"
|
||||
type="button"
|
||||
data-app-id={app.id}
|
||||
data-card-action="visibility"
|
||||
aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
|
||||
title={hidden ? 'Show' : 'Hide'}
|
||||
onClick={onHide}
|
||||
>
|
||||
<span aria-hidden="true">{hidden ? '○' : '—'}</span>
|
||||
<VisibilityIcon hidden={hidden} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
172
src/components/AppDetailsPanel.tsx
Normal file
172
src/components/AppDetailsPanel.tsx
Normal file
@@ -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 <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 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 (
|
||||
<ModalPanel
|
||||
className="app-info-panel"
|
||||
labelledBy={titleId}
|
||||
onClose={onClose}
|
||||
>
|
||||
<header className="app-info-panel__header">
|
||||
<div className="app-info-panel__identity">
|
||||
<div className="app-info-panel__icon" aria-hidden="true">
|
||||
{app.iconUrl ? (
|
||||
<img src={app.iconUrl} alt="" />
|
||||
) : (
|
||||
<span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="eyebrow">Tool information</p>
|
||||
<div className="title-line">
|
||||
<h2 id={titleId}>{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>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="close-button"
|
||||
type="button"
|
||||
aria-label={`Close information for ${app.name}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="app-info-panel__body">
|
||||
<p className="app-info-panel__description">{app.description}</p>
|
||||
<PrivacySummary app={app} />
|
||||
<RequirementSummary app={app} />
|
||||
|
||||
{app.categories.length > 0 && (
|
||||
<div className="category-row" role="group" 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" role="group" 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-info-panel__footer">
|
||||
<div className="app-info-panel__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="app-info-panel__launch"
|
||||
href={launchUrl}
|
||||
target={target}
|
||||
rel={target ? 'noopener noreferrer' : undefined}
|
||||
>
|
||||
Open {shortToolTitle(app)} <span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
</footer>
|
||||
</ModalPanel>
|
||||
);
|
||||
}
|
||||
51
src/components/HelpPanel.tsx
Normal file
51
src/components/HelpPanel.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { ModalPanel } from './ModalPanel';
|
||||
|
||||
interface HelpPanelProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function HelpPanel({ open, onClose }: HelpPanelProps) {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<ModalPanel
|
||||
className="help-panel"
|
||||
labelledBy="help-title"
|
||||
onClose={onClose}
|
||||
>
|
||||
<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>Details:</strong> use the light bulb to review privacy,
|
||||
requirements, categories, tags, version, and source before opening.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Filter:</strong> search, choose a category, or select a tag
|
||||
from a tool's information panel. Select the 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>
|
||||
</div>
|
||||
</ModalPanel>
|
||||
);
|
||||
}
|
||||
102
src/components/ModalPanel.tsx
Normal file
102
src/components/ModalPanel.tsx
Normal file
@@ -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<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const returnFocus =
|
||||
document.activeElement instanceof HTMLElement
|
||||
? document.activeElement
|
||||
: null;
|
||||
const dialog = panel.current;
|
||||
const focusable = () =>
|
||||
dialog
|
||||
? [...dialog.querySelectorAll<HTMLElement>(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 (
|
||||
<div
|
||||
className="dialog-backdrop"
|
||||
role="presentation"
|
||||
onPointerDown={(event) =>
|
||||
event.target === event.currentTarget && onClose()
|
||||
}
|
||||
>
|
||||
<section
|
||||
ref={panel}
|
||||
className={className}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={labelledBy}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const FOCUSABLE_SELECTOR = [
|
||||
'a[href]',
|
||||
'button:not([disabled])',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])',
|
||||
].join(',');
|
||||
@@ -1,93 +1,25 @@
|
||||
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
|
||||
import { useRef, useState, type ChangeEvent } from 'react';
|
||||
import { ToolboxPersonalizePanel } from '@add-ideas/toolbox-shell-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',
|
||||
@@ -119,58 +51,11 @@ export function PreferencesPanel({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dialog-backdrop"
|
||||
role="presentation"
|
||||
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
|
||||
<ToolboxPersonalizePanel
|
||||
theme={preferences.theme}
|
||||
onThemeChange={(theme) => onChange({ ...preferences, theme })}
|
||||
storageAvailable={storageAvailable}
|
||||
>
|
||||
<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>
|
||||
@@ -188,9 +73,9 @@ export function PreferencesPanel({
|
||||
|
||||
<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.
|
||||
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">
|
||||
@@ -222,16 +107,6 @@ export function PreferencesPanel({
|
||||
<p className="action-message" role="status" aria-live="polite">
|
||||
{message}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</ToolboxPersonalizePanel>
|
||||
);
|
||||
}
|
||||
|
||||
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(',');
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
|
||||
674
src/styles.css
674
src/styles.css
@@ -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,
|
||||
main,
|
||||
.site-footer {
|
||||
width: min(1160px, calc(100% - 2.5rem));
|
||||
width: min(100%, 90rem);
|
||||
margin-inline: auto;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.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,10 @@ main {
|
||||
}
|
||||
|
||||
.tool-controls {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 10.5rem);
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-field,
|
||||
@@ -252,7 +208,7 @@ main {
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: min(360px, 100%);
|
||||
min-width: 0;
|
||||
padding: 0 0.85rem;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
@@ -275,7 +231,7 @@ main {
|
||||
}
|
||||
|
||||
.category-field {
|
||||
min-width: 175px;
|
||||
min-width: 0;
|
||||
padding: 0 0.65rem;
|
||||
}
|
||||
|
||||
@@ -284,72 +240,137 @@ main {
|
||||
}
|
||||
|
||||
.hidden-toggle {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 0.45rem;
|
||||
margin-left: auto;
|
||||
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;
|
||||
accent-color: var(--brand);
|
||||
}
|
||||
|
||||
.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));
|
||||
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));
|
||||
gap: 1.1rem;
|
||||
padding-bottom: 2rem;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(min(10.5rem, 100%), 11.75rem)
|
||||
);
|
||||
align-items: start;
|
||||
justify-content: start;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
min-height: 340px;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -359,40 +380,130 @@ main {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 0.35rem;
|
||||
width: 1rem;
|
||||
height: 5rem;
|
||||
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: calc(1rem - 2px);
|
||||
height: 4rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.app-card__actions {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
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;
|
||||
@@ -403,12 +514,36 @@ main {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 +554,7 @@ main {
|
||||
.status-chip {
|
||||
padding: 0.22rem 0.48rem;
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status-chip--muted {
|
||||
@@ -426,43 +562,37 @@ 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 {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
.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);
|
||||
}
|
||||
|
||||
.version {
|
||||
@@ -470,37 +600,13 @@ main {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.app-card__meta {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
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 {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 5rem;
|
||||
@@ -604,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);
|
||||
}
|
||||
|
||||
.preferences-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);
|
||||
@@ -620,23 +728,152 @@ main {
|
||||
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.preferences-panel > header {
|
||||
.help-panel {
|
||||
width: min(560px, 100%);
|
||||
}
|
||||
|
||||
.app-info-panel {
|
||||
position: relative;
|
||||
width: min(680px, 100%);
|
||||
}
|
||||
|
||||
.help-panel > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
@@ -644,44 +881,6 @@ main {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.theme-choice {
|
||||
margin: 1.5rem 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.theme-choice legend {
|
||||
margin-bottom: 0.6rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.theme-choice > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.45rem;
|
||||
padding: 0.35rem;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.theme-choice button {
|
||||
padding: 0.62rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-choice button.is-selected {
|
||||
background: var(--surface);
|
||||
color: var(--brand);
|
||||
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.09);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preference-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -691,7 +890,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;
|
||||
@@ -699,7 +898,7 @@ main {
|
||||
|
||||
.preference-summary strong {
|
||||
font-family: Inter, Avenir, 'Segoe UI', sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.preference-summary span,
|
||||
@@ -709,8 +908,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;
|
||||
}
|
||||
|
||||
@@ -721,7 +923,7 @@ main {
|
||||
}
|
||||
|
||||
.preferences-actions button {
|
||||
padding: 0.62rem 0.78rem;
|
||||
padding: 0.52rem 0.68rem;
|
||||
}
|
||||
|
||||
.preferences-actions .danger-button {
|
||||
@@ -729,17 +931,12 @@ main {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.action-message {
|
||||
.portal-header .action-message {
|
||||
min-height: 1.2em;
|
||||
margin: 0.8rem 0 0;
|
||||
}
|
||||
|
||||
.inline-warning {
|
||||
padding: 0.7rem 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
|
||||
color: var(--danger);
|
||||
font-size: 0.82rem;
|
||||
padding: 0;
|
||||
color: var(--toolbox-muted, var(--muted));
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@@ -754,31 +951,19 @@ main {
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-inner,
|
||||
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;
|
||||
width: min(100%, 90rem);
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding-top: 3.8rem;
|
||||
}
|
||||
|
||||
.tool-controls {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-field,
|
||||
@@ -790,10 +975,6 @@ main {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
min-height: 130px;
|
||||
align-items: flex-start;
|
||||
@@ -802,6 +983,53 @@ 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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.drag-handle {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -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.3',
|
||||
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.2',
|
||||
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.3',
|
||||
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 });
|
||||
};
|
||||
}
|
||||
|
||||
27
src/toolPresentation.ts
Normal file
27
src/toolPresentation.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { ResolvedApp } from './types';
|
||||
|
||||
const PRESENTATION: Record<string, { title: string; description: string }> = {
|
||||
'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;
|
||||
}
|
||||
@@ -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];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user