#9 Redesign settings window to IPTVChecker's tabbed GUI (tabs on top)

[Anonymous]

Originally created by: kristofferR

Summary

Redesign the Carrier settings window to use the tabbed GUI from IPTVChecker — a macOS-style tab bar on top with stacked icon + label tabs, where each tab groups related settings into sections. Right now Carrier's settings is a single flat scrolling list, which is fine at ~11 options but is already getting unwieldy and doesn't scale as more settings are added.

Current state

dist/settings.html renders one undifferentiated list: a Theme dropdown followed by 10 checkbox rows (Always on Top, Show System Tray, Start to Tray, Start on System Startup, Hide on Close, Unread Badge, Compact Mode, Menu Bar Only, Spell check, Multi Instance), plus a footer (version, status, "Reset to defaults", "Check for updates"). It's plain vanilla HTML/CSS/JS talking to Tauri via invoke — no framework, no grouping.

Target design (IPTVChecker)

IPTVChecker's settings window uses a horizontal tab strip pinned to the top, each tab a stacked icon over label button (lucide icons), with the active tab highlighted. Selecting a tab swaps the body, which shows grouped <section> blocks of related controls. It lives in its own native window. See src/components/SettingsPanel.tsx in that repo for the reference implementation (tabs: General / Scanning / Screenshots / Network / Advanced).

Proposal

Adopt the same layout in Carrier's settings window:

• Tab bar on top: stacked icon + label, active-tab highlight, matching the Messenger/native look already used in settings.html.
• Group the existing options into tabs, e.g.:
• General — Theme, Compact Mode, Always on Top, Spell check
• Tray & Startup — Show System Tray, Start to Tray, Start on System Startup, Hide on Close, Menu Bar Only
• Notifications — Unread Badge
• Advanced — Multi Instance, Reset to defaults
• Keep the footer (version, status, "Check for updates").
• No backend changes needed — same get_settings / set_settings / reset_settings / check_for_updates commands; this is purely the settings frontend.

Notes / open questions

• Carrier's settings is vanilla static HTML (no React/Tailwind), unlike IPTVChecker. So this is a port of the layout/UX, not a literal code copy — implement the tab strip + section grouping in plain HTML/CSS/JS to stay consistent with the existing window, unless we decide it's worth introducing a build step.
• Final tab names and grouping are a proposal — open to bikeshedding.
• Pick an icon set: inline SVGs (no dependency) vs. pulling in lucide.

[Anonymous]

Ticket changed by: kristofferR

• status: open --> closed

[Anonymous]

Originally posted by: kristofferR

Done — implemented in [#10] (merged to main). The Settings window is now a tabbed GUI with the tabs along the top (General · Tray & Startup · Notifications · Advanced).