NutsNews Settings Menu Update

This update reorganizes the footer Settings panel into a two-level menu.

Visual overview

Primary diagram

System map

This update reorganizes the footer Settings panel into a two-level menu.

Render the repository-owned system map when you need it.

Diagram is not rendered yet.

View as text

NutsNews Settings Menu Update

This update reorganizes the footer Settings panel into a two-level menu.

flowchart TB
  accTitle: NutsNews Settings Menu Update
  accDescr {
    This update reorganizes the footer Settings panel into a two-level menu.
  }
  A["NutsNews Settings Menu Update"] --> B["updates/README_SETTINGS_MENU_UPDATE.md"]
  B --> C["Auto-generated placeholder diagram"]

This update reorganizes the footer Settings panel into a two-level menu.

What changed

Settings now opens to a top-level menu.
Top-level menu items are Theme and Language.
Theme options moved into a dedicated Theme level.
Language options moved into a dedicated Language level.
Language badges now show country flags instead of text language codes.
Supported languages now include a flag field so future languages can be added cleanly.

Files changed

web/app/components/ThemeSwitcher.tsx
web/app/globals.css
web/lib/languages.ts

Validation

Run from web:

npm run lint
npx tsc --noEmit
npm run build

The Settings UI should behave like this:

Tap/click Settings.
See a top-level menu with Theme and Language.
Tap Theme to choose a theme.
Tap back to return to Settings.
Tap Language to choose English or Français.
Confirm the circular language badge shows 🇺🇸 or 🇫🇷 instead of EN or FR.