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/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',
         };
       },
     });