Further work on pages infrastructure

Author: heliguy4599

src/widgets/content_page.ts src/pages/base_page.tssrc/widgets/content_page.ts renamed to src/pages/base_page.ts

@@ -5,8 +5,8 @@ import { GClass, Property, from } from "../gobjectify/gobjectify.js"
 import { Installation } from "../flatpak.js"
 
 @GClass()
-export class ContentPage extends from(Adw.Bin, {
-	title: Property.string(),
-	icon: Property.string(),
+export class BasePage extends from(Adw.NavigationPage, {
 	installations: Property.gobject(Gio.ListStore, { flags: "CONSTRUCT_ONLY" }).as<Gio.ListStore<Installation>>(),
+	sidebar_title: Property.string(),
+	icon_name: Property.string(),
 }) {}

src/pages/remotes_page.blp

@@ -0,0 +1,18 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $RemotesPage: $BasePage {
+	title: _("Manage Remotes");
+	sidebar_title: _("Remotes");
+	icon_name: "warehouse:server-pick-symbolic";
+
+	child: Adw.ToolbarView {
+		[top]
+		Adw.HeaderBar {}
+
+		content: Adw.StatusPage {
+			title: "Hello";
+			description: _("Hello World");
+		};
+	};
+}

src/pages/remotes_page.ts

@@ -0,0 +1,10 @@
+import Adw from "gi://Adw?version=1"
+
+import { GClass, Property, from } from "../gobjectify/gobjectify.js"
+
+import { BasePage } from "./base_page.js"
+
+@GClass({ template: "resource:///io/github/flattool/Warehouse/pages/remotes_page.ui" })
+export class RemotesPage extends from(BasePage, {
+	// installations: Property.gobject(Gio.ListStore),
+}) {}

src/window/main_window.blp

@@ -33,13 +33,7 @@ template $MainWindow: Adw.ApplicationWindow {
 		};
 
 		content: Adw.ViewStack view_stack {
-			$ContentPage {
-				title: _("Page One");
-				installations: installations;
-			}
-
-			$ContentPage {
-				title: _("Page Two");
+			$RemotesPage remotes_page {
 				installations: installations;
 			}
 		};

src/window/main_window.ts

@@ -4,8 +4,10 @@ import Gio from "gi://Gio?version=2.0"
 
 import { GClass, Child, Property, from } from "../gobjectify/gobjectify.js"
 import { Installation, get_installations } from "../flatpak.js"
+import { SidebarRow } from "./sidebar_row.js"
+import { BasePage } from "../pages/base_page.js"
 
-import { ContentPage } from "../widgets/content_page.js"
+import "../pages/remotes_page.js"
 
 @GClass({ template: "resource:///io/github/flattool/Warehouse/window/main_window.ui" })
 export class MainWindow extends from(Adw.ApplicationWindow, {
@@ -32,7 +34,10 @@ export class MainWindow extends from(Adw.ApplicationWindow, {
 		const base_list: Gtk.SelectionModel<Adw.ViewStackPage> = this._view_stack.pages
 		this._sidebar_list.bind_model(
 			base_list,
-			(item) => new Gtk.Label({ label: ((item as Adw.ViewStackPage).child as ContentPage).title }),
+			(item) => new SidebarRow({
+				icon_name: ((item as Adw.ViewStackPage).child as BasePage).icon_name,
+				text: ((item as Adw.ViewStackPage).child as BasePage).sidebar_title,
+			}),
 		)
 	}
 

src/window/sidebar_row.blp

@@ -0,0 +1,19 @@
+using Gtk 4.0;
+
+template $SidebarRow: Box {
+	margin-start: 6;
+	margin-end: 6;
+	margin-top: 12;
+	margin-bottom: 12;
+	spacing: 12;
+
+	Image {
+		icon-name: bind template.icon_name;
+	}
+
+	Label {
+		label: bind template.text;
+		wrap: true;
+		wrap-mode: word_char;
+	}
+}

src/window/sidebar_row.ts

@@ -0,0 +1,9 @@
+import Gtk from "gi://Gtk?version=4.0"
+
+import { GClass, Property, from } from "../gobjectify/gobjectify.js"
+
+@GClass({ template: "resource:///io/github/flattool/Warehouse/window/sidebar_row.ui" })
+export class SidebarRow extends from(Gtk.Box, {
+	icon_name: Property.string(),
+	text: Property.string(),
+}) {}