Add footer buttons

ui/app-window.slint

@@ -2,25 +2,20 @@ import { AboutSlint, Button, Palette, HorizontalBox, ScrollView } from "std-widg
 import { Timeline } from "timeline.slint";
 import { ImageViewer } from "image-viewer.slint";
 import { LoginView } from "login.slint";
+import { Header } from "header.slint";
+import { Footer, FooterButton } from "footer.slint";
 
 import { Global } from "global.slint";
 export { Global }
 
-component Header inherits Rectangle {
-    width: 100%;
-    height: 48px;
-    background: Palette.alternate-background;
-
-    HorizontalBox {
-        height: parent.height;
-        Text {
-            text: "immich";
-        }
-    }
+enum View {
+    Timeline,
+    Albums
 }
 
 export component AppWindow inherits Window {
     out property <length> window-height: self.height;
+    out property <View> view: View.Timeline;
 
     // Do not base preferred-width on children
     preferred-width: 480px;
@@ -36,7 +31,28 @@ export component AppWindow inherits Window {
         Header {}
         
         if !Global.logged-in: LoginView {}
-        if Global.logged-in: Timeline {}
+        if Global.logged-in && view == View.Timeline: Timeline {}
+
+        Footer {
+            FooterButton {
+                title: "Photos";
+                icon: @image-url("../assets/photos.svg");
+                clicked => { view = View.Timeline }
+            }
+            FooterButton {
+                title: "Search";
+                icon: @image-url("../assets/search.svg");
+            }
+            FooterButton {
+                title: "Album";
+                icon: @image-url("../assets/album.svg");
+                clicked => { view = View.Albums}
+            }
+            FooterButton {
+                title: "Library";
+                icon: @image-url("../assets/album.svg"); // TODO
+            }
+        }
     }
 
     if Global.viewed-image.asset-id != "" : ImageViewer {

ui/footer.slint

@@ -0,0 +1,59 @@
+import { Palette } from "std-widgets.slint";
+
+export component FooterButton inherits Rectangle {
+    in property <string> title: "Button";
+    in property <image> icon;
+    callback clicked <=> touch.clicked;
+
+    states [
+        pressed when touch.pressed: {
+             background: #0000ff30;
+        }
+        hovered when touch.has-hover: {
+             background: #0000ff15;
+        }
+        default: {
+            background: #0000;
+        }
+    ]
+
+    animate background {
+         duration: 0.1s;
+         easing: ease-in-out;
+    }
+
+    border-radius: 20px;
+
+    VerticalLayout {
+        padding: 10px;
+        padding-left: 20px;
+        padding-right: 20px;
+        Image {
+            source: icon;
+            colorize: #accbfa;
+        }
+        Text {
+            text: title;
+            horizontal-alignment: center;
+        }
+    }
+
+    touch := TouchArea {}
+}
+
+export component Footer inherits Rectangle {
+    width: 100%;
+    height: 88px;
+    background: Palette.alternate-background;
+
+    HorizontalLayout {
+        height: parent.height;
+        spacing: 16px;
+        padding-top: 8px;
+        padding-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
+
+        @children
+    }
+}

ui/header.slint

@@ -0,0 +1,14 @@
+import { HorizontalBox, Palette } from "std-widgets.slint";
+
+export component Header inherits Rectangle {
+    width: 100%;
+    height: 48px;
+    background: Palette.alternate-background;
+
+    HorizontalBox {
+        height: parent.height;
+        Text {
+            text: "immich";
+        }
+    }
+}