feat(core): outline viewer (quick toc) (#7614)

Close: [BS-949](https://linear.app/affine-design/issue/BS-949/outline-viewer-加入到affine)

Details  are in this PR: https://github.com/toeverything/blocksuite/pull/7704

packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx

@@ -80,11 +80,13 @@ const ExperimentalFeaturesItem = ({
   isMutating,
   checked,
   onChange,
+  testId,
 }: {
   title: React.ReactNode;
   isMutating?: boolean;
   checked: boolean;
   onChange: (checked: boolean) => void;
+  testId?: string;
 }) => {
   return (
     <div className={styles.switchRow}>
@@ -93,6 +95,7 @@ const ExperimentalFeaturesItem = ({
         checked={checked}
         onChange={onChange}
         className={isMutating ? styles.switchDisabled : ''}
+        data-testid={testId}
       />
     </div>
   );
@@ -121,6 +124,26 @@ const SplitViewSettingRow = () => {
   );
 };
 
+const OutlineViewerSettingRow = () => {
+  const { appSettings, updateSettings } = useAppSettingHelper();
+
+  const onToggle = useCallback(
+    (checked: boolean) => {
+      updateSettings('enableOutlineViewer', checked);
+    },
+    [updateSettings]
+  );
+
+  return (
+    <ExperimentalFeaturesItem
+      title="Outline Viewer"
+      checked={appSettings.enableOutlineViewer}
+      onChange={onToggle}
+      testId="outline-viewer-switch"
+    />
+  );
+};
+
 // feature flag -> display name
 const blocksuiteFeatureFlags: Partial<Record<keyof BlockSuiteFlags, string>> = {
   enable_expand_database_block: 'Enable Expand Database Block',
@@ -177,6 +200,7 @@ const ExperimentalFeaturesMain = () => {
       >
         <SplitViewSettingRow />
         <BlocksuiteFeatureFlagSettings />
+        <OutlineViewerSettingRow />
       </div>
     </>
   );