JWT tool: add editor-style menubar (File via ToolFileMenu, Decode/Encode toggles, Help + Tour right-aligned) #93

New Issue

2026-05-09T20:30:30Z

spikerj commented

2026-05-09 20:30:30 +00:00

Summary

The JWT Encoder / Decoder at /tools/(tools:jwt) (JwtComponent in @spikersoft/feature-dev-tools-encoding) currently mirrors Base64’s layout: a header block with Toggle Help + Guided Tour, and a separate mode section for Decode / Encode. It does not use the same CDK menubar pattern as the JavaScript playground’s app-js-debugger-toolbar or the JSON QuickType cdkMenuBar bar.

This ticket applies the same UX criteria as #92 (Base64 menubar), scoped to JWT.

Desired layout

lib-tool-file-menu (@spikersoft/platform-tool-file-menu — ToolFileMenuComponent) under a top-level File menu, with the standard four operations:
- Save to Browser
- Download to Device
- Load from Browser
- Load from Device
Host provides ToolStorageConfig (dedicated dbName for JWT — must not collide with Base64 or other tools), serialize(), and onFileMenuEvent / ToolFileMenuEvent handling. On loaded, rehydrate decode token text, encode form fields, mode (decode | encode), and any UI state needed for a sensible restore (e.g. education visibility if persisted).

Reference: reg-ex.component.ts for ToolFileMenuComponent wiring; #92 for the same bar pattern on sibling Base64.
Decode / Encode as root-level menubar controls (e.g. mat-button-toggle-group styled with menubar-trigger / theme partials), replacing or absorbing today’s standalone mode-section row (data-tour="jwt-mode").
Toggle Help and Guided Tour moved into the menubar, pulled right (after menubar-spacer), consistent with js-debugger-toolbar trailing cluster. Today: jwt.component.html header-actions.

References (code)

Route: projects/spikersoft/src/routes.ts — path: "jwt", JwtComponent.
Current UI: libraries/features/dev-tools-encoding/src/lib/jwt/jwt.component.{ts,html,scss}.
Menubar pattern: libraries/features/dev-tools-javascript-runner/src/lib/js-debugger-toolbar.component.html; theme editor-menubar / _editor-menubar.scss.
Shared file menu: libraries/platform/tool-file-menu/src/lib/tool-file-menu.component.ts.

Acceptance criteria

JWT shows an editor-menubar (cdkMenuBar) with File wired to lib-tool-file-menu and the four standard operations.
Decode and Encode are root-level menubar controls.
Toggle Help and Guided Tour are in the menubar, right-aligned.
IntroTourProvider / intro.js steps and data-tour anchors updated so tours still target correct elements (including any moved jwt-header, jwt-mode, jwt-input, encode panels).
@nx/enforce-module-boundaries: feature-dev-tools-encoding depends on platform-tool-file-menu + platform-tool-storage as needed.
jwt.component.spec.ts updated for new plumbing.

Notes

Serialization is richer than Base64: reactive jwtForm (token, header/payload JSON in encode path, algorithm/secret fields as applicable — inventory actual form state in jwt.component.ts before implementing). Prefer a small JSON envelope { version, mode, decode: {...}, encode: {...} } so future fields are additive.
Optional: keep Demo Token / Clear as menubar items or panel actions — not required by this ticket; avoid duplicating commands already under File.
Pair implementation with #92 if both are done in one pass for shared SCSS partials or encoding-lib README updates.

