Add basic album list

2026-06-05 17:31:18 +02:00
parent e1a5a733c1
commit 493a689d75
8 changed files with 201 additions and 43 deletions
--- a/ui/albums.slint
+++ b/ui/albums.slint
@@ -0,0 +1,71 @@
+import { AlbumCover } from "types.slint";
+import { Global } from "global.slint";
+import { ScrollView, HorizontalBox, Palette } from "std-widgets.slint";
+import { ImagePreview } from "timeline.slint";
+
+component AlbumCover {
+    in property <AlbumCover> album;
+
+    states [
+        pressed when touch.pressed: {
+            click-effect.opacity: 0.2;
+        }
+        default: {
+            click-effect.opacity: 0;
+        }
+    ]
+
+    Rectangle {
+        background: Palette.alternate-background;
+        border-radius: 24px;
+        clip: true;
+
+        HorizontalLayout {
+            spacing: 20px;
+
+            ImagePreview {
+                preview: album.thumbnail;
+                size: 100px;
+            }
+
+            Text {
+                text: album.name;
+                horizontal-alignment: left;
+                vertical-alignment: center;
+                font-size: 20px;
+            }
+        }
+
+        click_effect := Rectangle {
+            background: Palette.accent-foreground;
+            opacity: 0;
+        }
+
+        touch := TouchArea {}
+    }
+}
+
+export component Albums {
+    private property <[AlbumCover]> albums: Global.albums;
+
+    property <length> min-image-size: Global.min-image-size;
+    property <length> min-size-with-margin: min-image-size + Global.image-margin;
+
+    ScrollView {
+        mouse-drag-pan-enabled: true;
+
+        HorizontalLayout {
+            alignment: center;        
+            VerticalLayout {
+                min-width: min-image-size;
+                alignment: start;
+                spacing: 10px;
+
+                for album[i] in albums : AlbumCover {
+                    album: album;
+                }
+            }
+        }
+    }
+}
+