First commit

ui/countdown-view.slint

@@ -0,0 +1,68 @@
+import { State, SessionStep, CountdownStatus } from "./state.slint";
+import { VText, VButton, VActionButton, Svg, Palette } from "@selenite";
+import { Utils } from "utils.slint";
+
+export component CountdownView inherits VerticalLayout {
+	callback start-stop <=> startStopButton.clicked;
+
+	pure function format-session-step(session-step: SessionStep) -> string {
+		if (session-step == SessionStep.Setup) {
+			return "Setup";
+		}
+		if (session-step == SessionStep.Focus) {
+			return "Focus";
+		}
+		if (session-step == SessionStep.Break) {
+			return "Break";
+		}
+		if (session-step == SessionStep.Finished) {
+			return "Finished";
+		}
+		return "Not implemented";
+	}
+	
+    VerticalLayout {
+		
+		spacing: 32px;
+		alignment: center;
+		
+		VerticalLayout {
+			VText {
+				font-size: 3rem;
+				letter-spacing: 0.2rem;
+				font-weight: 600; 
+				text: "\{Utils.format-countdown(State.countdown)}";
+				horizontal-alignment: center;
+			}
+			VText {
+				color: Palette.foreground-hint;
+				text: format-session-step(State.sessions-step);
+				horizontal-alignment: center;
+			}
+		}
+		HorizontalLayout {
+			alignment: space-between;
+			spacing: 8px;
+			for step[step-index] in State.max-session-count: Rectangle {
+				preferred-width: 16px;
+				preferred-height: 16px;
+				border-radius: 32px;
+				background: step-index + 1 == State.current-session 
+					? Palette.accent.transparentize(0.5)
+					: step-index + 1 < State.current-session ? Palette.accent
+					: Palette.control-background;
+				animate background {
+					duration: 0.5s;
+				}
+			}
+		}
+		HorizontalLayout {
+			alignment: center;
+			startStopButton := VActionButton {
+				background: Palette.foreground.transparentize(1);
+				icon-size: 2rem;
+				icon-svg: State.countdown-status != CountdownStatus.Running ? Svg.play : Svg.pause;
+			}
+		}
+	}
+}