docs: neue navigation in anleitung, schnellstart und screenshots

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
unknown
2026-10-25 18:50:13 +01:00
co-authored by Claude Opus 5.5
parent d5ffcbae60
commit 295da414bb
28 changed files with 58 additions and 21 deletions
+18
View File
@@ -7,6 +7,24 @@ die Versionierung [Semantic Versioning](https://semver.org/lang/de/).
## [Unreleased] ## [Unreleased]
### Geändert
- **Neue Navigation**: unten Start, Katalog, Sammlung, Wünsche und in der
Mitte ein +-Stein mit allen Wegen zu einem neuen Set (Scannen, aus Link,
Lego-Nummer, von Hand).
- **„Mehr" statt Konto-Menü und Verwaltungsreitern**: Konto, Design,
Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte und
Export/Import als Kacheln in Gruppen, oben rechts hinter den Initialen.
- **„Für wen?" in der Kopfzeile**: Bei mehreren Sammlern wird das Kind einmal
oben gewählt und gilt für Startseite, Katalog und Sammlung. Jedes Gerät
merkt sich die Wahl; ein `?sammler=` im Link hat weiterhin Vorrang.
### Behoben
- Mitglieder (nicht Admin) kamen nicht an Sammler, Hersteller, Themen und
Standorte heran, obwohl sie diese pflegen dürfen: Der Eintrag
„Verwaltung" stand nur im Menü des Administrators.
### Hinzugefügt ### Hinzugefügt
- **Set aus einem Link übernehmen**, für alle Hersteller: Amazon, idealo, - **Set aus einem Link übernehmen**, für alle Hersteller: Amazon, idealo,
+2
View File
@@ -63,6 +63,8 @@ Bild-URLs, die der Nutzer selbst hinterlegt hat.
| `src/lib/reminder-job.ts`, `src/lib/mailer.ts` | Versand und Zeitplan | | `src/lib/reminder-job.ts`, `src/lib/mailer.ts` | Versand und Zeitplan |
| `src/lib/export.ts` | Export und Import des gesamten Bestands | | `src/lib/export.ts` | Export und Import des gesamten Bestands |
| `src/lib/money.ts`, `src/lib/format.ts` | Cent-Umrechnung, dd.MM.yyyy | | `src/lib/money.ts`, `src/lib/format.ts` | Cent-Umrechnung, dd.MM.yyyy |
| `src/components/layout/more-items.ts` | Eintraege der Seite „Mehr" (Konto, Design, Stammdaten), auch Titel der Verwaltungsseiten |
| `src/lib/collector-choice.ts` | Aktiver Sammler: `?sammler=` vor Cookie aus dem Umschalter „Fuer wen?" |
| `src/lib/link-import.ts` | Set-Daten aus Link und Seite lesen (rein, testbar) | | `src/lib/link-import.ts` | Set-Daten aus Link und Seite lesen (rein, testbar) |
| `src/lib/safe-fetch.ts`, `src/lib/net-guard.ts` | Abruf fremder URLs nur an oeffentliche Adressen | | `src/lib/safe-fetch.ts`, `src/lib/net-guard.ts` | Abruf fremder URLs nur an oeffentliche Adressen |
| `src/lib/design.ts`, `src/app/designs.css` | Designs: Namen und Cookie bzw. Tokens je `data-design` | | `src/lib/design.ts`, `src/app/designs.css` | Designs: Namen und Cookie bzw. Tokens je `data-design` |
+5 -5
View File
@@ -144,16 +144,16 @@ tut.
## 7. Passkey hinterlegen ## 7. Passkey hinterlegen
Unter **Konto → Passkeys → Passkey hinzufügen**. Ab dann meldest du dich per Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** (das Kästchen mit deinen Initialen oben rechts). Ab dann meldest du dich per
Fingerabdruck, Gesichtserkennung oder Geräte-PIN an. Für jedes Gerät ein Fingerabdruck, Gesichtserkennung oder Geräte-PIN an. Für jedes Gerät ein
eigener Passkey – Handy, Tablet, Laptop. eigener Passkey – Handy, Tablet, Laptop.
## 8. Loslegen ## 8. Loslegen
1. **Verwaltung → Hersteller**: Lego, Playmobil, Cobi … anlegen. 1. **Mehr → Hersteller**: Lego, Playmobil, Cobi … anlegen.
2. **Verwaltung → Themen**: „City", „Technic", „Novelmore" … 2. **Mehr → Themen**: „City", „Technic", „Novelmore" …
3. **Verwaltung → Standorte**: „Regal Kinderzimmer", „Kiste Keller 3" … 3. **Mehr → Standorte**: „Regal Kinderzimmer", „Kiste Keller 3" …
4. **Katalog → Set anlegen**: Setnummer, Name, Bild. 4. **+ in der Navigation → Von Hand**: Setnummer, Name, Bild.
5. Auf der Set-Seite **„Zur Sammlung hinzufügen"**, wenn das Set da ist. 5. Auf der Set-Seite **„Zur Sammlung hinzufügen"**, wenn das Set da ist.
6. **Katalog → Filter „Fehlt noch"**: Kachel lange drücken, mehrere auswählen, 6. **Katalog → Filter „Fehlt noch"**: Kachel lange drücken, mehrere auswählen,
**„Zur Wunschliste hinzufügen"**. **„Zur Wunschliste hinzufügen"**.
+33 -16
View File
@@ -63,7 +63,21 @@ Die Startseite zeigt auf einen Blick, wo die Sammlung steht:
| **Abkürzungen** | Direkt zu den fehlenden Sets, zu den Wunschlisten oder zu einem neuen Set | | **Abkürzungen** | Direkt zu den fehlenden Sets, zu den Wunschlisten oder zu einem neuen Set |
Unten am Bildschirmrand liegt die Navigation – auf dem Handy mit dem Daumen Unten am Bildschirmrand liegt die Navigation – auf dem Handy mit dem Daumen
erreichbar. Der aktive Bereich sitzt auf einer kleinen Platte. erreichbar: **Start, Katalog, Sammlung, Wünsche** und in der Mitte der rote
**+-Stein**. Der aktive Bereich sitzt auf einer kleinen Platte.
![Das Plus-Menü](bilder/26-plus-menue.png)
Das **+** bündelt alle Wege, wie ein Set in den Katalog kommt: Strichcode
scannen, aus einem Link übernehmen, Lego-Nummer holen oder von Hand eintragen.
![Die Mehr-Seite](bilder/27-mehr.png)
Alles, was man nicht täglich braucht, liegt hinter dem Kästchen mit deinen
Initialen oben rechts – der Seite **Mehr**: Konto und Passkeys, Design,
Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte sowie
Export und Import. Was nur der Administrator darf, sehen Mitglieder dort gar
nicht erst.
Sets ohne Bild bekommen einen farbigen Platzhalter mit der Setnummer. Jeder Sets ohne Bild bekommen einen farbigen Platzhalter mit der Setnummer. Jeder
Hersteller hat seine eigene Farbe – Lego gelb, Playmobil blau, Cobi grün. Hersteller hat seine eigene Farbe – Lego gelb, Playmobil blau, Cobi grün.
@@ -74,8 +88,9 @@ Hersteller hat seine eigene Farbe – Lego gelb, Playmobil blau, Cobi grün.
![Hersteller verwalten](bilder/03-verwaltung-hersteller.png) ![Hersteller verwalten](bilder/03-verwaltung-hersteller.png)
Bevor du Sets anlegst, brauchst du mindestens einen **Hersteller**. Zu finden Bevor du Sets von Hand anlegst, brauchst du mindestens einen **Hersteller**.
über das Konto-Menü oben rechts → **Verwaltung**. Zu finden unter **Mehr → Hersteller**. Der Lego-Import und die Übernahme aus
einem Link legen fehlende Hersteller selbst an.
Drei Arten von Stammdaten: Drei Arten von Stammdaten:
@@ -117,7 +132,7 @@ Die Kacheln zeigen auf einen Blick:
- **„Auf Wunschliste"** – steht auf mindestens einer Liste - **„Auf Wunschliste"** – steht auf mindestens einer Liste
- Setnummer, Hersteller, Thema, Jahr und UVP - Setnummer, Hersteller, Thema, Jahr und UVP
Mit **„Set anlegen"** oben rechts kommt ein neues Set dazu. Pflicht sind nur Über das **+** in der Navigation kommt ein neues Set dazu. Pflicht sind nur
Hersteller, Setnummer und Name; alles andere kannst du nachtragen. Ein Bild Hersteller, Setnummer und Name; alles andere kannst du nachtragen. Ein Bild
lädst du entweder hoch (es wird verkleinert und lokal gespeichert) oder du lädst du entweder hoch (es wird verkleinert und lokal gespeichert) oder du
hinterlegst eine Bild-URL. hinterlegst eine Bild-URL.
@@ -286,7 +301,7 @@ zweites Mal.
![Konto und Passkeys](bilder/16-konto-passkeys.png) ![Konto und Passkeys](bilder/16-konto-passkeys.png)
Unter **Konto → Passkeys → Passkey hinzufügen** hinterlegst du Fingerabdruck, Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** hinterlegst du Fingerabdruck,
Gesichtserkennung oder die Geräte-PIN als Anmeldung. Danach reicht auf der Gesichtserkennung oder die Geräte-PIN als Anmeldung. Danach reicht auf der
Anmeldeseite ein Tipp auf „Mit Passkey anmelden" – auf vielen Geräten schlägt Anmeldeseite ein Tipp auf „Mit Passkey anmelden" – auf vielen Geräten schlägt
der Browser den Passkey sogar von selbst vor. der Browser den Passkey sogar von selbst vor.
@@ -310,7 +325,7 @@ Sets von Hand einzutippen ist der langsame Weg. Es gibt drei schnellere.
### Aus einem Link übernehmen – für alle Hersteller ### Aus einem Link übernehmen – für alle Hersteller
Auf **Katalog → Set anlegen** steht das Feld „Aus einem Link übernehmen". Über **+ → Aus Link** landest du im Feld „Aus einem Link übernehmen".
Dort passt jeder Link zu einem Set hinein: Amazon, idealo, geizhals, der Shop Dort passt jeder Link zu einem Set hinein: Amazon, idealo, geizhals, der Shop
des Herstellers oder eine Set-Datenbank wie des Herstellers oder eine Set-Datenbank wie
[Brickfact](https://brickfact.com) (Lego) und [Brickfact](https://brickfact.com) (Lego) und
@@ -340,7 +355,7 @@ Katalog, kommt statt des Formulars ein Link zum vorhandenen Eintrag.
![Lego-Import](bilder/17-lego-import.png) ![Lego-Import](bilder/17-lego-import.png)
Auf **Katalog → Set anlegen** steht oben das Feld für den Import. Setnummer Über **+ → Lego-Nummer** landest du im Feld für den Import. Setnummer
von der Packung eintippen, „Holen" – und Name, Jahr, Teile, Minifiguren und von der Packung eintippen, „Holen" – und Name, Jahr, Teile, Minifiguren und
Thema stehen drin. Das Bild wird **lokal gespeichert**, funktioniert also auch Thema stehen drin. Das Bild wird **lokal gespeichert**, funktioniert also auch
weiter, wenn die Quelle es irgendwann austauscht. Fehlen Hersteller oder weiter, wenn die Quelle es irgendwann austauscht. Fehlen Hersteller oder
@@ -393,7 +408,7 @@ der Sammlung stimmt damit, ohne dass du daran denken musst.
Die Registrierung ist nach dem ersten Konto geschlossen – sonst könnte sich Die Registrierung ist nach dem ersten Konto geschlossen – sonst könnte sich
jeder, der die Adresse kennt, ein Konto anlegen. Für den zweiten Elternteil jeder, der die Adresse kennt, ein Konto anlegen. Für den zweiten Elternteil
gibt es deshalb **Verwaltung → Einladungen**: gibt es deshalb **Mehr → Einladungen**:
1. „Einladung erstellen", optional an eine E-Mail-Adresse gebunden, mit Rolle 1. „Einladung erstellen", optional an eine E-Mail-Adresse gebunden, mit Rolle
und Gültigkeit. und Gültigkeit.
@@ -411,7 +426,7 @@ zusätzlich einladen und Daten exportieren.
![Daten](bilder/20-daten.png) ![Daten](bilder/20-daten.png)
Unter **Verwaltung → Daten** gibt es drei Downloads: Unter **Mehr → Export & Import** gibt es drei Downloads:
| | Wofür | | | Wofür |
|---|---| |---|---|
@@ -471,14 +486,16 @@ Sammler. Ein Set, das nur die Schwester hat, fällt für den Bruder wieder unter
> vorher. Erst der zweite Sammler schaltet all das frei – und dann willst du > vorher. Erst der zweite Sammler schaltet all das frei – und dann willst du
> es auch. > es auch.
Anlegen unter **Verwaltung → Sammler**. Jeder bekommt einen Namen und eine Anlegen unter **Mehr → Sammler**. Jeder bekommt einen Namen und eine
Farbe zur Unterscheidung. Farbe zur Unterscheidung.
![Nach Sammler filtern](bilder/22-sammler-filter.png) ![Nach Sammler filtern](bilder/22-sammler-filter.png)
Danach steht in Katalog und Sammlung oben ein Umschalter. „Alle zusammen" Danach steht oben unter dem Logo der Umschalter **„Für wen?"**. „Alle"
zeigt den Haushalt als Ganzes, ein Name zeigt genau dessen Sicht – inklusive zeigt den Haushalt als Ganzes, ein Name zeigt genau dessen Sicht – auf der
der Frage, was **diesem** Kind noch fehlt. Startseite, im Katalog und in der Sammlung, inklusive der Frage, was
**diesem** Kind noch fehlt. Die Wahl merkt sich jedes Gerät: Das Tablet im
Kinderzimmer öffnet direkt bei Max.
Beim Hinzufügen zur Sammlung fragt die App jetzt, wer das Set bekommt. Und Beim Hinzufügen zur Sammlung fragt die App jetzt, wer das Set bekommt. Und
beim Anlegen einer Wunschliste, für wen sie ist: Das bestimmt, wessen Sammlung beim Anlegen einer Wunschliste, für wen sie ist: Das bestimmt, wessen Sammlung
@@ -486,7 +503,7 @@ als „hat er schon" zählt und wann ein Wunsch automatisch als erfüllt gilt.
> Die Umstellung einer bestehenden Instanz macht nichts kaputt: Beim Update > Die Umstellung einer bestehenden Instanz macht nichts kaputt: Beim Update
> entsteht ein Sammler namens „Sammlung", dem alles Vorhandene gehört. > entsteht ein Sammler namens „Sammlung", dem alles Vorhandene gehört.
> Umbenennen unter **Verwaltung → Sammler**, fertig. > Umbenennen unter **Mehr → Sammler**, fertig.
--- ---
@@ -534,7 +551,7 @@ SMTP_FROM=Bricktrack <bricktrack@example.de>
REMINDER_DAYS_BEFORE=14 REMINDER_DAYS_BEFORE=14
``` ```
Unter **Verwaltung → Erinnerungen** kannst du die Verbindung prüfen, dir eine Unter **Mehr → Erinnerungen** kannst du die Verbindung prüfen, dir eine
Testnachricht schicken und die Prüfung sofort auslösen, statt auf die nächste Testnachricht schicken und die Prüfung sofort auslösen, statt auf die nächste
Stunde zu warten. Dort steht auch, welche Listen einen Termin haben und wie Stunde zu warten. Dort steht auch, welche Listen einen Termin haben und wie
viel dort noch offen ist. viel dort noch offen ist.
@@ -583,7 +600,7 @@ Haken dran, habt ihr es schon.
![Startseite im Design Nachtblau](bilder/25-design-nachtblau.png) ![Startseite im Design Nachtblau](bilder/25-design-nachtblau.png)
Unter **Konto → Design** gibt es sechs Looks zur Auswahl: Unter **Mehr → Design** gibt es sechs Looks zur Auswahl:
| Design | | | Design | |
|---|---| |---|---|
Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 435 KiB

After

Width:  |  Height:  |  Size: 443 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 329 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 369 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 407 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 348 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 KiB

After

Width:  |  Height:  |  Size: 329 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 KiB

After

Width:  |  Height:  |  Size: 495 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 426 KiB

After

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 477 KiB

After

Width:  |  Height:  |  Size: 497 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 KiB

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 381 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 327 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 297 KiB

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 378 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 336 KiB

After

Width:  |  Height:  |  Size: 345 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 222 KiB

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB