Menu ▾ ▴

#10 Redesign settings into a tabbed GUI (tabs on top)

closed
nobody
None
2026-06-29
2026-06-28
Anonymous
No

Originally created by: kristofferR

Summary

Redesigns the settings window from a single flat scrolling list into a tabbed GUI with the tab strip pinned to the top, modeled on IPTVChecker's settings panel: stacked icon + label tabs, each tab a grouped panel of related options.

Ref [#9]

Tabs

Tab Icon Settings
General sliders Theme, Compact Mode, Hide Names & Avatars, Always on Top, Hide on Close, Spell check
Tray & Startup power Show System Tray, Start to Tray, Start on System Startup, Menu Bar Only
Notifications bell Unread Badge, Badge counts
Advanced wrench Multi Instance

Details

  • Pure dist/settings.html change — vanilla HTML/CSS/JS, no dependency and no build step, consistent with the existing window.
  • Inline lucide-style SVG icons (no icon library pulled in).
  • Active tab is remembered across opens via localStorage.
  • No backend changes: same get_settings / set_settings / reset_settings / check_for_updates IPC calls, and the same footer (version, status, "Reset to defaults", "Check for updates"). All 13 controls (Theme + Badge-counts dropdowns + 11 toggles) are preserved — nothing dropped.
  • The in-body "Carrier settings" header is dropped (redundant with the native window title bar); the fixed 460×620 window size is unchanged.

Rebased on main — picks up settings merged since this PR opened

Rebased onto current main (resolves the prior conflict) and surfaces the two settings that landed after this branch was cut, so the tabbed UI is no longer stale:

  • Hide Names & Avatars (hide_names_avatars, merged [#22]) → General tab.
  • Badge counts (badge_mode: unread messages vs conversations, merged [#11]) → Notifications tab, as a dropdown under Unread Badge that disables when the badge is off.

Both reuse a small shared selectRow() helper (Theme + Badge counts), and a CUSTOM_ROWS registry routes the two <select> pseudo-fields; everything else stays a checkbox.

Test plan

  • [x] node --check on the inline script — passes
  • [x] Rendered at the real 460×620 size (light + dark): tabs on top, active highlight, "Tray & Startup" fits one line
  • [x] All four tabs render their correct grouped fields (incl. Hide Names & Avatars and the Badge-counts dropdown)
  • [x] Toggling a setting persists (Saved.) and re-renders; "Reset to defaults" works
  • [ ] Smoke-test in the running app: bun run tauri dev → open Settings

Notes

  • Tab names / grouping are open to bikeshedding (see [#9]).
  • The notification-privacy settings in open PR [#21] (mute_notifications, hide_notification_preview) are intentionally not included here — their backend isn't on main yet. They'll be reconciled into the Notifications tab whenever [#21] lands (the tab has headroom for them).

Summary by CodeRabbit

  • New Features
  • Reworked Carrier Settings into a tabbed layout with an icon-and-label navigation strip pinned at the top.
  • Added persistent tab selection (remembers the last active tab).
  • Improvements
  • Updated the settings layout to render only fields relevant to the selected tab.
  • Improved accessibility for tab navigation and restyled the “Check for updates” action.
  • Refined theme and badge controls: badge options are disabled when the related badge toggle is turned off.

Related

Tickets: #11
Tickets: #21
Tickets: #22
Tickets: #9

Discussion

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: chatgpt-codex-connector[bot]

    You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
    To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

     

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: coderabbitai[bot]

    Review Change Stack

    No actionable comments were generated in the recent review. 🎉

    ℹ️ Recent review info
    ⚙️ Run configuration **Configuration used**: Path: .coderabbit.yaml **Review profile**: ASSERTIVE **Plan**: Pro **Run ID**: `ad2c7780-a0b1-4826-9f80-1679db083729`
    📥 Commits Reviewing files that changed from the base of the PR and between [8f3190] and f2e402e63ad35a23c0b9ce29b3398c4ec18484df.
    📒 Files selected for processing (1) * `dist/settings.html`
    📝 Walkthrough ## Walkthrough `dist/settings.html` is refactored from a single vertical form into a tabbed settings UI with four tabs. The page gains tab strip styling and structure, and the JavaScript now groups fields by tab, persists the active tab, and renders tab-specific rows. ## Changes **Tabbed Settings UI** | Layer / File(s) | Summary | |---|---| | **Tab strip CSS and HTML structure**
    `dist/settings.html` | Adds `.tabs` and `.tab` styling with active, hover, and dark-mode states, and replaces the header with `nav#tabs` plus `main#rows`. | | **Data model, tabs, and render logic**
    `dist/settings.html` | Builds `FIELD_META`, `ICONS`, and `TABS`, loads `activeTab` from `localStorage`, and replaces the always-rendered form with tab selection, keyboard navigation, and tab-specific row rendering. | ## Estimated code review effort 🎯 2 (Simple) | ⏱️ ~10 minutes ## Possibly related issues - [kristofferR/Carrier#9](https://github.com/kristofferR/Carrier/issues/9): The PR implements the tabbed settings redesign with grouped sections and icon-labeled tabs described in the issue. ## Poem > 🐇 Hop, hop—four tabs in a row, > Settings now have a tidy glow. > Icons wink and badges stay, > The bunny found a neater way.
    🚥 Pre-merge checks | ✅ 5
    ✅ Passed checks (5 passed) | Check name | Status | Explanation | | :------------------------: | :------- | :------------------------------------------------------------------------------------------------------------ | | Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. | | Title check | ✅ Passed | The title clearly summarizes the main change: converting settings to a tabbed interface with tabs at the top. | | Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. | | Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. | | Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
    ✨ Finishing Touches
    🧪 Generate unit tests (beta) - [ ] Create PR with unit tests - [ ] Commit unit tests in branch `feature/tabbed-settings`

    Comment @coderabbitai help to get the list of available commands.

     

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: coderabbitai[bot]

    ✅ Action performed Review finished. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
     

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-28

    Originally posted by: coderabbitai[bot]

    ✅ Action performed Review finished. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: coderabbitai[bot]

    ✅ Action performed Review finished. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: coderabbitai[bot]

    ✅ Action performed Review finished. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: kristofferR

    @coderabbitai review

     

  • Anonymous

    Anonymous - 2026-06-29

    Originally posted by: coderabbitai[bot]

    ✅ Action performed Review finished. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.
     

  • Anonymous

    Anonymous - 2026-06-29

    Ticket changed by: kristofferR

    • status: open --> closed
     

Log in to post a comment.

veeam logo