fix: a serise of ui issues of new setting (#2920)

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

.github/workflows/build.yml

@@ -27,6 +27,7 @@ on:
 
 env:
   DEBUG: napi:*
+  BUILD_TYPE: canary
   APP_NAME: affine
   COVERAGE: true
   MACOSX_DEPLOYMENT_TARGET: '10.13'
@@ -89,8 +90,6 @@ jobs:
     name: Build @affine/web
     runs-on: ubuntu-latest
     environment: development
-    env:
-      RELEASE_VERSION: canary
 
     steps:
       - uses: actions/checkout@v3
@@ -109,9 +108,6 @@ jobs:
     name: Build @affine/web (Desktop)
     runs-on: ubuntu-latest
     environment: development
-    env:
-      ENABLE_BOOKMARK_OPERATION: true
-      RELEASE_VERSION: canary
 
     steps:
       - uses: actions/checkout@v3

apps/web/preset.config.mjs

@@ -19,7 +19,7 @@ export const blockSuiteFeatureFlags = {
  */
 const buildPreset = {
   stable: {
-    enableAllPageFilter: true,
+    enableAllPageSaving: false,
     enablePlugin: false,
     enableTestProperties: false,
     enableBroadcastChannelProvider: true,
@@ -28,13 +28,14 @@ const buildPreset = {
     changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0620',
     enablePreloading: true,
     enableNewSettingModal: false,
+    enableNewSettingUnstableApi: false,
     enableSQLiteProvider: false,
   },
   beta: {},
   internal: {},
   // canary will be aggressive and enable all features
   canary: {
-    enableAllPageFilter: true,
+    enableAllPageSaving: true,
     enablePlugin: true,
     enableTestProperties: true,
     enableBroadcastChannelProvider: true,
@@ -43,6 +44,7 @@ const buildPreset = {
     changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
     enablePreloading: true,
     enableNewSettingModal: true,
+    enableNewSettingUnstableApi: false,
     enableSQLiteProvider: false,
   },
 };
@@ -51,36 +53,43 @@ const buildPreset = {
 buildPreset.beta = buildPreset.stable;
 buildPreset.internal = buildPreset.stable;
 
-const currentBuild = process.env.BUILD_ENV || 'stable';
+const currentBuild = process.env.BUILD_TYPE || 'stable';
+
+if (process.env.CI && !process.env.BUILD_TYPE) {
+  throw new Error('BUILD_ENV is required in CI');
+}
 
 const currentBuildPreset = buildPreset[currentBuild];
 
 const environmentPreset = {
   enablePlugin: process.env.ENABLE_PLUGIN
     ? process.env.ENABLE_PLUGIN === 'true'
-    : buildPreset.canary.enablePlugin,
+    : currentBuildPreset.enablePlugin,
-  enableAllPageFilter: process.env.ENABLE_ALL_PAGE_FILTER
+  enableAllPageSaving: process.env.ENABLE_ALL_PAGE_SAVING
     ? process.env.ENABLE_ALL_PAGE_FILTER === 'true'
-    : buildPreset.canary.enableAllPageFilter,
+    : currentBuildPreset.enableAllPageSaving,
   enableTestProperties: process.env.ENABLE_TEST_PROPERTIES
     ? process.env.ENABLE_TEST_PROPERTIES === 'true'
-    : buildPreset.canary.enableTestProperties,
+    : currentBuildPreset.enableTestProperties,
   enableLegacyCloud: process.env.ENABLE_LEGACY_PROVIDER
     ? process.env.ENABLE_LEGACY_PROVIDER === 'true'
-    : buildPreset.canary.enableLegacyCloud,
+    : currentBuildPreset.enableLegacyCloud,
   enableBroadcastChannelProvider: process.env.ENABLE_BC_PROVIDER
     ? process.env.ENABLE_BC_PROVIDER !== 'false'
-    : buildPreset.canary.enableBroadcastChannelProvider,
+    : currentBuildPreset.enableBroadcastChannelProvider,
-  changelogUrl: process.env.CHANGELOG_URL ?? buildPreset.canary.changelogUrl,
+  changelogUrl: process.env.CHANGELOG_URL ?? currentBuildPreset.changelogUrl,
   enablePreloading: process.env.ENABLE_PRELOADING
     ? process.env.ENABLE_PRELOADING === 'true'
-    : buildPreset.canary.enablePreloading,
+    : currentBuildPreset.enablePreloading,
   enableNewSettingModal: process.env.ENABLE_NEW_SETTING_MODAL
     ? process.env.ENABLE_NEW_SETTING_MODAL === 'true'
-    : buildPreset.canary.enableNewSettingModal,
+    : currentBuildPreset.enableNewSettingModal,
   enableSQLiteProvider: process.env.ENABLE_SQLITE_PROVIDER
     ? process.env.ENABLE_SQLITE_PROVIDER === 'true'
-    : buildPreset.canary.enableSQLiteProvider,
+    : currentBuildPreset.enableSQLiteProvider,
+  enableNewSettingUnstableApi: process.env.ENABLE_NEW_SETTING_UNSTABLE_API
+    ? process.env.ENABLE_NEW_SETTING_UNSTABLE_API === 'true'
+    : currentBuildPreset.enableNewSettingUnstableApi,
 };
 
 /**
@@ -91,7 +100,7 @@ const buildFlags = {
   // environment preset will overwrite current build preset
   // this environment variable is for debug proposes only
   // do not put them into CI
-  ...environmentPreset,
+  ...(process.env.CI ? {} : environmentPreset),
 };
 
 export { buildFlags };

apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx

@@ -137,9 +137,7 @@ const PublishPanelLocal: FC<PublishPanelLocalProps> = ({
           }}
           style={{ marginTop: '12px' }}
         >
-          {runtimeConfig.enableLegacyCloud
+          {t['Enable AFFiNE Cloud']()}
-            ? t['Enable AFFiNE Cloud']()
-            : 'Disable AFFiNE Cloud'}
         </Button>
       </SettingRow>
       <FakePublishPanelAffine workspace={workspace} />

apps/web/src/components/affine/setting-modal/config.ts

@@ -1,2 +0,0 @@
-// Some settings are not implemented yet, but need to show in the setting modal when boss is watching.
-export const IS_EXHIBITION = true;

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

@@ -8,7 +8,6 @@ import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
 import { useCallback } from 'react';
 
 import { type AppSetting, useAppSetting } from '../../../../../atoms/settings';
-import { IS_EXHIBITION } from '../../config';
 import { communityItem, communityWrapper, link } from './style.css';
 
 export const AboutAffine = () => {
@@ -23,7 +22,7 @@ export const AboutAffine = () => {
   return (
     <>
       <SettingHeader title={t['About AFFiNE']()} subtitle={t['None yet']()} />
-      {IS_EXHIBITION && environment.isDesktop ? (
+      {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
         <SettingWrapper title={t['Version']()}>
           <SettingRow
             name={t['Check for updates']()}

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

@@ -12,7 +12,6 @@ import {
   windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
 import { LanguageMenu } from '../../../language-menu';
-import { IS_EXHIBITION } from '../../config';
 import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
 
@@ -70,7 +69,7 @@ export const AppearanceSettings = () => {
             <LanguageMenu />
           </div>
         </SettingRow>
-        {IS_EXHIBITION && environment.isDesktop ? (
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
           <SettingRow
             name={t['Client Border Style']()}
             desc={t['Customize the appearance of the client.']()}
@@ -91,7 +90,7 @@ export const AppearanceSettings = () => {
             onChange={checked => changeSwitch('fullWidthLayout', checked)}
           />
         </SettingRow>
-        {IS_EXHIBITION && environment.isDesktop ? (
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
           <SettingRow
             name={t['Window frame style']()}
             desc={t['Customize appearance of Windows Client.']()}
@@ -114,7 +113,7 @@ export const AppearanceSettings = () => {
           </SettingRow>
         ) : null}
       </SettingWrapper>
-      {IS_EXHIBITION ? (
+      {runtimeConfig.enableNewSettingUnstableApi ? (
         <SettingWrapper title={t['Date']()}>
           <SettingRow
             name={t['Date Format']()}
@@ -154,9 +153,9 @@ export const AppearanceSettings = () => {
             desc={t['None yet']()}
           >
             <Switch
-              checked={appSettings.disableBlurBackground}
+              checked={!appSettings.disableBlurBackground}
               onChange={checked =>
-                changeSwitch('disableBlurBackground', checked)
+                changeSwitch('disableBlurBackground', !checked)
               }
             />
           </SettingRow>

apps/web/src/components/affine/setting-modal/style.css.ts

@@ -3,7 +3,8 @@ import { globalStyle, style } from '@vanilla-extract/css';
 export const settingContent = style({
   flexGrow: '1',
   height: '100%',
-  padding: '40px 0',
+  padding: '40px 15px 20px',
+  overflowX: 'auto',
 });
 
 globalStyle(`${settingContent} .wrapper`, {

apps/web/src/components/workspace-header.tsx

@@ -39,7 +39,7 @@ export function WorkspaceHeader({
               }}
             />
           </div>
-          {runtimeConfig.enableAllPageFilter && (
+          {runtimeConfig.enableAllPageSaving && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&

packages/component/src/components/app-sidebar/index.css.ts

@@ -16,7 +16,6 @@ export const navWrapperStyle = style({
   zIndex: 2,
   paddingBottom: '8px',
   backgroundColor: 'transparent',
-  borderRight: '1px solid var(--affine-border-color)',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
@@ -42,6 +41,10 @@ export const navWrapperStyle = style({
     },
     '&.has-background': {
       backgroundColor: 'var(--affine-white-60)',
+      borderRight: '1px solid var(--affine-border-color)',
+    },
+    '&.has-border': {
+      borderRight: '1px solid var(--affine-border-color)',
     },
   },
 });

packages/component/src/components/app-sidebar/index.tsx

@@ -97,6 +97,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         })}
         className={clsx(navWrapperStyle, {
           'has-background': environment.isDesktop && props.hasBackground,
+          'has-border':
+            !environment.isDesktop ||
+            (environment.isDesktop && props.hasBackground),
         })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}

packages/env/src/global.ts

@@ -50,12 +50,7 @@ declare global {
 }
 
 export const buildFlagsSchema = z.object({
-  /**
+  enableAllPageSaving: z.boolean(),
-   * todo: remove this build flag when filter feature is ready.
-   *
-   * filter feature in the all pages.
-   */
-  enableAllPageFilter: z.boolean(),
   enablePlugin: z.boolean(),
   enableTestProperties: z.boolean(),
   enableBroadcastChannelProvider: z.boolean(),
@@ -64,6 +59,7 @@ export const buildFlagsSchema = z.object({
   changelogUrl: z.string(),
   enablePreloading: z.boolean(),
   enableNewSettingModal: z.boolean(),
+  enableNewSettingUnstableApi: z.boolean(),
   enableSQLiteProvider: z.boolean(),
 });