feat: move top screen components to own folder, and implement calendar

app/app.vue

@@ -1,45 +1,24 @@
-<!-- <template>
+<script setup lang="ts">
+const showStats = ref(false);
+</script>
+
+<template>
   <div
     :style="{
-      position: 'relative',
-      width: '256px',
-      transformOrigin: 'top left',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px',
     }"
   >
-    <div
-      :style="{
-        boxSizing: 'border-box',
-        width: '256px',
-        height: '192px',
-      }"
-    >
-      <img src="/assets/background.png" />
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
+      <input id="statsCheckbox" type="checkbox" v-model="showStats" />
+      <label for="statsCheckbox">Stats</label>
+    </div>
 
-      <div
-        :style="{
-          position: 'absolute',
-          display: 'grid',
-          gap: '1px',
-          top: 'calc(4 * 16px)',
-          right: 'calc(1 * 16px + 1px)',
-          gridTemplateRows: 'repeat(5, 15px)',
-          gridTemplateColumns: 'repeat(7, 15px)',
-        }"
-      >
-        <div
-          v-for="i in 5 * 7"
-          :key="i"
-          :style="{ display: 'flex', flexDirection: 'column' }"
-        >
-          <span :style="{ fontSize: '12px' }">8</span>
-        </div>
-      </div>
+    <div>
+      <TopScreen>
+        <Stats v-if="showStats" />
+      </TopScreen>
     </div>
   </div>
-</template> -->
-<template>
-  <Screen>
-    <Background />
-    <Stats />
-  </Screen>
 </template>