feat(worker): add logout + replace admin-only settings with Account screen

The Instellingen tab was activity management, which Phase 2 made admin-only —
workers saw add/edit/delete controls that all 403. Replace it with an Account
tab showing the signed-in name/email (via /api/me) and an Uitloggen button
(wires the existing AuthContext signOut). Activity management belongs to the
Phase 3 admin app, so the worker client drops the Settings screen and its
now-unused activity-mutation hooks (useActivities read stays).

Products affected: SoleLog worker client (apps/worker).

apps/worker/src/App.test.tsx

@@ -18,7 +18,7 @@ function renderApp() {
   return render(
     <QueryClientProvider client={queryClient}>
       <App />
-    </QueryClientProvider>,
+    </QueryClientProvider>
   );
 }
 
@@ -40,6 +40,6 @@ describe('App', () => {
     const tabbar = within(screen.getByRole('navigation'));
     expect(tabbar.getByText('Stopwatch')).toBeInTheDocument();
     expect(tabbar.getByText('Geschiedenis')).toBeInTheDocument();
-    expect(tabbar.getByText('Instellingen')).toBeInTheDocument();
+    expect(tabbar.getByText('Account')).toBeInTheDocument();
   });
 });

apps/worker/src/App.tsx

@@ -4,7 +4,7 @@ import Login from './screens/Login';
 import TabBar from './components/TabBar';
 import Stopwatch from './screens/Stopwatch';
 import History from './screens/History';
-import Settings from './screens/Settings';
+import Account from './screens/Account';
 
 function AuthedShell() {
   return (
@@ -13,7 +13,7 @@ function AuthedShell() {
         <Routes>
           <Route path="/" element={<Stopwatch />} />
           <Route path="/history" element={<History />} />
-          <Route path="/settings" element={<Settings />} />
+          <Route path="/account" element={<Account />} />
         </Routes>
       </main>
       <TabBar />

apps/worker/src/api/activities.ts

@@ -1,51 +1,12 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
-import type { Activity, CreateActivityInput, UpdateActivityInput } from '@solelog/shared';
+import type { Activity } from '@solelog/shared';
 import { apiFetch } from '../lib/api';
 
+// Activities are read-only in the worker client; managing them is admin-only
+// and lives in the Phase 3 admin app.
 export function useActivities() {
   return useQuery({
     queryKey: ['activities'],
     queryFn: () => apiFetch<Activity[]>('/api/activities'),
   });
 }
-
-export function useCreateActivity() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: (input: CreateActivityInput) =>
-      apiFetch<Activity>('/api/activities', {
-        method: 'POST',
-        body: JSON.stringify(input),
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['activities'] });
-    },
-  });
-}
-
-export function useUpdateActivity() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: ({ id, input }: { id: number; input: UpdateActivityInput }) =>
-      apiFetch<Activity>(`/api/activities/${id}`, {
-        method: 'PUT',
-        body: JSON.stringify(input),
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['activities'] });
-    },
-  });
-}
-
-export function useDeleteActivity() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: (id: number) =>
-      apiFetch<{ success: true }>(`/api/activities/${id}`, { method: 'DELETE' }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['activities'] });
-      // Deleting an activity cascades to its work sessions on the server.
-      queryClient.invalidateQueries({ queryKey: ['sessions'] });
-    },
-  });
-}

apps/worker/src/api/me.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import type { MeResponse } from '@solelog/shared';
+import { apiFetch } from '../lib/api';
+
+// The signed-in user (id, email, name). Used by the Account screen.
+export function useMe() {
+  return useQuery({
+    queryKey: ['me'],
+    queryFn: () => apiFetch<MeResponse>('/api/me'),
+  });
+}

