Mobile: Settings aus 'Meine Tiere' auslösen (Zahnrad im Header) #36

Closed
opened 2026-09-19 12:25:38 +02:00 by admin · 1 comment
Owner

Plan: Settings aus „Meine Tiere" auslösen — Zahnrad im Header

Status: Planung (noch nicht umgesetzt) — Schritt 1 der "große Mobile-Features"-Kette aus WORKFLOW.md §9a (Plan zuerst, dann eigener Feature-Branch).
Ursprung: mobile/found.md, offener Punkt: "Ein anderer User, meinte wäre es nicht schöner und aufgeräumter, wenn die App-Settings nicht unter 'Meine Tiere' stehen würden, sondern einen eigenen Tab erhalten."
Entschieden (2026-09-19): Zahnrad-Icon im Header, neben der Mailbox — nicht als eigener Bottom-Tab. Begründung des Users: ein normaler User öffnet Settings realistisch 1–2× im Halbjahr, ein permanenter 5. Tab dafür ist unnötig Platzverbrauch in der Bottom-Nav; ein Header-Icon ist "nebensächlicher" plaziert, was für diese Nutzungsfrequenz genau richtig ist.
Mockups (gleicher Ordner):

  • mobile-settings-tab-mockup.png — verworfene Variante (eigener Tab), nur zur Historie
  • mobile-settings-header-icon-mockup.pnggewählte Variante, zeigt Header mit Zahnrad+Mailbox und den geöffneten Einstellungen-Screen

Ist-Zustand

app/(app)/(tabs)/pets.tsx rendert die Tier-Liste und fünf Footer-Sektionen (ListFooterComponent) auf einem einzigen Screen:

  1. AppearanceSection — Darstellung (Hell/Dunkel/Auto)
  2. LanguageSection — Sprache (LanguageSwitcher)
  3. PetSuggestionsSection — Tier-Vorschläge Opt-out (Switch)
  4. LegalSection — Impressum/Datenschutz/Nutzungsbedingungen/Kinderschutz + Versions-/OTA-Zeile
  5. FooterErrorBoundaryLogoutSection — Abmelden

Header-Icons sind aktuell pro Tab uneinheitlich zusammengesetzt:

  • Global-Default (screenOptions.headerRight in (tabs)/_layout.tsx): nur MessagesHeaderButton — greift für Tabs ohne eigenen Override (aktuell nur notifications)
  • Feed (index): NewPostHeaderButton + MessagesHeaderButton
  • Explore: SearchHeaderButton + MessagesHeaderButton
  • Pets: AddPetHeaderButton + MessagesHeaderButton

Soll-Zustand

