feat(mobile): pwa and browser theme-color optimization (#8168)

[AF-1325](https://linear.app/affine-design/issue/AF-1325/优化-pwa-体验), [AF-1317](https://linear.app/affine-design/issue/AF-1317/优化：-pwa-的顶部-status-bar-颜色应与背景保持一致), [AF-1318](https://linear.app/affine-design/issue/AF-1318/优化：pwa-的底部应当有符合设备安全高度的padding), [AF-1321](https://linear.app/affine-design/issue/AF-1321/更新一下-fail-的-pwa-icon)

- New `<SafeArea />` ui component
- New `useThemeColorV1` / `useThemeColorV2` hook:
    - to modify `<meta name="theme-color" />` with given theme key

tools/cli/src/webpack/template.html

@@ -4,8 +4,16 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
+      content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=<%= VIEWPORT_FIT %>"
     />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+
     <title>AFFiNE</title>
     <meta name="theme-color" content="#fafafa" />
     <link rel="preconnect" href="<%= PUBLIC_PATH %>" />

tools/cli/src/webpack/webpack.config.ts

@@ -74,6 +74,7 @@ export function createWebpackConfig(cwd: string, flags: BuildFlags) {
           GIT_SHORT_SHA: gitShortHash(),
           DESCRIPTION,
           PUBLIC_PATH: config.output?.publicPath,
+          VIEWPORT_FIT: flags.distribution === 'mobile' ? 'cover' : 'auto',
         };
       },
     });