fix: safe-area for top/bottom

app/app.vue

@@ -2,7 +2,7 @@
 // import { installPrompt } from './utils/pwa'
 import { isClient } from '@vueuse/core'
 import { useIndexedDB } from '~/composables/db'
-import { appName, ionDarkClass } from '~/constants'
+import { appName } from '~/constants'
 
 // https://nuxt.com/docs/api/composables/use-head
 useHead({
@@ -16,16 +16,16 @@ useHead({
 })
 
 const indexedDB = useIndexedDB()
-const { isDark } = useDarkMode()
+const { isDark, setDarkMode, setLightMode } = useDarkMode()
 
 onMounted(() => {
   // init dark mode
   if (isClient) {
     if (isDark.value) {
-      document.documentElement.classList.add(ionDarkClass)
+      setDarkMode()
     }
     else {
-      document.documentElement.classList.remove(ionDarkClass)
+      setLightMode()
     }
 
     indexedDB.init()

app/composables/dark.ts

@@ -1,15 +1,40 @@
+import { StatusBar, Style } from '@capacitor/status-bar'
 import { ionDarkClass } from '~/constants'
 
 export const useDarkMode = createSharedComposable(() => {
   const color = useColorMode()
   const isDark = computed(() => color.value === 'dark')
 
+  async function setLightMode() {
+    document.documentElement.classList.remove(ionDarkClass)
+
+    await StatusBar.setStyle({ style: Style.Light })
+    await StatusBar.setBackgroundColor({ color: '#f2f2f6ff' })
+  }
+
+  async function setDarkMode() {
+    document.documentElement.classList.add(ionDarkClass)
+
+    await StatusBar.setStyle({ style: Style.Dark })
+    await StatusBar.setBackgroundColor({ color: '#ff000000' })
+  }
+
   return {
     color,
     isDark,
-    toggleDark() {
+    setLightMode,
-      color.preference = color.value === 'dark' ? 'light' : 'dark'
+    setDarkMode,
-      document.documentElement.classList.toggle(ionDarkClass, !isDark.value)
+
+    async toggleDark() {
+      const targetMode = color.value === 'dark' ? 'light' : 'dark'
+      color.preference = targetMode
+
+      if (targetMode === 'dark') {
+        setDarkMode()
+      }
+      else {
+        setLightMode()
+      }
     },
   }
 })

app/pages/recipes/history.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { RecipeItem } from '~/types'
 import { Dialog } from '@capacitor/dialog'
 import dayjs from 'dayjs'
 import { recipeHistories } from '~/composables/store/history'
@@ -26,6 +27,11 @@ async function clearAllHistory() {
 function clearOneHistory(history: typeof recipeHistories.value[0]) {
   recipeHistories.value = recipeHistories.value.filter(h => h !== history)
 }
+
+function openDishLink(dish: RecipeItem) {
+  const href = dish.link || `https://www.bilibili.com/video/${dish.bv}`
+  window.open(href, '_blank')
+}
 </script>
 
 <template>
@@ -49,7 +55,7 @@ function clearOneHistory(history: typeof recipeHistories.value[0]) {
       <ion-list>
         <template v-for="history in recipeHistories" :key="history.recipe.name">
           <ion-item-sliding>
-            <ion-item>
+            <ion-item @click="openDishLink(history.recipe)">
               <ion-label class="truncate">
                 <DishLabel class="text-sm" :dish="history.recipe" />
               </ion-label>

app/pages/settings.vue

@@ -10,7 +10,7 @@ definePageMeta({
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border">
+    <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
           <ion-back-button default-href="/my" />

app/styles/ionic.css

@@ -33,3 +33,8 @@
 .ion-palette-dark.md {
   --ion-item-background: #1c1c1d;
 }
+
+/* custom */
+html {
+  /* --ion-safe-area-top: 0px; */
+}

capacitor.config.ts

@@ -1,9 +1,19 @@
+/// <reference types="@capacitor/status-bar" />
+
 import type { CapacitorConfig } from '@capacitor/cli'
 
 const config: CapacitorConfig = {
   appId: 'cn.yunyoujun.cook',
   appName: 'cook',
   webDir: 'dist',
+
+  plugins: {
+    StatusBar: {
+      overlaysWebView: false,
+      style: 'DARK',
+      backgroundColor: '#ffffffff',
+    },
+  },
 }
 
 export default config

ios/App/App.xcodeproj/project.pbxproj

@@ -349,12 +349,13 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N3885VFNCL;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = cn.yunyoujun.cook;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -369,11 +370,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N3885VFNCL;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = cn.yunyoujun.cook;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

ios/App/App/Info.plist

@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>cook</string>
+	<string>cook</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

nuxt.config.ts

@@ -51,7 +51,7 @@ export default defineNuxtConfig({
         { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
       ],
       meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, viewport-fit=cover' },
         { name: 'description', content: appDescription },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
         { name: 'color-scheme', content: 'light dark' },

package.json

@@ -8,13 +8,14 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "build": "npm run convert && nuxt build",
+    "build": "npm run convert && npm run generate",
-    "build:static": "npm run convert && nuxt generate",
+    "build:nuxt": "nuxt build",
     "convert": "pnpm -C scripts run convert",
     "dev": "nuxt dev --host",
     "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
     "dev:android": "bash ./scripts/android.sh",
-    "dev:ios": "bash ./scripts/ios.sh",
+    "bash:ios": "bash ./scripts/ios.sh",
+    "dev:ios": "cap run ios -l",
     "ios": "cap run ios",
     "android": "cap run android",
     "open:ios": "cap open ios",