Add server-side avatar processing and responsive bottom nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-19 22:06:41 +02:00 · 2026-04-19 22:06:41 +02:00 · 0bf6b96687
commit 0bf6b96687
parent 3170cfda18
20 changed files with 608 additions and 147 deletions
--- a/components/navigation/account-menu.tsx
+++ b/components/navigation/account-menu.tsx
@ -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 ? (
--- a/components/navigation/app-shell.tsx
+++ b/components/navigation/app-shell.tsx
@ -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>
  );
--- a/components/navigation/bottom-nav.tsx
+++ b/components/navigation/bottom-nav.tsx
@ -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>
+    </>
+  );
+}
--- a/components/navigation/navigation-config.ts
+++ b/components/navigation/navigation-config.ts
@ -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));
+}
--- a/components/navigation/theme-menu.tsx
+++ b/components/navigation/theme-menu.tsx
@ -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>
--- a/components/navigation/top-nav.tsx
+++ b/components/navigation/top-nav.tsx
@ -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;
--- a/components/settings/settings-form.tsx
+++ b/components/settings/settings-form.tsx
@ -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="pb-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="pb-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="pb-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,8 +319,8 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
              />
            </div>
          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>

      <section className="grid gap-5 lg:grid-cols-2">
        <Card className="pb-0">
@ -368,6 +509,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
          {isPending ? "Instellingen opslaan..." : "Instellingen opslaan"}
        </Button>
      </div>
-    </form>
+      </form>
+    </div>
  );
 }
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@ -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>
  );
 }