janpeter/inspannings-monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2 from madhura68/feat/avatar-bottom-nav

Browse source 
Feat/avatar bottom nav
This commit is contained in:
Janpeter Visser 2026-04-20 01:25:44 +02:00 • committed by GitHub
commit aca34c57e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 842 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

58
CLAUDE.md
View file

@ -10,28 +10,28 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
```bash
npm run dev # Start dev server (localhost:3000)
npm run build # Production build
npm run build # Production build --webpack (rolldown disabled)
npm run lint # ESLint
npm run test # Vitest (unit tests only)
```
No test framework is configured yet.
Node version: `20.9.0` (see `.nvmrc`).
Node version: `>=20.19.0` (see `.nvmrc` / `engines` in package.json).
## Environment Setup
Copy `.env.example` to `.env.local` and fill in your Supabase project values:
Copy `.env.example` to `.env.local`:
```
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
NEXT_PUBLIC_ENABLE_TEST_WIZARD=true # optional: enables /wizard-test route
```
Supabase project must have email/password auth enabled with email confirmation. Apply migrations from `supabase/migrations/` to your local/remote DB.
## Architecture
**Stack:** Next.js (App Router) + React 19 + TypeScript + Supabase (Auth + PostgreSQL) + shadcn/ui + Tailwind CSS. Deployed on Vercel.
**Stack:** Next.js 16 (App Router) + React 19 + TypeScript + Supabase (Auth + PostgreSQL) + shadcn/ui + Tailwind CSS. Deployed on Vercel.
### Route structure
@ -42,21 +42,37 @@ Supabase project must have email/password auth enabled with email confirmation.
| `/auth/confirm` | Email confirmation callback |
| `/onboarding` | Mandatory first-time setup |
| `/dashboard` | Main protected page |
| `/planning` | Daily activity planning |
| `/check-in` | Morning check-in flow |
| `/settings` | User preferences |
| `/wizard-test` | Internal wizard UI test (feature-flagged) |
### Auth & data flow
- `lib/auth/` — `getAuthState()` validates the session server-side from SSR cookies. All protected routes call this and redirect unauthenticated users to `/login`.
- New users are redirected to `/onboarding`; dashboard redirects there if onboarding is incomplete.
- On first protected page load, `profiles` and `user_settings` rows are auto-created with defaults if missing.
- Server Actions (`app/**/actions.ts`) handle form mutations; client components call these directly.
- `lib/auth/session.ts` — `getAuthState()` validates the session server-side from SSR cookies. All protected pages call this and redirect unauthenticated users to `/login`.
- New users are redirected to `/onboarding`; the dashboard redirects there if onboarding is incomplete.
- On first protected page load, `profiles` and `user_settings` rows are auto-created with defaults if missing (`lib/profile/service.ts`).
- Server Actions (`app/**/actions.ts`) handle all form mutations; client components call these directly.
- Status feedback after redirects flows via `?status=<key>` search params → `lib/feedback/status-messages.ts` → `StatusToastBridge` component (Sonner toasts).
### Energy model
The core domain logic lives in `lib/check-in/` and `lib/planning/`:
- **Morning check-in** (`lib/check-in/`) — user scores energy 1–10 and sleep quality. `budget.ts` derives `energyLevel` and `dailyBudget` (budget = score, formula versioned via `BUDGET_FORMULA_VERSION`).
- **Activity energy points** (`lib/planning/meter.ts`) — each activity scores points from duration band (1–4) × impact adjustment. The planning meter tracks `actualPoints` vs `dailyBudget`.
- **Day overview** (`lib/planning/day-overview.ts`) — aggregates activity counts and planned vs actual points for dashboard display.
- **Activity statuses**: `planned` → `completed` / `adjusted` / `skipped`. Ad-hoc activities can be added directly.
### Database
Two tables with Row Level Security (users see only their own rows):
Tables with Row Level Security (users see only their own rows):
- **`profiles`** — display name, locale, timezone, onboarding completion flags
- **`profiles`** — display name, locale, timezone, avatar, onboarding flags
- **`user_settings`** — reminder preferences, energy point visibility
- **`morning_check_ins`** — per-day energy score, sleep quality, derived budget/level
- **`activities`** — daily activity records with status, duration, impact, priority, category
- **`activity_categories`** / **`skip_reasons`** — reference data (seeded)
Migrations live in `supabase/migrations/`.
@ -65,12 +81,24 @@ Migrations live in `supabase/migrations/`.
- `lib/supabase/` — Supabase client setup (server-side SSR client + proxy config)
- `lib/auth/` — session helpers, navigation utilities, Dutch error messages
- `lib/profile/service.ts` — CRUD for profiles and user_settings
- `lib/profile/types.ts` — shared TypeScript types for profile/settings data
- `lib/onboarding/` — onboarding options and timezone lists
- `lib/profile/types.ts` — shared TypeScript types
- `lib/forms/parse.ts` — typed FormData helpers (`getRequiredString`, `getEnumValue`, `getIntegerValue`, etc.) used in all Server Actions; throws `FormDataValidationError` with an error code string
- `lib/feedback/status-messages.ts` — maps `?status=` param keys to `StatusToast` objects
- `lib/wizard/` — generic multi-step wizard primitives (`WizardStepDefinition`, `useWizardFlow` hook); used by onboarding and check-in flows
- `lib/search-params.ts` — `getParamValue()` helper for server page `searchParams`
- `lib/config/feature-flags.ts` — `isTestWizardEnabled()` reads `NEXT_PUBLIC_ENABLE_TEST_WIZARD`
### UI components
`components/ui/` contains shadcn/ui primitives (button, card, input, select, alert, etc.). Feature-level components live in `components/auth/`, `components/onboarding/`, and `components/settings/`. Path alias `@/*` resolves from the repo root.
`components/ui/` contains shadcn/ui primitives. Feature-level components live in `components/auth/`, `components/check-in/`, `components/planning/`, `components/onboarding/`, `components/settings/`, `components/wizard/`, `components/navigation/`, `components/feedback/`, and `components/profile/`. Path alias `@/*` resolves from the repo root.
The app uses the **Dusk theme** — dark-mode-first, semantic surface tokens, enhanced focus/a11y styles (`app/globals.css`).
### Seeding
```bash
npm run seed:demo-users # seeds demo personas via scripts/seed-demo-users.mjs
```
## CI/CD

6
app/check-in/loading.tsx
View file

