🚀 Launch v1.0 pre-alpha testing

src/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-system-bar v-if="safeAreaHeight > 0" color="primary" :order="1" :height="safeAreaHeight" />
+    <v-system-bar v-show="ui.safeArea.top > 0" color="primary" :order="1" :height="ui.safeArea.top" />
 
     <router-view />
   </v-app>
@@ -8,13 +8,22 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
+import { Capacitor } from "@capacitor/core"
+import { useUI } from "@/stores/ui"
 
-const safeAreaHeight = ref(0)
+const ui = useUI()
 
 function updateSafeArea() {
-  const property = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
-  safeAreaHeight.value = parseInt(property.replace("px", ""))
+  const topProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  ui.safeArea.top = parseInt(topProperty.replace("px", ""))
+  const bottomProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  ui.safeArea.bottom = parseInt(bottomProperty.replace("px", ""))
 }
 
-onMounted(() => updateSafeArea())
+onMounted(() => {
+  updateSafeArea()
+  for (let idx = 1; idx <= 10; idx++) {
+    setTimeout(() => updateSafeArea(), 250 * idx)
+  }
+})
 </script>

src/layouts/master.vue

@@ -1,11 +1,8 @@
 <template>
   <v-navigation-drawer v-model="drawerOpen" color="grey-lighten-5" width="320" :order="0" floating>
     <div class="flex flex-col h-full">
-      <div
-        class="flex items-center px-3 pb-2.5 border-opacity-15"
-        style="border-bottom-width: thin"
-        :style="`padding-top: max(${safeAreaTop}, 16px)`"
-      >
+      <div class="flex items-center px-3 pb-2.5 border-opacity-15" style="border-bottom-width: thin"
+        :style="`padding-top: max(${safeAreaTop}, 16px)`">
         <img src="/favicon.png" width="36" height="36" class="block" />
         <div class="ms-6 font-medium">Solar Network</div>
       </div>
@@ -15,14 +12,11 @@
       </div>
 
       <!-- User info -->
-      <v-list
-        class="border-opacity-15 h-[64px]"
-        style="border-top-width: thin"
-        :style="`margin-bottom: ${safeAreaBottom}`"
-      >
+      <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
+        :style="`margin-bottom: ${safeAreaBottom}`">
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
-            <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.avatar" />
+            <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
           </template>
           <template #append>
             <v-menu v-if="id.userinfo.isLoggedIn">
@@ -31,12 +25,8 @@
               </template>
 
               <v-list density="compact">
-                <v-list-item
-                  title="Solarpass"
-                  prepend-icon="mdi-passport-biometric"
-                  target="_blank"
-                  :href="passportUrl"
-                />
+                <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
+                  :href="passportUrl" />
               </v-list>
             </v-menu>
 
@@ -58,7 +48,7 @@
       <v-spacer />
 
       <div v-if="id.userinfo.isLoggedIn">
-          <notification-list />
+        <notification-list />
       </div>
     </div>
   </v-app-bar>
@@ -67,24 +57,11 @@
     <router-view />
   </v-main>
 
-  <v-menu
-    open-on-hover
-    open-on-click
-    :open-delay="0"
-    :close-delay="0"
-    location="top"
-    transition="scroll-y-reverse-transition"
-  >
+  <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
+    transition="scroll-y-reverse-transition">
     <template v-slot:activator="{ props }">
-      <v-fab
-        v-bind="props"
-        appear
-        class="editor-fab"
-        icon="mdi-pencil"
-        color="primary"
-        size="64"
-        :active="id.userinfo.isLoggedIn"
-      />
+      <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
+        :active="id.userinfo.isLoggedIn" />
     </template>
 
     <div class="flex flex-col items-center gap-4 mb-4">
@@ -102,17 +79,20 @@ import { computed, ref } from "vue"
 import { useEditor } from "@/stores/editor"
 import { useUserinfo } from "@/stores/userinfo"
 import { useWellKnown } from "@/stores/wellKnown"
+import { useUI } from "@/stores/ui"
 import PostTools from "@/components/publish/PostTools.vue"
 import RealmTools from "@/components/realms/RealmTools.vue"
 import RealmList from "@/components/realms/RealmList.vue"
 import NotificationList from "@/components/NotificationList.vue"
 
+const ui = useUI()
+
 const safeAreaTop = computed(() => {
-  return getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+  return `${ui.safeArea.top}px`
 })
 
 const safeAreaBottom = computed(() => {
-  return getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")
+  return `${ui.safeArea.bottom}px`
 })
 
 const id = useUserinfo()

src/stores/ui.ts

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia"
+import { reactive } from "vue"
+
+export const useUI = defineStore("ui", () => {
+  const safeArea = reactive({
+    top: 0,
+    bottom: 0,
+  })
+
+  return { safeArea }
+})