first commit

src/app/components/playlist_details/playlist_header.blp

@@ -0,0 +1,84 @@
+using Gtk 4.0;
+
+template $PlaylistHeaderWidget : Box {
+  valign: start;
+  vexpand: false;
+  margin-start: 6;
+  margin-end: 6;
+  margin-bottom: 6;
+
+  Box playlist_image_box {
+    overflow: hidden;
+    halign: center;
+    margin-top: 18;
+    margin-start: 6;
+    margin-bottom: 6;
+
+    Image playlist_art {
+      width-request: 160;
+      height-request: 160;
+      icon-name: "emblem-music-symbolic";
+    }
+
+    styles [
+      "card",
+    ]
+  }
+
+  Box playlist_info {
+    hexpand: true;
+    valign: center;
+    orientation: vertical;
+    spacing: 6;
+    margin-start: 18;
+
+    Entry playlist_label_entry {
+      hexpand: false;
+      halign: start;
+      editable: false;
+      can-focus: false;
+      placeholder-text: "Playlist Title";
+
+      styles [
+        "title-1",
+        "playlist__title-entry",
+        "playlist__title-entry--ro",
+      ]
+    }
+
+    LinkButton author_button {
+      receives-default: true;
+      halign: start;
+      valign: center;
+      has-frame: false;
+
+      Label author_button_label {
+        hexpand: true;
+        vexpand: true;
+        label: "Artist";
+        ellipsize: middle;
+      }
+
+      styles [
+        "title-4",
+      ]
+    }
+  }
+  Button play_button {
+    margin-end: 6;
+    receives-default: true;
+    halign: center;
+    valign: center;
+    tooltip-text: "Play";
+    icon-name: "media-playback-start-symbolic";
+
+    styles [
+      "circular",
+      "play__button",
+    ]
+  }
+
+  styles [
+    "playlist__header",
+  ]
+}