fix: cmdk scrollbar gutter (#4488)

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -49,14 +49,7 @@ export const UserInfo = ({
       className={accountButton}
       onClick={onAccountSettingClick}
     >
-      <Avatar
+      <Avatar size={28} name={user.name} url={user.image} className="avatar" />
-        size={28}
-        name={user.name}
-        url={user.image}
-        style={{
-          marginRight: '10px',
-        }}
-      />
 
       <div className="content">
         <div className="name" title={user.name}>

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)',

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 => {

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,
+  width: 6,
-  height: 8,
+  height: 6,
 });
 
 globalStyle(`${root} [cmdk-list]::-webkit-scrollbar-thumb`, {
   borderRadius: 4,
-  border: '1px solid transparent',
   backgroundClip: 'padding-box',
 });
 

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('');
     }