## Summary The JWT Encoder / Decoder at `/tools/(tools:jwt)` (`JwtComponent` in `@spikersoft/feature-dev-tools-encoding`) currently mirrors Base64’s layout: a **header block** with **Toggle Help** + **Guided Tour**, and a separate **mode section** for **Decode / Encode**. It does **not** use the same **CDK menubar** pattern as the JavaScript playground’s `app-js-debugger-toolbar` or the JSON QuickType `cdkMenuBar` bar. This ticket applies the **same UX criteria** as [#92](https://git.spikersoft.com/spikerj/spikersoft-issues/issues/92) (Base64 menubar), scoped to JWT. ## Desired layout 1. **`lib-tool-file-menu`** (`@spikersoft/platform-tool-file-menu` — `ToolFileMenuComponent`) under a top-level **File** menu, with the standard four operations: - Save to Browser - Download to Device - Load from Browser - Load from Device Host provides `ToolStorageConfig` (dedicated `dbName` for JWT — must not collide with Base64 or other tools), `serialize()`, and `onFileMenuEvent` / `ToolFileMenuEvent` handling. On `loaded`, rehydrate decode token text, encode form fields, `mode` (`decode` | `encode`), and any UI state needed for a sensible restore (e.g. education visibility if persisted). Reference: `reg-ex.component.ts` for `ToolFileMenuComponent` wiring; [#92](https://git.spikersoft.com/spikerj/spikersoft-issues/issues/92) for the same bar pattern on sibling Base64. 2. **Decode / Encode** as **root-level** menubar controls (e.g. `mat-button-toggle-group` styled with `menubar-trigger` / theme partials), replacing or absorbing today’s standalone `mode-section` row (`data-tour="jwt-mode"`). 3. **Toggle Help** and **Guided Tour** moved **into the menubar**, **pulled right** (after `menubar-spacer`), consistent with `js-debugger-toolbar` trailing cluster. Today: `jwt.component.html` `header-actions`. ## References (code) - Route: `projects/spikersoft/src/routes.ts` — `path: "jwt"`, `JwtComponent`. - Current UI: `libraries/features/dev-tools-encoding/src/lib/jwt/jwt.component.{ts,html,scss}`. - Menubar pattern: `libraries/features/dev-tools-javascript-runner/src/lib/js-debugger-toolbar.component.html`; theme `editor-menubar` / `_editor-menubar.scss`. - Shared file menu: `libraries/platform/tool-file-menu/src/lib/tool-file-menu.component.ts`. ## Acceptance criteria - [ ] JWT shows an `editor-menubar` (`cdkMenuBar`) with **File** wired to `lib-tool-file-menu` and the four standard operations. - [ ] **Decode** and **Encode** are root-level menubar controls. - [ ] **Toggle Help** and **Guided Tour** are in the menubar, **right-aligned**. - [ ] `IntroTourProvider` / intro.js steps and `data-tour` anchors updated so tours still target correct elements (including any moved `jwt-header`, `jwt-mode`, `jwt-input`, encode panels). - [ ] `@nx/enforce-module-boundaries`: `feature-dev-tools-encoding` depends on `platform-tool-file-menu` + `platform-tool-storage` as needed. - [ ] `jwt.component.spec.ts` updated for new plumbing. ## Notes - **Serialization** is richer than Base64: reactive `jwtForm` (token, header/payload JSON in encode path, algorithm/secret fields as applicable — inventory actual form state in `jwt.component.ts` before implementing). Prefer a small JSON envelope `{ version, mode, decode: {...}, encode: {...} }` so future fields are additive. - Optional: keep **Demo Token** / **Clear** as menubar items or panel actions — not required by this ticket; avoid duplicating commands already under File. - Pair implementation with [#92](https://git.spikersoft.com/spikerj/spikersoft-issues/issues/92) if both are done in one pass for shared SCSS partials or encoding-lib README updates.

spikerj commented

2026-05-10 04:47:11 +00:00

Implemented and shipped together with #92.

What changed

Replaced the JWT tool's stacked header-section (Toggle Help + Guided Tour) and standalone mode-section (Decode/Encode) with a single editor-menubar (cdkMenuBar) at the top of jwt.component.html, mirroring app-js-debugger-toolbar and the JSON QuickType input bar.
File is now a lib-tool-file-menu (@spikersoft/platform-tool-file-menu) on the left of the bar, providing the standard four operations (Save to Browser, Download to Device, Load from Browser, Load from Device). Backed by a dedicated ToolStorageConfig with dbName: "SpikerSoftJwtStorage" so saves never collide with sibling tools.
Decode / Encode are root-level mat-button-toggle controls on the menubar (no longer in a separate stacked section).
Toggle Help and Guided Tour are right-aligned after <span class="menubar-spacer">, mirroring the right-aligned status cluster on the JS debugger toolbar.
data-tour="jwt-header" and data-tour="jwt-mode" migrated to the menubar wrapper and the toggle group respectively, so existing intro.js steps keep finding the right anchors.
Saved-file payload is a versioned { version: 1, mode, jwtToken, secret, algorithm, header, payload, showClaimsBreakdown, showEducation } envelope. Verification state is intentionally not persisted (a key match must be computed live; loading clears any prior result).

