Add interactive settings and help menu to StatusBar

- Introduced new items in the StatusBar for settings, profile, and help, enhancing user accessibility.
- Implemented hover effects for the help menu and added corresponding click handlers for help-related actions.
- Updated color scheme for the status bar to match the sidebar for a cohesive look.
- Adjusted font sizes in various views for consistency and improved readability.

Author: clstaudt

tuttle/app/core/status_bar.py

@@ -9,11 +9,15 @@
 from dataclasses import dataclass
 
 from flet import (
+    Border,
+    BorderSide,
     Container,
     Icon,
     Icons,
     Margin,
     Padding,
+    PopupMenuButton,
+    PopupMenuItem,
     Row,
     Text,
     MainAxisAlignment,
@@ -136,6 +140,10 @@ def __init__(
         on_click_expiring: Optional[Callable] = None,
         on_click_sync: Optional[Callable] = None,
         on_click_quick_add: Optional[Callable] = None,
+        on_click_settings: Optional[Callable] = None,
+        on_click_profile: Optional[Callable] = None,
+        on_click_help_ask: Optional[Callable] = None,
+        on_click_help_bug: Optional[Callable] = None,
     ):
         self._on_click_overdue = on_click_overdue
         self._on_click_outstanding = on_click_outstanding
@@ -186,21 +194,107 @@ def __init__(
         self._right_divider = StatusBarDivider()
         self._right_divider.visible = False
 
+        # ── Chrome zone — settings, profile, help (left side) ──
+        self._chrome_divider = StatusBarDivider()
+
+        self.settings_item = StatusBarItem(
+            icon=Icons.SETTINGS_OUTLINED,
+            tooltip="Preferences",
+            on_click=on_click_settings,
+            color=colors.text_muted,
+        )
+        self.profile_item = StatusBarItem(
+            icon=Icons.PERSON_OUTLINE_OUTLINED,
+            tooltip="Profile",
+            on_click=on_click_profile,
+            color=colors.text_muted,
+        )
+        self.help_menu = PopupMenuButton(
+            content=Container(
+                padding=Padding.symmetric(horizontal=dimens.STATUSBAR_ITEM_PADDING_H),
+                border_radius=dimens.RADIUS_SM,
+                content=Row(
+                    controls=[
+                        Icon(
+                            Icons.HELP_OUTLINE,
+                            size=dimens.SM_ICON_SIZE,
+                            color=colors.text_muted,
+                        ),
+                    ],
+                    spacing=0,
+                    vertical_alignment=CrossAxisAlignment.CENTER,
+                ),
+                on_hover=lambda e: self._on_help_hover(e),
+            ),
+            tooltip="Help",
+            menu_padding=Padding.symmetric(vertical=4, horizontal=0),
+            items=[
+                PopupMenuItem(
+                    height=32,
+                    content=Row(
+                        controls=[
+                            Icon(
+                                Icons.CONTACT_SUPPORT,
+                                size=dimens.SM_ICON_SIZE,
+                                color=colors.text_secondary,
+                            ),
+                            Text(
+                                "Ask a question",
+                                size=fonts.BODY_2_SIZE,
+                                color=colors.text_primary,
+                            ),
+                        ],
+                        spacing=dimens.SPACE_XS,
+                        vertical_alignment=CrossAxisAlignment.CENTER,
+                    ),
+                    on_click=on_click_help_ask,
+                ),
+                PopupMenuItem(
+                    height=32,
+                    content=Row(
+                        controls=[
+                            Icon(
+                                Icons.BUG_REPORT,
+                                size=dimens.SM_ICON_SIZE,
+                                color=colors.text_secondary,
+                            ),
+                            Text(
+                                "Report a bug",
+                                size=fonts.BODY_2_SIZE,
+                                color=colors.text_primary,
+                            ),
+                        ],
+                        spacing=dimens.SPACE_XS,
+                        vertical_alignment=CrossAxisAlignment.CENTER,
+                    ),
+                    on_click=on_click_help_bug,
+                ),
+            ],
+        )
+
         # Initialized to None; set by build()
         self.bar: Optional[Container] = None
 
+    def _on_help_hover(self, e):
+        """Hover effect for the help menu button."""
+        e.control.bgcolor = "#20FFFFFF" if e.data == "true" else None
+        e.control.update()
+
     def build(self) -> Container:
         """Build the status bar container."""
         self.bar = Container(
             height=dimens.FOOTER_HEIGHT,
             bgcolor=colors.bg_statusbar,
+            border=Border(top=BorderSide(1, colors.border)),
             padding=Padding.symmetric(horizontal=dimens.SPACE_XS),
             content=Row(
                 controls=[
-                    # Left zone
+                    # Left zone — chrome icons
                     Row(
                         controls=[
-                            self.entity_count_item,
+                            self.settings_item,
+                            self.profile_item,
+                            self.help_menu,
                         ],
                         spacing=0,
                         vertical_alignment=CrossAxisAlignment.CENTER,
@@ -237,12 +331,10 @@ def build(self) -> Container:
 
     def update_for_view(
         self,
-        entity_count_text: str,
+        entity_count_text: str = "",
         summary_text: str = "",
     ):
-        """Update status bar text for the currently active view."""
-        self.entity_count_item.set_text(entity_count_text)
-
+        """Update status bar for the currently active view."""
         if summary_text:
             self.entity_summary_item.set_text(summary_text)
             self.entity_summary_item.visible = True

tuttle/app/core/views.py

@@ -1450,8 +1450,7 @@ def __init__(self, params: TViewParams):
             controls=[
                 THeading(
                     f"My {self.entity_name_plural.title()}",
-                    size=fonts.HEADLINE_2_SIZE,
-                    color=colors.text_secondary,
+                    size=fonts.HEADLINE_3_SIZE,
                 ),
             ]
             + ([sort_control] if sort_control else []),

tuttle/app/dashboard/view.py

@@ -223,12 +223,7 @@ def build(self):
                 content=Column(
                     spacing=dimens.SPACE_XS,
                     controls=[
-                        Text(
-                            "Dashboard",
-                            size=fonts.HEADLING_1_SIZE,
-                            color=colors.text_primary,
-                            weight=fonts.BOLDER_FONT,
-                        ),
+                        views.THeading("Dashboard", size=fonts.HEADLINE_3_SIZE),
                         Row(
                             alignment=MainAxisAlignment.CENTER,
                             controls=[self._spinner],

tuttle/app/home/view.py

@@ -4,20 +4,16 @@
 from dataclasses import dataclass
 
 from flet import (
-    Alignment,
     Border,
     BorderSide,
     Column,
     Container,
     ElevatedButton,
     Icon,
-    IconButton,
     Icons,
     Margin,
     NavigationRailDestination,
     Padding,
-    PopupMenuButton,
-    PopupMenuItem,
     ResponsiveRow,
     Row,
     Text,
@@ -45,87 +41,6 @@
 from ..preferences.intent import PreferencesIntent
 
 
-def get_toolbar(
-    on_click_new_btn: Callable,
-    on_click_profile_btn: Callable,
-    on_view_settings_clicked: Callable,
-):
-    """Slim toolbar — actions only, no redundant title."""
-    new_btn = TextButton(
-        content=Row(
-            controls=[
-                Icon(
-                    Icons.ADD,
-                    size=dimens.SM_ICON_SIZE,
-                    color=colors.accent,
-                ),
-                Text(
-                    "New",
-                    size=fonts.BODY_1_SIZE,
-                    color=colors.accent,
-                    weight=fonts.BOLD_FONT,
-                ),
-            ],
-            spacing=dimens.SPACE_XXS,
-        ),
-        on_click=on_click_new_btn,
-    )
-    toolbar = Container(
-        alignment=Alignment.CENTER,
-        height=dimens.TOOLBAR_HEIGHT,
-        bgcolor=colors.bg,
-        padding=Padding.symmetric(horizontal=dimens.SPACE_LG),
-        content=Row(
-            alignment=MainAxisAlignment.END,
-            vertical_alignment=CrossAxisAlignment.CENTER,
-            controls=[
-                Row(
-                    spacing=dimens.SPACE_XXS,
-                    controls=[
-                        new_btn,
-                        IconButton(
-                            icon=Icons.SETTINGS_OUTLINED,
-                            icon_size=dimens.ICON_SIZE,
-                            icon_color=colors.text_muted,
-                            on_click=on_view_settings_clicked,
-                            tooltip="Preferences",
-                        ),
-                        IconButton(
-                            icon=Icons.PERSON_OUTLINE_OUTLINED,
-                            icon_size=dimens.ICON_SIZE,
-                            icon_color=colors.text_muted,
-                            tooltip="Profile",
-                            on_click=on_click_profile_btn,
-                        ),
-                        PopupMenuButton(
-                            icon=Icons.HELP_OUTLINE,
-                            icon_size=dimens.ICON_SIZE,
-                            icon_color=colors.text_secondary,
-                            items=[
-                                PopupMenuItem(
-                                    icon=Icons.CONTACT_SUPPORT,
-                                    content="Ask a question",
-                                    on_click=lambda _: webbrowser.open(
-                                        "https://github.com/tuttle-dev/tuttle/discussions"
-                                    ),
-                                ),
-                                PopupMenuItem(
-                                    icon=Icons.BUG_REPORT,
-                                    content="Report a bug",
-                                    on_click=lambda _: webbrowser.open(
-                                        "https://github.com/tuttle-dev/tuttle/issues"
-                                    ),
-                                ),
-                            ],
-                        ),
-                    ],
-                ),
-            ],
-        ),
-    )
-    return toolbar, new_btn
-
-
 class MainMenuItemsHandler:
     """Manages home's main-menu items."""
 
@@ -272,21 +187,39 @@ def __init__(self, params: TViewParams):
         self.status_bar_manager = StatusBarManager(
             on_click_overdue=lambda e: self._jump_to_invoicing(),
             on_click_outstanding=lambda e: self._jump_to_invoicing(),
+            on_click_settings=lambda e: self.on_view_settings_clicked(e),
+            on_click_profile=lambda e: self.on_click_profile(e),
+            on_click_help_ask=lambda _: webbrowser.open(
+                "https://github.com/tuttle-dev/tuttle/discussions"
+            ),
+            on_click_help_bug=lambda _: webbrowser.open(
+                "https://github.com/tuttle-dev/tuttle/issues"
+            ),
         )
 
-        # Toolbar (slim, no title — view heading is the title)
-        self.toolbar, self._new_btn = get_toolbar(
-            on_click_new_btn=self.on_click_add_new,
-            on_click_profile_btn=self.on_click_profile,
-            on_view_settings_clicked=self.on_view_settings_clicked,
+        # "+ New" button (shown only for views that support creating entities)
+        self._new_btn = TextButton(
+            content=Row(
+                controls=[
+                    Icon(Icons.ADD, size=dimens.SM_ICON_SIZE, color=colors.accent),
+                    Text(
+                        "New",
+                        size=fonts.BODY_1_SIZE,
+                        color=colors.accent,
+                        weight=fonts.BOLD_FONT,
+                    ),
+                ],
+                spacing=dimens.SPACE_XXS,
+            ),
+            on_click=self.on_click_add_new,
         )
         self._update_new_btn_visibility()
 
     def _on_sidebar_item_selected(self, item: views.NavigationMenuItem):
         """Called when the user clicks a sidebar nav item."""
         self._selected_flat_index = self._all_items.index(item)
         self.destination_view = item.destination
-        self.destination_content_container.content = self.destination_view
+        self._destination_wrapper.content = self.destination_view
         self._update_new_btn_visibility()
         self._update_status_bar_for_view(item.label)
         self.update_self()
@@ -323,26 +256,33 @@ def on_click_profile(self, e):
 
     # ── Build ─────────────────────────────────────────────────
     def build(self):
-        self.destination_content_container = Container(
-            padding=Padding.all(dimens.SPACE_MD),
+        self._destination_wrapper = Container(
             content=self.destination_view,
             expand=True,
         )
-
-        # Status bar — VS Code style thin bar at bottom
-        self.status_bar = Container(
-            height=dimens.FOOTER_HEIGHT,
-            bgcolor=colors.bg_statusbar,
-            padding=Padding.symmetric(horizontal=dimens.SPACE_SM),
-            content=Row(
+        self.destination_content_container = Container(
+            padding=Padding.only(
+                left=dimens.SPACE_MD,
+                right=dimens.SPACE_MD,
+                bottom=dimens.SPACE_MD,
+                top=dimens.SPACE_XS,
+            ),
+            content=Column(
                 controls=[
-                    Text("Tuttle", size=11, color=colors.text_inverse),
+                    Row(
+                        controls=[self._new_btn],
+                        alignment=MainAxisAlignment.END,
+                    ),
+                    self._destination_wrapper,
                 ],
-                alignment=MainAxisAlignment.START,
-                vertical_alignment=CrossAxisAlignment.CENTER,
+                spacing=0,
             ),
+            expand=True,
         )
 
+        # Status bar — interactive bar built by StatusBarManager
+        self.status_bar = self.status_bar_manager.build()
+
         # Sidebar
         self.side_bar = Container(
             width=dimens.SIDEBAR_WIDTH,
@@ -363,7 +303,6 @@ def build(self):
             horizontal_alignment=CrossAxisAlignment.START,
             spacing=0,
             controls=[
-                self.toolbar,
                 self.destination_content_container,
             ],
         )

tuttle/app/invoicing/view.py

@@ -950,7 +950,7 @@ def build(self):
 
         self.title_control = Row(
             controls=[
-                views.THeading(title="Invoicing", size=fonts.HEADLINE_2_SIZE),
+                views.THeading(title="Invoicing", size=fonts.HEADLINE_3_SIZE),
             ],
         )