feat: redesign Toolbox navigation and personalization

.env.example

@@ -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_VERSION=0.4.0
-TOOLBOX_RELEASE_SHA256=718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e
+TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112

Containerfile.release

@@ -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_VERSION=0.4.0
-ARG TOOLBOX_RELEASE_SHA256=718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e
+ARG TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112
 ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/zemion/toolbox-portal/releases/download
 
 RUN set -eu; \

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
+browser toolbox. Version `0.2.0` reads one same-origin catalogue, shows each app
-as a full-page launch card, and keeps personal pins, ordering, visibility, and
+as a full-page launch tile, and keeps personal pins, drag-and-drop ordering,
-appearance in the current browser.
+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.0` SDK ranges to the published `0.2.0`
 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.0 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
+`release/toolbox.lock.json` is the reviewed v0.4.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
+pin the published PDF Tools 0.4.0, XSLT Tools 0.4.0, and OneNote Tools 0.3.0
 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.0.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.4.0.zip
-build/add-ideas-toolbox-0.3.0.zip.sha256
+build/add-ideas-toolbox-0.4.0.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.0.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.0 .
 podman run --rm -p 8080:8080 \
-  git.add-ideas.de/zemion/toolbox:0.3.0
+  git.add-ideas.de/zemion/toolbox:0.4.0
 ```
 
 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.4.0 \
-  --tag git.add-ideas.de/zemion/toolbox:0.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)`.
+   `(cd build && sha256sum -c add-ideas-toolbox-0.4.0.zip.sha256)`.
-6. Commit the reviewed lock, tag the toolbox release (for example `v0.3.0`), and
+6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.0`), 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                                                                                          |

THIRD_PARTY_NOTICES.md

@@ -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.

compose.example.yaml

@@ -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.0
     restart: unless-stopped
     read_only: true
     ports:

compose.yaml

@@ -6,9 +6,9 @@ services:
       context: .
       dockerfile: Containerfile.release
       args:
-        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.3.0}"
+        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.0}"
-        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-718a3c8b891e66f5601115270f25acaec9dbe1b9640a72c17954353bb10db93e}"
+        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112}"
-    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.3.0}"
+    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.0}"
     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}"

package-lock.json

@@ -1,15 +1,19 @@
 {
   "name": "@add-ideas/toolbox-portal",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@add-ideas/toolbox-portal",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
-        "@add-ideas/toolbox-contract": "^0.1.0",
+        "@add-ideas/toolbox-contract": "^0.2.0",
+        "@add-ideas/toolbox-shell-react": "^0.2.0",
+        "@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",
+      "version": "0.2.0",
-      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.1.1/toolbox-contract-0.1.1.tgz",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.0/toolbox-contract-0.2.0.tgz",
-      "integrity": "sha512-0q2whA5Y4SqG4PNNleXYR8nGbT3UYsZ1x+6ZWVmxuc/WjMxmujhD7ilIISmFzmnNdbyEyv/Zpr+U0fnHqGODqw==",
+      "integrity": "sha512-up+wY+ft1L7TbXrflcTeTOwEdcFwHBWFlGFj8skQvcLy5z2mDBpd6/7PVQKDvDTkiODu2npviHm6AFglFw+17Q==",
       "license": "Apache-2.0"
     },
+    "node_modules/@add-ideas/toolbox-shell-react": {
+      "version": "0.2.0",
+      "resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.0/toolbox-shell-react-0.2.0.tgz",
+      "integrity": "sha512-qYR+OBXX8rfB+BYCsUbpiCzo2xK12SIPWVNXHre158Da5uT6usr8rRvp5qa5u2oQJ50PNzlXyXMyTeRp0Vz5wg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@add-ideas/toolbox-contract": "0.2.0"
+      },
+      "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"
-      "license": "0BSD",
-      "optional": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@add-ideas/toolbox-portal",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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.0",
+    "@add-ideas/toolbox-shell-react": "^0.2.0",
+    "@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"
   },

public/SOURCE.md

@@ -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.0 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.0
 
 Each bundled application contains its own `SOURCE.md`, license, and third-party
 license materials. The application sources are also linked from the portal.

public/THIRD_PARTY_NOTICES.md

@@ -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
+Portal runtime components include React and React DOM (MIT),
-`@add-ideas/toolbox-contract` (Apache-2.0). Their complete installed license and
+`@add-ideas/toolbox-contract` and `@add-ideas/toolbox-shell-react`
-notice texts are shipped in `THIRD_PARTY_LICENSES.txt`. Each application remains
+(Apache-2.0), dnd-kit (MIT), and tslib (0BSD). Their complete installed license
-under its own licence. Application notices are shipped inside its
+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.

release/toolbox.lock.example.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./toolbox-release-lock.schema.json",
   "schemaVersion": 1,
-  "releaseVersion": "0.3.0",
+  "releaseVersion": "0.4.0",
-  "portalVersion": "0.1.0",
+  "portalVersion": "0.2.0",
   "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",
