Cleaned layout (titles, rules, stores)

src/components/YrhButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
 import { useElementHover, useFocus } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()

src/components/YrhHeading.vue

@@ -1,7 +1,18 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
 <template>
+  <div class="flex items-end">
     <h1 class="text-4xl tracking-wider">
       <slot />
     </h1>
+    <span v-if="slots.subtitle" class="ml-2 text-lg font-medium">
+      <slot name="subtitle" />
+    </span>
+  </div>
 </template>
 
 <style scoped>

src/components/YrhNav.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 import YrhButton from './YrhButton.vue'
 
-import { useBannerStore } from '@/stores/banner'
-import type { MenuItem } from '@/models/YrhNavItem'
 const { bannerText } = storeToRefs(useBannerStore())
 
 const props = defineProps<{

src/components/datas/YrhStatusCard.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useStatusStore } from '@/stores/datas/statusStore'
-import YrhCard from '../YrhCard.vue'
 import { storeToRefs } from 'pinia'
+import YrhCard from '../YrhCard.vue'
 
 const { androidData } = storeToRefs(useStatusStore())
 </script>
@@ -50,7 +50,7 @@ const { androidData } = storeToRefs(useStatusStore())
         <span> {{ androidData.defenseRaw || 0 }} </span>
       </div>
 
-      <div class="mt-2 opacity-25 flex justify-around">
+      <div class="mt-2 text-y-beige-500 flex justify-around">
         <font-awesome-icon :icon="['far', 'square']" />
         <font-awesome-icon :icon="['far', 'square']" />
         <font-awesome-icon :icon="['far', 'square']" />
@@ -68,9 +68,10 @@ const { androidData } = storeToRefs(useStatusStore())
       </div>
       <hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
     </template>
+
     <template #footer>
       <div class="h-full grid place-items-center">
-        <span class="text-sm uppercase">No error</span>
+        <span class="text-xs uppercase">No error</span>
       </div>
     </template>
   </YrhCard>

src/components/datas/items/ItemSelection.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import type { GameItem } from '@/models/YrhGameItem'
-
 import YrhButton from '@/components/YrhButton.vue'
-
+import type { GameItem } from '@/models/YrhGameItem'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
 

src/main.ts

@@ -1,8 +1,6 @@
 import './assets/main.scss'
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'
 

src/views/DataView.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import YrhBanner from '@/components/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 
@@ -9,8 +8,6 @@ const { bannerText } = storeToRefs(useBannerStore())
 
 <template>
   <main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
-    <YrhHeading> ANDROID DATA </YrhHeading>
-
     <RouterView v-slot="{ Component }">
       <Transition name="fade" mode="out-in">
         <component :is="Component" />

src/views/HomeView.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
-
+import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
-import type { MenuItem } from '@/models/YrhNavItem'
+import { ref, onMounted } from 'vue'
 
 const { bannerText } = storeToRefs(useBannerStore())
 
@@ -62,6 +60,10 @@ const activeRoute = ref<string | null>('')
 function switchActiveRoute(key: string | null) {
   activeRoute.value = key
 }
+
+onMounted(() => {
+  bannerText.value = null
+})
 </script>
 
 <template>

src/views/datas/ItemsView.vue

@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import YrhCard from '@/components/YrhCard.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
+import { useBannerStore } from '@/stores/banner'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
-import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
+import { computed, onMounted } from 'vue'
 
 const { currentItem, availableItems } = storeToRefs(useItemStore())
+const { bannerText } = storeToRefs(useBannerStore())
 
 const currentItemImage = computed(() => {
   switch (currentItem.value?.category) {
@@ -20,9 +23,17 @@ const currentItemImage = computed(() => {
       return null
   }
 })
+
+onMounted(() => {
+  bannerText.value = 'Select item'
+})
 </script>
 
 <template>
+  <YrhHeading>
+    ITEMS
+    <template #subtitle> All items </template>
+  </YrhHeading>
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
     <div class="items-container max-h-full overflow-hidden">
       <ItemSelection :items="availableItems" />