From 799aebb49c0a51a15a31855c536069a57438cf7f Mon Sep 17 00:00:00 2001
From: Joakim Hulthe <joakim@hulthe.net>
Date: Thu, 4 Jun 2026 00:11:04 +0200
Subject: [PATCH] Add footer buttons

---
 assets/album.svg    |  1 +
 assets/photos.svg   |  1 +
 assets/search.svg   |  1 +
 ui/app-window.slint | 40 +++++++++++++++++++++---------
 ui/footer.slint     | 59 +++++++++++++++++++++++++++++++++++++++++++++
 ui/header.slint     | 14 +++++++++++
 6 files changed, 104 insertions(+), 12 deletions(-)
 create mode 100644 assets/album.svg
 create mode 100644 assets/photos.svg
 create mode 100644 assets/search.svg
 create mode 100644 ui/footer.slint
 create mode 100644 ui/header.slint

diff --git a/assets/album.svg b/assets/album.svg
new file mode 100644
index 0000000..02f2356
--- /dev/null
+++ b/assets/album.svg
@@ -0,0 +1 @@
+<svg width="1.375em" height="1.375em" viewBox="0 0 24 24" class="shrink-0 -scale-x-100 svelte-ztbs85" stroke="transparent" stroke-width="2" role="img" aria-hidden="true"><!----><!----><path d="M6,19L9,15.14L11.14,17.72L14.14,13.86L18,19H6M6,4H11V12L8.5,10.5L6,12M18,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z" fill="currentColor"></path></svg>
diff --git a/assets/photos.svg b/assets/photos.svg
new file mode 100644
index 0000000..6736817
--- /dev/null
+++ b/assets/photos.svg
@@ -0,0 +1 @@
+<svg width="1.375em" height="1.375em" viewBox="0 0 24 24" class="shrink-0 svelte-ztbs85" stroke="transparent" stroke-width="2" role="img" aria-hidden="true"><!----><!----><path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.03,14.71L16,11L20,16H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6" fill="currentColor"></path></svg>
diff --git a/assets/search.svg b/assets/search.svg
new file mode 100644
index 0000000..a679a70
--- /dev/null
+++ b/assets/search.svg
@@ -0,0 +1 @@
+<svg width="1.375em" height="1.375em" viewBox="0 0 24 24" class="shrink-0 svelte-ztbs85" stroke="transparent" stroke-width="2" role="img" aria-hidden="true"><!----><!----><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" fill="currentColor"></path></svg>
diff --git a/ui/app-window.slint b/ui/app-window.slint
index 42fca21..40db3a0 100644
--- a/ui/app-window.slint
+++ b/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 {
diff --git a/ui/footer.slint b/ui/footer.slint
new file mode 100644
index 0000000..96d2834
--- /dev/null
+++ b/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
+    }
+}
diff --git a/ui/header.slint b/ui/header.slint
new file mode 100644
index 0000000..16196ec
--- /dev/null
+++ b/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";
+        }
+    }
+}