feat: new setting modal (#2834)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/web/src/atoms/index.ts

@@ -80,6 +80,7 @@ export const openWorkspacesModalAtom = atom(false);
 export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
 export const openQuickSearchModalAtom = atom(false);
 export const openOnboardingModalAtom = atom(false);
+export const openSettingModalAtom = atom(false);
 
 export const openDisableCloudAlertModalAtom = atom(false);
 

apps/web/src/atoms/settings.ts

@@ -0,0 +1,67 @@
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+
+export type DateFormats =
+  | 'MM/dd/YYYY'
+  | 'dd/MM/YYYY'
+  | 'YYYY-MM-dd'
+  | 'YYYY.MM.dd'
+  | 'YYYY/MM/dd'
+  | 'dd-MMM-YYYY'
+  | 'dd MMMM YYYY';
+
+export type AppSetting = {
+  clientBorder: boolean;
+  fullWidthLayout: boolean;
+  windowFrameStyle: 'frameless' | 'NativeTitleBar';
+  dateFormat: DateFormats;
+  startWeekOnMonday: boolean;
+  disableBlurBackground: boolean;
+  disableNoisyBackground: boolean;
+  autoCheckUpdate: boolean;
+  autoDownloadUpdate: boolean;
+};
+export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
+  'frameless',
+  'NativeTitleBar',
+];
+
+export const dateFormatOptions: DateFormats[] = [
+  'MM/dd/YYYY',
+  'dd/MM/YYYY',
+  'YYYY-MM-dd',
+  'YYYY.MM.dd',
+  'YYYY/MM/dd',
+  'dd-MMM-YYYY',
+  'dd MMMM YYYY',
+];
+
+export const AppSettingAtom = atomWithStorage<AppSetting>('AFFiNE settings', {
+  clientBorder: false,
+  fullWidthLayout: false,
+  windowFrameStyle: 'frameless',
+  dateFormat: dateFormatOptions[0],
+  startWeekOnMonday: false,
+  disableBlurBackground: false,
+  disableNoisyBackground: false,
+  autoCheckUpdate: true,
+  autoDownloadUpdate: true,
+});
+
+export const useAppSetting = () => {
+  const [settings, setSettings] = useAtom(AppSettingAtom);
+
+  return [
+    settings,
+    useCallback(
+      (patch: Partial<AppSetting>) => {
+        setSettings((prev: AppSetting) => ({
+          ...prev,
+          ...patch,
+        }));
+      },
+      [setSettings]
+    ),
+  ] as const;
+};