feat(ui): transparent status bar

components/main/MainContent.vue

@@ -8,10 +8,11 @@ defineProps<{
 </script>
 
 <template>
-  <div relative>
+  <div>
     <div
-      sticky top-0 z10
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
+      sticky top-0 z10 backdrop-blur
+      pt="[env(safe-area-inset-top,0)]"
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>

composables/setups.ts

@@ -44,5 +44,8 @@ export function setupPageHeader() {
     },
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
+    meta: [
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+    ],
   })
 }