@ -21,7 +21,7 @@ export default function CheckInLoading() {
</div>
<div className="grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
<Card className="py-0">
<Card className="pb-0">
<CardContent className="space-y-5 pb-6 pt-4">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-8 w-full" />
@ -36,7 +36,7 @@ export default function CheckInLoading() {
</Card>
<div className="space-y-5">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<Skeleton className="h-3 w-16" />
<Skeleton className="mt-1 h-5 w-48" />
@ -46,7 +46,7 @@ export default function CheckInLoading() {
<Skeleton className="mt-1.5 h-4 w-3/4" />
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<Skeleton className="h-3 w-24" />
</CardHeader>

4
app/check-in/page.tsx
View file

@ -76,7 +76,7 @@ export default async function CheckInPage({ searchParams }: CheckInPageProps) {
<CheckInForm todayCheckIn={checkInStatus?.todayCheckIn ?? null} />
<aside className="space-y-5">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Vandaag
@ -100,7 +100,7 @@ export default async function CheckInPage({ searchParams }: CheckInPageProps) {
</CardContent>
</Card>
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
Bewuste grens

2
app/dashboard/loading.tsx
View file

@ -22,7 +22,7 @@ export default function DashboardLoading() {
<div className="grid gap-5 md:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<Card key={i} className="py-0">
<Card key={i} className="pb-0">
<CardHeader className="pb-0">
<Skeleton className="h-3 w-14" />
<Skeleton className="mt-1 h-5 w-40" />

16
app/dashboard/page.tsx
View file

@ -98,7 +98,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
/>
<section className="grid gap-5 md:grid-cols-3">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Auth
@ -112,7 +112,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Profiel
@ -145,7 +145,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Onboarding
@ -160,7 +160,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Instellingen
@ -179,7 +179,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
<CheckInCard todayCheckIn={checkInStatus?.todayCheckIn ?? null} />
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagplanning
@ -205,7 +205,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
<EnergyMeterCard meter={planningMeter} tone="subtle" />
{isTestWizardEnabled() ? (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Wizard core
@ -222,7 +222,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
</section>
{!profile.onboardingCompleted ? (
<Card className="border-warning/32 bg-warning/16 py-0 text-foreground shadow-[var(--shadow-1)]">
<Card className="border-warning/32 bg-warning/16 pb-0 text-foreground shadow-[var(--shadow-1)]">
<CardContent className="flex flex-col gap-4 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="font-semibold">Je onboarding is nog niet afgerond.</p>
@ -237,7 +237,7 @@ export default async function DashboardPage({ searchParams }: DashboardPageProps
</CardContent>
</Card>
) : (
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardContent className="flex flex-col gap-4 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="font-semibold">Je instellingen kun je nu ook los beheren.</p>

164
app/globals.css
View file

@ -8,6 +8,28 @@
--font-body: var(--font-inter-tight), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-body);
--font-mono: var(--font-plex-mono), ui-monospace, monospace;
--typescale-display-large-size: clamp(2.625rem, 5vw, 3.5625rem);
--typescale-display-large-line-height: 1.08;
--typescale-display-medium-size: clamp(2.125rem, 4vw, 2.8125rem);
--typescale-display-medium-line-height: 1.12;
--typescale-headline-large-size: clamp(1.375rem, 3vw, 2rem);
--typescale-headline-large-line-height: 1.2;
--typescale-headline-medium-size: 1.375rem;
--typescale-headline-medium-line-height: 1.2;
--typescale-title-large-size: 1rem;
--typescale-title-large-line-height: 1.3;
--typescale-title-medium-size: 0.875rem;
--typescale-title-medium-line-height: 1.3;
--typescale-body-large-size: 1rem;
--typescale-body-large-line-height: 1.65;
--typescale-body-medium-size: 0.875rem;
--typescale-body-medium-line-height: 1.65;
--typescale-label-large-size: 0.875rem;
--typescale-label-large-line-height: 1.4;
--typescale-label-medium-size: 0.75rem;
--typescale-label-medium-line-height: 1.4;
--typescale-label-small-size: 0.6875rem;
--typescale-label-small-line-height: 1.4;
--background: oklch(97% 0.008 80);
--foreground: oklch(22% 0.03 262);
@ -18,12 +40,24 @@
--primary: oklch(44% 0.11 262);
--primary-foreground: oklch(98% 0.01 262);
--primary-container: oklch(90% 0.03 262);
--primary-container-foreground: oklch(28% 0.06 262);
--secondary: oklch(92% 0.03 262);
--secondary-foreground: oklch(44% 0.11 262);
--secondary-container: oklch(94% 0.018 262);
--secondary-container-foreground: oklch(32% 0.05 262);
--tertiary: oklch(56% 0.09 200);
--tertiary-foreground: oklch(98% 0.006 200);
--tertiary-container: oklch(91% 0.025 200);
--tertiary-container-foreground: oklch(29% 0.055 200);
--muted: oklch(95% 0.012 82);
--muted-foreground: oklch(58% 0.015 262);
--accent: oklch(92% 0.03 262);
--accent-foreground: oklch(44% 0.11 262);
--surface-container-low: oklch(98.5% 0.004 80);
--surface-container: oklch(97.4% 0.007 80);
--surface-container-high: oklch(95.8% 0.012 80);
--outline-variant: oklch(76% 0.012 262 / 0.4);
--destructive: oklch(58% 0.16 25);
--success: oklch(62% 0.09 155);
@ -91,6 +125,18 @@ a {
--color-chart-1: var(--chart-1);
--color-warning: var(--warning);
--color-success: var(--success);
--color-outline-variant: var(--outline-variant);
--color-surface-container-high: var(--surface-container-high);
--color-surface-container: var(--surface-container);
--color-surface-container-low: var(--surface-container-low);
--color-tertiary-container-foreground: var(--tertiary-container-foreground);
--color-tertiary-container: var(--tertiary-container);
--color-tertiary-foreground: var(--tertiary-foreground);
--color-tertiary: var(--tertiary);
--color-secondary-container-foreground: var(--secondary-container-foreground);
--color-secondary-container: var(--secondary-container);
--color-primary-container-foreground: var(--primary-container-foreground);
--color-primary-container: var(--primary-container);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
@ -110,8 +156,9 @@ a {
--color-foreground: var(--foreground);
--color-background: var(--background);
--font-mono: var(--font-plex-mono), ui-monospace, monospace;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 11px;
--radius-md: 12px;
--radius-lg: var(--radius);
--radius-xl: 21px;
--radius-2xl: 25px;
@ -130,12 +177,24 @@ a {
--primary: oklch(52% 0.13 262);
--primary-foreground: oklch(98% 0.01 262);
--primary-container: oklch(30% 0.06 262);
--primary-container-foreground: oklch(94% 0.012 262);
--secondary: oklch(28% 0.03 262);
--secondary-foreground: oklch(96% 0.008 80);
--secondary-container: oklch(31% 0.028 262);
--secondary-container-foreground: oklch(93% 0.01 262);
--tertiary: oklch(68% 0.09 200);
--tertiary-foreground: oklch(16% 0.025 200);
--tertiary-container: oklch(32% 0.05 200);
--tertiary-container-foreground: oklch(94% 0.012 200);
--muted: oklch(26% 0.025 262);
--muted-foreground: oklch(70% 0.015 262);
--accent: oklch(30% 0.04 262);
--accent-foreground: oklch(96% 0.008 80);
--surface-container-low: oklch(20% 0.022 262);
--surface-container: oklch(23% 0.024 262);
--surface-container-high: oklch(27% 0.026 262);
--outline-variant: oklch(68% 0.014 262 / 0.36);
--destructive: oklch(70% 0.16 25);
--success: oklch(74% 0.09 155);
@ -259,6 +318,109 @@ a {
@apply transition hover:text-foreground;
}
.type-display-large {
font-size: var(--typescale-display-large-size);
line-height: var(--typescale-display-large-line-height);
font-weight: 400;
letter-spacing: -0.03em;
}
.type-display-medium {
font-size: var(--typescale-display-medium-size);
line-height: var(--typescale-display-medium-line-height);
font-weight: 400;
letter-spacing: -0.03em;
}
.type-headline-large {
font-size: var(--typescale-headline-large-size);
line-height: var(--typescale-headline-large-line-height);
font-weight: 600;
letter-spacing: -0.02em;
}
.type-headline-medium {
font-size: var(--typescale-headline-medium-size);
line-height: var(--typescale-headline-medium-line-height);
font-weight: 600;
letter-spacing: -0.02em;
}
.type-title-large {
font-size: var(--typescale-title-large-size);
line-height: var(--typescale-title-large-line-height);
font-weight: 600;
letter-spacing: -0.01em;
}
.type-title-medium {
font-size: var(--typescale-title-medium-size);
line-height: var(--typescale-title-medium-line-height);
font-weight: 500;
}
.type-body-large {
font-size: var(--typescale-body-large-size);
line-height: var(--typescale-body-large-line-height);
font-weight: 400;
}
.type-body-medium {
font-size: var(--typescale-body-medium-size);
line-height: var(--typescale-body-medium-line-height);
font-weight: 400;
}
.type-label-large {
font-size: var(--typescale-label-large-size);
line-height: var(--typescale-label-large-line-height);
font-weight: 500;
}
.type-label-medium {
font-size: var(--typescale-label-medium-size);
line-height: var(--typescale-label-medium-line-height);
font-weight: 500;
}
.type-label-small {
font-size: var(--typescale-label-small-size);
line-height: var(--typescale-label-small-line-height);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.state-layer {
--state-layer-opacity: 0;
background-image: linear-gradient(
color-mix(in oklab, currentColor calc(var(--state-layer-opacity) * 100%), transparent),
color-mix(in oklab, currentColor calc(var(--state-layer-opacity) * 100%), transparent)
);
background-repeat: no-repeat;
background-size: 100% 100%;
transition:
background-color 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
color 160ms ease,
transform 150ms ease;
}
.state-layer:hover {
--state-layer-opacity: 0.08;
}
.state-layer:focus-visible,
.state-layer:active {
--state-layer-opacity: 0.12;
}
.state-layer:disabled,
.state-layer[data-disabled] {
--state-layer-opacity: 0;
}
.app-page-copy {
@apply mt-4 max-w-2xl text-base leading-8 text-muted-foreground;
}

14
app/page.tsx
View file

@ -74,7 +74,7 @@ export default async function Home({ searchParams }: HomePageProps) {
/>
<section className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardContent className="p-6 sm:p-8">
<p className="mb-5 max-w-2xl text-lg leading-8 text-muted-foreground">
Deze app wordt ontwikkeld door Jan Peter Visser als compacte dagtool
@ -84,7 +84,7 @@ export default async function Home({ searchParams }: HomePageProps) {
</p>
<div className="grid gap-4">
{makerNotes.map((note) => (
<Card key={note} tone="subtle" className="py-0 shadow-none">
<Card key={note} tone="subtle" className="pb-0 shadow-none">
<CardContent className="px-5 py-4 text-sm leading-7 text-muted-foreground">
{note}
</CardContent>
@ -94,7 +94,7 @@ export default async function Home({ searchParams }: HomePageProps) {
</CardContent>
</Card>
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardHeader className="px-6 pt-7 sm:px-8">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
Specificaties van de app
@ -104,7 +104,7 @@ export default async function Home({ searchParams }: HomePageProps) {
{appSpecs.map((item) => (
<Card
key={item}
className="rounded-[var(--radius-2xl)] border-white/10 bg-white/8 py-0 text-primary-foreground shadow-none"
className="rounded-[var(--radius-2xl)] border-white/10 bg-white/8 pb-0 text-primary-foreground shadow-none"
>
<CardContent className="px-4 py-3 text-sm leading-7">{item}</CardContent>
</Card>
@ -117,7 +117,7 @@ export default async function Home({ searchParams }: HomePageProps) {
</Card>
</section>
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagflow
@ -126,7 +126,7 @@ export default async function Home({ searchParams }: HomePageProps) {
</CardHeader>
<CardContent className="grid gap-5 p-6 md:grid-cols-3">
{productLoop.map((step, index) => (
<Card key={step.title} tone="subtle" className="py-0 shadow-none">
<Card key={step.title} tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
Stap {index + 1}
@ -145,7 +145,7 @@ export default async function Home({ searchParams }: HomePageProps) {
</CardContent>
</Card>
<Card tone="subtle" className="py-0 backdrop-blur">
<Card tone="subtle" className="pb-0 backdrop-blur">
<CardContent className="grid gap-5 p-6 sm:grid-cols-2 lg:grid-cols-4">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">

10
app/planning/loading.tsx
View file

@ -21,7 +21,7 @@ export default function PlanningLoading() {
</div>
<div className="grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
<Card className="py-0">
<Card className="pb-0">
<CardContent className="space-y-4 pb-6 pt-4">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-full" />
@ -36,7 +36,7 @@ export default function PlanningLoading() {
</Card>
<div className="space-y-5">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<Skeleton className="h-3 w-16" />
<Skeleton className="mt-1 h-5 w-48" />
@ -46,14 +46,14 @@ export default function PlanningLoading() {
<Skeleton className="mt-1.5 h-4 w-3/4" />
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardContent className="space-y-3 pb-6 pt-4">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-5 w-full rounded-full" />
<Skeleton className="h-3 w-24" />
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<Skeleton className="h-3 w-24" />
</CardHeader>
@ -69,7 +69,7 @@ export default function PlanningLoading() {
<div className="space-y-3">
<Skeleton className="h-5 w-48" />
{[0, 1, 2].map((i) => (
<Card key={i} className="py-0">
<Card key={i} className="pb-0">
<CardContent className="flex items-center justify-between px-4 py-3">
<div className="space-y-1.5">
<Skeleton className="h-4 w-48" />

4
app/planning/page.tsx
View file

@ -106,7 +106,7 @@ export default async function PlanningPage({ searchParams }: PlanningPageProps)
</div>
<aside className="space-y-5">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Vandaag
@ -139,7 +139,7 @@ export default async function PlanningPage({ searchParams }: PlanningPageProps)
<EnergyMeterCard meter={planningMeter} />
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
Bewuste grens

58
app/settings/actions.ts
View file

@ -1,5 +1,6 @@
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { buildPathWithQuery } from "@/lib/auth/navigation";
import {
@ -11,12 +12,19 @@ import {
getOptionalTimeValue,
} from "@/lib/forms/parse";
import { ONBOARDING_TIMEZONE_OPTIONS } from "@/lib/onboarding/options";
import { ProfileAvatarProcessingError } from "@/lib/profile/avatar-processing";
import {
isAllowedProfileAvatarMimeType,
PROFILE_AVATAR_MAX_BYTES,
PROFILE_AVATAR_UPLOAD_MAX_BYTES,
} from "@/lib/profile/avatar";
import { saveSettingsForCurrentUser } from "@/lib/profile/service";
import type { SettingsSubmission } from "@/lib/profile/types";
import {
saveProfileAvatarForCurrentUser,
saveSettingsForCurrentUser,
} from "@/lib/profile/service";
import type {
AvatarUploadActionState,
SettingsSubmission,
} from "@/lib/profile/types";
const LOCALE_VALUES = ["nl-NL"] as const;
const ONBOARDING_TIMEZONE_VALUES = ONBOARDING_TIMEZONE_OPTIONS.map((option) => option.value);
@ -47,7 +55,7 @@ function getOptionalAvatarFile(formData: FormData) {
}
if (
value.size > PROFILE_AVATAR_MAX_BYTES ||
value.size > PROFILE_AVATAR_UPLOAD_MAX_BYTES ||
!isAllowedProfileAvatarMimeType(value.type)
) {
throw new FormDataValidationError("invalid-avatar-file");
@ -110,6 +118,44 @@ function buildSettingsSubmission(formData: FormData): SettingsSubmission {
};
}
export async function uploadAvatarAction(
_previousState: AvatarUploadActionState,
formData: FormData,
): Promise<AvatarUploadActionState> {
try {
const avatarFile = getOptionalAvatarFile(formData);
if (!avatarFile) {
throw new FormDataValidationError("invalid-avatar-file");
}
await saveProfileAvatarForCurrentUser(avatarFile);
revalidatePath("/settings");
revalidatePath("/dashboard");
return {
status: "success",
code: "avatar-saved",
};
} catch (error) {
if (error instanceof FormDataValidationError) {
return {
status: "error",
code: error.code,
};
}
if (error instanceof ProfileAvatarProcessingError) {
return {
status: "error",
code: "invalid-avatar-file",
};
}
throw error;
}
}
export async function saveSettingsAction(
_previousState: null,
formData: FormData,
@ -121,6 +167,10 @@ export async function saveSettingsAction(
redirect(buildPathWithQuery("/settings", { error: error.code }));
}
if (error instanceof ProfileAvatarProcessingError) {
redirect(buildPathWithQuery("/settings", { error: "invalid-avatar-file" }));
}
throw error;
}

4
app/settings/page.tsx
View file

@ -79,7 +79,7 @@ export default async function SettingsPage({ searchParams }: SettingsPageProps)
<SettingsForm profileBundle={profileBundle} />
<aside className="space-y-5">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Account
@ -111,7 +111,7 @@ export default async function SettingsPage({ searchParams }: SettingsPageProps)
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Huidige status

2
components/auth/auth-panel.tsx
View file

@ -47,7 +47,7 @@ export function AuthPanel({
</section>
<section className="flex items-center">
<Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] py-0 backdrop-blur">
<Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] pb-0 backdrop-blur">
<CardContent className="p-6 sm:p-8">
<div className="mb-6 flex items-center justify-between gap-3">
<Link

2
components/check-in/check-in-card.tsx
View file

@ -34,7 +34,7 @@ export function CheckInCard({ todayCheckIn }: CheckInCardProps) {
: "Leg je energiestart en slaapkwaliteit van vandaag vast.";
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ochtendcheck-in

2
components/check-in/check-in-form.tsx
View file

@ -58,7 +58,7 @@ export function CheckInForm({ todayCheckIn }: CheckInFormProps) {
<input type="hidden" name="energyScore" value={energyScore ?? ""} />
<input type="hidden" name="sleepQuality" value={sleepQuality ?? ""} />
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ochtendcheck-in

2
components/navigation/account-menu.tsx
View file

@ -28,7 +28,7 @@ export function AccountMenu({ authState }: AccountMenuProps) {
<DropdownMenu>
<DropdownMenuTrigger aria-label="Account menu">
<CircleUserRoundIcon className="size-4" />
Account
<span className="hidden sm:inline">Account</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
{authState.isConfigured ? (

2
components/navigation/app-shell.tsx
View file

@ -1,5 +1,6 @@
import type { ReactNode } from "react";
import { getAuthState } from "@/lib/auth/session";
import { BottomNav } from "@/components/navigation/bottom-nav";
import { TopNav } from "@/components/navigation/top-nav";
import { cn } from "@/lib/utils";
@ -19,6 +20,7 @@ export async function AppShell({
<div className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-8">
<TopNav authState={authState} />
<div className={cn("flex-1", contentClassName)}>{children}</div>
<BottomNav />
</div>
</main>
);

62
components/navigation/bottom-nav.tsx Normal file
View file

@ -0,0 +1,62 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { bottomNavItems, isActivePath, shouldUseBottomNav } from "@/components/navigation/navigation-config";
import { cn } from "@/lib/utils";
export function BottomNav() {
const pathname = usePathname();
if (!shouldUseBottomNav(pathname)) {
return null;
}
return (
<>
<div className="h-24 sm:hidden" aria-hidden="true" />
<nav
aria-label="Mobiele navigatie"
className="fixed inset-x-0 bottom-0 z-40 px-4 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:hidden"
>
<div className="mx-auto flex max-w-md items-end gap-2 rounded-[var(--radius-3xl)] border border-border/75 bg-card/94 px-3 py-2 shadow-[var(--shadow-3)] backdrop-blur">
{bottomNavItems.map((item) => {
const isActive = pathname ? isActivePath(pathname, item.href) : false;
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
aria-current={isActive ? "page" : undefined}
className={cn(
"state-layer flex min-h-14 flex-1 flex-col items-center justify-center gap-1.5 rounded-[var(--radius-2xl)] px-2 py-2 text-center transition-colors",
isActive
? "bg-primary-container text-primary-container-foreground shadow-[var(--shadow-1)]"
: "text-muted-foreground hover:bg-surface-container-high hover:text-foreground",
)}
>
<span
className={cn(
"flex size-8 items-center justify-center rounded-full transition-colors",
isActive ? "bg-primary text-primary-foreground" : "bg-transparent",
)}
>
<Icon className="size-4" />
</span>
<span
className={cn(
"type-label-medium leading-none",
isActive && "font-semibold text-foreground",
)}
>
{item.label}
</span>
</Link>
);
})}
</div>
</nav>
</>
);
}

73
components/navigation/navigation-config.ts Normal file
View file

@ -0,0 +1,73 @@
"use client";
import {
ActivityIcon,
ClipboardCheckIcon,
InfoIcon,
LayoutDashboardIcon,
Settings2Icon,
} from "lucide-react";
export const primaryNavItems = [
{
href: "/",
label: "About",
icon: InfoIcon,
},
{
href: "/dashboard",
label: "Dashboard",
icon: LayoutDashboardIcon,
},
{
href: "/planning",
label: "Planning",
icon: ActivityIcon,
},
{
href: "/check-in",
label: "Check-in",
icon: ClipboardCheckIcon,
},
] as const;
export const bottomNavItems = [
{
href: "/dashboard",
label: "Dashboard",
icon: LayoutDashboardIcon,
},
{
href: "/check-in",
label: "Check-in",
icon: ClipboardCheckIcon,
},
{
href: "/planning",
label: "Planning",
icon: ActivityIcon,
},
{
href: "/settings",
label: "Instellingen",
icon: Settings2Icon,
},
] as const;
const bottomNavRoutePrefixes = ["/dashboard", "/check-in", "/planning", "/settings"];
export function isActivePath(pathname: string, href: string) {
if (href === "/") {
return pathname === "/";
}
return pathname === href || pathname.startsWith(`${href}/`);
}
export function shouldUseBottomNav(pathname: string | null) {
if (!pathname) {
return false;
}
return bottomNavRoutePrefixes.some((href) => isActivePath(pathname, href));
}

2
components/navigation/theme-menu.tsx
View file

@ -24,7 +24,7 @@ export function ThemeMenu() {
<DropdownMenu>
<DropdownMenuTrigger aria-label="Thema kiezen">
<MonitorCogIcon className="size-4" />
Theme
<span className="hidden sm:inline">Theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Weergave</DropdownMenuLabel>

48
components/navigation/top-nav.tsx
View file

@ -2,54 +2,23 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
ActivityIcon,
ClipboardCheckIcon,
InfoIcon,
LayoutDashboardIcon,
} from "lucide-react";
import type { AuthState } from "@/lib/auth/session";
import { AccountMenu } from "@/components/navigation/account-menu";
import {
isActivePath,
primaryNavItems,
shouldUseBottomNav,
} from "@/components/navigation/navigation-config";
import { ThemeMenu } from "@/components/navigation/theme-menu";
import { cn } from "@/lib/utils";
const primaryNavItems = [
{
href: "/",
label: "About",
icon: InfoIcon,
},
{
href: "/dashboard",
label: "Dashboard",
icon: LayoutDashboardIcon,
},
{
href: "/planning",
label: "Planning",
icon: ActivityIcon,
},
{
href: "/check-in",
label: "Check-in",
icon: ClipboardCheckIcon,
},
] as const;
type TopNavProps = {
authState: AuthState;
};
function isActivePath(pathname: string, href: string) {
if (href === "/") {
return pathname === "/";
}
return pathname === href || pathname.startsWith(`${href}/`);
}
export function TopNav({ authState }: TopNavProps) {
const pathname = usePathname();
const useCompactBottomNav = shouldUseBottomNav(pathname);
return (
<header className="sticky top-4 z-40">
@ -65,7 +34,10 @@ export function TopNav({ authState }: TopNavProps) {
<nav
aria-label="Hoofdnavigatie"
className="flex flex-1 flex-wrap items-center gap-2 md:ml-6"
className={cn(
"flex flex-1 flex-wrap items-center gap-2 md:ml-6",
useCompactBottomNav ? "hidden sm:flex" : "flex",
)}
>
{primaryNavItems.map((item) => {
const isActive = pathname ? isActivePath(pathname, item.href) : false;

4
components/onboarding/onboarding-step-intro.tsx
View file

@ -9,7 +9,7 @@ import {
export function OnboardingStepIntro() {
return (
<div className="space-y-4">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
Wat je hier wél krijgt
@ -23,7 +23,7 @@ export function OnboardingStepIntro() {
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
Wat deze app niet doet

6
components/onboarding/onboarding-step-preferences.tsx
View file

@ -21,7 +21,7 @@ export function OnboardingStepPreferences({
}: OnboardingStepPreferencesProps) {
return (
<div className="space-y-4">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label className="text-sm font-semibold text-foreground">
@ -39,7 +39,7 @@ export function OnboardingStepPreferences({
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-4 py-5">
<div className="flex items-start justify-between gap-4">
<div className="space-y-1">
@ -82,7 +82,7 @@ export function OnboardingStepPreferences({
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label className="text-sm font-semibold text-foreground">

4
components/planning/activity-form.tsx
View file

@ -104,7 +104,7 @@ export function ActivityForm({
<input type="hidden" name="impactLevel" value={impactLevel} />
<input type="hidden" name="priorityLevel" value={priorityLevel} />
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagplanning
@ -215,7 +215,7 @@ export function ActivityForm({
<Separator />
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-2 py-5">
<p className="text-sm font-semibold text-foreground">Vooruitblik op de meter</p>
<p className="text-sm leading-7 text-muted-foreground" aria-live="polite">

4
components/planning/ad-hoc-activity-form.tsx
View file

@ -102,7 +102,7 @@ export function AdHocActivityForm({
<input type="hidden" name="categoryId" value={categoryId} />
<input type="hidden" name="impactLevel" value={impactLevel} />
<Card tone="subtle" className="py-0">
<Card tone="subtle" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ongepland
@ -252,7 +252,7 @@ export function AdHocActivityForm({
</div>
</div>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-2 py-5">
<p className="text-sm font-semibold text-foreground">Effect op je dagtotaal</p>
<p className="text-sm leading-7 text-muted-foreground" aria-live="polite">

12
components/planning/day-overview-card.tsx
View file

@ -50,7 +50,7 @@ function getStatusAccentClassName(key: "planned" | "completed" | "adjusted" | "s
export function DayOverviewCard({ overview }: DayOverviewCardProps) {
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagoverzicht
@ -62,7 +62,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardHeader>
<CardContent className="space-y-5 pb-6">
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Vooraf gepland
@ -76,7 +76,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Werkelijk gedaan
@ -90,7 +90,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Ongepland erbij
@ -104,7 +104,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Nog open
@ -151,7 +151,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
)}
>
{item.label}
<span className="rounded-full bg-black/12 px-1.5 py-0.5 text-[0.7rem] font-semibold text-current">
<span className="rounded-full bg-black/12 px-1.5 pb-0.5 text-[0.7rem] font-semibold text-current">
{item.value}
</span>
</span>

2
components/planning/energy-meter-card.tsx
View file

@ -50,7 +50,7 @@ export function EnergyMeterCard({
meter.dailyBudget === null ? null : Math.min(100, Math.max(0, meter.progressPercent ?? 0));
return (
<Card tone={tone === "default" ? "default" : "subtle"} className="py-0">
<Card tone={tone === "default" ? "default" : "subtle"} className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
EnergyMeter

2
components/planning/today-activities-list.tsx
View file

@ -103,7 +103,7 @@ export function TodayActivitiesList({
skipReasons,
}: TodayActivitiesListProps) {
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Vandaag in beeld

278
components/settings/settings-form.tsx
View file

@ -1,7 +1,14 @@
"use client";
import { useActionState, useState } from "react";
import { saveSettingsAction } from "@/app/settings/actions";
import type { ChangeEvent } from "react";
import { useActionState, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
saveSettingsAction,
uploadAvatarAction,
} from "@/app/settings/actions";
import { showStatusToast } from "@/lib/feedback/toast";
import { getSettingsStatusToast } from "@/lib/feedback/status-messages";
import { PreferenceHiddenFields } from "@/components/preferences/preference-hidden-fields";
import { ProfileAvatar } from "@/components/profile/profile-avatar";
import { Alert, AlertDescription } from "@/components/ui/alert";
@ -26,9 +33,15 @@ import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { ONBOARDING_TIMEZONE_OPTIONS } from "@/lib/onboarding/options";
import { PROFILE_AVATAR_MAX_BYTES } from "@/lib/profile/avatar";
import {
PROFILE_AVATAR_MAX_DIMENSION,
PROFILE_AVATAR_UPLOAD_MAX_BYTES,
} from "@/lib/profile/avatar";
import { usePreferenceDraft } from "@/lib/preferences/use-preferences-draft";
import type { ProfileBundle } from "@/lib/profile/types";
import type {
AvatarUploadActionState,
ProfileBundle,
} from "@/lib/profile/types";
type SettingsFormProps = {
profileBundle: ProfileBundle;
@ -41,29 +54,192 @@ const LOCALE_OPTIONS = [
},
] as const;
const INITIAL_AVATAR_UPLOAD_STATE: AvatarUploadActionState = {
status: "idle",
};
export function SettingsForm({ profileBundle }: SettingsFormProps) {
const [, formAction, isPending] = useActionState(saveSettingsAction, null);
const [avatarState, avatarFormAction, isAvatarPending] = useActionState(
uploadAvatarAction,
INITIAL_AVATAR_UPLOAD_STATE,
);
const [locale, setLocale] = useState(profileBundle.profile.locale);
const [avatarPreviewUrl, setAvatarPreviewUrl] = useState<string | null>(null);
const [hasPendingAvatar, setHasPendingAvatar] = useState(false);
const avatarInputRef = useRef<HTMLInputElement | null>(null);
const router = useRouter();
const { draft, updateDraft } = usePreferenceDraft(profileBundle);
const avatarLimitInMb = PROFILE_AVATAR_MAX_BYTES / (1024 * 1024);
const avatarLimitInMb = PROFILE_AVATAR_UPLOAD_MAX_BYTES / (1024 * 1024);
const profileTitle =
profileBundle.profile.displayName ??
profileBundle.profile.email ??
"Ingelogde gebruiker";
return (
<form
action={formAction}
className="space-y-6"
aria-busy={isPending}
>
<input type="hidden" name="locale" value={locale} />
<PreferenceHiddenFields draft={draft} />
useEffect(() => {
return () => {
if (avatarPreviewUrl) {
URL.revokeObjectURL(avatarPreviewUrl);
}
};
}, [avatarPreviewUrl]);
<Card elevation="raised" className="py-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Account
useEffect(() => {
if (avatarState.status === "idle" || !avatarState.code) {
return;
}
const toast = getSettingsStatusToast(
avatarState.status === "error" ? avatarState.code : null,
avatarState.status === "success" ? avatarState.code : null,
);
if (toast) {
showStatusToast(toast);
}
if (avatarState.status === "success") {
router.refresh();
}
}, [avatarState, router]);
function handleAvatarChange(event: ChangeEvent<HTMLInputElement>) {
const file = event.currentTarget.files?.[0] ?? null;
setAvatarPreviewUrl((currentValue) => {
if (currentValue) {
URL.revokeObjectURL(currentValue);
}
return file ? URL.createObjectURL(file) : null;
});
setHasPendingAvatar(Boolean(file));
if (file) {
event.currentTarget.form?.requestSubmit();
}
}
function clearAvatarSelection() {
if (avatarInputRef.current) {
avatarInputRef.current.value = "";
}
setAvatarPreviewUrl((currentValue) => {
if (currentValue) {
URL.revokeObjectURL(currentValue);
}
return null;
});
setHasPendingAvatar(false);
}
return (
<div className="space-y-6">
<form action={avatarFormAction} className="space-y-6" aria-busy={isAvatarPending}>
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Profielfoto
</p>
<CardTitle className="text-2xl text-foreground">
Werk je foto direct bij
</CardTitle>
<CardDescription className="max-w-2xl text-sm leading-7 text-muted-foreground">
Kies een afbeelding en sla die meteen apart op. Grote foto&apos;s worden
server-side verkleind voordat ze in storage terechtkomen.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 pb-6 lg:grid-cols-[16rem_1fr]">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex h-full flex-col items-center gap-4 px-5 py-5 text-center">
<ProfileAvatar
avatarUrl={avatarPreviewUrl ?? profileBundle.profile.avatarUrl}
displayName={profileBundle.profile.displayName}
email={profileBundle.profile.email}
size="lg"
/>
<div className="space-y-1">
<p className="font-semibold text-foreground">{profileTitle}</p>
<p className="text-sm leading-7 text-muted-foreground">
{profileBundle.profile.tagline ?? "Nog geen 1-regelige introductie toegevoegd."}
</p>
</div>
</CardContent>
</Card>
<div className="space-y-3">
<input
id="avatar"
ref={avatarInputRef}
name="avatar"
type="file"
accept="image/jpeg,image/png,image/webp"
disabled={isPending || isAvatarPending}
className="sr-only"
onChange={handleAvatarChange}
/>
<div className="flex flex-wrap gap-2">
<Button
type="button"
variant="outline"
disabled={isPending || isAvatarPending}
onClick={() => {
if (avatarInputRef.current) {
avatarInputRef.current.value = "";
avatarInputRef.current.click();
}
}}
>
{isAvatarPending ? "Foto uploaden..." : "Kies nieuwe foto"}
</Button>
{avatarPreviewUrl ? (
<Button
type="button"
variant="ghost"
disabled={isPending || isAvatarPending}
onClick={clearAvatarSelection}
>
Wis selectie
</Button>
) : null}
</div>
<p className="text-xs leading-6 text-muted-foreground">
JPG, PNG of WebP tot {avatarLimitInMb} MB als bronbestand. Voor opslag
wordt de foto automatisch teruggebracht naar maximaal{" "}
{PROFILE_AVATAR_MAX_DIMENSION} × {PROFILE_AVATAR_MAX_DIMENSION} px.
</p>
<p className="text-xs leading-6 text-muted-foreground" aria-live="polite">
{isAvatarPending
? "Nieuwe profielfoto wordt verwerkt en opgeslagen..."
: avatarState.status === "success"
? "Nieuwe profielfoto is opgeslagen en wordt nu overal ververst."
: avatarState.status === "error" && avatarPreviewUrl
? "Deze foto kon niet worden opgeslagen. Kies een andere afbeelding of probeer het opnieuw."
: hasPendingAvatar
? "Nieuwe profielfoto staat klaar om direct te uploaden."
: "Je huidige foto blijft actief totdat je een nieuwe versie kiest."}
</p>
</div>
</CardContent>
</Card>
</form>
<form
action={formAction}
className="space-y-6"
aria-busy={isPending}
>
<input type="hidden" name="locale" value={locale} />
<PreferenceHiddenFields draft={draft} />
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Account
</p>
<CardTitle className="font-[family-name:var(--font-display)] text-3xl text-foreground">
Basisinstellingen voor jouw account
@ -83,10 +259,10 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card className="py-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Profiel
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Profiel
</p>
<CardTitle className="text-2xl text-foreground">
Laat in een paar regels zien wie je bent
@ -96,43 +272,8 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
Dit helpt straks ook bij demo-accounts en voorbeeldgebruik.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 pb-6 lg:grid-cols-[16rem_1fr]">
<Card tone="subtle" className="py-0 shadow-none">
<CardContent className="flex h-full flex-col items-center gap-4 px-5 py-5 text-center">
<ProfileAvatar
avatarUrl={profileBundle.profile.avatarUrl}
displayName={profileBundle.profile.displayName}
email={profileBundle.profile.email}
size="lg"
/>
<div className="space-y-1">
<p className="font-semibold text-foreground">{profileTitle}</p>
<p className="text-sm leading-7 text-muted-foreground">
{profileBundle.profile.tagline ?? "Nog geen 1-regelige introductie toegevoegd."}
</p>
</div>
<div className="w-full space-y-2 text-left">
<Label htmlFor="avatar" className="text-foreground">
Profielfoto
</Label>
<Input
id="avatar"
name="avatar"
type="file"
accept="image/jpeg,image/png,image/webp"
disabled={isPending}
className="h-auto rounded-[1.25rem] bg-background/80 px-4 py-3 file:mr-3 file:rounded-full file:bg-secondary file:px-3 file:py-1.5 file:text-secondary-foreground"
/>
<p className="text-xs leading-6 text-muted-foreground">
JPG, PNG of WebP tot {avatarLimitInMb} MB. Een nieuw bestand vervangt je
huidige foto.
</p>
</div>
</CardContent>
</Card>
<div className="grid gap-5">
<CardContent className="pb-6">
<div className="grid gap-5">
<div className="space-y-2">
<Label htmlFor="display-name" className="text-foreground">
Weergavenaam
@ -178,11 +319,11 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
/>
</div>
</div>
</CardContent>
</Card>
</CardContent>
</Card>
<section className="grid gap-5 lg:grid-cols-2">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Taal en tijd
@ -235,14 +376,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Interface
</p>
</CardHeader>
<CardContent className="space-y-4 pb-6">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label htmlFor="show-energy-points" className="text-sm font-semibold text-foreground">
@ -267,14 +408,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</section>
<section className="grid gap-5 lg:grid-cols-2">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Reminders
</p>
</CardHeader>
<CardContent className="space-y-4 pb-6">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-4 py-5">
<div className="flex items-start justify-between gap-4">
<div className="space-y-1">
@ -318,7 +459,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label htmlFor="reflection-reminder-enabled" className="text-sm font-semibold text-foreground">
@ -341,7 +482,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
Bewuste grenzen
@ -368,6 +509,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
{isPending ? "Instellingen opslaan..." : "Instellingen opslaan"}
</Button>
</div>
</form>
</form>
</div>
);
}

8
components/ui/alert.tsx
View file

@ -8,8 +8,8 @@ const alertVariants = cva(
{
variants: {
variant: {
default: "border-border/70 bg-card/92 text-card-foreground",
info: "border-primary/15 bg-secondary text-foreground",
default: "border-outline-variant/70 bg-surface-container-high text-card-foreground",
info: "border-primary/16 bg-primary-container text-primary-container-foreground",
success: "border-success/30 bg-success/14 text-foreground",
warning: "border-warning/32 bg-warning/16 text-foreground",
destructive:
@ -42,7 +42,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="alert-title"
className={cn(
"font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
"type-title-medium font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
className
)}
{...props}
@ -58,7 +58,7 @@ function AlertDescription({
<div
data-slot="alert-description"
className={cn(
"text-sm text-balance leading-7 text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
"type-body-medium text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className
)}
{...props}

6
components/ui/button.tsx
View file

@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
"state-layer group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
{
variants: {
variant: {
default:
"bg-primary !text-white shadow-[var(--shadow-1)] hover:bg-primary/90 hover:shadow-[var(--shadow-2)] [a]:hover:bg-primary/90 [&_svg]:!text-white",
outline:
"border-border bg-background/88 hover:bg-muted hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
"border-outline-variant bg-surface-container-low/92 hover:bg-surface-container hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-surface-container aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-[var(--shadow-1)] hover:bg-secondary/85 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
"bg-secondary-container text-secondary-container-foreground shadow-[var(--shadow-1)] hover:bg-secondary-container/88 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary-container aria-expanded:text-secondary-container-foreground",
success:
"bg-success !text-white shadow-[var(--shadow-1)] hover:brightness-[0.98] hover:shadow-[var(--shadow-2)] [&_svg]:!text-white",
warning:

12
components/ui/card.tsx
View file

@ -4,12 +4,12 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const cardVariants = cva(
"group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-border/75 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
"group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-outline-variant/70 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
{
variants: {
tone: {
default: "bg-card/92",
subtle: "bg-background/78",
default: "bg-surface-container text-card-foreground",
subtle: "bg-surface-container-low text-card-foreground",
primary: "bg-primary text-primary-foreground ring-primary/10",
},
elevation: {
@ -64,7 +64,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-title"
className={cn(
"font-heading text-base leading-snug font-semibold tracking-[-0.02em] group-data-[size=sm]/card:text-sm",
"type-title-large font-heading group-data-[size=sm]/card:text-sm",
className
)}
{...props}
@ -76,7 +76,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-sm text-muted-foreground", className)}
className={cn("type-body-medium text-muted-foreground", className)}
{...props}
/>
)
@ -110,7 +110,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-footer"
className={cn(
"flex items-center rounded-b-[var(--radius-xl)] border-t border-border/65 bg-muted/60 p-4 group-data-[size=sm]/card:p-3",
"flex items-center rounded-b-[var(--radius-xl)] border-t border-outline-variant/60 bg-surface-container-high p-4 group-data-[size=sm]/card:p-3",
className
)}
{...props}

2
components/ui/dropdown-menu.tsx
View file

@ -22,7 +22,7 @@ function DropdownMenuTrigger({
{...props}
>
{children}
<ChevronDownIcon className="size-4 text-muted-foreground" />
<ChevronDownIcon className="hidden size-4 text-muted-foreground sm:inline-block" />
</Menu.Trigger>
);
}

2
components/wizard/test-wizard-flow.tsx
View file

@ -129,7 +129,7 @@ export function TestWizardFlow() {
backAction={backAction}
nextAction={nextAction}
>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
{wizard.currentStep.title}

8
lib/feedback/status-messages.ts
View file

@ -37,6 +37,11 @@ const settingsStatusToasts: Record<string, StatusToast> = {
title: "Instellingen opgeslagen",
message: "Je voorkeuren zijn bijgewerkt.",
},
"avatar-saved": {
variant: "success",
title: "Profielfoto opgeslagen",
message: "Je profiel gebruikt nu direct de nieuwe, verkleinde afbeelding.",
},
};
const settingsErrorToasts: Record<string, StatusToast> = {
@ -48,7 +53,8 @@ const settingsErrorToasts: Record<string, StatusToast> = {
"invalid-avatar-file": {
variant: "error",
title: "Profielfoto niet opgeslagen",
message: "Gebruik een JPG, PNG of WebP-bestand tot 2 MB en probeer het opnieuw.",
message:
"Gebruik een JPG, PNG of WebP-bestand. Grote foto's worden automatisch verkleind voordat ze worden opgeslagen.",
},
};

47
lib/profile/avatar-processing.ts Normal file
View file

@ -0,0 +1,47 @@
import "server-only";
import sharp from "sharp";
import {
PROFILE_AVATAR_MAX_DIMENSION,
PROFILE_AVATAR_STORED_MAX_BYTES,
} from "@/lib/profile/avatar";
const OUTPUT_QUALITY_STEPS = [82, 72, 64] as const;
const OUTPUT_CONTENT_TYPE = "image/webp";
export type ProcessedProfileAvatar = {
buffer: Buffer;
contentType: string;
};
export class ProfileAvatarProcessingError extends Error {}
export async function processProfileAvatar(
file: File,
): Promise<ProcessedProfileAvatar> {
const inputBuffer = Buffer.from(await file.arrayBuffer());
for (const quality of OUTPUT_QUALITY_STEPS) {
const outputBuffer = await sharp(inputBuffer)
.rotate()
.resize({
width: PROFILE_AVATAR_MAX_DIMENSION,
height: PROFILE_AVATAR_MAX_DIMENSION,
fit: "inside",
withoutEnlargement: true,
})
.webp({ quality })
.toBuffer();
if (outputBuffer.byteLength <= PROFILE_AVATAR_STORED_MAX_BYTES) {
return {
buffer: outputBuffer,
contentType: OUTPUT_CONTENT_TYPE,
};
}
}
throw new ProfileAvatarProcessingError(
"De profielfoto blijft te groot na verkleinen.",
);
}

4
lib/profile/avatar.ts
View file

@ -5,7 +5,9 @@ const PROFILE_AVATAR_ALLOWED_MIME_TYPES = [
] as const;
export const PROFILE_AVATAR_BUCKET = "profile-avatars";
export const PROFILE_AVATAR_MAX_BYTES = 2 * 1024 * 1024;
export const PROFILE_AVATAR_UPLOAD_MAX_BYTES = 12 * 1024 * 1024;
export const PROFILE_AVATAR_STORED_MAX_BYTES = 2 * 1024 * 1024;
export const PROFILE_AVATAR_MAX_DIMENSION = 700;
export function getProfileAvatarPath(userId: string) {
return `${userId}/avatar`;

73
lib/profile/service.ts
View file

@ -1,9 +1,11 @@
import { getAuthenticatedUser } from "@/lib/auth/session";
import { isSupportedOnboardingTimezone } from "@/lib/onboarding/options";
import { processProfileAvatar } from "@/lib/profile/avatar-processing";
import {
getProfileAvatarPath,
PROFILE_AVATAR_BUCKET,
} from "@/lib/profile/avatar";
import { createAdminClient } from "@/lib/supabase/admin";
import { createClient } from "@/lib/supabase/server";
import type {
OnboardingSubmission,
@ -71,7 +73,6 @@ const DEFAULT_TIMEZONE = "Europe/Amsterdam";
const SUPPORTED_LOCALES = new Set([DEFAULT_LOCALE]);
async function buildProfileRecord(
supabase: SupabaseServerClient,
row: ProfileRow,
): Promise<ProfileRecord> {
return {
@ -81,7 +82,7 @@ async function buildProfileRecord(
tagline: row.tagline,
bio: row.bio,
avatarPath: row.avatar_path,
avatarUrl: await getProfileAvatarUrl(supabase, row.avatar_path),
avatarUrl: await getProfileAvatarUrl(row.avatar_path),
locale: row.locale,
timezone: row.timezone,
onboardingSeen: row.onboarding_seen,
@ -164,14 +165,14 @@ function resolveTimezone(value: string) {
}
async function getProfileAvatarUrl(
supabase: SupabaseServerClient,
avatarPath: string | null,
) {
if (!avatarPath) {
return null;
}
const { data, error } = await supabase.storage
const adminSupabase = createAdminClient();
const { data, error } = await adminSupabase.storage
.from(PROFILE_AVATAR_BUCKET)
.createSignedUrl(avatarPath, 60 * 60);
@ -182,19 +183,39 @@ async function getProfileAvatarUrl(
return data.signedUrl;
}
async function getRequiredAuthenticatedUser(supabase: SupabaseServerClient) {
const {
data: { user },
error,
} = await supabase.auth.getUser();
if (error) {
throw new Error(`Gebruiker kon niet worden geladen: ${error.message}`);
}
if (!user) {
throw new Error("Er is geen ingelogde gebruiker beschikbaar.");
}
return {
id: user.id,
email: user.email ?? null,
};
}
async function uploadProfileAvatar(
supabase: SupabaseServerClient,
userId: string,
file: File,
) {
const avatarPath = getProfileAvatarPath(userId);
const fileBytes = await file.arrayBuffer();
const processedAvatar = await processProfileAvatar(file);
const adminSupabase = createAdminClient();
const { error } = await supabase.storage
const { error } = await adminSupabase.storage
.from(PROFILE_AVATAR_BUCKET)
.upload(avatarPath, fileBytes, {
.upload(avatarPath, processedAvatar.buffer, {
cacheControl: "3600",
contentType: file.type,
contentType: processedAvatar.contentType,
upsert: true,
});
@ -366,15 +387,9 @@ export async function completeOnboardingForCurrentUser(
export async function saveSettingsForCurrentUser(
submission: SettingsSubmission,
) {
const user = await getAuthenticatedUser();
if (!user) {
throw new Error("Er is geen ingelogde gebruiker beschikbaar.");
}
await ensureProfileBundleForCurrentUser();
const supabase = await createClient();
const user = await getRequiredAuthenticatedUser(supabase);
await ensureProfileBundleForCurrentUser();
const locale = normalizeLocale(submission.locale);
const timezone = resolveTimezone(submission.timezone);
const displayName = normalizeDisplayName(submission.displayName);
@ -385,7 +400,7 @@ export async function saveSettingsForCurrentUser(
submission.morningReminderEnabled,
);
const avatarPath = submission.avatarFile
? await uploadProfileAvatar(supabase, user.id, submission.avatarFile)
? await uploadProfileAvatar(user.id, submission.avatarFile)
: null;
const { error: profileError } = await supabase
@ -421,6 +436,26 @@ export async function saveSettingsForCurrentUser(
return ensureProfileBundleForCurrentUser();
}
export async function saveProfileAvatarForCurrentUser(file: File) {
const supabase = await createClient();
const user = await getRequiredAuthenticatedUser(supabase);
await ensureProfileBundleForCurrentUser();
const avatarPath = await uploadProfileAvatar(user.id, file);
const { error } = await supabase
.from("profiles")
.update({
avatar_path: avatarPath,
})
.eq("id", user.id);
if (error) {
throw new Error(`Profielfoto kon niet worden opgeslagen: ${error.message}`);
}
return ensureProfileBundleForCurrentUser();
}
export async function ensureProfileBundleForCurrentUser(): Promise<ProfileBundle | null> {
const user = await getAuthenticatedUser();
@ -457,7 +492,7 @@ export async function ensureProfileBundleForCurrentUser(): Promise<ProfileBundle
}
return {
profile: await buildProfileRecord(supabase, profileRow),
profile: await buildProfileRecord(profileRow),
settings: mapUserSettingsRow(userSettingsRow),
};
}

5
lib/profile/types.ts
View file

@ -50,3 +50,8 @@ export type SettingsSubmission = {
reflectionReminderEnabled: boolean;
showEnergyPoints: boolean;
};
export type AvatarUploadActionState = {
status: "idle" | "success" | "error";
code?: string;
};

15
lib/supabase/admin.ts Normal file
View file

@ -0,0 +1,15 @@
import "server-only";
import { createClient } from "@supabase/supabase-js";
import { getSupabaseAdminEnv } from "@/lib/supabase/config";
export function createAdminClient() {
const { url, secretKey } = getSupabaseAdminEnv();
return createClient(url, secretKey, {
auth: {
persistSession: false,
autoRefreshToken: false,
},
});
}

19
lib/supabase/config.ts
View file

@ -20,3 +20,22 @@ export function getSupabaseEnv() {
publishableKey,
};
}
export function getSupabaseAdminEnv() {
const { url } = getSupabaseEnv();
const secretKey =
process.env.SUPABASE_SECRET_KEY ??
process.env.SUPABASE_SERVICE_ROLE_KEY ??
process.env.NEXT_PUBLIC_SUPABASE_SERVICE_KEY;
if (!secretKey) {
throw new Error(
"Supabase admin-configuratie ontbreekt. Voeg SUPABASE_SECRET_KEY toe voor server-only taken zoals avatar-uploads.",
);
}
return {
url,
secretKey,
};
}

5
next.config.ts
View file

@ -2,6 +2,11 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactStrictMode: true,
experimental: {
serverActions: {
bodySizeLimit: "12mb",
},
},
};
export default nextConfig;

7
package-lock.json generated
View file

@ -19,6 +19,7 @@
"react": "19.2.0",
"react-dom": "19.2.0",
"shadcn": "^4.3.0",
"sharp": "^0.34.5",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tw-animate-css": "^1.4.0"
@ -36,7 +37,7 @@
"vitest": "^4.1.4"
},
"engines": {
"node": ">=20.9.0"
"node": ">=20.19.0"
}
},
"node_modules/@alloc/quick-lru": {
@ -1022,7 +1023,6 @@
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
"integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=18"
}
@ -4766,7 +4766,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
"devOptional": true,
"license": "Apache-2.0",
"engines": {
"node": ">=8"
@ -9251,7 +9250,6 @@
"integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
"hasInstallScript": true,
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"@img/colour": "^1.0.0",
"detect-libc": "^2.1.2",
@ -9295,7 +9293,6 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
"license": "ISC",
"optional": true,
"bin": {
"semver": "bin/semver.js"
},

1
package.json
View file

@ -22,6 +22,7 @@
"react": "19.2.0",
"react-dom": "19.2.0",
"shadcn": "^4.3.0",
"sharp": "^0.34.5",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tw-animate-css": "^1.4.0"