apps/worker/src/components/TabBar.tsx

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 const tabs = [
   { to: '/', label: 'Stopwatch' },
   { to: '/history', label: 'Geschiedenis' },
-  { to: '/settings', label: 'Instellingen' },
+  { to: '/account', label: 'Account' },
 ] as const;
 
 export default function TabBar() {

apps/worker/src/screens/Account.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Account from './Account';
+import { AuthProvider } from '../auth/AuthContext';
+import { apiFetch } from '../lib/api';
+import { clearToken, getToken, setToken } from '../lib/auth-storage';
+
+// Mock the network layer so no real requests are made.
+vi.mock('../lib/api', () => ({
+  apiFetch: vi.fn(),
+}));
+
+const mockedApiFetch = vi.mocked(apiFetch);
+
+function renderAccount() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <Account />
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('Account', () => {
+  beforeEach(() => {
+    mockedApiFetch.mockReset();
+    mockedApiFetch.mockResolvedValue({
+      user: { id: 'u1', email: 'worker@solelog.local', name: 'Test Werker' },
+    });
+  });
+
+  afterEach(() => {
+    clearToken();
+    vi.clearAllMocks();
+  });
+
+  it('shows the signed-in user name and email', async () => {
+    renderAccount();
+    expect(await screen.findByText('Test Werker')).toBeInTheDocument();
+    expect(screen.getByText('worker@solelog.local')).toBeInTheDocument();
+  });
+
+  it('logs out: clicking Uitloggen clears the token', async () => {
+    setToken('tok');
+    const user = userEvent.setup();
+    renderAccount();
+    await user.click(screen.getByRole('button', { name: 'Uitloggen' }));
+    expect(getToken()).toBeNull();
+  });
+});

apps/worker/src/screens/Account.tsx

@@ -0,0 +1,32 @@
+import { useAuth } from '../auth/AuthContext';
+import { useMe } from '../api/me';
+
+export default function Account() {
+  const { signOut } = useAuth();
+  const meQuery = useMe();
+  const user = meQuery.data?.user;
+
+  return (
+    <div className="screen">
+      <h1 className="screen-title">Account</h1>
+      <p className="screen-subtitle">Ingelogd als</p>
+
+      <section className="card account-card">
+        {meQuery.isLoading ? (
+          <p className="muted">Laden...</p>
+        ) : user ? (
+          <>
+            <span className="account-name">{user.name}</span>
+            <span className="account-email">{user.email}</span>
+          </>
+        ) : (
+          <p className="muted">Kon accountgegevens niet laden.</p>
+        )}
+      </section>
+
+      <button type="button" className="btn-logout" onClick={signOut}>
+        Uitloggen
+      </button>
+    </div>
+  );
+}

apps/worker/src/screens/Settings.test.tsx

@@ -1,88 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { Activity } from '@solelog/shared';
-import Settings from './Settings';
-import { apiFetch } from '../lib/api';
-
-// Mock the network layer so no real requests are made.
-vi.mock('../lib/api', () => ({
-  apiFetch: vi.fn(),
-}));
-
-const mockedApiFetch = vi.mocked(apiFetch);
-
-function renderSettings() {
-  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  return render(
-    <QueryClientProvider client={queryClient}>
-      <Settings />
-    </QueryClientProvider>,
-  );
-}
-
-describe('Settings', () => {
-  beforeEach(() => {
-    mockedApiFetch.mockReset();
-    mockedApiFetch.mockResolvedValue([]);
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the heading and add form in Dutch', () => {
-    renderSettings();
-    expect(screen.getByText('Instellingen')).toBeInTheDocument();
-    expect(screen.getByText('Beheer handelingen per zooltype')).toBeInTheDocument();
-    expect(screen.getByText('Nieuwe handeling toevoegen')).toBeInTheDocument();
-    expect(
-      screen.getByPlaceholderText('Naam van de stap, bijv. Leerrand'),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Stap toevoegen' })).toBeInTheDocument();
-  });
-
-  it('lists activities returned by the API', async () => {
-    const activities: Activity[] = [
-      {
-        id: 1,
-        name: 'Frezen',
-        insole_types: ['Kurk', 'Berk'],
-        created_at: '2026-01-01T00:00:00.000Z',
-      },
-    ];
-    mockedApiFetch.mockResolvedValue(activities);
-
-    renderSettings();
-
-    expect(await screen.findByText('Frezen')).toBeInTheDocument();
-    expect(screen.getByText('Huidige stappen (1)')).toBeInTheDocument();
-    // The type badges for the activity render.
-    const card = screen.getByText('Frezen').closest('.activity-card') as HTMLElement;
-    expect(card).not.toBeNull();
-    expect(card.textContent).toContain('Kurk');
-    expect(card.textContent).toContain('Berk');
-  });
-
-  it('disables the add button until a name is entered', async () => {
-    const user = userEvent.setup();
-    renderSettings();
-
-    const addButton = screen.getByRole('button', { name: 'Stap toevoegen' });
-    expect(addButton).toBeDisabled();
-
-    const input = screen.getByPlaceholderText('Naam van de stap, bijv. Leerrand');
-    await user.type(input, 'Leerrand');
-
-    await waitFor(() => expect(addButton).toBeEnabled());
-  });
-
-  it('shows the empty state when there are no activities', async () => {
-    mockedApiFetch.mockResolvedValue([]);
-    renderSettings();
-    expect(
-      await screen.findByText('Nog geen stappen. Voeg er een toe hierboven.'),
-    ).toBeInTheDocument();
-  });
-});

apps/worker/src/screens/Settings.tsx

@@ -1,240 +0,0 @@
-import { useState } from 'react';
-import type { InsoleType } from '@solelog/shared';
-import {
-  useActivities,
-  useCreateActivity,
-  useDeleteActivity,
-  useUpdateActivity,
-} from '../api/activities';
-
-const ALL_TYPES: InsoleType[] = ['Kurk', 'Berk', '3D'];
-
-const TYPE_COLORS: Record<InsoleType, { bg: string; border: string; text: string }> = {
-  Kurk: { bg: '#FEF9C3', border: '#FDE047', text: '#854D0E' },
-  Berk: { bg: '#DCFCE7', border: '#86EFAC', text: '#166534' },
-  '3D': { bg: '#EDE9FE', border: '#C4B5FD', text: '#5B21B6' },
-};
-
-function typePillStyle(type: InsoleType, selected: boolean): React.CSSProperties {
-  const c = TYPE_COLORS[type];
-  return {
-    borderRadius: 999,
-    padding: '6px 14px',
-    fontSize: 14,
-    fontWeight: 600,
-    cursor: 'pointer',
-    border: `1px solid ${selected ? c.border : '#E5E7EB'}`,
-    background: selected ? c.bg : '#ffffff',
-    color: selected ? c.text : '#9CA3AF',
-  };
-}
-
-function typeBadgeStyle(type: InsoleType): React.CSSProperties {
-  const c = TYPE_COLORS[type];
-  return {
-    borderRadius: 999,
-    padding: '2px 10px',
-    fontSize: 12,
-    fontWeight: 600,
-    border: `1px solid ${c.border}`,
-    background: c.bg,
-    color: c.text,
-  };
-}
-
-function TypeToggles({
-  selected,
-  onToggle,
-}: {
-  selected: InsoleType[];
-  onToggle: (type: InsoleType) => void;
-}) {
-  return (
-    <div className="type-toggles" style={{ display: 'flex', gap: 8 }}>
-      {ALL_TYPES.map((type) => (
-        <button
-          key={type}
-          type="button"
-          aria-pressed={selected.includes(type)}
-          style={typePillStyle(type, selected.includes(type))}
-          onClick={() => onToggle(type)}
-        >
-          {type}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export default function Settings() {
-  const activitiesQuery = useActivities();
-  const createActivity = useCreateActivity();
-  const updateActivity = useUpdateActivity();
-  const deleteActivity = useDeleteActivity();
-
-  // Add form state.
-  const [newName, setNewName] = useState('');
-  const [newTypes, setNewTypes] = useState<InsoleType[]>([...ALL_TYPES]);
-
-  // Edit state.
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [editName, setEditName] = useState('');
-  const [editTypes, setEditTypes] = useState<InsoleType[]>([]);
-
-  const activities = activitiesQuery.data ?? [];
-
-  function toggle(list: InsoleType[], type: InsoleType): InsoleType[] {
-    return list.includes(type) ? list.filter((t) => t !== type) : [...list, type];
-  }
-
-  const addEnabled = newName.trim().length > 0 && newTypes.length > 0;
-
-  function handleAdd() {
-    if (!addEnabled) return;
-    createActivity.mutate(
-      { name: newName.trim(), insole_types: newTypes },
-      {
-        onSuccess: () => {
-          setNewName('');
-          setNewTypes([...ALL_TYPES]);
-        },
-      },
-    );
-  }
-
-  function startEdit(id: number, name: string, types: InsoleType[]) {
-    setEditingId(id);
-    setEditName(name);
-    setEditTypes(types.length > 0 ? [...types] : [...ALL_TYPES]);
-  }
-
-  function cancelEdit() {
-    setEditingId(null);
-  }
-
-  function handleSave(id: number) {
-    if (editName.trim().length === 0 || editTypes.length === 0) return;
-    updateActivity.mutate(
-      { id, input: { name: editName.trim(), insole_types: editTypes } },
-      { onSuccess: () => setEditingId(null) },
-    );
-  }
-
-  function handleDelete(id: number, name: string) {
-    const ok = window.confirm(
-      `"${name}" verwijderen? Alle tijdsregistraties voor deze taak worden ook verwijderd.`,
-    );
-    if (ok) deleteActivity.mutate(id);
-  }
-
-  return (
-    <div className="screen">
-      <h1 className="screen-title">Instellingen</h1>
-      <p className="screen-subtitle">Beheer handelingen per zooltype</p>
-
-      {/* Add new handling card */}
-      <section className="card">
-        <h2 className="section-label">Nieuwe handeling toevoegen</h2>
-        <input
-          className="field-input"
-          placeholder="Naam van de stap, bijv. Leerrand"
-          value={newName}
-          onChange={(e) => setNewName(e.target.value)}
-        />
-        <p className="sub-label">Van toepassing op</p>
-        <TypeToggles
-          selected={newTypes}
-          onToggle={(type) => setNewTypes((prev) => toggle(prev, type))}
-        />
-        <button
-          type="button"
-          className="btn-primary"
-          disabled={!addEnabled || createActivity.isPending}
-          onClick={handleAdd}
-        >
-          Stap toevoegen
-        </button>
-      </section>
-
-      {/* Handling list */}
-      <h2 className="section-label">Huidige stappen ({activities.length})</h2>
-      {activitiesQuery.isLoading ? (
-        <p className="muted">Laden...</p>
-      ) : activities.length === 0 ? (
-        <p className="muted">Nog geen stappen. Voeg er een toe hierboven.</p>
-      ) : (
-        <ul className="activity-list">
-          {activities.map((activity) => (
-            <li key={activity.id} className="activity-card">
-              {editingId === activity.id ? (
-                <>
-                  <input
-                    className="field-input"
-                    autoFocus
-                    value={editName}
-                    onChange={(e) => setEditName(e.target.value)}
-                  />
-                  <p className="sub-label">Van toepassing op</p>
-                  <TypeToggles
-                    selected={editTypes}
-                    onToggle={(type) => setEditTypes((prev) => toggle(prev, type))}
-                  />
-                  <div className="row-actions">
-                    <button
-                      type="button"
-                      className="btn-save"
-                      disabled={
-                        updateActivity.isPending ||
-                        editTypes.length === 0 ||
-                        editName.trim().length === 0
-                      }
-                      onClick={() => handleSave(activity.id)}
-                    >
-                      Opslaan
-                    </button>
-                    <button type="button" className="btn-cancel" onClick={cancelEdit}>
-                      Annuleren
-                    </button>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className="activity-row">
-                    <span className="activity-name">{activity.name}</span>
-                    <div className="row-actions">
-                      <button
-                        type="button"
-                        className="icon-btn icon-edit"
-                        aria-label={`Bewerk ${activity.name}`}
-                        onClick={() =>
-                          startEdit(activity.id, activity.name, activity.insole_types)
-                        }
-                      >
-                        ✎
-                      </button>
-                      <button
-                        type="button"
-                        className="icon-btn icon-delete"
-                        aria-label={`Verwijder ${activity.name}`}
-                        onClick={() => handleDelete(activity.id, activity.name)}
-                      >
-                        🗑
-                      </button>
-                    </div>
-                  </div>
-                  <div className="badge-row" style={{ display: 'flex', gap: 6, marginTop: 8 }}>
-                    {activity.insole_types.map((type) => (
-                      <span key={type} style={typeBadgeStyle(type)}>
-                        {type}
-                      </span>
-                    ))}
-                  </div>
-                </>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

apps/worker/src/styles.css

@@ -274,6 +274,33 @@ body {
   cursor: pointer;
 }
 
+/* ---- Account ---- */
+.account-card {
+  gap: 4px;
+}
+
+.account-name {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.account-email {
+  color: var(--text-muted);
+  font-size: 15px;
+}
+
+.btn-logout {
+  width: 100%;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--danger);
+  background: #ffffff;
+  border: 1px solid var(--danger);
+  border-radius: 16px;
+  cursor: pointer;
+}
+
 /* ---- History (Geschiedenis) ---- */
 .history-header {
   display: flex;