Closes Gitea #36. Plan: ~/.claude/plans/mobile-settings-tab-extraction.md. Extracts the 5 footer sections pets.tsx had grown (Darstellung, Sprache, Tier-Vorschlaege opt-out, Rechtliches+Version/OTA, Abmelden) into their own files under src/components/settings/, and a new app/(app)/settings.tsx screen reached via a gear icon in every tab's header, next to Messages - not a 5th bottom tab. Chosen over a tab (see the two mockups in the plan folder) because Settings is a low-frequency destination for a typical user; the header icon still reaches it in one tap from anywhere without spending permanent bottom-nav space on it. settings.tsx lives outside (tabs)/, registered as a plain Stack.Screen (app/(app)/_layout.tsx) matching search.tsx's pattern - normal back-arrow push, no presentation:modal, no tab bar visible while it's open. SettingsHeaderButton is wired into (tabs)/_layout.tsx's global headerRight default plus the 3 tabs (index/explore/pets) that override it. pets.tsx is pet-list-only again. FooterErrorBoundary now wraps the whole Settings screen instead of only the logout button, closing a gap a prior code review found (AppearanceSection/LegalSection were rendering unprotected). Code-reviewed before commit (WORKFLOW.md step 6) - fixed two of three findings: extracted the section/sectionTitle style duplicated across AppearanceSection/LanguageSection/PetSuggestionsSection into a shared sectionTitleStyle.ts, and reduced every header icon's hitSlop 12->8 (rows can now hold 3 icons with gap:16; 12+12=24 overlapped the gap, 8+8=16 exactly meets it - see the comment on headerButtons in (tabs)/_layout.tsx). Left the pets.* i18n namespace as-is on the moved strings (documented in settings.tsx's doc comment) - pets.language* is shared with the pre-login LanguageSwitcher, so a partial rename would misdescribe those call sites. Typecheck + lint clean across all touched/new files, i18n key parity verified (de/en). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
15 lines
693 B
TypeScript
15 lines
693 B
TypeScript
import { getTypography, type ColorTokens } from "../../theme/tokens";
|
|
|
|
/**
|
|
* Shared "section label" chrome (the small uppercase-ish title above a
|
|
* Settings-screen section, e.g. "DARSTELLUNG"/"SPRACHE"). Extracted so
|
|
* AppearanceSection/LanguageSection/PetSuggestionsSection can't drift out of
|
|
* sync on this — they all had the exact same style object copy-pasted
|
|
* before this file existed (found during code review of the Settings-screen
|
|
* extraction, see mobile/found.md).
|
|
*/
|
|
export function sectionTitleStyle(colors: ColorTokens) {
|
|
const typography = getTypography(colors);
|
|
return { ...typography.label, textTransform: "none" as const, letterSpacing: 0, marginBottom: 10 };
|
|
}
|