fix: adjust some styles (#2438)

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -148,7 +148,7 @@ export const WorkspaceListModal = ({
           {environment.isDesktop && (
             <Menu
               placement="auto"
-              trigger={['click', 'hover']}
+              trigger={['click']}
               zIndex={1000}
               content={
                 <StyledCreateWorkspaceCardPillContainer>

apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -10,6 +10,7 @@ import { useMemo, useState } from 'react';
 import { workspacePreferredModeAtom } from '../../../../atoms';
 import type { FavoriteListProps } from '../index';
 import EmptyItem from './empty-item';
+import * as styles from './styles.css';
 
 interface FavoriteMenuItemProps {
   workspace: Workspace;
@@ -33,16 +34,13 @@ function FavoriteMenuItem({
     return [...new Set(references.filter(ref => !parentIds.has(ref)))];
   }, [references, parentIds]);
   const [collapsed, setCollapsed] = useState(true);
-  const collapsible = referencesToShow.length > 0 && parentIds.size === 0;
+  const collapsible = referencesToShow.length > 0;
   const showReferences = collapsible ? !collapsed : referencesToShow.length > 0;
   const nestedItem = parentIds.size > 0;
+  const untitled = !metaMapping[pageId]?.title;
   return (
-    <>
+    <div className={styles.favItemWrapper} data-nested={nestedItem}>
       <MenuLinkItem
-        style={{
-          marginLeft: nestedItem ? '12px' : undefined,
-          width: nestedItem ? 'calc(100% - 12px)' : undefined,
-        }}
         data-type="favorite-list-item"
         data-testid={`favorite-list-item-${pageId}`}
         active={active}
@@ -51,7 +49,9 @@ function FavoriteMenuItem({
         collapsed={collapsible ? collapsed : undefined}
         onCollapsedChange={setCollapsed}
       >
-        <span>{metaMapping[pageId]?.title || 'Untitled'}</span>
+        <span className={styles.label} data-untitled={untitled}>
+          {metaMapping[pageId]?.title || 'Untitled'}
+        </span>
       </MenuLinkItem>
       {showReferences &&
         referencesToShow.map(ref => {
@@ -65,7 +65,7 @@ function FavoriteMenuItem({
             />
           );
         })}
-    </>
+    </div>
   );
 }
 

apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+
+export const label = style({
+  selectors: {
+    '&[data-untitled="true"]': {
+      opacity: 0.6,
+    },
+  },
+});
+
+export const favItemWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+  selectors: {
+    '&[data-nested="true"]': {
+      marginLeft: '12px',
+      width: 'calc(100% - 12px)',
+    },
+  },
+});

packages/component/src/components/app-sidebar/add-page-button/index.tsx

@@ -12,7 +12,6 @@ interface AddPageButtonProps {
   style?: React.CSSProperties;
 }
 
-// Although it is called an input, it is actually a button.
 export function AddPageButton({
   onClick,
   className,

packages/component/src/components/app-sidebar/app-updater-button/index.css.ts

@@ -62,11 +62,17 @@ export const closeIcon = style({
   cursor: 'pointer',
   transition: '0.1s',
   borderRadius: '50%',
+  transform: 'scale(0.6)',
   zIndex: 1,
+  opacity: 0,
   selectors: {
     '&:hover': {
       transform: 'scale(1.1)',
     },
+    [`${root}:hover &`]: {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
   },
 });
 

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

@@ -14,6 +14,7 @@ export const navWrapperStyle = style({
   minWidth: navWidthVar,
   height: '100%',
   zIndex: 2,
+  paddingBottom: '8px',
   backgroundColor: 'transparent',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {

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

@@ -69,6 +69,7 @@ export const iconsContainer = style({
   alignItems: 'center',
   justifyContent: 'flex-start',
   width: '28px',
+  flexShrink: 0,
   selectors: {
     '&[data-collapsible="true"]': {
       width: '40px',

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

@@ -39,28 +39,29 @@ export function MenuItem({
       data-disabled={disabled}
       data-collapsible={collapsible}
     >
-      <div className={styles.iconsContainer} data-collapsible={collapsible}>
+      {icon && (
-        {collapsible && (
+        <div className={styles.iconsContainer} data-collapsible={collapsible}>
-          <div
+          {collapsible && (
-            onClick={e => {
+            <div
-              e.stopPropagation();
+              onClick={e => {
-              e.preventDefault(); // for links
+                e.stopPropagation();
-              onCollapsedChange?.(!collapsed);
+                e.preventDefault(); // for links
-            }}
+                onCollapsedChange?.(!collapsed);
-            data-testid="fav-collapsed-button"
+              }}
-            className={styles.collapsedIconContainer}
+              data-testid="fav-collapsed-button"
-          >
+              className={styles.collapsedIconContainer}
-            <ArrowDownSmallIcon
+            >
-              className={styles.collapsedIcon}
+              <ArrowDownSmallIcon
-              data-collapsed={collapsed}
+                className={styles.collapsedIcon}
-            />
+                data-collapsed={collapsed}
-          </div>
+              />
-        )}
+            </div>
-        {icon &&
+          )}
-          React.cloneElement(icon, {
+          {React.cloneElement(icon, {
             className: clsx([styles.icon, icon.props.className]),
           })}
-      </div>
+        </div>
+      )}
 
       <div className={styles.content}>{children}</div>
     </div>

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

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const baseContainer = style({
-  padding: '12px 16px',
+  padding: '4px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
   rowGap: '4px',
@@ -13,17 +13,27 @@ export const scrollableContainerRoot = style({
   vars: {
     '--scrollbar-width': '10px',
   },
-  transition: 'all .3s .2s',
+});
-  borderTop: '1px solid transparent',
+
+export const scrollTopBorder = style({
+  position: 'absolute',
+  top: 0,
+  left: '16px',
+  right: '16px',
+  height: '1px',
+  transition: 'opacity .3s .2s',
+  opacity: 0,
+  background: 'var(--affine-black-10)',
   selectors: {
     '&[data-has-scroll-top="true"]': {
-      boxShadow: 'inset 0 8px 8px -8px var(--affine-black-10)',
+      opacity: 1,
     },
   },
 });
 
 export const scrollableViewport = style({
   height: '100%',
+  marginTop: '4px',
 });
 
 globalStyle(`${scrollableViewport} > div`, {

packages/component/src/components/app-sidebar/sidebar-containers/index.tsx

@@ -39,10 +39,11 @@ function useHasScrollTop() {
 export function SidebarScrollableContainer({ children }: PropsWithChildren) {
   const [hasScrollTop, ref] = useHasScrollTop();
   return (
-    <ScrollArea.Root
+    <ScrollArea.Root className={styles.scrollableContainerRoot}>
-      data-has-scroll-top={hasScrollTop}
+      <div
-      className={styles.scrollableContainerRoot}
+        data-has-scroll-top={hasScrollTop}
-    >
+        className={styles.scrollTopBorder}
+      />
       <ScrollArea.Viewport
         className={clsx([styles.scrollableViewport])}
         ref={ref}

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

@@ -16,7 +16,7 @@ export const spotlight = style({
   background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
   inset: '0px',
   pointerEvents: 'none',
-  willChange: 'background',
+  willChange: 'background, opacity',
   opacity: spotlightOpacity,
   zIndex: 1,
   transition: 'all 0.2s',

packages/component/src/components/app-sidebar/spolight/index.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { type PropsWithChildren } from 'react';
+
+import { Spotlight } from '.';
+
+export default {
+  title: 'Components/AppSidebar/Spotlight',
+  component: Spotlight,
+} satisfies Meta;
+
+const Container = ({ children }: PropsWithChildren) => (
+  <main
+    style={{
+      position: 'relative',
+      width: '320px',
+      height: '320px',
+      border: '1px solid #ccc',
+    }}
+  >
+    {children}
+  </main>
+);
+
+export const Default: StoryFn = () => {
+  return (
+    <Container>
+      <Spotlight />
+    </Container>
+  );
+};

packages/component/src/components/app-sidebar/spolight/index.tsx

@@ -12,10 +12,10 @@ function useMouseOffset() {
   useEffect(() => {
     if (ref.current && ref.current.parentElement) {
       const el = ref.current.parentElement;
-      const bound = el.getBoundingClientRect();
 
       // debounce?
       const onMouseMove = (e: MouseEvent) => {
+        const bound = el.getBoundingClientRect();
         setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
         setOutside(false);
       };