From b2556db33b210eb357afb0b925cc26434f82e048 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 18 May 2023 17:24:23 +0800
Subject: [PATCH] fix: adjust some styles (#2438)

---
 .../pure/workspace-list-modal/index.tsx       |  2 +-
 .../favorite/favorite-list.tsx                | 16 ++++----
 .../favorite/styles.css.ts                    | 21 ++++++++++
 .../app-sidebar/add-page-button/index.tsx     |  1 -
 .../app-updater-button/index.css.ts           |  6 +++
 .../src/components/app-sidebar/index.css.ts   |  1 +
 .../app-sidebar/menu-item/index.css.ts        |  1 +
 .../app-sidebar/menu-item/index.tsx           | 41 ++++++++++---------
 .../sidebar-containers/index.css.ts           | 18 ++++++--
 .../app-sidebar/sidebar-containers/index.tsx  |  9 ++--
 .../app-sidebar/spolight/index.css.ts         |  2 +-
 .../app-sidebar/spolight/index.stories.tsx    | 30 ++++++++++++++
 .../components/app-sidebar/spolight/index.tsx |  2 +-
 13 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts
 create mode 100644 packages/component/src/components/app-sidebar/spolight/index.stories.tsx

diff --git a/apps/web/src/components/pure/workspace-list-modal/index.tsx b/apps/web/src/components/pure/workspace-list-modal/index.tsx
index 60bf281ad5..5c64c8b96f 100644
--- a/apps/web/src/components/pure/workspace-list-modal/index.tsx
+++ b/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>
diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
index 4abc3ecc2c..38dd9bf56b 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
+++ b/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>
   );
 }
 
diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts b/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts
new file mode 100644
index 0000000000..6ab7d1a8ae
--- /dev/null
+++ b/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)',
+    },
+  },
+});
diff --git a/packages/component/src/components/app-sidebar/add-page-button/index.tsx b/packages/component/src/components/app-sidebar/add-page-button/index.tsx
index d6f2216295..43bde9f114 100644
--- a/packages/component/src/components/app-sidebar/add-page-button/index.tsx
+++ b/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,
diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
index 311cea5d83..1edd029dfe 100644
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
+++ b/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)',
+    },
   },
 });
 
diff --git a/packages/component/src/components/app-sidebar/index.css.ts b/packages/component/src/components/app-sidebar/index.css.ts
index 5ef58ddf87..229edb0dd9 100644
--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/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)`]: {
diff --git a/packages/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
index 7fe396c1bb..611d361382 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/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',
diff --git a/packages/component/src/components/app-sidebar/menu-item/index.tsx b/packages/component/src/components/app-sidebar/menu-item/index.tsx
index 2ca8841d77..39ea0aea0f 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.tsx
+++ b/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}>
-        {collapsible && (
-          <div
-            onClick={e => {
-              e.stopPropagation();
-              e.preventDefault(); // for links
-              onCollapsedChange?.(!collapsed);
-            }}
-            data-testid="fav-collapsed-button"
-            className={styles.collapsedIconContainer}
-          >
-            <ArrowDownSmallIcon
-              className={styles.collapsedIcon}
-              data-collapsed={collapsed}
-            />
-          </div>
-        )}
-        {icon &&
-          React.cloneElement(icon, {
+      {icon && (
+        <div className={styles.iconsContainer} data-collapsible={collapsible}>
+          {collapsible && (
+            <div
+              onClick={e => {
+                e.stopPropagation();
+                e.preventDefault(); // for links
+                onCollapsedChange?.(!collapsed);
+              }}
+              data-testid="fav-collapsed-button"
+              className={styles.collapsedIconContainer}
+            >
+              <ArrowDownSmallIcon
+                className={styles.collapsedIcon}
+                data-collapsed={collapsed}
+              />
+            </div>
+          )}
+          {React.cloneElement(icon, {
             className: clsx([styles.icon, icon.props.className]),
           })}
-      </div>
+        </div>
+      )}
 
       <div className={styles.content}>{children}</div>
     </div>
diff --git a/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts b/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts
index ead2f8db5d..7320b9c58f 100644
--- a/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts
+++ b/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`, {
diff --git a/packages/component/src/components/app-sidebar/sidebar-containers/index.tsx b/packages/component/src/components/app-sidebar/sidebar-containers/index.tsx
index 3aab50ba43..f56198afac 100644
--- a/packages/component/src/components/app-sidebar/sidebar-containers/index.tsx
+++ b/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
-      data-has-scroll-top={hasScrollTop}
-      className={styles.scrollableContainerRoot}
-    >
+    <ScrollArea.Root className={styles.scrollableContainerRoot}>
+      <div
+        data-has-scroll-top={hasScrollTop}
+        className={styles.scrollTopBorder}
+      />
       <ScrollArea.Viewport
         className={clsx([styles.scrollableViewport])}
         ref={ref}
diff --git a/packages/component/src/components/app-sidebar/spolight/index.css.ts b/packages/component/src/components/app-sidebar/spolight/index.css.ts
index 0125a9ea22..497d0543a5 100644
--- a/packages/component/src/components/app-sidebar/spolight/index.css.ts
+++ b/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',
diff --git a/packages/component/src/components/app-sidebar/spolight/index.stories.tsx b/packages/component/src/components/app-sidebar/spolight/index.stories.tsx
new file mode 100644
index 0000000000..6952b5c674
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/component/src/components/app-sidebar/spolight/index.tsx b/packages/component/src/components/app-sidebar/spolight/index.tsx
index c8817006ba..4bd06468b4 100644
--- a/packages/component/src/components/app-sidebar/spolight/index.tsx
+++ b/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);
       };