From 3f09ba92bcb637d49a1c3404998179bee29f0307 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Mon, 25 Sep 2023 20:03:02 +0800
Subject: [PATCH] fix: cmdk scrollbar gutter (#4488)

---
 .../setting-modal/setting-sidebar/index.tsx      |  9 +--------
 .../setting-modal/setting-sidebar/style.css.ts   |  7 ++++++-
 apps/core/src/components/pure/cmdk/data.tsx      |  1 +
 apps/core/src/components/pure/cmdk/main.css.ts   | 16 ++++++++++++----
 apps/core/src/components/pure/cmdk/main.tsx      |  8 ++++++--
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index 5db43e1b72..4df47e6abe 100644
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -49,14 +49,7 @@ export const UserInfo = ({
       className={accountButton}
       onClick={onAccountSettingClick}
     >
-      <Avatar
-        size={28}
-        name={user.name}
-        url={user.image}
-        style={{
-          marginRight: '10px',
-        }}
-      />
+      <Avatar size={28} name={user.name} url={user.image} className="avatar" />
 
       <div className="content">
         <div className="name" title={user.name}>
diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
index 4785215fcd..92b2dcc966 100644
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
@@ -100,6 +100,7 @@ export const accountButton = style({
   cursor: 'pointer',
   userSelect: 'none',
   display: 'flex',
+  columnGap: '10px',
   justifyContent: 'space-between',
   alignItems: 'center',
   ':hover': {
@@ -107,7 +108,7 @@ export const accountButton = style({
   },
 });
 
-globalStyle(`${accountButton} .avatar.not-sign`, {
+globalStyle(`${accountButton} .avatar`, {
   width: '28px',
   height: '28px',
   borderRadius: '50%',
@@ -115,6 +116,10 @@ globalStyle(`${accountButton} .avatar.not-sign`, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  flexShrink: 0,
+});
+
+globalStyle(`${accountButton} .avatar.not-sign`, {
   borderColor: 'var(--affine-icon-secondary)',
   color: 'var(--affine-icon-secondary)',
   background: 'var(--affine-white)',
diff --git a/apps/core/src/components/pure/cmdk/data.tsx b/apps/core/src/components/pure/cmdk/data.tsx
index e9fad1b094..094239a4fa 100644
--- a/apps/core/src/components/pure/cmdk/data.tsx
+++ b/apps/core/src/components/pure/cmdk/data.tsx
@@ -41,6 +41,7 @@ import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
 import type { CMDKCommand, CommandContext } from './types';
 
 export const cmdkQueryAtom = atom('');
+export const cmdkValueAtom = atom('');
 
 // like currentWorkspaceAtom, but not throw error
 const safeCurrentPageAtom = atom<Promise<Page | undefined>>(async get => {
diff --git a/apps/core/src/components/pure/cmdk/main.css.ts b/apps/core/src/components/pure/cmdk/main.css.ts
index ae29261e35..a1e730d856 100644
--- a/apps/core/src/components/pure/cmdk/main.css.ts
+++ b/apps/core/src/components/pure/cmdk/main.css.ts
@@ -83,24 +83,32 @@ globalStyle(`${root} [cmdk-group][hidden]`, {
   display: 'none',
 });
 
+globalStyle(
+  `${root} [cmdk-group]:not([hidden]):first-of-type [cmdk-group-heading]`,
+  {
+    paddingTop: 16,
+  }
+);
+
 globalStyle(`${root} [cmdk-list]`, {
   maxHeight: 400,
+  minHeight: 120,
   overflow: 'auto',
   overscrollBehavior: 'contain',
   transition: '.1s ease',
   transitionProperty: 'height',
   height: 'min(330px, calc(var(--cmdk-list-height) + 8px))',
-  padding: '0 6px 8px 6px',
+  padding: '0 0 8px 6px',
+  scrollbarGutter: 'stable',
 });
 
 globalStyle(`${root} [cmdk-list]::-webkit-scrollbar`, {
-  width: 8,
-  height: 8,
+  width: 6,
+  height: 6,
 });
 
 globalStyle(`${root} [cmdk-list]::-webkit-scrollbar-thumb`, {
   borderRadius: 4,
-  border: '1px solid transparent',
   backgroundClip: 'padding-box',
 });
 
diff --git a/apps/core/src/components/pure/cmdk/main.tsx b/apps/core/src/components/pure/cmdk/main.tsx
index 98bc4624aa..7f869bc1fd 100644
--- a/apps/core/src/components/pure/cmdk/main.tsx
+++ b/apps/core/src/components/pure/cmdk/main.tsx
@@ -4,10 +4,11 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { CommandCategory } from '@toeverything/infra/command';
 import clsx from 'clsx';
 import { useAtom, useSetAtom } from 'jotai';
-import { Suspense, useEffect, useMemo } from 'react';
+import { Suspense, useLayoutEffect, useMemo } from 'react';
 
 import {
   cmdkQueryAtom,
+  cmdkValueAtom,
   customCommandFilter,
   useCMDKCommandGroups,
 } from './data';
@@ -126,12 +127,15 @@ export const CMDKContainer = ({
   onQueryChange: (query: string) => void;
 }>) => {
   const t = useAFFiNEI18N();
+  const [value, setValue] = useAtom(cmdkValueAtom);
   return (
     <Command
       {...rest}
       data-testid="cmdk-quick-search"
       filter={customCommandFilter}
       className={clsx(className, styles.panelContainer)}
+      value={value}
+      onValueChange={setValue}
       // Handle KeyboardEvent conflicts with blocksuite
       onKeyDown={(e: React.KeyboardEvent) => {
         if (
@@ -160,7 +164,7 @@ export const CMDKContainer = ({
 
 export const CMDKQuickSearchModal = (props: CMDKModalProps) => {
   const [query, setQuery] = useAtom(cmdkQueryAtom);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (props.open) {
       setQuery('');
     }