feat(stage-web,docs): enable apple mobile web app capable meta tag

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW3

apps/stage-web/index.html

@@ -8,6 +8,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="description" content="Open source attempt to create cyber companion.">
     <meta name="apple-mobile-web-app-title" content="AIRI" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="rgb(18,18,18)" id="themeColor" />
 
     <!-- Open Graph Protocol -->

apps/stage-web/src/composables/theme-color.ts

@@ -65,6 +65,7 @@ export function useBackgroundThemeColor({
   selectedOption: Ref<BackgroundItem | undefined>
   sampledColor: Ref<string>
 }) {
+  const visibility = useDocumentVisibility()
   const { themeColorsHue, themeColorsHueDynamic } = useSettings()
 
   let samplingToken = 0
@@ -85,7 +86,7 @@ export function useBackgroundThemeColor({
 
   // Keep theme-color reasonably fresh for animated wave backgrounds without doing per-frame work.
   const { pause, resume } = useIntervalFn(() => {
-    if (useDocumentVisibility().value !== 'visible')
+    if (visibility.value !== 'visible')
       return
     if (selectedOption.value?.kind === BackgroundKind.Wave && themeColorsHueDynamic)
       void updateThemeColor()

docs/.vitepress/config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', sizes: 'any' }],
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
     ['meta', { name: 'apple-mobile-web-app-title', content: projectName }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
     ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${projectName} contributors` }],
     ['meta', { name: 'keywords', content: '' }],
     ['meta', { property: 'og:title', content: projectName }],