# CLAUDE.md — Pamietnik Webapp

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Stack

- **Sprache:** TypeScript (strict)
- **Build:** Vite
- **UI:** Vanilla Web Components (kein Framework)
- **Karte:** MapLibre GL JS + OpenStreetMap Tiles (konfigurierbare Tile-URL)
- **Kein CSS-Framework** — minimales handgeschriebenes CSS

## Befehle

```bash
npm install          # Dependencies installieren
npm run dev          # Dev-Server auf :5173 (proxied /v1, /login, /logout → :8080)
npm run build        # TypeScript-Check + Vite-Build nach dist/
npm run typecheck    # Nur TypeScript-Prüfung ohne Build
npm run preview      # Build-Ergebnis lokal vorschauen
```

Das Backend muss lokal auf `:8080` laufen (siehe `../backend/`).

## Architektur

```
src/
  main.ts           App-Bootstrap, Routen registrieren
  router.ts         History-API-Router (keine externe Library)
  api.ts            Alle fetch()-Wrapper + TypeScript-Typen für API-Responses
  auth.ts           Login/Logout (POST /login, POST /logout)
  style.css         Globaler Reset + Basis-Layout
  components/
    app-shell.ts    Hauptkomponente: Navigation + Router-Outlet
    login-page.ts   Login-Formular
    days-page.ts    Tagesübersicht (GET /v1/days)
    day-detail-page.ts  Tagesdetail + Karte (GET /v1/trackpoints|stops|suggestions)
    track-map.ts    MapLibre-Wrapper als isolierte Web-Component
```

## Konventionen

- Alle API-Typen (Trackpoint, Stop, Suggestion, DaySummary) sind in `api.ts` definiert
- Alle `fetch()`-Aufrufe laufen über `api.ts` — kein direktes `fetch()` in Komponenten
- Auth-State wird über Session-Cookie gehalten (`credentials: 'include'` bei jedem Request)
- 401-Response in `api.ts` → automatischer Redirect auf `/login`
- Tile-URL der Karte ist als Property auf `<track-map>` konfigurierbar (REQ-MAP-02)
- Neue Routen in `main.ts` registrieren (via `route()`), neue Komponenten in `components/` anlegen und in `main.ts` importieren