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

packages/common/env/src/global.ts

@@ -47,6 +47,7 @@ export type Environment = {
   isElectron: boolean;
   isDesktopWeb: boolean;
   isMobileWeb: boolean;
+  isStandalone?: boolean;
 
   // Device
   isLinux: boolean;
@@ -116,6 +117,7 @@ export function setupGlobal() {
       isFireFox: uaHelper.isFireFox,
       isChrome: uaHelper.isChrome,
       isIOS: uaHelper.isIOS,
+      isStandalone: uaHelper.isStandalone,
     };
     // Chrome on iOS is still Safari
     if (environment.isChrome && !environment.isIOS) {

packages/common/env/src/ua-helper.ts

@@ -8,6 +8,7 @@ export class UaHelper {
   public isMobile = false;
   public isChrome = false;
   public isIOS = false;
+  public isStandalone = false;
 
   getChromeVersion = (): number => {
     let raw = this.navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
@@ -30,6 +31,13 @@ export class UaHelper {
     return Boolean(this.uaMap[isUseragent]);
   }
 
+  private isStandaloneMode() {
+    if ('standalone' in window.navigator) {
+      return !!window.navigator.standalone;
+    }
+    return !!window.matchMedia('(display-mode: standalone)').matches;
+  }
+
   private initUaFlags() {
     this.isLinux = this.checkUseragent('linux');
     this.isMacOs = this.checkUseragent('mac');
@@ -39,6 +47,7 @@ export class UaHelper {
     this.isMobile = this.checkUseragent('mobile');
     this.isChrome = this.checkUseragent('chrome');
     this.isIOS = this.checkUseragent('ios');
+    this.isStandalone = this.isStandaloneMode();
   }
 }