using Gtk 4.0; using Adw 1; template $BzFlathubPage: Adw.Bin { child: Adw.BreakpointBin { width-request: 360; height-request: 100; child: Adw.BreakpointBin { width-request: 360; height-request: 100; child: Adw.ViewStack stack { enable-transitions: true; transition-duration: 400; Adw.ViewStackPage { name: "empty"; child: Adw.StatusPage { icon-name: "flathub-symbolic"; title: _("Flathub Not Added"); description: _("The Flathub remote was not found on any of your Flatpak installations"); }; } Adw.ViewStackPage { name: "offline"; child: Adw.StatusPage { icon-name: "connected-squares-x"; title: _("Can't Reach Flathub"); description: _("You can still manage and search for apps."); child: Box offline_buttons { halign: center; spacing: 12; Button { label: _("Search Apps"); halign: center; clicked => $open_search_cb(template); styles ["pill"] } Button { styles ["pill"] halign: center; sensitive: bind $invert_boolean(template.state as <$BzStateInfo>.syncing as ) as ; label: _("Reconnect"); action-name: "app.sync-remotes"; } }; }; } Adw.ViewStackPage { name: "content"; child: ScrolledWindow { styles [ "transparent", ] hscrollbar-policy: never; child: Adw.ClampScrollable { maximum-size: 1500; tightening-threshold: 1400; child: Viewport { child: Box content_box { margin-start: 30; margin-end: 30; margin-top: 5; margin-bottom: 50; orientation: vertical; spacing: 15; $BzFeaturedCarousel { styles [ "flathub-page-section", ] margin-top: 16; margin-bottom: 3; hexpand: true; model: bind template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.apps_of_the_week; } Box section_toggles_box { halign: center; width-request: 800; Adw.ToggleGroup section_toggles { hexpand: true; halign: fill; homogeneous: true; styles [ "round", "huge" ] Adw.Toggle { label: _("Trending"); name: "trending"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "trending") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("Popular"); name: "popular"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "popular") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("New"); name: "recently-added"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "recently-added") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("Updated"); name: "recently-updated"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "recently-updated") as <$BzFlathubCategory>) as ) as ; } } } Adw.ViewStack sections_stack { enable-transitions: true; transition-duration: 300; visible-child-name: bind section_toggles.active-name bidirectional; Adw.ViewStackPage { name: "trending"; title: _("Trending"); child: $BzFlathubCategorySection section_trending { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "trending") as <$BzFlathubCategory>; min-items: 12; has-title: false; }; } Adw.ViewStackPage { name: "recently-updated"; title: _("Recently Updated"); child: $BzFlathubCategorySection section_recently_updated { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "recently-updated") as <$BzFlathubCategory>; min-items: 12; has-title: false; }; } Adw.ViewStackPage { name: "recently-added"; title: _("Recently Added"); child: $BzFlathubCategorySection section_recently_added { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "recently-added") as <$BzFlathubCategory>; min-items: 12; has-title: false; }; } Adw.ViewStackPage { name: "popular"; title: _("Popular"); child: $BzFlathubCategorySection section_popular { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "popular") as <$BzFlathubCategory>; min-items: 12; has-title: false; }; } } $BzFlathubCuratedSection after_hero { visible: bind $invert_boolean($is_null(after_hero.selection as <$BzFlathubCuratedSelection>) as ) as ; selection: bind $get_curated_selection_by_slot(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.curated_selections, "after-hero") as <$BzFlathubCuratedSelection>; } $BzFlathubCategorySection section_productivity { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "office") as <$BzFlathubCategory>; } Box { orientation: vertical; spacing: 10; margin-top: 16; margin-bottom: 20; Label { styles [ "title-1", ] xalign: 0.0; hexpand: true; margin-start: 3; margin-end: 3; margin-bottom: 5; ellipsize: end; label: _("App of the Day"); } $BzFeaturedCarousel { styles [ "flathub-page-section", ] hexpand: true; model: SliceListModel { offset: 0; size: 1; model: bind template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.apps_of_the_day_week; }; } } $BzFlathubCategorySection section_graphics { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "graphics") as <$BzFlathubCategory>; } $BzFlathubCategorySection section_audiovideo { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "audiovideo") as <$BzFlathubCategory>; } Box otg_box { visible: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "mobile") as <$BzFlathubCategory>) as ) as ; margin-top: 8; margin-bottom: 20; styles [ "sp-section", "otg", "card", ] Box otg_padding_box { orientation: horizontal; margin-start: 24; margin-end: 24; margin-top: 24; margin-bottom: 24; Box otg_title_box { orientation: vertical; spacing: 12; width-request: 285; valign: center; Image otg_image { icon-name: "on-the-go-symbolic"; can-target: false; pixel-size: 256; margin-bottom: 10; halign: start; styles [ "sp-section-image", ] } Label otg_title { label: _("On the Go"); halign: start; wrap: true; wrap-mode: word_char; styles [ "sp-section-title", "title-1", ] } Label otg_subtitle { label: _("Apps for your Linux phones and tablets"); halign: start; wrap: true; wrap-mode: word_char; } Button otg_more_button_top { styles [ "pill", ] label: _("More Mobile Apps"); halign: start; valign: center; clicked => $show_more_mobile_cb(template); } } $BzDynamicListView otg_list { styles [ "flathub-page-section", ] hexpand: true; scroll: false; noscroll-kind: flow-box; child-type: "BzAppTile"; child-prop: "group"; max-children-per-line: 3; model: SliceListModel otg_slice { offset: 0; size: 9; model: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "mobile") as <$BzFlathubCategory>.applications; }; } Button otg_more_button_bottom { styles [ "pill", ] visible: false; label: _("More Mobile Apps"); halign: center; valign: center; margin-bottom: 12; clicked => $show_more_mobile_cb(template); } } } $BzFlathubCategorySection section_education { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "education") as <$BzFlathubCategory>; } $BzFlathubCategorySection section_network { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "network") as <$BzFlathubCategory>; } Box { visible: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "game") as <$BzFlathubCategory>) as ) as ; orientation: vertical; margin-top: 8; margin-bottom: 20; spacing: 10; styles [ "sp-section", "wlg", "card", ] Box gaming_padding_box { orientation: vertical; margin-start: 24; margin-end: 24; margin-top: 24; margin-bottom: 24; Box { orientation: vertical; spacing: 12; width-request: 285; margin-bottom: 12; valign: center; Image { icon-name: "we-love-games-symbolic"; can-target: false; pixel-size: 256; margin-bottom: 10; halign: center; styles [ "sp-section-image", ] } Label { label: _("We​ ♥​ Games"); halign: center; justify: center; wrap: true; wrap-mode: word_char; styles [ "sp-section-title", "title-1", ] } Label { label: _("Games and apps to run your favorite titles"); halign: center; justify: center; wrap: true; wrap-mode: word_char; } } Box game_section_toggles_box { halign: center; width-request: 800; margin-bottom: 20; margin-top: 8; Adw.ToggleGroup game_section_toggles { hexpand: true; halign: fill; homogeneous: true; styles [ "round", "huge" ] Adw.Toggle { label: _("Games"); name: "game"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "game") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("Emulators"); name: "emulators"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "emulators") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("Launchers"); name: "launchers"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "launchers") as <$BzFlathubCategory>) as ) as ; } Adw.Toggle { label: _("Tools"); name: "game-tools"; enabled: bind $invert_boolean($is_null($get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "game-tools") as <$BzFlathubCategory>) as ) as ; } } } Adw.ViewStack game_sections_stack { enable-transitions: true; transition-duration: 300; visible-child-name: bind game_section_toggles.active-name bidirectional; Adw.ViewStackPage { name: "game"; child: Box { orientation: vertical; $BzDynamicListView game_list { styles [ "flathub-page-section", ] hexpand: true; scroll: false; noscroll-kind: flow-box; child-type: "BzAppTile"; child-prop: "group"; max-children-per-line: 4; model: SliceListModel game_slice { offset: 0; size: 12; model: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "game-only") as <$BzFlathubCategory>.applications; }; } Button { styles [ "pill", ] label: _("More Games"); halign: center; valign: center; margin-top: 12; margin-bottom: 12; clicked => $show_more_gaming_cb(template); } }; } Adw.ViewStackPage { name: "emulators"; child: $BzFlathubCategorySection emulators_section { has-title: false; category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "emulators") as <$BzFlathubCategory>; }; } Adw.ViewStackPage { name: "launchers"; child: $BzFlathubCategorySection launchers_section { has-title: false; category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "launchers") as <$BzFlathubCategory>; }; } Adw.ViewStackPage { name: "game-tools"; child: $BzFlathubCategorySection game_tools_section { has-title: false; category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "game-tools") as <$BzFlathubCategory>; }; } } } } $BzFlathubCategorySection section_development { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "development") as <$BzFlathubCategory>; } $BzFlathubCategorySection section_science { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "science") as <$BzFlathubCategory>; } $BzFlathubCuratedSection after_top_apps { visible: bind $invert_boolean($is_null(after_top_apps.selection as <$BzFlathubCuratedSelection>) as ) as ; selection: bind $get_curated_selection_by_slot(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.curated_selections, "after-top-apps") as <$BzFlathubCuratedSelection>; margin-bottom: 20; } $BzFlathubCategorySection section_system { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "system") as <$BzFlathubCategory>; } $BzFlathubCuratedSection after_first_category_block { visible: bind $invert_boolean($is_null(after_first_category_block.selection as <$BzFlathubCuratedSelection>) as ) as ; selection: bind $get_curated_selection_by_slot(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.curated_selections, "after-first-category-block") as <$BzFlathubCuratedSelection>; margin-bottom: 20; } $BzFlathubCategorySection section_utility { category: bind $get_category_by_name_cb(template.state as <$BzStateInfo>.flathub as <$BzFlathubState>.categories, "utility") as <$BzFlathubCategory>; } }; }; }; }; } }; Adw.Breakpoint { condition ("max-width: 1250sp") setters { otg_list.max-children-per-line: 2; otg_slice.size: 6; after_hero.compact: true; after_top_apps.compact: true; after_first_category_block.compact: true; } } Adw.Breakpoint { condition ("max-width: 700px") setters { offline_buttons.orientation: vertical; content_box.margin-start: 10; content_box.margin-end: 10; otg_padding_box.margin-start: 6; otg_padding_box.margin-end: 6; otg_padding_box.margin-bottom: 6; gaming_padding_box.margin-start: 6; gaming_padding_box.margin-end: 6; gaming_padding_box.margin-bottom: 6; section_toggles.homogeneous: false; game_section_toggles.homogeneous: false; section_trending.compact: true; section_popular.compact: true; section_recently_added.compact: true; section_recently_updated.compact: true; section_productivity.compact: true; section_graphics.compact: true; section_audiovideo.compact: true; section_education.compact: true; section_network.compact: true; section_development.compact: true; section_science.compact: true; section_system.compact: true; section_utility.compact: true; emulators_section.compact: true; launchers_section.compact: true; game_tools_section.compact: true; game_list.max-children-per-line: 2; game_slice.size: 6; otg_slice.size: 6; } } }; Adw.Breakpoint { condition ("max-width: 970sp") setters { section_toggles_box.width-request: -1; game_section_toggles_box.width-request: -1; otg_padding_box.orientation: vertical; otg_padding_box.spacing: 6; otg_title_box.halign: center; otg_title_box.width-request: -1; otg_title.justify: center; otg_subtitle.justify: center; otg_image.halign: center; otg_image.margin-top: 15; otg_image.margin-bottom: 5; otg_title.halign: center; otg_subtitle.halign: center; otg_more_button_bottom.visible: true; otg_more_button_top.visible: false; } } }; }