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

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>