feat(vault): detail sidebar, role-grouped toolbar and fleet-style selection

[remko48]

Draft until the @conduction/nextcloud-vue release lands. The vault page consumes library features from ConductionNL/nextcloud-vue#832 and its follow-up (contextual selection strip, #before-collection/#after-search slots, card clickToView, the CnPageRenderer custom-page fix) that are not in the released package yet — locally the built dist is overlaid into node_modules. Once the release is out, a dep-bump/lockfile commit follows and this PR goes ready for review. Until then CI runs against the released package and the vault surface will not behave as described.

Restyle Stage 8 for the vault list, in three arcs:

Secret details in a right sidebar (edf85380 + l10n follow-ups): clicking a row opens the detail as an NcAppSidebar over the list instead of navigating away — Proton Pass/Passwork style, one scrolling pane, the action row in the header. /secrets/:id stays deep-linkable: the id is an optional segment on the list routes, so the list never remounts when a row opens. Folder switches show a loading state instead of flashing the previous folder's rows (0f69672d).

Toolbar and selection rework (20c5f901): the page's three action surfaces collapse into the actions bar — Refresh via the bar's built-in entry, the create/import and "My data" actions in the Actions overflow, the secret-type filter as a funnel button beside the search field (now also carrying the sort radios, and flipping to a filled primary glyph whenever filter or sort deviates from the defaults). The page title is visually hidden (h1 kept for accessibility) and the bar takes the freed top row, clearing the floating nav toggle. Selection is CnIndexPage's own in all three views — header select-all, row/card checkboxes, shift-range preserved through NcCheckboxRadioSwitch — shared across view switches, pruned to visible rows on every list change, with bulk actions living in the library's contextual selection strip (live count via role="status", WCAG 2.1 SC 4.1.3; bulk-actions §3.1's required bar). Vaults/folders render as a captioned strip above the collection in every view mode instead of masquerading as secrets among rows and cards. New l10n string "Filter and sort" in en + all 36 required locales; six English-copied strings and the secret-type labels got real translations across all locales (17988a77, 2e88165d, c12eb9d7).

Navigation fixes: the rail's "…" node — not a deep folder's visible ancestor — carries the selection whenever the open folder lives below the 5-level display cap (58082c6b, generalized in e2836c78).

Also: b5d5cbfc removes a dev-only auto-unlock block that accidentally rode along in the l10n commit (NODE_ENV-guarded and inert without an explicit localStorage opt-in, so it never shipped in a production build — removed from tracked sources regardless), and 41ca063a redraws the lock shackle as a filled outline in all five app icons so ImageMagick's stroke-less favicon rasterizer renders the full lock.

Review note: the toolbar-fold, funnel placement, selection strip and vault-strip decisions are recorded with their rationale in the Stage 8 sections of RESTYLE-PLAN.md (untracked working doc) and inline where each choice lives in the code.

[github-actions]

Quality Report — ConductionNL/keepiq @ 532f2cd

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		❌
build		✅
check-manifest		✅
test-l10n		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
composer			✅	✅ 111/111
npm			✅	✅ 550/550
app:check-code	⏭️
info.xml	✅
REUSE	❌
PHPUnit					❌
Newman					✅
Playwright					🚨 NO VERDICT — enabled but never ran
Hydra gates					❌

---

Quality workflow — 2026-08-28 13:34 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/keepiq @ b9bec65

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-manifest		✅
test-l10n		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
composer			✅	✅ 111/111
npm			✅	✅ 550/550
app:check-code	⏭️
info.xml	✅
REUSE	❌
PHPUnit					✅
Newman					✅
Playwright					🚨 NO VERDICT — enabled but never ran
Hydra gates					❌

---

Quality workflow — 2026-08-28 13:55 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/keepiq @ 8628709

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		❌
build		✅
check-manifest		✅
test-l10n		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
composer			✅	✅ 111/111
npm			✅	✅ 536/536
app:check-code	⏭️
info.xml	✅
REUSE	❌
PHPUnit					❌
Newman					❌
Playwright					🚨 NO VERDICT — enabled but never ran
Hydra gates					❌

---

Quality workflow — 2026-08-31 08:25 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/keepiq @ b06ea05

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-manifest		✅
test-l10n		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
composer			✅	✅ 111/111
npm			✅	✅ 536/536
app:check-code	⏭️
info.xml	✅
REUSE	❌
PHPUnit					✅
Newman					✅
Playwright					🚨 NO VERDICT — enabled but never ran
Hydra gates					✅

---

Quality workflow — 2026-08-31 08:33 UTC

Download the full PDF report from the workflow artifacts.

[WilcoLouwerse]

Verdict: APPROVE

Solide restyle. Route-driven state, security-hygiene in orde (geen v-html, reveal-state reset over secrets, fail-closed isOwner, warning-boven-waarde bij possiblyCompromisedAt), accessibility handhaaft WCAG 4.1.2 (icon-only buttons dragen ariaLabel + title), selection-pruning voorkomt cross-view leaks. Sinds mijn eerdere in-chat review is de nc-vue 2.27.0 dep bump geland (commit 8d262a80) — de blocker die het aan draft hield.

Wat sterk is:

• Docblock-discipline — Elke method + computed heeft @spec openspec/... referenties (opsx-workflow). Comments verklaren consequent "waarom", niet "wat".
• possiblyCompromisedAt warning boven de waarde — Correct BEFORE de user het wachtwoord kopieert. Niet dismissible. Goede security-UX.
• Reveal-state resets in secretId watcher (lines 1311-1314) — cardRevealed + bsnRevealed naar false bij row-switch. Belangrijke edge-case correct.
• PasswordField gebruikt :resolve callback — decrypted key on-demand, niet in DOM.
• Selection-prune watcher (SecretList.vue:939-945) — kritieke correctheid voor bulk-delete/move.
• bulkDialog disabled tijdens loading || folderSwitching — voorkomt bulk-actions tijdens "oude selectie → nieuwe rijen" race.
• detailRoute.js LIST_ROUTE_NAMES guard — Alleen de twee list-routes hosten de sidebar; ApplicationDetail etc. triggeren niet.
• Dev-only auto-unlock block genuinely gone (commit b5d5cbfc) — verified via grep: geen NODE_ENV / localStorage opt-in / auto-unlock rest.

🟡 Concerns (4 — allemaal advies, geen blockers)

Zie inline op SecretDetailSidebar.vue regels 1264, 1325, 1385, 1468. Alle vier zijn error-handling / robustness follow-ups — niets blokkerends voor deze restyle.

🟢 Kleine follow-ups (niet inline)

• Component grootte — SecretDetailSidebar.vue is 1748 regels. Ondanks Proton-style "one pane" ontwerp zou een split in CardRows / IdentityRows / AdvancedAccordion de test-oppervlakte kleiner maken. Trade-off is gedocumenteerd in de comment blocks — niet blocking, wel iets voor Stage 9.
• Icon-imports — 30+ vue-material-design-icons in één file. Tree-shakeable en klein, maar allemaal geladen bij sidebar mount. Overweeg defineAsyncComponent voor icons in de Advanced-accordion (History, Autorenew, BeehiveOutline). Marginal.
• Missing spec-files voor detailRoute.js (3 pure route-mappers) en secretTypes.js (1 one-liner) — low value maar even.

CI

mergeStateStatus: UNKNOWN op moment van review — verwacht dat resolveert zodra Actions klaar zijn. Wachten met merge tot CI groen is.

🤖 Generated with Claude Code

[WilcoLouwerse]

🟡 isOwner valt terug op drie mogelijke veldnamen — normaliseer aan de backend-kant

const owner = this.secret.ownerId ?? this.secret.owner_id ?? this.secret.userId

De docblock zegt "fallback to userId for legacy responses", wat op zich prima is — maar drie veldnamen voor hetzelfde concept betekent dat elke andere consumer van Secret óf dezelfde fallback-chain moet dupliceren, óf per abuis één van de drie mist en dan silently isOwner === false voor rechtmatige eigenaars retourneert (fail-closed, dus niet direct exploitable, wél verwarrend).

Verification: grep -rn 'ownerId\|owner_id\|userId' src/ | grep -v '\.spec\.' — als andere consumers alleen ownerId of owner_id checken, hebben zij een impliciete andere definitie van "owner".

Fix (follow-up ticket): normaliseer de payload aan de backend-kant naar één veldnaam (waarschijnlijk ownerId) en verwijder de fallback-chain. Blijft acceptabel als tussenoplossing tot dat gebeurt — 🟡 dus niet blocking.

[WilcoLouwerse]

🟡 mounted() heeft geen catch rond fetchTypes() — als de type-store faalt blijft de sidebar oneindig loaden

async mounted() {
  await useSecretTypeStore().fetchTypes()
  await this.load()
}

Als fetchTypes() rejecten (netwerk, 500, offline), bubbelt de exception op uit de handler, load() wordt nooit aangeroepen, en this.loading blijft true — NcAppSidebar toont een oneindige spinner zonder foutmelding.

load() zelf heeft wél een try/catch die de error rendert (lines 1341-1370) — voor consistency zou fetchTypes() óók omhuld moeten worden.

Verification: grep -A2 'async mounted' src/components/SecretDetailSidebar.vue — geen try/catch rond het pre-load await.

Fix: omhul beide awaits in dezelfde try/catch, of wrap alleen fetchTypes() en zet de error op this.error bij mislukking.

Fout-scenario: user opent de eerste secret na een deployment waar de types-endpoint tijdelijk 502 gaf → sidebar loopt vast op de spinner tot page refresh.

[WilcoLouwerse]

🟡 refreshList() slikt errors silently — user krijgt stale list na edit/move zonder signaal

refreshList() {
  useSecretStore()
    .fetchSecrets()
    .catch(() => {})
}

Als de list-refresh faalt (offline, auth-timeout, 500) krijgt de user géén signaal, en de list achter de sidebar toont stale data na een edit/move. In combinatie met de sidebar die net wel een verse fetch deed, is de list uit sync met wat de user zojuist zag als "opgeslagen".

Verification: grep -B1 -A3 'refreshList' src/components/SecretDetailSidebar.vue — de .catch(() => {}) is een expliciet silent-swallow.

Fix: minimaal een useOfflineStore().markStale() bij failure, of een logger.warn(...) zodat het te tracken is. Beste: throw en laat de globale error-handler een toast tonen.

Fout-scenario: user edit een secret in de sidebar, save success, refreshList() faalt (WLAN glitch), de list toont nog de oude naam. User denkt "mijn save is niet doorgekomen" en klikt Save opnieuw met de al-opgeslagen waarde.

[WilcoLouwerse]

🟡 remove() heeft geen error-handling — bij 403/500/offline sluit de sidebar niet, geen feedback

async remove() {
  await useSecretStore().deleteSecret(this.secretId)
  this.$emit('close')
}

Bij een 403 (RBAC), 500 (server error) of offline-write, faalt de await, de exception bubbelt op uit de handler, en $emit('close') wordt nooit uitgevoerd — de sidebar blijft open zonder inline feedback dat de delete faalde. Vergelijk met load() (lines 1341-1370) die wél try/catch heeft en this.error zet.

Verification: grep -A5 'async remove' src/components/SecretDetailSidebar.vue — geen try/catch.

Fix:

async remove() {
  try {
    await useSecretStore().deleteSecret(this.secretId)
    this.$emit('close')
  } catch (e) {
    this.error = e?.response?.data?.message || t('keepiq', 'Failed to delete secret')
  }
}

Fout-scenario: user klikt Delete op een gedelegeerde secret waarop hij geen owner-recht heeft (403) → server weigert → sidebar hangt open met de secret nog aanwezig, geen indicatie dat de delete niet werkte.