fix: font resizing (#25)

* fix: adding CSS 'breakpoints' + rescale logic for responsive appearance

* fix: working on more font-resizing logic

* fix: adding more rescaling logic

Author: Mandy-cyber

ipod_wrapped/backend/constants.py

@@ -32,6 +32,91 @@
 DEFAULT_DB_PATH = STORAGE_DIR / "ipod_wrapped.db"
 DEFAULT_ALBUM_ART_DIR = STORAGE_DIR / "album_art"
 
+# responsive scaling - default sizes and per-tier sizes
+DEFAULT_SCALE_TIER = 'scale-compact'
+
+DEFAULT_ALBUM_IMAGE_SIZE = 120
+DEFAULT_GENRE_TAG_SIZE = 50
+DEFAULT_GENRE_RIGHT_PANE_WIDTH = 215
+DEFAULT_GENRE_HEADER_IMAGE_SIZE = 70
+DEFAULT_GENRE_SONG_IMAGE_SIZE = 30
+DEFAULT_SONG_INFO_IMAGE_SIZE = 120
+
+ALBUM_IMAGE_SIZES = {
+    'scale-compact': DEFAULT_ALBUM_IMAGE_SIZE,
+    'scale-medium': 156,
+    'scale-large': 240,
+}
+GENRE_TAG_SIZES = {
+    'scale-compact': DEFAULT_GENRE_TAG_SIZE,
+    'scale-medium': 65,
+    'scale-large': 100,
+}
+GENRE_RIGHT_PANE_WIDTHS = {
+    'scale-compact': DEFAULT_GENRE_RIGHT_PANE_WIDTH,
+    'scale-medium': 280,
+    'scale-large': 430,
+}
+GENRE_HEADER_IMAGE_SIZES = {
+    'scale-compact': DEFAULT_GENRE_HEADER_IMAGE_SIZE,
+    'scale-medium': 91,
+    'scale-large': 140,
+}
+GENRE_SONG_IMAGE_SIZES = {
+    'scale-compact': DEFAULT_GENRE_SONG_IMAGE_SIZE,
+    'scale-medium': 39,
+    'scale-large': 60,
+}
+SONG_INFO_IMAGE_SIZES = {
+    'scale-compact': DEFAULT_SONG_INFO_IMAGE_SIZE,
+    'scale-medium': 156,
+    'scale-large': 240,
+}
+DEFAULT_VISUAL_LIST_ART_SIZE = 40
+DEFAULT_VISUAL_LIST_ROW_HEIGHT = 50
+DEFAULT_VISUAL_LIST_NUM_WIDTH = 30
+DEFAULT_VISUAL_SUMMARY_ART_SIZE = 100
+
+VISUAL_LIST_ART_SIZES = {
+    'scale-compact': DEFAULT_VISUAL_LIST_ART_SIZE,
+    'scale-medium': 52,
+    'scale-large': 64,
+}
+VISUAL_LIST_ROW_HEIGHTS = {
+    'scale-compact': DEFAULT_VISUAL_LIST_ROW_HEIGHT,
+    'scale-medium': 65,
+    'scale-large': 75,
+}
+VISUAL_LIST_NUM_WIDTHS = {
+    'scale-compact': DEFAULT_VISUAL_LIST_NUM_WIDTH,
+    'scale-medium': 39,
+    'scale-large': 48,
+}
+VISUAL_SUMMARY_ART_SIZES = {
+    'scale-compact': DEFAULT_VISUAL_SUMMARY_ART_SIZE,
+    'scale-medium': 130,
+    'scale-large': 160,
+}
+DEFAULT_VISUAL_LIST_MAX_CHARS = 25
+DEFAULT_VISUAL_SUMMARY_MAX_CHARS = 20
+DEFAULT_VISUAL_PAGE_MARGIN = 40
+
+VISUAL_LIST_MAX_CHARS = {
+    'scale-compact': DEFAULT_VISUAL_LIST_MAX_CHARS,
+    'scale-medium': 32,
+    'scale-large': 40,
+}
+VISUAL_SUMMARY_MAX_CHARS = {
+    'scale-compact': DEFAULT_VISUAL_SUMMARY_MAX_CHARS,
+    'scale-medium': 25,
+    'scale-large': 35,
+}
+VISUAL_PAGE_MARGINS = {
+    'scale-compact': DEFAULT_VISUAL_PAGE_MARGIN,
+    'scale-medium': 50,
+    'scale-large': 60,
+}
+
 # lastfm
 lastfm_root = 'http://ws.audioscrobbler.com'
 user_auth_root = 'http://www.last.fm/api/auth'

ipod_wrapped/frontend/app.py

@@ -7,7 +7,15 @@
 import gi
 gi.require_version('Gtk', '4.0')
 gi.require_version('Adw', '1')
-from gi.repository import Gtk, Gdk, Adw
+from gi.repository import Gtk, Gdk, Gio, GLib, Adw
+
+# responsive scaling tiers
+SCALE_TIERS = [
+    ('scale-compact', 0, 750),
+    ('scale-medium', 750, 1100),
+    ('scale-large', 1100, float('inf')),
+]
+BASE_WIDTH = 650
 
 from .pages import AlbumsPage, SongsPage, WrappedPage, GenresPage
 from .widgets.bottom_bar import create_bottom_bar
@@ -121,8 +129,43 @@ def __init__(self, app, db_type="local", db_path=DEFAULT_DB_PATH, album_art_dir=
         # place banners (flush with bottom of window)
         main_box.append(self.error_banner)
         main_box.append(self.success_banner)
-            
-    
+
+        # responsive scaling
+        self.current_tier = None
+        self._pending_tier_update = False
+
+    def _get_tier(self, width: int) -> str:
+        """Get the scale tier name for the given width"""
+        for name, min_w, max_w in SCALE_TIERS:
+            if min_w <= width < max_w:
+                return name
+        return 'scale-compact'
+
+    def do_size_allocate(self, width, height, baseline):
+        Adw.ApplicationWindow.do_size_allocate(self, width, height, baseline)
+        tier = self._get_tier(width)
+        if tier != self.current_tier and not self._pending_tier_update:
+            self._pending_tier_update = True
+            GLib.idle_add(self._apply_tier, tier)
+
+    def _apply_tier(self, tier) -> bool:
+        """Handle window resize by swapping scale tier CSS class"""
+        self._pending_tier_update = False
+
+        # swap CSS class on the window
+        for widget in (self, self.stack):
+            if self.current_tier:
+                widget.remove_css_class(self.current_tier)
+            widget.add_css_class(tier)
+        self.current_tier = tier
+
+        # rescale page images
+        for page in (self.genres_page, self.albums_page, self.songs_page, self.wrapped_page):
+            if hasattr(page, 'rescale'):
+                page.rescale(tier)
+
+        return False
+
     def refresh_all_pages(self) -> None:
         """Refresh all pages after data has been updated"""
         # refresh genres page
@@ -162,7 +205,10 @@ def toggle_bottom_bar(self) -> None:
 class iPodWrappedApp(Adw.Application):
     """GTK Application wrapper"""
     def __init__(self):
-        super().__init__(application_id="com.mandycyber.iPodWrapped")
+        super().__init__(
+            application_id="com.mandycyber.iPodWrapped",
+            flags=Gio.ApplicationFlags.NON_UNIQUE
+        )
 
     def do_activate(self):
         # force dark mode

ipod_wrapped/frontend/pages/albums_page.py

@@ -4,6 +4,7 @@
 from gi.repository import Gtk, GLib, Adw
 
 from backend import grab_all_metadata, has_data
+from backend.constants import DEFAULT_ALBUM_IMAGE_SIZE, ALBUM_IMAGE_SIZES
 from ..widgets.album_button import create_album_button
 
 
@@ -14,7 +15,7 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         super().__init__(orientation=Gtk.Orientation.VERTICAL)
 
         # setup
-        self.IMAGE_SIZE = 120
+        self.IMAGE_SIZE = DEFAULT_ALBUM_IMAGE_SIZE
         self.toggle_bottom_bar = toggle_bottom_bar_callback
         self.db_type = db_type
         self.db_path = db_path
@@ -74,9 +75,29 @@ def _load_albums(self) -> None:
             self.albums = albums
             # populate with album buttons
             for album in albums:
-                button = create_album_button(self.db_type, self.db_path, self.album_art_dir, album, self.nav_view, self.IMAGE_SIZE)
+                button = create_album_button(self.db_type, self.db_path, self.album_art_dir, album, self.nav_view, self.IMAGE_SIZE, lambda: self.IMAGE_SIZE)
                 self.flowbox.append(button)
 
+    def rescale(self, tier: str) -> None:
+        """Rescale album art sizes for the given tier"""
+        self.IMAGE_SIZE = ALBUM_IMAGE_SIZES.get(tier, DEFAULT_ALBUM_IMAGE_SIZE)
+        btn_size = self.IMAGE_SIZE + 5
+
+        child = self.flowbox.get_first_child()
+        while child:
+            # FlowBoxChild wraps the actual button
+            button = child.get_child() if hasattr(child, 'get_child') else child
+            button.set_size_request(btn_size, btn_size)
+
+            # resize the picture inside the button's box
+            box = button.get_child()
+            if box:
+                pic = box.get_first_child()
+                if pic:
+                    pic.set_size_request(self.IMAGE_SIZE, self.IMAGE_SIZE)
+
+            child = child.get_next_sibling()
+
     def refresh(self) -> None:
         """Refresh the page by reloading albums from database"""
         # clear existing album buttons

ipod_wrapped/frontend/pages/genres_page.py

@@ -3,6 +3,10 @@
 from gi.repository import Gtk, GLib
 
 from backend import has_data, create_genre_mappings
+from backend.constants import (
+    DEFAULT_GENRE_TAG_SIZE, DEFAULT_GENRE_RIGHT_PANE_WIDTH,
+    GENRE_TAG_SIZES, GENRE_RIGHT_PANE_WIDTHS,
+)
 from ..widgets.genre_tag import create_genre_tag
 
 
@@ -13,7 +17,7 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         super().__init__()
 
         # setup
-        self.TAG_SIZE = 50
+        self.TAG_SIZE = DEFAULT_GENRE_TAG_SIZE
         self.toggle_bottom_bar = toggle_bottom_bar_callback
         self.open_start_wrapped = None
         self.db_type = db_type
@@ -30,7 +34,7 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         sw_right.add_css_class('genre-breakdown-scrolled')
 
         self.right_box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
-        self.right_box.set_size_request(215, -1)
+        self.right_box.set_size_request(DEFAULT_GENRE_RIGHT_PANE_WIDTH, -1)
         self.right_box.add_css_class('genre-breakdown-pane')
         sw_right.set_child(self.right_box)
 
@@ -93,6 +97,22 @@ def set_start_wrapped_callback(self, callback) -> None:
         self.open_start_wrapped = callback
         self._load_genre_tags()
 
+    def rescale(self, tier: str) -> None:
+        """Rescale genre tag sizes and right pane width for the given tier"""
+        self.TAG_SIZE = GENRE_TAG_SIZES.get(tier, DEFAULT_GENRE_TAG_SIZE)
+        tag_btn_size = self.TAG_SIZE + 5
+
+        # resize existing tags
+        child = self.flowbox.get_first_child()
+        while child:
+            button = child.get_child() if hasattr(child, 'get_child') else child
+            button.set_size_request(tag_btn_size, tag_btn_size)
+            child = child.get_next_sibling()
+
+        # resize right pane
+        pane_width = GENRE_RIGHT_PANE_WIDTHS.get(tier, DEFAULT_GENRE_RIGHT_PANE_WIDTH)
+        self.right_box.set_size_request(pane_width, -1)
+
     def refresh(self) -> None:
         """Refresh the page by reloading genres from database"""
         # clear existing genre tags

ipod_wrapped/frontend/pages/songs_page.py

@@ -3,6 +3,7 @@
 from gi.repository import Gtk, GLib, Gio
 
 from backend import has_data, grab_all_songs, ms_to_mmss
+from backend.constants import DEFAULT_SONG_INFO_IMAGE_SIZE, SONG_INFO_IMAGE_SIZES
 from ..widgets.songs_table import create_song_store, create_song_selection_model, create_songs_table, Song
 from ..widgets.song_info import display_song_info
 
@@ -20,6 +21,7 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         self.db_path = db_path
         self.album_art_dir = album_art_dir
         self.selected_song_index = None
+        self.song_image_size = DEFAULT_SONG_INFO_IMAGE_SIZE
 
         self.add_css_class('page-area')
         self.add_css_class('songs-page')
@@ -126,7 +128,7 @@ def _update_song_display(self) -> None:
                 child = self.song_info_box.get_first_child()
 
             # rebuild
-            song_info_widget = display_song_info(song_data)
+            song_info_widget = display_song_info(song_data, image_size=self.song_image_size)
             self.song_info_box.append(song_info_widget)
             self.song_info_box.set_visible(True)
 
@@ -140,6 +142,13 @@ def _scroll_to_top(self) -> None:
         if vadj:
             vadj.set_value(0)
 
+    def rescale(self, tier: str) -> None:
+        """Rescale image sizes for the given tier"""
+        self.song_image_size = SONG_INFO_IMAGE_SIZES.get(tier, DEFAULT_SONG_INFO_IMAGE_SIZE)
+        # re-render current song info display if visible
+        if self.song_info_box.get_visible():
+            self._update_song_display()
+
     def refresh(self) -> None:
         """Refresh the page by reloading songs from database"""
         self.store.remove_all()

ipod_wrapped/frontend/pages/wrapped_page.py

@@ -2,6 +2,7 @@
 gi.require_version('Gtk', '4.0')
 from gi.repository import Gtk
 
+from backend.constants import DEFAULT_SCALE_TIER
 from ..widgets.stats_filters import StatsFilters
 
 
@@ -16,6 +17,7 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         self.db_type = db_type
         self.db_path = db_path
         self.album_art_dir = album_art_dir
+        self.tier = DEFAULT_SCALE_TIER
         self.stats_filter = StatsFilters()
 
         self.add_css_class('page-area')
@@ -56,6 +58,11 @@ def __init__(self, db_type: str, db_path: str, album_art_dir: str, toggle_bottom
         self.set_child(paned)
 
 
+    def rescale(self, tier: str) -> None:
+        """Store the current tier for when stats visuals are generated"""
+        self.tier = tier
+        self.stats_filter.tier = tier
+
     def refresh(self) -> None:
         """Refresh the page by reloading data from database"""
         pass

ipod_wrapped/frontend/widgets/album_button.py

@@ -7,10 +7,11 @@
 from gi.repository import Gtk, Gdk, Gio, Pango, GdkPixbuf, Adw, GLib
 
 from backend import grab_all_songs, ms_to_mmss
+from backend.constants import DEFAULT_SONG_INFO_IMAGE_SIZE
 from .songs_table import create_song_store, create_song_selection_model, create_songs_table, Song
 from .song_info import display_song_info
 
-def create_album_button(db_type: str, db_path: str, album_art_dir: str, album_info: dict, nav_view: Adw.NavigationView, image_size: int = 120) -> Gtk.Button:
+def create_album_button(db_type: str, db_path: str, album_art_dir: str, album_info: dict, nav_view: Adw.NavigationView, image_size: int = 120, get_song_image_size=None) -> Gtk.Button:
     """Creates a button with Album Art, Name, and Artist.
 
     Args:
@@ -20,6 +21,7 @@ def create_album_button(db_type: str, db_path: str, album_art_dir: str, album_in
         album_info (dict): Album metadata containing art, name, artist, genres, songs
         nav_view (Adw.NavigationView): Navigation view to push detail page onto
         image_size (int): Size of the album art image
+        get_song_image_size (callable): Returns current scaled image size for song info display
 
     Returns:
         Gtk.Button: The button with album art and info
@@ -61,10 +63,10 @@ def create_album_button(db_type: str, db_path: str, album_art_dir: str, album_in
     box.append(artist_label)
 
     button.set_child(box)
-    button.connect("clicked", lambda btn: _show_album_info(album_info, db_type, db_path, album_art_dir, nav_view))
+    button.connect("clicked", lambda btn: _show_album_info(album_info, db_type, db_path, album_art_dir, nav_view, get_song_image_size))
     return button
 
-def _show_album_info(album_info: dict, db_type: str, db_path: str, album_art_dir: str, nav_view: Adw.NavigationView) -> None:
+def _show_album_info(album_info: dict, db_type: str, db_path: str, album_art_dir: str, nav_view: Adw.NavigationView, get_song_image_size=None) -> None:
     """Shows the given album info when an album cover is clicked
     Absolutely insanity how chunky this function got. TODO: come back and make better
     """
@@ -142,7 +144,8 @@ def on_selection_changed(sel, position, n_items):
                 child = song_info_box.get_first_child()
 
             # rebuild
-            song_info_widget = display_song_info(song_data)
+            img_size = get_song_image_size() if get_song_image_size else DEFAULT_SONG_INFO_IMAGE_SIZE
+            song_info_widget = display_song_info(song_data, image_size=img_size)
             song_info_box.append(song_info_widget)
             song_info_box.set_visible(True)
 
@@ -153,7 +156,8 @@ def on_selection_changed(sel, position, n_items):
         def select_first():
             selection.set_selected(0)
             # manually trigger display
-            song_info_widget = display_song_info(songs_data[0])
+            img_size = get_song_image_size() if get_song_image_size else DEFAULT_SONG_INFO_IMAGE_SIZE
+            song_info_widget = display_song_info(songs_data[0], image_size=img_size)
             song_info_box.append(song_info_widget)
             song_info_box.set_visible(True)
             return False