From a16b57db48f17df12fc2c91500d8a0ace41078ab Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 23 Jan 2025 03:17:14 +0000
Subject: [PATCH] feat(core): make sidebar others collapsible (#9862)

---
 .../core/src/components/root-app-sidebar/index.tsx    | 11 +++++++----
 .../src/modules/explorer/entities/explore-section.ts  |  1 +
 .../core/src/modules/explorer/services/explorer.ts    |  1 +
 packages/frontend/core/src/modules/explorer/types.ts  |  3 ++-
 .../explorer/views/layouts/collapsible-section.tsx    |  4 ++++
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index 8ff983e56..95d32ca2b 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -3,7 +3,6 @@ import {
   AddPageButton,
   AppDownloadButton,
   AppSidebar,
-  CategoryDivider,
   MenuItem,
   MenuLinkItem,
   QuickSearchInput,
@@ -13,6 +12,7 @@ import {
 import { ExternalMenuLinkItem } from '@affine/core/modules/app-sidebar/views/menu-item/external-menu-link-item';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import {
+  CollapsibleSection,
   ExplorerCollections,
   ExplorerFavorites,
   ExplorerMigrationFavorites,
@@ -175,8 +175,11 @@ export const RootAppSidebar = memo((): ReactElement => {
         <ExplorerMigrationFavorites />
         <ExplorerCollections />
         <ExplorerTags />
-        <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
-        <div style={{ padding: '0 8px' }}>
+        <CollapsibleSection
+          name="others"
+          title={t['com.affine.rootAppSidebar.others']()}
+          contentStyle={{ padding: '6px 8px 0 8px' }}
+        >
           <TrashButton />
           <MenuItem
             data-testid="slider-bar-import-button"
@@ -191,7 +194,7 @@ export const RootAppSidebar = memo((): ReactElement => {
             icon={<JournalIcon />}
             label={t['com.affine.app-sidebar.learn-more']()}
           />
-        </div>
+        </CollapsibleSection>
       </SidebarScrollableContainer>
       <SidebarContainer>
         {BUILD_CONFIG.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
diff --git a/packages/frontend/core/src/modules/explorer/entities/explore-section.ts b/packages/frontend/core/src/modules/explorer/entities/explore-section.ts
index 3bfba344d..0b46349a5 100644
--- a/packages/frontend/core/src/modules/explorer/entities/explore-section.ts
+++ b/packages/frontend/core/src/modules/explorer/entities/explore-section.ts
@@ -12,6 +12,7 @@ const DEFAULT_COLLAPSABLE_STATE: Record<CollapsibleSectionName, boolean> = {
   tags: true,
   favoritesOld: true,
   migrationFavorites: true,
+  others: false,
 };
 
 export class ExplorerSection extends Entity<{ name: CollapsibleSectionName }> {
diff --git a/packages/frontend/core/src/modules/explorer/services/explorer.ts b/packages/frontend/core/src/modules/explorer/services/explorer.ts
index 238240eb8..ce7b96165 100644
--- a/packages/frontend/core/src/modules/explorer/services/explorer.ts
+++ b/packages/frontend/core/src/modules/explorer/services/explorer.ts
@@ -11,6 +11,7 @@ const allSectionName: Array<CollapsibleSectionName> = [
   'tags',
   'favoritesOld',
   'migrationFavorites',
+  'others',
 ];
 
 export class ExplorerService extends Service {
diff --git a/packages/frontend/core/src/modules/explorer/types.ts b/packages/frontend/core/src/modules/explorer/types.ts
index 7ecd0ccc2..b2423fb67 100644
--- a/packages/frontend/core/src/modules/explorer/types.ts
+++ b/packages/frontend/core/src/modules/explorer/types.ts
@@ -5,4 +5,5 @@ export type CollapsibleSectionName =
   | 'tags'
   | 'organize'
   | 'favoritesOld'
-  | 'migrationFavorites';
+  | 'migrationFavorites'
+  | 'others';
diff --git a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
index f231139cc..344d69306 100644
--- a/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx
@@ -3,6 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import {
+  type CSSProperties,
   type PropsWithChildren,
   type ReactNode,
   type RefObject,
@@ -26,6 +27,7 @@ interface CollapsibleSectionProps extends PropsWithChildren {
   headerClassName?: string;
 
   contentClassName?: string;
+  contentStyle?: CSSProperties;
 }
 
 export const CollapsibleSection = ({
@@ -42,6 +44,7 @@ export const CollapsibleSection = ({
   headerClassName,
 
   contentClassName,
+  contentStyle,
 }: CollapsibleSectionProps) => {
   const section = useService(ExplorerService).sections[name];
 
@@ -74,6 +77,7 @@ export const CollapsibleSection = ({
       <Collapsible.Content
         data-testid="collapsible-section-content"
         className={clsx(content, contentClassName)}
+        style={contentStyle}
       >
         {children}
       </Collapsible.Content>