From 6d2d6325919b6f6914c81ddd69014669cdf6657c Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Thu, 13 Nov 2025 21:25:03 +0100
Subject: [PATCH] feat: use nuxt layout

---
 app/app.vue                                 | 29 +----------------
 app/components/Home/TopScreen/TopScreen.vue | 12 +++----
 app/layouts/default.vue                     | 35 +++++++++++++++++++++
 app/pages/contact.vue                       | 13 ++++++++
 app/pages/index.vue                         | 17 ++++++++++
 5 files changed, 70 insertions(+), 36 deletions(-)
 create mode 100644 app/layouts/default.vue
 create mode 100644 app/pages/contact.vue
 create mode 100644 app/pages/index.vue

diff --git a/app/app.vue b/app/app.vue
index 8fc254f..8f62b8b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,30 +1,3 @@
-<script setup lang="ts">
-const showStats = ref(false);
-</script>
-
 <template>
-  <div
-    :style="{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '4px',
-    }"
-  >
-    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
-      <input id="statsCheckbox" v-model="showStats" type="checkbox" />
-      <label for="statsCheckbox">Stats</label>
-    </div>
-
-    <div>
-      <HomeTopScreen>
-        <Stats v-if="showStats" />
-      </HomeTopScreen>
-    </div>
-    <div>
-      <Screen>
-        <HomeBottomScreen />
-        <Stats v-if="showStats" />
-      </Screen>
-    </div>
-  </div>
+  <NuxtPage />
 </template>
diff --git a/app/components/Home/TopScreen/TopScreen.vue b/app/components/Home/TopScreen/TopScreen.vue
index 9f04724..c7f623b 100644
--- a/app/components/Home/TopScreen/TopScreen.vue
+++ b/app/components/Home/TopScreen/TopScreen.vue
@@ -1,10 +1,6 @@
 <template>
-  <Screen>
-    <HomeTopScreenBackground />
-    <HomeTopScreenCalendar />
-    <HomeTopScreenClock />
-    <HomeTopScreenStatusBar />
-
-    <slot />
-  </Screen>
+  <HomeTopScreenBackground />
+  <HomeTopScreenCalendar />
+  <HomeTopScreenClock />
+  <HomeTopScreenStatusBar />
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..a566581
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const showStats = useState("showStats", () => false);
+</script>
+
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px',
+    }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
+      <input id="statsCheckbox" v-model="showStats" type="checkbox" />
+      <label for="statsCheckbox">Stats</label>
+    </div>
+
+    <div>
+      <Screen>
+        <slot name="top">
+          <slot />
+        </slot>
+        <Stats v-if="showStats" />
+      </Screen>
+    </div>
+    <div>
+      <Screen>
+        <slot name="bottom">
+          <slot />
+        </slot>
+        <Stats v-if="showStats" />
+      </Screen>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
new file mode 100644
index 0000000..7538657
--- /dev/null
+++ b/app/pages/contact.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <template #top> </template>
+
+    <template #bottom> </template>
+  </NuxtLayout>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..4b5bee4
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <template #top>
+      <HomeTopScreen />
+    </template>
+
+    <template #bottom>
+      <HomeBottomScreen />
+    </template>
+  </NuxtLayout>
+</template>