feat: support for view management (#2892)

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

@@ -10,6 +10,7 @@ export const root = style({
   cursor: 'pointer',
   padding: '0 8px 0 12px',
   fontSize: 'var(--affine-font-sm)',
+  margin: '2px 0',
   selectors: {
     '&:hover': {
       background: 'var(--affine-hover-color)',
@@ -22,11 +23,12 @@ export const root = style({
       color: 'var(--affine-text-secondary-color)',
       pointerEvents: 'none',
     },
-    '&[data-active="true"]:hover': {
-      background:
-        // make this a variable?
-        'linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), rgba(0, 0, 0, 0.04);',
-    },
+    // this is not visible in dark mode
+    // '&[data-active="true"]:hover': {
+    //   background:
+    //     // make this a variable?
+    //     'linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), rgba(0, 0, 0, 0.04)',
+    // },
     '&[data-collapsible="true"]': {
       width: 'calc(100% + 8px)',
       transform: 'translateX(-8px)',
@@ -39,6 +41,7 @@ export const content = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  flex: 1,
 });
 
 export const icon = style({

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

@@ -12,6 +12,7 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   collapsed?: boolean; // true, false, undefined. undefined means no collapse
   onCollapsedChange?: (collapsed: boolean) => void;
+  postfix?: React.ReactElement;
 }
 
 export interface MenuLinkItemProps
@@ -28,6 +29,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
       disabled,
       collapsed,
       onCollapsedChange,
+      postfix,
       ...props
     },
     ref
@@ -43,7 +45,6 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
         ref={ref}
         {...props}
         className={clsx([styles.root, props.className])}
-        onClick={onClick}
         data-active={active}
         data-disabled={disabled}
         data-collapsible={collapsible}
@@ -68,11 +69,15 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
             )}
             {React.cloneElement(icon, {
               className: clsx([styles.icon, icon.props.className]),
+              onClick: onClick,
             })}
           </div>
         )}
 
-        <div className={styles.content}>{children}</div>
+        <div onClick={onClick} className={styles.content}>
+          {children}
+        </div>
+        {postfix}
       </div>
     );
   }