+      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.3.4/pdf-tools-0.3.4.zip",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip",
-      "sha256": "090492aaee4bd5cde51917ee3d9d0c971f071c27b7dbe4c918876ffd752dd930",
+      "sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca",
       "target": "pdf"
     },
     {
       "id": "de.add-ideas.xslt-tools",
-      "version": "0.3.2",
+      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.3.2/xslt-tools-0.3.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip",
-      "sha256": "e1746ac60f7143037ce77d7f04c62f7da39a92d8cef42e7167acb2bc00786de1",
+      "sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142",
       "target": "xslt"
     },
     {
       "id": "de.add-ideas.onenote-tools",
-      "version": "0.2.0",
+      "version": "0.3.0",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.2.0/onenote-tools-0.2.0.zip",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip",
-      "sha256": "660c8c53bfd2f21875d41910d208d6638995f8dc31ba150ffa57d5591f56b76b",
+      "sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3",
       "target": "onenote"
     }
   ]

release/toolbox.lock.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./toolbox-release-lock.schema.json",
   "schemaVersion": 1,
-  "releaseVersion": "0.3.0",
+  "releaseVersion": "0.4.0",
-  "portalVersion": "0.1.0",
+  "portalVersion": "0.2.0",
   "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",
+      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.3.4/pdf-tools-0.3.4.zip",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip",
-      "sha256": "090492aaee4bd5cde51917ee3d9d0c971f071c27b7dbe4c918876ffd752dd930",
+      "sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca",
       "target": "pdf"
     },
     {
       "id": "de.add-ideas.xslt-tools",
-      "version": "0.3.2",
+      "version": "0.4.0",
-      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.3.2/xslt-tools-0.3.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip",
-      "sha256": "e1746ac60f7143037ce77d7f04c62f7da39a92d8cef42e7167acb2bc00786de1",
+      "sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142",
       "target": "xslt"
     },
     {
       "id": "de.add-ideas.onenote-tools",
-      "version": "0.2.0",
+      "version": "0.3.0",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.2.0/onenote-tools-0.2.0.zip",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip",
-      "sha256": "660c8c53bfd2f21875d41910d208d6638995f8dc31ba150ffa57d5591f56b76b",
+      "sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3",
       "target": "onenote"
     }
   ]

scripts/assembler.test.ts

@@ -83,7 +83,7 @@ function makeLock(artifact: string, sha256: string) {
   return {
     schemaVersion: 1,
     releaseVersion: '0.1.0',
-    portalVersion: '0.1.0',
+    portalVersion: '0.2.0',
     catalogue: {
       id: 'de.add-ideas.toolbox',
       name: 'Test Toolbox',

scripts/licenses.mjs

@@ -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) {

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

src/App.tsx

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

src/catalogue.test.ts

@@ -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/);

src/components/AppCard.tsx

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

src/components/HelpPanel.tsx

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

src/main.tsx

@@ -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';
 

src/preferences.test.ts

@@ -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
+    );
   });
 });

src/preferences.ts

@@ -1,66 +1,31 @@
-import type { ThemeMode } from './types';
+import {
-
+  TOOLBOX_PREFERENCES_KEY,
-export const PREFERENCES_KEY = '@add-ideas/toolbox-portal:v1:preferences';
+  defaultToolboxPreferences,
-
+  parseToolboxPreferences,
-export interface Preferences {
+  readToolboxPreferences,
-  version: 1;
+  writeToolboxPreferences,
-  pinned: string[];
+  type ToolboxPreferences,
-  order: string[];
+} from '@add-ideas/toolbox-contract';
-  hidden: string[];
-  theme: ThemeMode;
-}
 
+export const PREFERENCES_KEY = TOOLBOX_PREFERENCES_KEY;
+export type Preferences = ToolboxPreferences;
 export const defaultPreferences: Preferences = {
-  version: 1,
+  ...defaultToolboxPreferences,
   pinned: [],
   order: [],
   hidden: [],
-  theme: 'system',
 };
-
+export const parsePreferences = parseToolboxPreferences;
-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 function readPreferences(storage: Storage = localStorage): Preferences {
-  const value = storage.getItem(PREFERENCES_KEY);
+  return readToolboxPreferences(storage);
-  if (!value) return { ...defaultPreferences };
-  try {
-    return parsePreferences(JSON.parse(value));
-  } catch {
-    return { ...defaultPreferences };
-  }
 }
 
 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(
-  return [...appIds].sort((left, right) => {
+    (left, right) =>
-    const pinDifference = Number(pinned.has(right)) - Number(pinned.has(left));
-    if (pinDifference) return pinDifference;
-    return (
       (order.get(left) ?? Number.MAX_SAFE_INTEGER) -
       (order.get(right) ?? Number.MAX_SAFE_INTEGER)
   );
-  });
 }
 
-export function moveId(
+export function reorderWithinIds(
   order: string[],
-  id: string,
+  activeId: string,
-  direction: -1 | 1
+  overId: string,
+  peerIds: readonly string[]
 ): string[] {
-  const current = order.indexOf(id);
+  if (activeId === overId) return order;
-  if (current < 0) return order;
+  const peers = new Set(peerIds);
-  const target = current + direction;
+  if (!peers.has(activeId) || !peers.has(overId)) return order;
-  if (target < 0 || target >= order.length) return order;
+
-  const next = [...order];
+  const orderedPeers = order.filter((id) => peers.has(id));
-  [next[current], next[target]] = [next[target]!, next[current]!];
+  for (const id of peerIds) {
-  return next;
+    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
+  );
 }

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

src/test/fixtures.ts

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

src/usePreferences.ts

@@ -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];
 }