Move Slint files to src directory

src/Anilist.h

@@ -4,7 +4,7 @@
 #include <vector>
 #include <optional>
 #include "httplib.h"
-#include "app-window.h"
+#include "ui.h"
 #include "rei-json/json.h"
 #include "slint_string.h"
 #include "slint.h"

src/AppWindow.h

@@ -3,7 +3,7 @@
 #include <mutex>
 #include <vector>
 #include <optional>
-#include "app-window.h"
+#include "ui.h"
 #include "rei-json/Array.h"
 #include "rei-json/json.h"
 #include "slint_string.h"

src/AppWindow.slint

@@ -0,0 +1,171 @@
+import { State } from "./state.slint";
+import { VText, VTextInput , VButton, ToggleButton, VActionButton, Svg, Palette } from "@selenite";
+import { ComboBox } from "std-widgets.slint";
+
+export component AppWindow inherits Window {
+	title: "Lali";
+
+	background: Palette.background;
+	default-font-size: 16px;
+	padding: 0px;
+
+	private property <bool> show-add-list-form: false;
+
+	HorizontalLayout {
+		width: parent.width;
+		height: parent.height;
+
+		sidebar := Rectangle {
+			horizontal-stretch: 0;
+			background: Palette.pane;
+			
+			VerticalLayout {
+				alignment: start;
+				padding: 16px;
+				spacing: 8px;
+
+				HorizontalLayout {
+					alignment: space-between;
+					spacing: 64px;
+					VText {
+						text: "Lists";
+						font-size: 1.5rem;
+					}
+
+					VActionButton {
+						icon-svg: Svg.plus;
+						icon-colorize: Palette.green;
+						background: transparent;
+						clicked => { show-add-list-form = true }
+					}
+				}
+
+				if show-add-list-form : Rectangle {
+					horizontal-stretch: 0;
+					border-color: show-add-list-form ? Palette.card-background : transparent;
+					border-width: show-add-list-form ? 4px : 0px;
+					border-radius: show-add-list-form ? 8px : 0px;
+
+					VerticalLayout {
+						alignment: start;
+						padding: 16px;
+						spacing: 16px;
+
+						in-out property <string> name;
+						in-out property <string> anilist-user-name;
+						in-out property <string> anilist-list-name;
+
+						list-type := ComboBox {
+							model: ["Anilist", "Local"];
+						}
+						VTextInput {
+							label: "List name";
+							edited => { parent.name = self.text }
+						}
+						if list-type.current-value == "Anilist" : VTextInput {
+							label: "Anilist Username";
+							edited => { parent.anilist-user-name = self.text }
+						}
+						if list-type.current-value == "Anilist" : VTextInput {
+							label: "Anilist list name";
+							edited => { parent.anilist-list-name = self.text }
+						}
+						VButton {
+							text: "Add";
+							clicked => {
+								if list-type.current-value == "Anilist" {
+									State.add-anilist-list({
+										name: parent.name,
+										anilist-user-name: parent.anilist-user-name,
+										anilist-list-name: parent.anilist-list-name
+									});
+								} else if list-type.current-value == "Local" {
+									State.add-local-list({
+										name: parent.name,
+									});
+								}
+								show-add-list-form = false;
+							}
+						}
+					}
+				}
+
+				for list[index] in State.lists : ToggleButton {
+					text: list.name;
+					text-alignment: left;
+					active: list.selected;
+					clicked => {
+						State.select-list(index)
+					}
+				}
+			}
+		}
+
+		animes-view := VerticalLayout {
+			horizontal-stretch: 1;
+			spacing: 16px;
+			padding: 16px;
+
+			VerticalLayout {
+				spacing: 8px;
+				VText {
+					text: State.current-list.name;
+					font-size: 1.5rem;
+				}
+
+				VText {
+					text: "\{State.current-list.animes.length} animes";
+					font-size: 1rem;
+				}
+			}	
+			
+			animes-grid-background := Rectangle {
+				//background: #111111;
+				animes-grid := Flickable {
+
+					private property <int> number-of-items: State.current-list.animes.length;
+					private property <length> grid-spacing: 16px;
+
+					private property <length> item-min-width: 300px;
+					private property <int> item-per-row: floor(self.viewport-width / (item-min-width + grid-spacing));
+
+					private property <length> item-width: (parent.width - ((item-per-row - 1) * grid-spacing)) / item-per-row;
+					private property <length> item-height: 512px;
+
+					viewport-height: ceil(number-of-items / item-per-row) * (item-height + grid-spacing);
+					viewport-width: parent.width;
+
+					for anime[index] in State.current-list.animes : Rectangle {
+						x: mod(index, item-per-row) * (item-width + grid-spacing);
+						y: floor(index / item-per-row) * (item-height + grid-spacing);
+						width: item-width;
+						height: item-height;
+						//background: #444444;
+
+						
+
+						VerticalLayout {
+							height: parent.height;
+							width: parent.width;
+							spacing: 8px;
+							animeImage := Rectangle {
+								vertical-stretch: 1;
+								clip: true;
+								border-radius: 8px;
+								Image {
+									height: parent.height;
+									width: parent.width;
+									source: anime.image;
+									image-fit: ImageFit.cover;
+								}
+							}
+							animeTitle := VText {
+								text: anime.title;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

src/main.cpp

@@ -4,7 +4,7 @@
 #include <vector>
 #include <optional>
 #include "httplib.h"
-#include "app-window.h"
+#include "ui.h"
 #include "rei-json/json.h"
 #include "slint_string.h"
 #include "slint.h"

src/state.slint

@@ -0,0 +1,40 @@
+export struct Anime {
+	id: int,
+	title: string,
+	description: string,
+	image-url: string,
+	image: image
+}
+
+export struct List {
+	name: string,
+	selected: bool,
+}
+
+export struct CurrentList {
+	name: string,
+	animes: [Anime]
+}
+
+export struct AddAnilistListParams {
+	name: string,
+	anilist-user-name: string,
+	anilist-list-name: string
+}
+
+export struct AddLocalListParams {
+	name: string,
+}
+
+export global State {
+
+	in-out property <[List]> lists;
+	in-out property <CurrentList> current-list;
+
+	callback select-list(int);
+	callback sync-list(string);
+	callback add-anilist-list(AddAnilistListParams);
+	callback add-local-list(AddLocalListParams);
+
+	callback config-changed();
+}

src/ui.slint

@@ -0,0 +1,4 @@
+import { AppWindow } from "./AppWindow.slint";
+import { State } from "./state.slint";
+
+export { State, AppWindow }

src/utils.slint

@@ -0,0 +1,12 @@
+export global Utils {
+	public pure function format-zero-padding(number: int) -> string {
+		if (number < 10) {
+			return "0\{number}";
+		}
+		return number;
+	}
+
+	public pure function format-countdown(countdown: int) -> string {
+		return "\{format-zero-padding(countdown / 60)}:\{format-zero-padding(Math.mod(countdown, 60))}";
+	}
+}