Initial sidebar filter work

data/gtk/window.blp

@@ -45,65 +45,132 @@ Adw.StatusPage hidden_notice_empty {
 
 template $CartridgesWindow : Adw.ApplicationWindow {
   title: _("Cartridges");
+  width-request: 281;
+  height-request: 100;
+
+  Adw.Breakpoint {
+    condition ("max-width: 564px")
+    setters {
+      overlay_split_view.collapsed: true;
+      details_view_box.orientation: vertical;
+      details_view_box.margin-top: 12;
+      details_view_box.margin-start: 12;
+      details_view_box.margin-end: 12;
+      details_view_details_box.margin-start: 0;
+      details_view_details_box.margin-end: 0;
+      details_view_title.margin-top: 30;
+      details_view_title.halign: center;
+      details_view_developer.halign: center;
+      details_view_date_box.halign: center;
+      details_view_toolbar.halign: center;
+      details_view_toolbar.orientation: vertical;
+      details_view_play_button.halign: center;
+      details_view_toolbar_buttons.margin-start: 0;
+    }
+  }
 
   Adw.ToastOverlay toast_overlay {
     Adw.NavigationView navigation_view {
         Adw.NavigationPage library_page {
           title: _("Cartridges");
 
-          Adw.ToolbarView library_view {
+          Adw.OverlaySplitView overlay_split_view {
-            [top]
+            [sidebar]
-            Adw.HeaderBar header_bar {
+            Adw.NavigationPage {
-              [start]
+              title: _("Sources");
-              MenuButton {
+              Adw.ToolbarView {
-                tooltip-text: _("Add Game");
+                [top]
-                icon-name: "list-add-symbolic";
+                Adw.HeaderBar {
-                menu-model: add_games;
+                  [start]
-              }
+                  Button {
+                    icon-name: "sidebar-show-symbolic";
+                    action-name: "win.show_sidebar";
+                  }
+                }
 
-              [end]
+                ListBox {
-              MenuButton primary_menu_button {
+                  Box {
-                tooltip-text: _("Main Menu");
+                    Image {
-                icon-name: "open-menu-symbolic";
+                      icon-name: "view-grid";
-                menu-model: primary_menu;
+                      margin-start: 3;
-              }
+                      margin-end: 9;
-
+                    }
-              [end]
+                    Label {
-              ToggleButton search_button {
+                      halign: start;
-                tooltip-text: _("Search");
+                      label: _("All");
-                icon-name: "system-search-symbolic";
+                    }
-                action-name: "win.toggle_search";
+                  }
-              }
+                  styles ["navigation-sidebar"]
-            }
-
-            [top]
-            SearchBar search_bar {
-              search-mode-enabled: bind-property search_button.active bidirectional;
-              key-capture-widget: library_view;
-
-              Adw.Clamp {
-                maximum-size: 500;
-                tightening-threshold: 500;
-
-                SearchEntry search_entry {
-                  hexpand: true;
                 }
               }
             }
 
-            Overlay library_overlay {
+            Adw.ToolbarView library_view {
-              ScrolledWindow scrolledwindow {
+
-                FlowBox library {
+              [top]
-                  homogeneous: true;
+              Adw.HeaderBar header_bar {
-                  halign: center;
+
-                  valign: start;
+                [start]
-                  column-spacing: 12;
+                Revealer {
-                  row-spacing: 12;
+                  transition-type: slide_right;
-                  margin-top: 15;
+                  reveal-child: bind-property overlay_split_view.show-sidebar inverted;
-                  margin-bottom: 15;
+                  Button show_sidebar_button {
-                  margin-start: 15;
+                    icon-name: "sidebar-show-symbolic";
-                  margin-end: 15;
+                    action-name: "win.show_sidebar";
-                  selection-mode: none;
+                  }
+                }
+
+                [start]
+                MenuButton {
+                  tooltip-text: _("Add Game");
+                  icon-name: "list-add-symbolic";
+                  menu-model: add_games;
+                }
+
+                [end]
+                MenuButton primary_menu_button {
+                  tooltip-text: _("Main Menu");
+                  icon-name: "open-menu-symbolic";
+                  menu-model: primary_menu;
+                }
+
+                [end]
+                ToggleButton search_button {
+                  tooltip-text: _("Search");
+                  icon-name: "system-search-symbolic";
+                  action-name: "win.toggle_search";
+                }
+              }
+
+              [top]
+              SearchBar search_bar {
+                search-mode-enabled: bind-property search_button.active bidirectional;
+                key-capture-widget: library_view;
+
+                Adw.Clamp {
+                  maximum-size: 500;
+                  tightening-threshold: 500;
+
+                  SearchEntry search_entry {
+                    hexpand: true;
+                  }
+                }
+              }
+
+              Overlay library_overlay {
+                ScrolledWindow scrolledwindow {
+                  FlowBox library {
+                    homogeneous: true;
+                    halign: center;
+                    valign: start;
+                    column-spacing: 12;
+                    row-spacing: 12;
+                    margin-top: 15;
+                    margin-bottom: 15;
+                    margin-start: 15;
+                    margin-end: 15;
+                    selection-mode: none;
+                  }
                 }
               }
             }
@@ -185,190 +252,163 @@ Adw.NavigationPage details_page {
       Adw.HeaderBar {
       }
 
-      Adw.BreakpointBin {
+      ScrolledWindow {
-        hexpand: true;
+        Box details_view_box {
-        vexpand: true;
+          halign: center;
-        width-request: 229;
+          valign: center;
-        height-request: 54;
+          margin-start: 24;
+          margin-end: 24;
+          margin-top: 24;
+          margin-bottom: 24;
 
-        Adw.Breakpoint {
+          Adw.Clamp {
-          condition ("max-width: 564px")
+            maximum-size: 200;
-          setters {
+
-            details_view_box.orientation: vertical;
+            Overlay {
-            details_view_box.margin-top: 12;
+              [overlay]
-            details_view_box.margin-start: 12;
+              Spinner details_view_spinner {
-            details_view_box.margin-end: 12;
+                margin-start: 72;
-            details_view_details_box.margin-start: 0;
+                margin-end: 72;
-            details_view_details_box.margin-end: 0;
+              }
-            details_view_title.margin-top: 30;
+
-            details_view_title.halign: center;
+              Picture details_view_cover {
-            details_view_developer.halign: center;
+                halign: end;
-            details_view_date_box.halign: center;
+                valign: start;
-            details_view_toolbar.halign: center;
+                width-request: 200;
-            details_view_toolbar.orientation: vertical;
+                height-request: 300;
-            details_view_play_button.halign: center;
+
-            details_view_toolbar_buttons.margin-start: 0;
+                styles [
+                  "card",
+                ]
+              }
+            }
           }
-        }
 
-        ScrolledWindow {
+          Box details_view_details_box {
-          Box details_view_box {
+            orientation: vertical;
-            halign: center;
+            margin-start: 48;
+            vexpand: true;
             valign: center;
-            margin-start: 24;
-            margin-end: 24;
-            margin-top: 24;
-            margin-bottom: 24;
 
-            Adw.Clamp {
+            Label details_view_title {
-              maximum-size: 200;
+              label: _("Game Title");
+              hexpand: true;
+              halign: start;
+              max-width-chars: 24;
+              wrap: true;
+              wrap-mode: word_char;
+              natural-wrap-mode: word;
 
-              Overlay {
+              styles [
-                [overlay]
+                "title-1",
-                Spinner details_view_spinner {
+              ]
-                  margin-start: 72;
+            }
-                  margin-end: 72;
-                }
 
-                Picture details_view_cover {
+            Label details_view_developer {
-                  halign: end;
+              margin-top: 6;
-                  valign: start;
+              hexpand: true;
-                  width-request: 200;
+              halign: start;
-                  height-request: 300;
+              max-width-chars: 36;
+              wrap: true;
+              wrap-mode: word_char;
+              natural-wrap-mode: word;
 
-                  styles [
+              styles [
-                    "card",
+                "heading",
-                  ]
+              ]
-                }
+            }
+
+            Box details_view_date_box {
+              orientation: horizontal;
+              margin-top: 15;
+              hexpand: true;
+              halign: start;
+
+              Label details_view_added {
+                wrap: true;
+                wrap-mode: word_char;
+                natural-wrap-mode: word;
+                justify: center;
+              }
+
+              Label details_view_last_played {
+                margin-start: 12;
+                wrap: true;
+                wrap-mode: word_char;
+                natural-wrap-mode: word;
+                justify: center;
               }
             }
 
-            Box details_view_details_box {
+            Box details_view_toolbar {
-              orientation: vertical;
+              hexpand: true;
-              margin-start: 48;
               vexpand: true;
               valign: center;
 
-              Label details_view_title {
+              Button details_view_play_button {
-                label: _("Game Title");
+                name: "details_view_play_button";
-                hexpand: true;
+                action-name: "app.launch_game";
+                label: _("Play");
                 halign: start;
-                max-width-chars: 24;
+                margin-top: 24;
-                wrap: true;
-                wrap-mode: word_char;
-                natural-wrap-mode: word;
 
                 styles [
-                  "title-1",
+                  "opaque",
+                  "pill",
                 ]
               }
 
-              Label details_view_developer {
+              Box details_view_toolbar_buttons {
-                margin-top: 6;
-                hexpand: true;
                 halign: start;
-                max-width-chars: 36;
-                wrap: true;
-                wrap-mode: word_char;
-                natural-wrap-mode: word;
-
-                styles [
-                  "heading",
-                ]
-              }
-
-              Box details_view_date_box {
-                orientation: horizontal;
-                margin-top: 15;
-                hexpand: true;
-                halign: start;
-
-                Label details_view_added {
-                  wrap: true;
-                  wrap-mode: word_char;
-                  natural-wrap-mode: word;
-                  justify: center;
-                }
-
-                Label details_view_last_played {
-                  margin-start: 12;
-                  wrap: true;
-                  wrap-mode: word_char;
-                  natural-wrap-mode: word;
-                  justify: center;
-                }
-              }
-
-              Box details_view_toolbar {
-                hexpand: true;
-                vexpand: true;
                 valign: center;
+                margin-top: 24;
+                margin-start: 9;
 
-                Button details_view_play_button {
+                Button {
-                  name: "details_view_play_button";
+                  icon-name: "document-edit-symbolic";
-                  action-name: "app.launch_game";
+                  action-name: "app.edit_game";
-                  label: _("Play");
+                  tooltip-text: _("Edit");
-                  halign: start;
-                  margin-top: 24;
 
                   styles [
-                    "opaque",
+                    "raised",
-                    "pill",
+                    "circular",
                   ]
                 }
 
-                Box details_view_toolbar_buttons {
+                Button details_view_hide_button {
-                  halign: start;
+                  action-name: "app.hide_game";
-                  valign: center;
-                  margin-top: 24;
-                  margin-start: 9;
-
-                  Button {
-                    icon-name: "document-edit-symbolic";
-                    action-name: "app.edit_game";
-                    tooltip-text: _("Edit");
-
-                    styles [
-                      "raised",
-                      "circular",
-                    ]
-                  }
-
-                  Button details_view_hide_button {
-                    action-name: "app.hide_game";
-
-                    styles [
-                      "raised",
-                      "circular",
-                    ]
-                  }
-
-                  Button {
-                    icon-name: "user-trash-symbolic";
-                    action-name: "app.remove_game";
-                    tooltip-text: _("Remove");
-
-                    styles [
-                      "raised",
-                      "circular",
-                    ]
-                  }
-
-                  MenuButton {
-                    icon-name: "system-search-symbolic";
-                    menu-model: search;
-                    tooltip-text: _("Search");
-
-                    styles [
-                      "raised",
-                      "circular",
-                    ]
-                  }
 
                   styles [
-                    "toolbar",
+                    "raised",
+                    "circular",
                   ]
                 }
+
+                Button {
+                  icon-name: "user-trash-symbolic";
+                  action-name: "app.remove_game";
+                  tooltip-text: _("Remove");
+
+                  styles [
+                    "raised",
+                    "circular",
+                  ]
+                }
+
+                MenuButton {
+                  icon-name: "system-search-symbolic";
+                  menu-model: search;
+                  tooltip-text: _("Search");
+
+                  styles [
+                    "raised",
+                    "circular",
+                  ]
+                }
+
+                styles [
+                  "toolbar",
+                ]
               }
             }
           }

data/hu.kramo.Cartridges.gschema.xml.in

@@ -106,6 +106,12 @@
       </choices>
       <default>"a-z"</default>
     </key>
+    <key name="show-sidebar" type="b">
+      <default>false</default>
+    </key>
+    <key name="filter" type="s">
+      <default>"all"</default>
+    </key>
     <key name="steam-limiter-tokens-history" type="s">
       <default>"[]"</default>
     </key>

data/hu.kramo.Cartridges.metainfo.xml.in

@@ -22,7 +22,7 @@
     <control>touch</control>
   </supports>
   <recommends>
-    <display_length compare="gt">229</display_length>
+    <display_length compare="gt">280</display_length>
   </recommends>
   <screenshots>
     <screenshot type="default">

src/main.py

@@ -113,6 +113,7 @@ class CartridgesApplication(Adw.Application):
                 ("protondb_search",),
                 ("lutris_search",),
                 ("hltb_search",),
+                ("show_sidebar", ("F9",), self.win),
                 ("show_hidden", ("<primary>h",), self.win),
                 ("go_to_parent", ("<alt>Up",), self.win),
                 ("go_home", ("<alt>Home",), self.win),

src/window.py

@@ -27,9 +27,11 @@ from src.utils.relative_date import relative_date
 class CartridgesWindow(Adw.ApplicationWindow):
     __gtype_name__ = "CartridgesWindow"
 
+    overlay_split_view = Gtk.Template.Child()
     navigation_view = Gtk.Template.Child()
     toast_overlay = Gtk.Template.Child()
     primary_menu_button = Gtk.Template.Child()
+    show_sidebar_button = Gtk.Template.Child()
     details_view = Gtk.Template.Child()
     library_page = Gtk.Template.Child()
     library_view = Gtk.Template.Child()
@@ -88,6 +90,8 @@ class CartridgesWindow(Adw.ApplicationWindow):
 
         self.notice_empty.set_icon_name(shared.APP_ID + "-symbolic")
 
+        self.overlay_split_view.set_show_sidebar(shared.state_schema.get_boolean("show-sidebar"))
+
         if shared.PROFILE == "development":
             self.add_css_class("devel")
 
@@ -147,6 +151,9 @@ class CartridgesWindow(Adw.ApplicationWindow):
             remove_from_overlay(self.hidden_notice_no_results)
 
     def filter_func(self, child):
+        if shared.state_schema.get_string("filter") != "all":
+            pass
+
         game = child.get_child()
         text = (
             (
@@ -260,6 +267,12 @@ class CartridgesWindow(Adw.ApplicationWindow):
             widget.get_visible_page() == self.library_page
         )
 
+    def on_show_sidebar_action(self, *_args):
+        shared.state_schema.set_boolean(
+            "show-sidebar", (value := not self.overlay_split_view.get_show_sidebar())
+        )
+        self.overlay_split_view.set_show_sidebar(value)
+
     def on_go_to_parent_action(self, *_args):
         if self.navigation_view.get_visible_page() == self.details_page:
             self.navigation_view.pop()