feat: Courses-redesign + återinförande av Tjing-import #8

New Issue

2026-05-21T11:31:50+02:00

shcizo commented

2026-05-21 11:31:50 +02:00

Beskrivning

Redesigna Courses-sidan enligt designspec: tabbed action card med "Find courses" och "Import from Tjing", per-rad expansion med layout-chips färgade efter rating-tier, collapsible block för inaktiva layouts. Inkluderar återinförande av Tjing-importflödet som togs bort i commit 6e05d30.

Motivation

Courses-sidan följer idag inte samma designspråk som players-sidan (samma topbar, type, spacing, expansion pattern). Layout-data visas inte i en greppbar form. Tjing-import är ett efterfrågat flöde som tidigare experimenterats med och som designen nu placerar i ett tydligt sammanhang.

Design

1. Tabbed action card

Ersätt nuvarande search-input + scrape-knapp med ett tabbat kort:

14px radius kort, topsektion med två tab-knappar som delar 1px bottom-border-line
Aktiv tab får 2px accent under-line + accent text-färg
"Find courses"-tab: sökinput (40px hög, 10px radius, --paper-2 bakgrund, focus = 4px accent-ring 14% opacity + 1px accent border). Ingen knapp — search filtrerar live.
"Import from Tjing"-tab: samma input + primär "Search Tjing"-knapp bredvid
Hint-text under (11.5px grå)

2. Results bar

Liten flex-rad ovanför tabellen: "Showing N of M courses" till vänster, "View all →" länk till höger. Siffror i tabular-nums semibold.

3. Courses-tabell

Samma shell som players-tabellen (vit kort, 14px radius, 1px line-border, soft shadow), men med eget grid:

minmax(280px, 2fr) course | minmax(140px, 1fr) city | minmax(140px, 0.9fr) updated | 72px actions
Course-cell: namn i --accent-färg (14/600), liten grå meta-text under ("3 layouts" eller "5 layouts · 3 active")
City: plain ink, 14px
Last updated: JetBrains Mono 12.5px, secondary ink
Actions: refresh + chevron (samma som players)

4. Course expanded view

Samma paper-2 + accent-tint bakgrund som player-expansionen
Kolumn med 12px gap:
- Layouts header-strip: "LAYOUTS" kicker vänster, "X active · Y inactive" count höger
- Lista av aktiva layout-rader
- Om någon inaktiv layout finns: collapsible block

5. Layout-rad

Active:

Vit kort, 10px radius, 1px line-border, padding: 12px 18px
Hover: mörkare border + soft shadow
Flex-rad: namn (13.5/600) + "Last played: " caption (11.5px grå) baseline-aligned vänster
Par/rating chips höger:
- Par chip: "Par 61" — JetBrains Mono 12.5/600, accent text-färg
- Rating chip: "Rating: 966" — färg per tier:
  - >= 970 → green (oklch(0.55 0.15 150))
  - >= 940 → amber (oklch(0.55 0.12 100))
  - < 940 → orange (oklch(0.55 0.10 50))
  - null (never played) → omit rating-chip

Inactive:

Transparent bakgrund, dashed 1px line-2 border, 65% opacity
Namn använder --ink-2 + weight 500
"Never played" istället för datum, i röd (--down)

6. Inactive layouts block

1px border, 10px radius, --paper-2 bakgrund
Toggle-knapp: full-width flex-rad, "Inactive layouts (3) — Not played in last year" vänster, chevron höger (180° rotation på open)
On open: visar listan av inaktiva layout-rader

Tjing-återinförande

Tjing-import togs bort i 6e05d30. Återinför som del av denna issue:

Återställ scraping-logiken (kolla git show 6e05d30 --stat för borttagna filer)
Bind upp mot nya "Import from Tjing"-tabben
Tjing GraphQL-endpoint finns dokumenterad i tidigare memory (reference_tjing_api)
Importflödet: söksträng → träffar från Tjing → bekräftelse → import till lokal DB

Öppen fråga: designen säger inget om hur Tjing-sökresultat presenteras (picker? confirmation?). Föreslå enkel lista med checkboxes som default; vi kan iterera.

Tekniska noteringar

Nuvarande Courses-template: views/pages/courses.ejs + views/partials/course-table.ejs
Courses-modell: src/models/course.js
Expansion-pattern att återanvända från players-tabellen
Layout-data finns redan i schema (par, rating, active) — verifiera vid implementation
active-bestämning: "played in last 12 months" — kontrollera nuvarande logik

Scope

Inkluderat: Tabbed action card, results bar, tabell-redesign, course expansion, active/inactive layout-rader, inactive collapse, Tjing-import-flöde (scraping + UI).

Exkluderat:

Empty state för "no courses matched" (designen säger "not designed yet — recommend a soft empty state")
Bulk actions (remove course) — separat issue om/när det behövs

Beroenden

#4 (shared visual layer) för tokens, topbar, typografi
Återinförande av Tjing-modulen (reference_tjing_api för endpoint-info)

Risker

Tjing-återinförande: senaste commit tog bort både Tjing och "tour"-feature samtidigt. Säkerställ att tour-bortagningen är slutgiltig och att bara Tjing återställs.
Tjing-importens UI är endast skissartad i designen — iteration kan behövas.

