# 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:

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

Eksempel:
```json
{
  "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 samlings-node
- JSONB er fleksibelt — nye innstillinger legges til uten migrering
- Ingen relasjoner, ingen spørringer mot enkeltfelt — bare hent hele objektet

**Samlings-node-spesifikke overrides** kan legges som edges med metadata mellom bruker og samlings-node ved behov.
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`:

```css
: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:

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

### 4.3 Svelte Store

```typescript
// $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