Infrastructure

Added peer deps to feature-dev-tools-encoding: @angular/cdk, @spikersoft/platform-tool-file-menu, @spikersoft/platform-tool-storage, plus platform-intro-tour / platform-activity-tracking (closed pre-existing silent drift).
Added styleIncludePaths: ["../../spikersoft-theme/src/lib"] to ng-package.json so @use "editor-menubar" resolves at lib-build time.
Added a test target to project.json (the lib was missing one — same gap that bit on #74) and a sibling vitest.config.ts.

Tests

4 new tests in jwt.component.spec.ts covering the File menu integration: round-trip serialize+load, non-JSON guard, no apply on saved events, and verification clears on load.
Existing 24 tests preserved. nx test feature-dev-tools-encoding passes 60/60 (Base64 + JWT combined).

Verification

nx build feature-dev-tools-encoding ✅ (transitive build of 6 deps + lib)
nx lint feature-dev-tools-encoding ✅ (@nx/enforce-module-boundaries clean)
nx test feature-dev-tools-encoding ✅ 60/60

Closing.

Implemented and shipped together with #92. **What changed** - Replaced the JWT tool's stacked `header-section` (Toggle Help + Guided Tour) and standalone `mode-section` (Decode/Encode) with a single `editor-menubar` (`cdkMenuBar`) at the top of `jwt.component.html`, mirroring `app-js-debugger-toolbar` and the JSON QuickType input bar. - **File** is now a `lib-tool-file-menu` (`@spikersoft/platform-tool-file-menu`) on the left of the bar, providing the standard four operations (Save to Browser, Download to Device, Load from Browser, Load from Device). Backed by a dedicated `ToolStorageConfig` with `dbName: "SpikerSoftJwtStorage"` so saves never collide with sibling tools. - **Decode** / **Encode** are root-level `mat-button-toggle` controls on the menubar (no longer in a separate stacked section). - **Toggle Help** and **Guided Tour** are right-aligned after `<span class="menubar-spacer">`, mirroring the right-aligned status cluster on the JS debugger toolbar. - `data-tour="jwt-header"` and `data-tour="jwt-mode"` migrated to the menubar wrapper and the toggle group respectively, so existing intro.js steps keep finding the right anchors. - Saved-file payload is a versioned `{ version: 1, mode, jwtToken, secret, algorithm, header, payload, showClaimsBreakdown, showEducation }` envelope. Verification state is intentionally not persisted (a key match must be computed live; loading clears any prior result). **Infrastructure** - Added peer deps to `feature-dev-tools-encoding`: `@angular/cdk`, `@spikersoft/platform-tool-file-menu`, `@spikersoft/platform-tool-storage`, plus `platform-intro-tour` / `platform-activity-tracking` (closed pre-existing silent drift). - Added `styleIncludePaths: ["../../spikersoft-theme/src/lib"]` to `ng-package.json` so `@use "editor-menubar"` resolves at lib-build time. - Added a `test` target to `project.json` (the lib was missing one — same gap that bit on #74) and a sibling `vitest.config.ts`. **Tests** - 4 new tests in `jwt.component.spec.ts` covering the File menu integration: round-trip serialize+load, non-JSON guard, no apply on `saved` events, and verification clears on load. - Existing 24 tests preserved. `nx test feature-dev-tools-encoding` passes 60/60 (Base64 + JWT combined). **Verification** - `nx build feature-dev-tools-encoding` ✅ (transitive build of 6 deps + lib) - `nx lint feature-dev-tools-encoding` ✅ (`@nx/enforce-module-boundaries` clean) - `nx test feature-dev-tools-encoding` ✅ 60/60 Closing.

spikerj referenced this issue

2026-05-10 04:47:23 +00:00

Base64 tool: add editor-style menubar (File via ToolFileMenu, Encode/Decode toggles, Help + Tour right-aligned) #92

spikerj closed this issue

2026-05-10 04:47:27 +00:00

spikerj referenced this issue

2026-07-02 00:24:33 +00:00

[E2E P2] data-testid selector convention across walked components #315

spikerj referenced this issue

2026-07-02 01:21:32 +00:00

[E2E P2] data-testid selector convention across walked components #315

spikerj referenced this issue