## Beskrivning Redesigna Courses-sidan enligt designspec: tabbed action card med "Find courses" och "Import from Tjing", per-rad expansion med layout-chips färgade efter rating-tier, collapsible block för inaktiva layouts. Inkluderar **återinförande av Tjing-importflödet** som togs bort i commit `6e05d30`. ## Motivation Courses-sidan följer idag inte samma designspråk som players-sidan (samma topbar, type, spacing, expansion pattern). Layout-data visas inte i en greppbar form. Tjing-import är ett efterfrågat flöde som tidigare experimenterats med och som designen nu placerar i ett tydligt sammanhang. ## Design ### 1. Tabbed action card Ersätt nuvarande search-input + scrape-knapp med ett tabbat kort: - 14px radius kort, topsektion med två tab-knappar som delar 1px bottom-border-line - Aktiv tab får 2px accent under-line + accent text-färg - **"Find courses"-tab:** sökinput (40px hög, 10px radius, `--paper-2` bakgrund, focus = 4px accent-ring 14% opacity + 1px accent border). **Ingen knapp** — search filtrerar live. - **"Import from Tjing"-tab:** samma input + primär "Search Tjing"-knapp bredvid - Hint-text under (11.5px grå) ### 2. Results bar Liten flex-rad ovanför tabellen: "Showing **N** of **M** courses" till vänster, "View all →" länk till höger. Siffror i tabular-nums semibold. ### 3. Courses-tabell Samma shell som players-tabellen (vit kort, 14px radius, 1px line-border, soft shadow), men med eget grid: - `minmax(280px, 2fr)` course | `minmax(140px, 1fr)` city | `minmax(140px, 0.9fr)` updated | `72px` actions - **Course-cell:** namn i `--accent`-färg (14/600), liten grå meta-text under ("3 layouts" eller "5 layouts · 3 active") - **City:** plain ink, 14px - **Last updated:** JetBrains Mono 12.5px, secondary ink - **Actions:** refresh + chevron (samma som players) ### 4. Course expanded view - Samma `paper-2` + accent-tint bakgrund som player-expansionen - Kolumn med 12px gap: - Layouts header-strip: "LAYOUTS" kicker vänster, "X active · Y inactive" count höger - Lista av aktiva layout-rader - Om någon inaktiv layout finns: collapsible block ### 5. Layout-rad **Active:** - Vit kort, 10px radius, 1px line-border, `padding: 12px 18px` - Hover: mörkare border + soft shadow - Flex-rad: namn (13.5/600) + "Last played: <date>" caption (11.5px grå) baseline-aligned vänster - Par/rating chips höger: - **Par chip:** "Par 61" — JetBrains Mono 12.5/600, accent text-färg - **Rating chip:** "Rating: 966" — färg per tier: - `>= 970` → green (`oklch(0.55 0.15 150)`) - `>= 940` → amber (`oklch(0.55 0.12 100)`) - `< 940` → orange (`oklch(0.55 0.10 50)`) - `null` (never played) → omit rating-chip **Inactive:** - Transparent bakgrund, **dashed** 1px line-2 border, 65% opacity - Namn använder `--ink-2` + weight 500 - "Never played" istället för datum, i röd (`--down`) ### 6. Inactive layouts block - 1px border, 10px radius, `--paper-2` bakgrund - Toggle-knapp: full-width flex-rad, "Inactive layouts (3) — Not played in last year" vänster, chevron höger (180° rotation på open) - On open: visar listan av inaktiva layout-rader ## Tjing-återinförande Tjing-import togs bort i `6e05d30`. Återinför som del av denna issue: - Återställ scraping-logiken (kolla `git show 6e05d30 --stat` för borttagna filer) - Bind upp mot nya "Import from Tjing"-tabben - Tjing GraphQL-endpoint finns dokumenterad i tidigare memory ([[reference_tjing_api]]) - Importflödet: söksträng → träffar från Tjing → bekräftelse → import till lokal DB **Öppen fråga:** designen säger inget om hur Tjing-sökresultat presenteras (picker? confirmation?). Föreslå enkel lista med checkboxes som default; vi kan iterera. ## Tekniska noteringar - Nuvarande Courses-template: `views/pages/courses.ejs` + `views/partials/course-table.ejs` - Courses-modell: `src/models/course.js` - Expansion-pattern att återanvända från players-tabellen - Layout-data finns redan i schema (par, rating, active) — verifiera vid implementation - `active`-bestämning: "played in last 12 months" — kontrollera nuvarande logik ## Scope **Inkluderat:** Tabbed action card, results bar, tabell-redesign, course expansion, active/inactive layout-rader, inactive collapse, Tjing-import-flöde (scraping + UI). **Exkluderat:** - Empty state för "no courses matched" (designen säger "not designed yet — recommend a soft empty state") - Bulk actions (remove course) — separat issue om/när det behövs ## Beroenden - #4 (shared visual layer) för tokens, topbar, typografi - Återinförande av Tjing-modulen ([[reference_tjing_api]] för endpoint-info) ## Risker - Tjing-återinförande: senaste commit tog bort både Tjing och "tour"-feature samtidigt. Säkerställ att tour-bortagningen är slutgiltig och att bara Tjing återställs. - Tjing-importens UI är endast skissartad i designen — iteration kan behövas.

shcizo added the enhancement label 2026-05-21 11:31:50 +02:00

shcizo referenced this issue

2026-05-22 13:05:32 +02:00

feat: mobilanpassad UI för Players och Courses (kortlayout) #16

shcizo referenced this issue from a commit

2026-05-25 09:55:30 +02:00

feat: redesign Courses page with tabs + restore Tjing import (#8)

shcizo referenced this issue from a commit

2026-05-25 09:55:30 +02:00

fix: address code-review findings from pass 1 + 2 (#8)

shcizo referenced this issue from a commit

2026-05-25 10:26:06 +02:00