mars3142
de22b895a6
Settings → Account & access gets a real API Tokens section (list, create with a scope picker limited to what the session itself holds, one-time reveal, revoke) calling findr-api's new /v1/tokens - the first real HTTP calls from findr-web to findr-api, everything else is still mock data. Three things had to happen for that to actually work rather than 401 immediately or after a few minutes: - auth.ts requested only "openid profile email" at sign-in, so the access token never carried the findr:* scopes findr-api checks - now requests all of them (src/lib/scopes.ts). - OIDC access tokens are short-lived (minutes); nothing refreshed them, so every findr-api call would start failing well before the session cookie itself expired. auth.ts's jwt() callback now refreshes via the standard refresh_token grant, endpoint from discovery rather than a hardcoded path. - event.locals.auth() runs at least twice per request (hooks + +layout.server.ts) and each call re-signs the session token - two uncached calls in one request would each try to redeem the same refresh_token once it's expired, and Keycloak rotates those, so the second would fail. hooks.server.ts now memoizes it per request. routes/logout and the new refresh logic share one OIDC discovery helper (/server/oidc-discovery.ts) instead of each hardcoding endpoint paths. Verified end-to-end: sign out and back in to pick up the new scopes, create a token (persisted in Postgres, subject = real OIDC sub), revoke it, confirm both in the UI and the database. Signed-off-by: Peter Siegmund <mars3142@noreply.mars3142.dev>
findr-web
SvelteKit UI for findr. Every page is currently mocked — no API calls,
all data comes from src/lib/mock/data.ts.
Stack
- SvelteKit 2 · Svelte 5 (runes) · TypeScript · adapter-node
- Tailwind CSS v4 — the only styling mechanism
- shadcn-svelte (
vegapreset) — components insrc/lib/components/ui/ - lucide (
@lucide/svelte) for icons
shadcn components are never edited
Files under src/lib/components/ui/ are managed by the shadcn-svelte CLI and
must not be modified — that keeps shadcn-svelte update painless. All
customisation lives in:
src/app.css— design tokens (colours, fonts, radius) the components readsrc/lib/components/*.svelte— our own composite components- Tailwind utility classes passed via
class=props
To add a component: npx shadcn-svelte@latest add <name>.
Design system ("warm paper catalog")
From Findr.pdf. Encoded in src/app.css:
- Serif headings — Libre Caslon (
font-heading) - Every number and code is monospace — IBM Plex Mono (
font-mono) - Warm off-white paper background, near-black buttons, dark left nav
- Orange
#e8590c= pick-by-light / warning only — token--pick(bg-pick,text-pick). Green--putfor "put away",--destructivefor empty/errors. These are the only saturated colours. - Mobile-first: bottom tab bar <
lg, dark sidebar ≥lg
Pages (mock)
| Route | Mockup | |
|---|---|---|
/parts |
1a | list, cards/table toggle, filters, category rail |
/parts/[id] |
1b | detail, tabs, multi-location, pick-by-light panel |
/locations |
– | box overview |
/locations/[box] |
1c | Kastenplan — compartment grid, lit bins |
/import |
1d | LCSC import preview |
/pick |
1e | mobile picking — list + booking sheet with stepper |
/settings |
1f | tabs: Pick by Light / Account & access / Distributors / Backup |
/projects, /orders |
– | simple stubs |
Import is reached via the New part button on /parts, not the nav.
The dark sidebar has an account button at the bottom (account-menu.svelte).
Develop
npm install
npm run dev
npm run check # svelte-check
npm run lint
npm run build