synops/docs/features/brukerinnstillinger.md

Feature: Brukerinnstillinger

Filsti: docs/features/brukerinnstillinger.md

1. Konsept

Hver bruker har personlige innstillinger som styrer hvordan appen ser ut og oppfører seg. Innstillingene påvirker kun visning og opplevelse — aldri innholdet. Tilgjengelig via et innstillingspanel i appen.

2. Innstillinger

2.1 Utseende

Innstilling	Default	Alternativer	Beskrivelse
Tema	System	Lys / Mørk / System	Følger OS-preferanse som default
Skriftstørrelse	16px	12–24px (slider)	Gjelder all tekst i appen
Linjehøyde	1.6	1.4–2.0 (slider)	Avstand mellom linjer
Innholdsbredde	70ch	50ch–full (slider eller presets)	Maks bredde på tekstinnhold
Font	System default	Serif / Sans-serif / Monospace	Brødtekst-font i appen
Redusert bevegelse	System	Av / På / System	Respekterer prefers-reduced-motion
Kompakt modus	Av	Av / På	Mindre padding, tettere layout

2.2 Editor

Innstilling	Default	Alternativer	Beskrivelse
Standard visning	Rendered	Raw / Rendered	Foretrukket editor-modus
Stavekontroll	På	Av / På	Nettleserens innebygde stavekontroll
Auto-save intervall	500ms	500ms–5s	Debounce for auto-save
Vis tegnteller	Av	Av / På	Antall tegn/ord i bunn av editor

2.3 Notifikasjoner (fremtidig)

Innstilling	Default	Alternativer	Beskrivelse
Desktop-varsler	Av	Av / På	Push-notifikasjoner i nettleseren
Lyd	Av	Av / På	Lydvarsling ved nye meldinger
Varsle ved mention	På	Av / På	Varsle når noen #-mentioner noe du følger

2.4 Tilgjengelighet

Innstilling	Default	Alternativer	Beskrivelse
Høy kontrast	Av	Av / På	Sterkere fargekontraster
Fokus-synlighet	System	System / Forsterket	Tydeligere fokus-indikatorer

3. Datamodell

Innstillingene lagres i en JSONB-kolonne på users-tabellen:

ALTER TABLE users ADD COLUMN settings JSONB NOT NULL DEFAULT '{}';

Eksempel:

{
  "theme": "dark",
  "font_size": 18,
  "line_height": 1.7,
  "content_width": "80ch",
  "font_family": "serif",
  "reduced_motion": "system",
  "compact_mode": false,
  "editor_default_view": "raw",
  "spellcheck": true,
  "autosave_ms": 500,
  "show_char_count": true
}

Hvorfor users.settings og ikke en egen tabell?

• Innstillingene er per bruker, ikke per workspace
• JSONB er fleksibelt — nye innstillinger legges til uten migrering
• Ingen relasjoner, ingen spørringer mot enkeltfelt — bare hent hele objektet

Workspace-spesifikke overrides kan legges i workspace_members ved behov:

ALTER TABLE workspace_members ADD COLUMN settings JSONB NOT NULL DEFAULT '{}';

Men dette er fase 2. Start med globale brukerinnstillinger.

4. Frontend

4.1 Innstillingspanel

Tilgjengelig via brukermenyen (avatar → "Innstillinger") eller hurtigtast.

┌─────────────────────────────────────┐
│ Innstillinger                    ✕  │
├─────────────────────────────────────┤
│                                     │
│ Utseende                            │
│ ┌─────────────────────────────────┐ │
│ │ Tema        [Lys] [Mørk] [Auto]│ │
│ │ Skrift      ──●────────── 18px │ │
│ │ Linjehøyde  ────●──────── 1.7  │ │
│ │ Bredde      ──────●────── 70ch │ │
│ │ Font        [Sans] [Serif] [Mono]│
│ └─────────────────────────────────┘ │
│                                     │
│ Editor                              │
│ ┌─────────────────────────────────┐ │
│ │ Standard    [Raw] [Rendered]    │ │
│ │ Stavekontroll        [●]       │ │
│ │ Tegnteller           [ ]       │ │
│ └─────────────────────────────────┘ │
│                                     │
│ Live forhåndsvisning:               │
│ ┌─────────────────────────────────┐ │
│ │ Dette er en prøvetekst som      │ │
│ │ viser hvordan innstillingene    │ │
│ │ påvirker visningen.             │ │
│ └─────────────────────────────────┘ │
│                                     │
│              [Tilbakestill default]  │
└─────────────────────────────────────┘

Endringer appliseres øyeblikkelig (live preview). Ingen "lagre"-knapp — auto-save med debounce.

4.2 CSS Custom Properties

Innstillingene appliseres via CSS custom properties på :root:

:root {
  --user-font-size: 16px;
  --user-line-height: 1.6;
  --user-content-width: 70ch;
  --user-font-family: system-ui, sans-serif;
}

Alle komponenter bruker disse variablene i stedet for hardkodede verdier:

.message-body {
  font-size: var(--user-font-size);
  line-height: var(--user-line-height);
  max-width: var(--user-content-width);
}

4.3 Svelte Store

// $lib/stores/userSettings.ts
export const userSettings = writable<UserSettings>(defaults);

// Ved innlogging: hent fra API
// Ved endring: debounce → PATCH /api/user/settings
// CSS variables oppdateres reaktivt

5. API

Metode	Sti	Beskrivelse
GET	/api/user/settings	Hent brukerens innstillinger
PATCH	/api/user/settings	Oppdater innstillinger (merge med eksisterende)

PATCH gjør en shallow merge: settings = settings || patch. Kun oppgitte felt endres.

6. Viktige prinsipper

• Innstillinger påvirker aldri innhold. En bruker med 24px skrift og en bruker med 12px skrift ser identisk innhold. Publiserte artikler for eksterne lesere bruker typografi-stacken fra artikkel-publisering, ikke forfatterens personlige innstillinger.
• Defaults er gode. En bruker som aldri åpner innstillingspanelet skal ha en god opplevelse. Innstillinger er for tilpasning, ikke for at ting skal fungere.
• Ingen overraskelser. Endringer gjelder kun brukeren som gjør dem. Workspace-admin kan ikke overstyre personlige innstillinger.
• Progressiv avsløring. Start med de viktigste innstillingene (tema, skriftstørrelse). Legg til flere etter hvert som behov oppstår.

7. Instruks for Claude Code

• Innstillinger lagres i users.settings JSONB — hent hele objektet, merge ved oppdatering
• Bruk CSS custom properties for all visuell tilpasning — aldri hardkodede verdier i komponenter
• Innstillingspanelet er en modal/drawer, ikke en egen side
• Auto-save med debounce (500ms) — ingen "lagre"-knapp
• Ved nye innstillinger: legg til i defaults-objektet, ingen migrering nødvendig