update ui

resources/ui/window.blp

@@ -5,9 +5,10 @@ template $FlashcardsAppWindow : Adw.ApplicationWindow {
   title: _("Flashcards");
   default-width: 1200;
   default-height: 600;
+  show => $on_flashcards_app_window_show();
 
   Adw.Breakpoint {
-    condition ( "max-width: 600sp" )
+    condition ( "max-width: 600" )
     setters {
       split_view.collapsed: true;
     }
@@ -19,24 +20,25 @@ template $FlashcardsAppWindow : Adw.ApplicationWindow {
       title: _("Categories");
 
       Adw.ToolbarView {
-        width-request: 360;
-
         [top]
         Adw.HeaderBar {
           [start]
           Gtk.Button {
             icon-name: "list-add-symbolic";
             clicked => $on_add_category();
+            tooltip-text: _("Create category");
           }
           [start]
           Gtk.Button {
             icon-name: "user-trash-symbolic";
             clicked => $on_delete_category();
+            tooltip-text: _("Delete category");
           }
           [end]
           Gtk.MenuButton {
             icon-name: "open-menu-symbolic";
             menu-model: primary_menu;
+            tooltip-text: _("Menu");
           }
         }
 
@@ -44,15 +46,9 @@ template $FlashcardsAppWindow : Adw.ApplicationWindow {
             ListBox topics {
               valign: start;
               selection-mode: single;
-              margin-top: 12;
-              margin-bottom: 12;
-              margin-start: 12;
-              margin-end: 12;
-              row-selected => $on_category_selected();
-
-              styles [
-                "boxed-list",
-              ]
+              activate-on-single-click: true;
+              row-activated => $on_category_selected();
+              styles ["navigation-sidebar"]
             }
         };
       }
@@ -69,6 +65,7 @@ template $FlashcardsAppWindow : Adw.ApplicationWindow {
           Gtk.Button {
             icon-name: "user-trash-symbolic";
             clicked => $on_delete_category();
+            tooltip-text: _("Delete flashcard");
           }
           [title]
           Adw.WindowTitle title {
@@ -80,18 +77,62 @@ template $FlashcardsAppWindow : Adw.ApplicationWindow {
         content: Adw.ViewStack main_view {
           Adw.ViewStackPage {
             child: Adw.StatusPage placeholder {
-              margin-top: 12;
-              margin-bottom: 12;
-              margin-start: 12;
-              margin-end: 12;
-
               title: _("Select a category");
               icon-name: "edit-find-symbolic";
             };
           }
 
           Adw.ViewStackPage {
-            child: Adw.Bin flashcard {
+            child: Adw.Clamp flashcard {
+              maximum-size: 800;
+
+              Box {
+                orientation: vertical;
+                spacing: 24;
+                margin-top: 12;
+                margin-bottom: 12;
+                margin-start: 12;
+                margin-end: 12;
+
+                Box {
+                  styles ["card", "activatable"]
+                  halign: center;
+                  Label {
+                    styles ["title-4"]
+                    margin-top: 24;
+                    margin-bottom: 24;
+                    margin-start: 48;
+                    margin-end: 48;
+                    hexpand: true;
+                    justify: center;
+                    label: "Wie viele Bäume sind in einem Wald?";
+                    wrap: true;
+                    wrap-mode: word_char;
+                  }
+                }
+
+                Adw.Clamp {
+                  maximum-size: 600;
+                  Box {
+                    styles ["linked"]
+                    Button {
+                      styles ["pill"]
+                      label: _("Easy");
+                      hexpand: true;
+                    }
+                    Button {
+                      styles ["pill"]
+                      label: _("Medium");
+                      hexpand: true;
+                    }
+                    Button {
+                      styles ["pill"]
+                      label: _("Hard");
+                      hexpand: true;
+                    }
+                  }
+                }
+              }
             };
           }
         };