chore(stage-tamagotchi): create title bar component

apps/stage-tamagotchi/src/components/Window/TitleBar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <div
+    bg="neutral-100 dark:neutral-900" w="100dvw"
+    data-tauri-drag-region
+    fixed top="0" z-100 w-full py-2 pl-20 pr-4
+  >
+    <div data-tauri-drag-region flex>
+      <div
+        bg="hover:neutral-200 hover:dark:neutral-800"
+        transition="all duration-200 ease-in-out"
+        flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-0.5
+      >
+        <div :class="icon" text="neutral-400 dark:neutral-500" text-nowrap />
+        <div><span text-nowrap>{{ title }}</span></div>
+      </div>
+      <div data-tauri-drag-region w-full />
+      <div
+        bg="hover:neutral-200 hover:dark:neutral-800"
+        transition="all duration-200 ease-in-out"
+        flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-0.5
+      >
+        <div i-solar:info-circle-bold text="neutral-400 dark:neutral-500" text-nowrap />
+      </div>
+    </div>
+  </div>
+</template>

apps/stage-tamagotchi/src/layouts/settings.vue

@@ -6,6 +6,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView, useRoute } from 'vue-router'
 
+import WindowTitleBar from '../components/Window/TitleBar.vue'
+
 const route = useRoute()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
@@ -104,30 +106,10 @@ const routeHeaderMetadata = computed(() => routeHeaderMetadataMap.value[route.pa
 
 <template>
   <div h-full w-full mt="44px" overflow-y-scroll>
-    <div
-      bg="neutral-100 dark:neutral-900" w="100dvw"
-      data-tauri-drag-region
-      fixed top="0" z-100 w-full py-2 pl-20 pr-4
-    >
-      <div data-tauri-drag-region flex>
-        <div
-          bg="hover:neutral-200 hover:dark:neutral-800"
-          transition="all duration-200 ease-in-out"
-          flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-0.5
-        >
-          <div i-solar:settings-bold text="neutral-400 dark:neutral-500" text-nowrap />
-          <div><span text-nowrap>Settings</span></div>
-        </div>
-        <div data-tauri-drag-region w-full />
-        <div
-          bg="hover:neutral-200 hover:dark:neutral-800"
-          transition="all duration-200 ease-in-out"
-          flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-0.5
-        >
-          <div i-solar:info-circle-bold text="neutral-400 dark:neutral-500" text-nowrap />
-        </div>
-      </div>
-    </div>
+    <WindowTitleBar
+      :title="routeHeaderMetadata?.title"
+      icon="i-solar:settings-bold"
+    />
     <div
       :style="{
         paddingBottom: 'env(safe-area-inset-bottom, 0px)',

apps/stage-tamagotchi/src/pages/chat.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import InteractiveArea from '../components/InteractiveArea.vue'
+import WindowTitleBar from '../components/Window/TitleBar.vue'
 </script>
 
 <template>
-  <InteractiveArea
-    class="interaction-area block"
-    h-full w-full p-4 transition="opacity duration-250"
-  />
+  <div h-full w-full pt="44px" overflow-y-scroll>
+    <WindowTitleBar
+      title="Chat"
+      icon="i-solar:chat-line-bold"
+    />
+    <InteractiveArea
+      class="interaction-area block"
+      h-full w-full p-4 transition="opacity duration-250"
+    />
+  </div>
 </template>
 
 <route lang="yaml">