feat: modify setting modal (#3008)

apps/web/src/atoms/settings.ts

@@ -17,8 +17,8 @@ export type AppSetting = {
   windowFrameStyle: 'frameless' | 'NativeTitleBar';
   dateFormat: DateFormats;
   startWeekOnMonday: boolean;
-  disableBlurBackground: boolean;
-  disableNoisyBackground: boolean;
+  enableBlurBackground: boolean;
+  enableNoisyBackground: boolean;
   autoCheckUpdate: boolean;
   autoDownloadUpdate: boolean;
 };
@@ -43,8 +43,8 @@ export const AppSettingAtom = atomWithStorage<AppSetting>('AFFiNE settings', {
   windowFrameStyle: 'frameless',
   dateFormat: dateFormatOptions[0],
   startWeekOnMonday: false,
-  disableBlurBackground: false,
-  disableNoisyBackground: false,
+  enableBlurBackground: true,
+  enableNoisyBackground: true,
   autoCheckUpdate: true,
   autoDownloadUpdate: true,
 });

apps/web/src/components/affine/app-container.tsx

@@ -10,8 +10,8 @@ export const AppContainer = (props: WorkspaceRootProps) => {
 
   return (
     <AppContainerWithoutSettings
-      useNoisyBackground={!appSettings.disableNoisyBackground}
-      useBlurBackground={!appSettings.disableBlurBackground}
+      useNoisyBackground={appSettings.enableNoisyBackground}
+      useBlurBackground={!appSettings.enableBlurBackground}
       {...props}
     />
   );

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -23,7 +23,7 @@ export const AboutAffine = () => {
     <>
       <SettingHeader
         title={t['About AFFiNE']()}
-        subtitle={t['None yet']()}
+        subtitle={t['Information about AFFiNE']()}
         data-testid="about-title"
       />
       {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -145,24 +145,24 @@ export const AppearanceSettings = () => {
       {environment.isDesktop ? (
         <SettingWrapper title={t['Sidebar']()}>
           <SettingRow
-            name={t['Disable the noise background on the sidebar']()}
-            desc={t['None yet']()}
+            name={t['Noise background on the sidebar']()}
+            desc={t['Use background noise effect on the sidebar.']()}
           >
             <Switch
-              checked={appSettings.disableNoisyBackground}
+              checked={appSettings.enableNoisyBackground}
               onChange={checked =>
-                changeSwitch('disableNoisyBackground', checked)
+                changeSwitch('enableNoisyBackground', checked)
               }
             />
           </SettingRow>
           <SettingRow
-            name={t['Disable the blur sidebar']()}
-            desc={t['None yet']()}
+            name={t['Translucent UI on the sidebar']()}
+            desc={t['Use transparency effect on the sidebar.']()}
           >
             <Switch
-              checked={!appSettings.disableBlurBackground}
+              checked={appSettings.enableBlurBackground}
               onChange={checked =>
-                changeSwitch('disableBlurBackground', !checked)
+                changeSwitch('enableBlurBackground', checked)
               }
             />
           </SettingRow>

apps/web/src/components/root-app-sidebar/index.tsx

@@ -153,7 +153,7 @@ export const RootAppSidebar = ({
     <>
       <AppSidebar
         router={router}
-        hasBackground={!appSettings.disableBlurBackground}
+        hasBackground={!appSettings.enableBlurBackground}
       >
         <SidebarContainer>
           <NoSsr>