fix: cmdk scrollbar gutter (#4488)

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,
-  height: 8,
+  width: 6,
+  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('');
     }