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/frontend/component/src/ui/modal/modal.tsx

@@ -15,6 +15,7 @@ import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { startScopedViewTransition } from '../../utils';
 import type { IconButtonProps } from '../button';
 import { IconButton } from '../button';
+import { SafeArea } from '../safe-area';
 import * as styles from './styles.css';
 
 export interface ModalProps extends DialogProps {
@@ -214,7 +215,9 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
             }}
             {...otherOverlayOptions}
           >
-            <div
+            <SafeArea
+              bottom={environment.isMobileEdition}
+              bottomOffset={12}
               data-full-screen={fullScreen}
               data-modal={modal}
               className={clsx(
@@ -278,7 +281,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
 
                 {children}
               </Dialog.Content>
-            </div>
+            </SafeArea>
           </Dialog.Overlay>
         </Dialog.Portal>
       </Dialog.Root>

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -83,7 +83,7 @@ export const modalContentWrapper = style({
     'screen and (width <= 640px)': {
       // todo: adjust animation
       alignItems: 'flex-end',
-      paddingBottom: 32,
+      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
     },
   },