feat(core): make sidebar others collapsible (#9862)

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 />}

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 }> {

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 {

packages/frontend/core/src/modules/explorer/types.ts

@@ -5,4 +5,5 @@ export type CollapsibleSectionName =
   | 'tags'
   | 'organize'
   | 'favoritesOld'
-  | 'migrationFavorites';
+  | 'migrationFavorites'
+  | 'others';

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>