From 03d063b11fd605591992c7d0ac3b926ed73d8d94 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 11 Nov 2025 14:44:51 +0100
Subject: [PATCH] feat: quick bottom home screen setup

---
 app/app.vue                                    |   5 +++++
 app/assets/home-screen_bottom_background.png   | Bin 0 -> 148233 bytes
 .../Home/BottomScreen/Background.vue           |  17 +++++++++++++++++
 .../Home/BottomScreen/BottomScreen.vue         |   7 +++++++
 4 files changed, 29 insertions(+)
 create mode 100644 app/assets/home-screen_bottom_background.png
 create mode 100644 app/components/Home/BottomScreen/Background.vue
 create mode 100644 app/components/Home/BottomScreen/BottomScreen.vue

diff --git a/app/app.vue b/app/app.vue
index 0693ac1..04538ee 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -20,5 +20,10 @@ const showStats = ref(false);
         <Stats v-if="showStats" />
       </TopScreen>
     </div>
+    <div>
+      <HomeBottomScreen>
+        <Stats v-if="showStats" />
+      </HomeBottomScreen>
+    </div>
   </div>
 </template>
diff --git a/app/assets/home-screen_bottom_background.png b/app/assets/home-screen_bottom_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ea2e53865d26d932c12252a5bbc5bd2d15fd906
GIT binary patch
literal 148233
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
Ix9mCoFZ@Ww(f|Me

literal 0
HcmV?d00001

diff --git a/app/components/Home/BottomScreen/Background.vue b/app/components/Home/BottomScreen/Background.vue
new file mode 100644
index 0000000..e9143be
--- /dev/null
+++ b/app/components/Home/BottomScreen/Background.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/home-screen_bottom_background.png"
+    hidden
+  />
+</template>
diff --git a/app/components/Home/BottomScreen/BottomScreen.vue b/app/components/Home/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..440d00f
--- /dev/null
+++ b/app/components/Home/BottomScreen/BottomScreen.vue
@@ -0,0 +1,7 @@
+<template>
+  <Screen>
+    <HomeBottomScreenBackground />
+
+    <slot />
+  </Screen>
+</template>