Add wip program tiles

data/res/style.css

@@ -64,6 +64,55 @@
   font-size: smaller;
 }
 
+.program {
+  padding: 12px;
+  min-width: 200px;
+}
+
+.program .title {
+  margin-top: 6px;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.program.highlight {
+  color: white;
+  transition: transform 100ms;
+}
+
+.program.highlight.program1 {
+  background: linear-gradient(-225deg, #ac32e4 0%, #7918f2 48%, #4801ff 100%);
+}
+
+.program.highlight.program2 {
+  background: linear-gradient(145deg, #f12711, #f5af19);
+}
+
+.program.highlight.program3 {
+  background: linear-gradient(-80deg, #ad5389, #3c1053);
+}
+
+.program.highlight.program4 {
+  background: linear-gradient(140deg, #136797, #0b486b);
+}
+
+.program.highlight.program5 {
+  background: linear-gradient(100deg, #6a9113, #141517);
+}
+
+.program.highlight.program6 {
+  background: linear-gradient(120deg, #870000, #190a05);
+}
+
+
+.program.highlight:hover {
+  transform: scale(1.01);
+}
+
+.program.highlight:active {
+  transform: scale(0.99);
+}
+
 .selector>contents {
   padding: 0;
 }

data/ui/home_page.blp

@@ -94,6 +94,16 @@ template $MusicusHomePage: Adw.NavigationPage {
                 margin-top: 24;
                 margin-bottom: 68;
 
+                Gtk.FlowBox programs_flow_box {
+                  margin-top: 12;
+                  margin-bottom: 24;
+                  column-spacing: 12;
+                  row-spacing: 12;
+                  homogeneous: true;
+                  selection-mode: none;
+                  child-activated => $program_selected() swapped;
+                }
+
                 Gtk.Label {
                   styles [
                     "heading"

data/ui/program_tile.blp

@@ -0,0 +1,32 @@
+using Gtk 4.0;
+
+template $MusicusProgramTile : Gtk.FlowBoxChild {
+  styles ["program", "card", "activatable"]
+  
+  Gtk.Box {
+    orientation: vertical;
+  
+    Gtk.Button edit_button {
+      styles ["flat", "circular"]
+      halign: end;
+      icon-name: "document-edit-symbolic";
+    }
+
+    Gtk.Label title_label {
+      styles ["title"]
+      halign: start;
+      margin-top: 24;
+      wrap: true;
+      max-width-chars: 0;
+
+    }
+    
+    Gtk.Label description_label {
+      styles ["description"]
+      margin-top: 6;
+      halign: start;
+      wrap: true;
+      max-width-chars: 0;
+    }
+  }
+}