feat: add persistence for theme and layout settings

Author: ihmily

app/ui/navigation/sidebar.py

@@ -78,12 +78,20 @@ def load(self):
         self._ = self.app.language_manager.language.get("sidebar")
         self.rail = NavigationColumn(sidebar=self.sidebar, page=self.page, app=self.app)
 
-        self.dark_light_text = ft.Text(self._["light_theme"])
-        self.dark_light_icon = ft.IconButton(
-            icon=ft.Icons.BRIGHTNESS_2_OUTLINED,
-            tooltip=self._["toggle_night_theme"],
-            on_click=self.theme_changed,
-        )
+        if self.page.theme_mode == ft.ThemeMode.DARK:
+            self.dark_light_text = ft.Text(self._["dark_theme"])
+            self.dark_light_icon = ft.IconButton(
+                icon=ft.Icons.BRIGHTNESS_HIGH_OUTLINED,
+                tooltip=self._["toggle_day_theme"],
+                on_click=self.theme_changed,
+            )
+        else:
+            self.dark_light_text = ft.Text(self._["light_theme"])
+            self.dark_light_icon = ft.IconButton(
+                icon=ft.Icons.BRIGHTNESS_2_OUTLINED,
+                tooltip=self._["toggle_night_theme"],
+                on_click=self.theme_changed,
+            )
 
         colors_list = [
             ("deeppurple", "Deep purple"),
@@ -144,11 +152,14 @@ async def theme_changed(self, _):
             self.dark_light_text.value = self._["dark_theme"]
             self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_HIGH_OUTLINED
             self.dark_light_icon.tooltip = self._["toggle_day_theme"]
+            self.app.settings.user_config["theme_mode"] = "dark"
         else:
             page.theme_mode = ft.ThemeMode.LIGHT
             self.dark_light_text.value = self._["light_theme"]
             self.dark_light_icon.icon = ft.Icons.BRIGHTNESS_2_OUTLINED
             self.dark_light_icon.tooltip = self._["toggle_night_theme"]
+            self.app.settings.user_config["theme_mode"] = "light"
+        self.page.run_task(self.app.config_manager.save_user_config, self.app.settings.user_config)
         await self.on_theme_change()
         page.update()
 

app/ui/themes/theme.py

@@ -22,7 +22,9 @@ def seed_color_changed(self, e):
 
     def save_theme_color(self, e):
         page = e.page
-        page.client_storage.set("theme_color", self.data)
+        app = page.data
+        app.settings.user_config["theme_color"] = self.data
+        page.run_task(app.config_manager.save_user_config, app.settings.user_config)
 
 
 def create_light_theme(custom_font: str) -> ft.Theme:

app/ui/themes/theme_manager.py

@@ -8,6 +8,7 @@
 class ThemeManager:
     def __init__(self, app):
         self.page = app.page
+        self.app = app
         self.custom_font = None
         self.theme_color = None
         self.assets_dir = app.assets_dir
@@ -30,21 +31,15 @@ async def apply_initial_theme(self):
         """Apply initial theme based on saved settings or default to light theme."""
         self.page.theme = create_light_theme(self.custom_font)
         self.page.dark_theme = create_dark_theme(self.custom_font)
-        try:
-            self.theme_color = await self.page.client_storage.get_async("theme_color")
-            if self.theme_color is not None:
-                await self.update_theme_color(self.theme_color)
-                return
-        except Exception:
-            pass
-        await self.update_theme_color("blue")
+        
+        self.theme_color = self.app.settings.user_config.get("theme_color", "blue")
+        await self.update_theme_color(self.theme_color)
 
     async def update_theme_color(self, color):
         """Update the current theme color scheme and save it."""
         self.page.theme.color_scheme_seed = color
         self.page.theme.color_scheme = ft.ColorScheme(primary=color)
         self.page.update()
-        try:
-            await self.page.client_storage.set_async("theme_color", color)
-        except Exception:
-            pass
+        
+        self.app.settings.user_config["theme_color"] = color
+        self.page.run_task(self.app.config_manager.save_user_config, self.app.settings.user_config)

app/ui/views/home_view.py

@@ -17,7 +17,7 @@ def __init__(self, app):
         self.page_name = "home"
         self.recording_card_area = None
         self.add_recording_dialog = None
-        self.is_grid_view = False
+        self.is_grid_view = app.settings.user_config.get("is_grid_view", False)
         self.loading_indicator = None
         self.app.language_manager.add_observer(self)
         self.load_language()
@@ -36,8 +36,24 @@ def init(self):
             visible=False
         )
 
+        if self.is_grid_view:
+            initial_content = ft.GridView(
+                expand=True,
+                runs_count=3,
+                spacing=10,
+                run_spacing=10,
+                child_aspect_ratio=2.3,
+                controls=[]
+            )
+        else:
+            initial_content = ft.Column(
+                controls=[], 
+                spacing=10, 
+                expand=True
+            )
+        
         self.recording_card_area = ft.Container(
-            content=ft.Column(controls=[], spacing=10, expand=True),
+            content=initial_content,
             expand=True
         )
         self.add_recording_dialog = RecordingDialog(self.app, self.add_recording)
@@ -51,6 +67,9 @@ async def load(self):
         self.recording_card_area.content.controls.clear()
         await self.add_record_cards()
 
+        if self.is_grid_view:
+            await self.recalculate_grid_columns()
+        
         self.page.on_keyboard_event = self.on_keyboard
         self.page.on_resized = self.update_grid_layout
 
@@ -86,6 +105,9 @@ async def toggle_view_mode(self, _):
         self.content_area.clean()
         self.content_area.controls.extend([self.create_home_title_area(), self.create_home_content_area()])
         self.content_area.update()
+        
+        self.app.settings.user_config["is_grid_view"] = self.is_grid_view
+        self.page.run_task(self.app.config_manager.save_user_config, self.app.settings.user_config)
 
     def create_home_title_area(self):
         return ft.Row(
@@ -196,8 +218,7 @@ async def create_card_with_time_range(_recording: Recording):
 
         if existing_cards:
             self.recording_card_area.content.controls.extend(existing_cards)
-        
-        
+
         self.loading_indicator.visible = False
         self.loading_indicator.update()
         self.recording_card_area.update()
@@ -315,7 +336,6 @@ async def refresh_cards_on_click(self, _e):
             self.recording_card_area.controls.remove(card["card"])
         await self.show_all_cards()
 
-        
         self.loading_indicator.visible = False
         self.loading_indicator.update()
 

config/default_settings.json

@@ -52,5 +52,8 @@
     "email_password": "",
     "sender_email": "",
     "sender_name": "",
-    "recipient_email": ""
+    "recipient_email": "",
+    "theme_color": "blue",
+    "is_grid_view": false,
+    "theme_mode": "light"
 }

main.py

@@ -81,14 +81,21 @@ def disconnect(_: ft.ControlEvent) -> None:
 def main(page: ft.Page) -> None:
 
     page.title = "StreamCap"
-    page.theme_mode = ft.ThemeMode.LIGHT
     page.window.min_width = MIN_WIDTH
     page.window.min_height = MIN_WIDTH * WINDOW_SCALE
 
     is_web = args.web or platform == "web"
     setup_window(page, is_web)
 
     app = App(page)
+    page.data = app
+    
+    theme_mode = app.settings.user_config.get("theme_mode", "light")
+    if theme_mode == "dark":
+        page.theme_mode = ft.ThemeMode.DARK
+    else:
+        page.theme_mode = ft.ThemeMode.LIGHT
+    
     save_progress_overlay = SaveProgressOverlay(app)
     page.overlay.append(save_progress_overlay.overlay)