Neuer SettingsHeaderButton (Zahnrad, lucide-react-native's Settings) erscheint auf jedem Tab-Header, direkt links neben MessagesHeaderButton — also global, nicht nur auf einem Tab. Tap öffnet /settings als normalen Stack-Push (Header mit Zurück-Pfeil, kein Modal — analog zur bestehenden "Suche", nicht analog zu "Neuer Beitrag"/"Neue Story", die als presentation: "modal" mit X-Button laufen). Die Bottom-Tab-Bar bleibt unverändert bei 4 Tabs und ist beim geöffneten Einstellungen-Screen nicht sichtbar (der Screen liegt außerhalb der (tabs)-Navigation, wie search.tsx schon heute).

pets.tsx wird auf die reine Tier-Liste reduziert (+ "Tier hinzufügen"-Header-Button, den es schon gibt).

Siehe mobile-settings-header-icon-mockup.png.

Warum als eigenes, geplantes Feature (nicht als Direkt-Fix)

Nach WORKFLOW.md §9a zählt das als "groß": neuer Screen + Header-Struktur-Änderung auf mehreren Tabs + mehrere verschobene Dateien — kein Einzeldatei-Bugfix. Läuft deshalb über Feature-Branch, nicht über die automatische Commit→OTA-Kette.

Umsetzungsschritte

1. Neue Komponenten-Dateien (DRY, matcht bestehendes Muster wie LanguageSwitcher.tsx, BreedPicker.tsx, PasswordField.tsx)

Extrahiere aus pets.tsx in eigene Dateien unter src/components/settings/:

Neue Datei Enthält (aus pets.tsx)
src/components/settings/AppearanceSection.tsx AppearanceSection
src/components/settings/LanguageSection.tsx LanguageSection (nutzt weiter die bestehende LanguageSwitcher)
src/components/settings/PetSuggestionsSection.tsx PetSuggestionsSection
src/components/settings/LegalSection.tsx LegalSection (inkl. der OTA-Anzeige)
src/components/settings/LogoutSection.tsx LogoutSection
src/components/settings/FooterErrorBoundary.tsx FooterErrorBoundary

Jede Datei bekommt ihre eigene makeStyles(colors)-Funktion (kein 1:1-Copy des kompletten, aktuell gemeinsamen Style-Objekts — nur die Keys, die die jeweilige Sektion wirklich braucht).

Nebenbei behoben: FooterErrorBoundary wrapt aktuell nur LogoutSection — beim Umzug wird der gesamte Einstellungen-Inhalt in die Boundary gepackt (schließt die in der letzten Code-Review gefundene Lücke, dass LegalSection/AppearanceSection etc. ungeschützt rendern).

2. Neuer Screen (Stack, nicht Tab)

app/(app)/settings.tsx (neu, außerhalb von (tabs)/) — komponiert die 6 obigen Bausteine in einer ScrollView, analog zu search.tsxs Aufbau. Kein eigener Header-Titel-Code nötig — der kommt aus der Stack-Screen-Registrierung (Schritt 3).

3. Screen-Registrierung

app/(app)/_layout.tsx (der Stack, der auch search, post-new, messages etc. registriert):

<Stack.Screen name="settings" options={{ ...headerOptions, title: t("screens.settings") }} />

Kein presentation: "modal", kein CloseModalButton — normaler Push mit System-Zurück-Pfeil, wie search.

4. Neuer globaler Header-Button

app/(app)/(tabs)/_layout.tsx:

  • Neue Komponente SettingsHeaderButton (Kopie des MessagesHeaderButton-Musters, navigiert per router.push("/settings"), Icon Settings aus lucide-react-native)
  • Global-Default (screenOptions.headerRight) ändern auf () => <View style={styles.headerButtons}><SettingsHeaderButton /><MessagesHeaderButton /></View> — greift für notifications (einziger Tab ohne eigenen Override)
  • Feed (index), Explore, Pets — ihre jeweiligen headerRight-Overrides bekommen <SettingsHeaderButton /> direkt vor <MessagesHeaderButton /> eingefügt (Reihenfolge wie im Mockup: [Tab-eigene Aktion(en)] → Zahnrad → Mailbox)

5. pets.tsx bereinigen

  • ListFooterComponent komplett entfernen (oder auf null)
  • Nicht mehr benötigte Imports entfernen (Switch, Linking, Alert, Constants, Updates, Sentry, useAuth, LanguageSwitcher, env — genau prüfen, was PetRow und die Haupt-Liste noch brauchen)
  • makeStyles in pets.tsx auf die tatsächlich noch verwendeten Keys eindampfen

6. i18n

  • de.json/en.json: neuer Key screens.settings: "Einstellungen" / "Settings" (matcht die bestehende screens.search/screens.messages-Konvention für Stack-Screen-Titel)
  • Keine weiteren neuen Strings — alle Sektions-Texte wandern unverändert mit

7. mobile/found.md

Den offenen Punkt (siehe „Ursprung" oben) auf [x] setzen mit Verweis auf diesen Plan + Commit, sobald umgesetzt — inkl. kurzer Notiz, warum Header-Icon statt Tab gewählt wurde (Nutzungsfrequenz-Argument).

Geschätzter Umfang

  • 6 neue Dateien unter src/components/settings/ (~40–90 Zeilen je Sektion)
  • 1 neuer Screen (app/(app)/settings.tsx)
  • 3 geänderte Dateien: app/(app)/_layout.tsx (Screen-Registrierung), app/(app)/(tabs)/_layout.tsx (neuer Header-Button, 4 Stellen: global-default + Feed + Explore + Pets), app/(app)/(tabs)/pets.tsx (bereinigt)
  • 2 geänderte i18n-Dateien
  • 0 Backend-/Schema-Änderungen — reine Mobile-IA-Änderung

Risiken / offene Fragen

  • Kein RN-Testsetup (bekannte Lücke) — Verifikation bleibt Typecheck + Lint + manueller Test am Handy, wie bisher.
  • 4 Einfügestellen für den Header-Button (statt 1 Tab-Eintrag bei der verworfenen Variante) — etwas mehr Diff-Fläche, dafür überall konsistent erreichbar. Beim Umsetzen genau prüfen, dass styles.headerButtons' gap: 16 bei 3 Icons (Feed: +Neu, Zahnrad, Mailbox) nicht zu eng wird auf schmalen Displays — ggf. gap leicht reduzieren oder Icon-Größe auf 20 statt 22 setzen.
  • Deep Links: falls irgendwo ein direkter Link auf /pets als "Settings-Ziel" existiert, kurz gegenprüfen (unwahrscheinlich, aber Teil der Umsetzung).

Nächster Schritt

Nach Freigabe: git checkout -b feature/settings-header-icon, Umsetzung gemäß Schritte 1–7, Verifikation + Code-Review pro Commit (WORKFLOW.md §5/§6), Merge nach main erst wenn komplett fertig — automatischer OTA-Publish greift dann erst beim Merge-Commit, nicht auf dem Feature-Branch (WORKFLOW.md §9a).

# Plan: Settings aus „Meine Tiere" auslösen — Zahnrad im Header **Status:** Planung (noch nicht umgesetzt) — Schritt 1 der "große Mobile-Features"-Kette aus `WORKFLOW.md` §9a (Plan zuerst, dann eigener Feature-Branch). **Ursprung:** `mobile/found.md`, offener Punkt: *"Ein anderer User, meinte wäre es nicht schöner und aufgeräumter, wenn die App-Settings nicht unter 'Meine Tiere' stehen würden, sondern einen eigenen Tab erhalten."* **Entschieden (2026-09-19):** **Zahnrad-Icon im Header, neben der Mailbox** — nicht als eigener Bottom-Tab. Begründung des Users: ein normaler User öffnet Settings realistisch 1–2× im Halbjahr, ein permanenter 5. Tab dafür ist unnötig Platzverbrauch in der Bottom-Nav; ein Header-Icon ist "nebensächlicher" plaziert, was für diese Nutzungsfrequenz genau richtig ist. **Mockups** (gleicher Ordner): - `mobile-settings-tab-mockup.png` — verworfene Variante (eigener Tab), nur zur Historie - `mobile-settings-header-icon-mockup.png` — **gewählte Variante**, zeigt Header mit Zahnrad+Mailbox und den geöffneten Einstellungen-Screen ## Ist-Zustand `app/(app)/(tabs)/pets.tsx` rendert die Tier-Liste **und** fünf Footer-Sektionen (`ListFooterComponent`) auf einem einzigen Screen: 1. `AppearanceSection` — Darstellung (Hell/Dunkel/Auto) 2. `LanguageSection` — Sprache (`LanguageSwitcher`) 3. `PetSuggestionsSection` — Tier-Vorschläge Opt-out (Switch) 4. `LegalSection` — Impressum/Datenschutz/Nutzungsbedingungen/Kinderschutz + Versions-/OTA-Zeile 5. `FooterErrorBoundary` → `LogoutSection` — Abmelden Header-Icons sind aktuell pro Tab uneinheitlich zusammengesetzt: - Global-Default (`screenOptions.headerRight` in `(tabs)/_layout.tsx`): nur `MessagesHeaderButton` — greift für Tabs ohne eigenen Override (aktuell nur **notifications**) - **Feed** (`index`): `NewPostHeaderButton` + `MessagesHeaderButton` - **Explore**: `SearchHeaderButton` + `MessagesHeaderButton` - **Pets**: `AddPetHeaderButton` + `MessagesHeaderButton` ## Soll-Zustand Neuer **`SettingsHeaderButton`** (Zahnrad, `lucide-react-native`'s `Settings`) erscheint **auf jedem Tab-Header, direkt links neben `MessagesHeaderButton`** — also global, nicht nur auf einem Tab. Tap öffnet `/settings` als normalen Stack-Push (Header mit Zurück-Pfeil, **kein Modal** — analog zur bestehenden "Suche", nicht analog zu "Neuer Beitrag"/"Neue Story", die als `presentation: "modal"` mit X-Button laufen). Die Bottom-Tab-Bar bleibt unverändert bei 4 Tabs und ist beim geöffneten Einstellungen-Screen **nicht sichtbar** (der Screen liegt außerhalb der `(tabs)`-Navigation, wie `search.tsx` schon heute). `pets.tsx` wird auf die reine Tier-Liste reduziert (+ "Tier hinzufügen"-Header-Button, den es schon gibt). Siehe `mobile-settings-header-icon-mockup.png`. ## Warum als eigenes, geplantes Feature (nicht als Direkt-Fix) Nach `WORKFLOW.md` §9a zählt das als "groß": neuer Screen + Header-Struktur-Änderung auf mehreren Tabs + mehrere verschobene Dateien — kein Einzeldatei-Bugfix. Läuft deshalb über Feature-Branch, nicht über die automatische Commit→OTA-Kette. ## Umsetzungsschritte ### 1. Neue Komponenten-Dateien (DRY, matcht bestehendes Muster wie `LanguageSwitcher.tsx`, `BreedPicker.tsx`, `PasswordField.tsx`) Extrahiere aus `pets.tsx` in eigene Dateien unter `src/components/settings/`: | Neue Datei | Enthält (aus `pets.tsx`) | |---|---| | `src/components/settings/AppearanceSection.tsx` | `AppearanceSection` | | `src/components/settings/LanguageSection.tsx` | `LanguageSection` (nutzt weiter die bestehende `LanguageSwitcher`) | | `src/components/settings/PetSuggestionsSection.tsx` | `PetSuggestionsSection` | | `src/components/settings/LegalSection.tsx` | `LegalSection` (inkl. der OTA-Anzeige) | | `src/components/settings/LogoutSection.tsx` | `LogoutSection` | | `src/components/settings/FooterErrorBoundary.tsx` | `FooterErrorBoundary` | Jede Datei bekommt ihre eigene `makeStyles(colors)`-Funktion (kein 1:1-Copy des kompletten, aktuell gemeinsamen Style-Objekts — nur die Keys, die die jeweilige Sektion wirklich braucht). **Nebenbei behoben:** `FooterErrorBoundary` wrapt aktuell nur `LogoutSection` — beim Umzug wird der **gesamte** Einstellungen-Inhalt in die Boundary gepackt (schließt die in der letzten Code-Review gefundene Lücke, dass `LegalSection`/`AppearanceSection` etc. ungeschützt rendern). ### 2. Neuer Screen (Stack, nicht Tab) `app/(app)/settings.tsx` (neu, **außerhalb** von `(tabs)/`) — komponiert die 6 obigen Bausteine in einer `ScrollView`, analog zu `search.tsx`s Aufbau. Kein eigener Header-Titel-Code nötig — der kommt aus der Stack-Screen-Registrierung (Schritt 3). ### 3. Screen-Registrierung `app/(app)/_layout.tsx` (der Stack, der auch `search`, `post-new`, `messages` etc. registriert): ```tsx <Stack.Screen name="settings" options={{ ...headerOptions, title: t("screens.settings") }} /> ``` Kein `presentation: "modal"`, kein `CloseModalButton` — normaler Push mit System-Zurück-Pfeil, wie `search`. ### 4. Neuer globaler Header-Button `app/(app)/(tabs)/_layout.tsx`: - Neue Komponente `SettingsHeaderButton` (Kopie des `MessagesHeaderButton`-Musters, navigiert per `router.push("/settings")`, Icon `Settings` aus `lucide-react-native`) - **Global-Default** (`screenOptions.headerRight`) ändern auf `() => <View style={styles.headerButtons}><SettingsHeaderButton /><MessagesHeaderButton /></View>` — greift für `notifications` (einziger Tab ohne eigenen Override) - **Feed** (`index`), **Explore**, **Pets** — ihre jeweiligen `headerRight`-Overrides bekommen `<SettingsHeaderButton />` direkt vor `<MessagesHeaderButton />` eingefügt (Reihenfolge wie im Mockup: [Tab-eigene Aktion(en)] → Zahnrad → Mailbox) ### 5. `pets.tsx` bereinigen - `ListFooterComponent` komplett entfernen (oder auf `null`) - Nicht mehr benötigte Imports entfernen (`Switch`, `Linking`, `Alert`, `Constants`, `Updates`, `Sentry`, `useAuth`, `LanguageSwitcher`, `env` — genau prüfen, was `PetRow` und die Haupt-Liste noch brauchen) - `makeStyles` in `pets.tsx` auf die tatsächlich noch verwendeten Keys eindampfen ### 6. i18n - `de.json`/`en.json`: neuer Key `screens.settings`: `"Einstellungen"` / `"Settings"` (matcht die bestehende `screens.search`/`screens.messages`-Konvention für Stack-Screen-Titel) - Keine weiteren neuen Strings — alle Sektions-Texte wandern unverändert mit ### 7. `mobile/found.md` Den offenen Punkt (siehe „Ursprung" oben) auf `[x]` setzen mit Verweis auf diesen Plan + Commit, sobald umgesetzt — inkl. kurzer Notiz, warum Header-Icon statt Tab gewählt wurde (Nutzungsfrequenz-Argument). ## Geschätzter Umfang - 6 neue Dateien unter `src/components/settings/` (~40–90 Zeilen je Sektion) - 1 neuer Screen (`app/(app)/settings.tsx`) - 3 geänderte Dateien: `app/(app)/_layout.tsx` (Screen-Registrierung), `app/(app)/(tabs)/_layout.tsx` (neuer Header-Button, 4 Stellen: global-default + Feed + Explore + Pets), `app/(app)/(tabs)/pets.tsx` (bereinigt) - 2 geänderte i18n-Dateien - 0 Backend-/Schema-Änderungen — reine Mobile-IA-Änderung ## Risiken / offene Fragen - **Kein RN-Testsetup** (bekannte Lücke) — Verifikation bleibt Typecheck + Lint + manueller Test am Handy, wie bisher. - **4 Einfügestellen für den Header-Button** (statt 1 Tab-Eintrag bei der verworfenen Variante) — etwas mehr Diff-Fläche, dafür überall konsistent erreichbar. Beim Umsetzen genau prüfen, dass `styles.headerButtons`' `gap: 16` bei 3 Icons (Feed: +Neu, Zahnrad, Mailbox) nicht zu eng wird auf schmalen Displays — ggf. `gap` leicht reduzieren oder Icon-Größe auf 20 statt 22 setzen. - **Deep Links**: falls irgendwo ein direkter Link auf `/pets` als "Settings-Ziel" existiert, kurz gegenprüfen (unwahrscheinlich, aber Teil der Umsetzung). ## Nächster Schritt Nach Freigabe: `git checkout -b feature/settings-header-icon`, Umsetzung gemäß Schritte 1–7, Verifikation + Code-Review pro Commit (WORKFLOW.md §5/§6), Merge nach `main` erst wenn komplett fertig — automatischer OTA-Publish greift dann erst beim Merge-Commit, nicht auf dem Feature-Branch (WORKFLOW.md §9a).
Author
Owner

Gemerged nach main (30c57b6).

Gemerged nach main (30c57b6).
admin closed this issue 2026-09-19 18:15:52 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/petfeed#36