chore: adjust quick search style (#6906)

close TOV-854
<img width="651" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/f281eb82-852c-411d-b3dd-4bf7d7ce74e8">

packages/frontend/core/src/components/pure/cmdk/main.css.ts

@@ -33,7 +33,7 @@ export const searchInput = style({
 export const pageTitleWrapper = style({
   display: 'flex',
   alignItems: 'center',
-  padding: '18px 24px 0 24px',
+  padding: '18px 16px 0',
   width: '100%',
 });
 export const pageTitle = style({
@@ -113,9 +113,11 @@ globalStyle(`${root} [cmdk-list]`, {
   overflow: 'auto',
   overscrollBehavior: 'contain',
   height: 'min(330px, calc(var(--cmdk-list-height) + 8px))',
-  padding: '0 0 8px 6px',
+  margin: '8px 6px',
   scrollbarGutter: 'stable',
   scrollPaddingBlock: '12px',
+  scrollbarWidth: 'thin',
+  scrollbarColor: `${cssVar('iconColor')} transparent`,
 });
 globalStyle(`${root} [cmdk-list]:not([data-opening])`, {
   transition: 'height .1s ease',

packages/frontend/i18n/src/resources/en.json

@@ -554,7 +554,7 @@
   "com.affine.cmdk.affine.color-scheme.to": "Change Colour Scheme to",
   "com.affine.cmdk.affine.contact-us": "Contact Us",
   "com.affine.cmdk.affine.create-new-edgeless-as": "New \"{{keyWord}}\" Edgeless",
-  "com.affine.cmdk.affine.create-new-page-as": "New \"{{keyWord}}\" Doc",
+  "com.affine.cmdk.affine.create-new-page-as": "New \"{{keyWord}}\" Page",
   "com.affine.cmdk.affine.display-language.to": "Change Display Language to",
   "com.affine.cmdk.affine.editor.add-to-favourites": "Add to Favourites",
   "com.affine.cmdk.affine.editor.edgeless.presentation-start": "Start Presentation",
@@ -576,7 +576,7 @@
   "com.affine.cmdk.affine.navigation.open-settings": "Go to Settings",
   "com.affine.cmdk.affine.navigation.open-account-settings": "Go to Account Settings",
   "com.affine.cmdk.affine.new-edgeless-page": "New Edgeless",
-  "com.affine.cmdk.affine.new-page": "New Doc",
+  "com.affine.cmdk.affine.new-page": "New Page",
   "com.affine.cmdk.affine.new-workspace": "New Workspace",
   "com.affine.cmdk.affine.noise-background-on-the-sidebar.to": "Change Noise Background On The Sidebar to",
   "com.affine.cmdk.affine.restart-to-upgrade": "Restart to Upgrade",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -917,7 +917,7 @@
   "com.affine.payment.benefit-6": "每个工作区的成员数量 ≤ {{capacity}}",
   "com.affine.payment.benefit-7": "{{capacity}} 日的历史版本记录",
   "com.affine.payment.billing-setting.ai-plan": "AFFiNE AI",
-  "com.affine.payment.billing-setting.ai.free-desc": "您当前处于<a>免费计划</a>.",
+  "com.affine.payment.billing-setting.ai.free-desc": "您当前处于<a> Free 计划</a>.",
   "com.affine.payment.billing-setting.ai.purchase": "购买",
   "com.affine.payment.billing-setting.cancel-subscription": "取消订阅",
   "com.affine.payment.billing-setting.cancel-subscription.description": "一旦您取消订阅，您将不再享受该计划的福利。",

tests/affine-local/e2e/quick-search.spec.ts

@@ -136,7 +136,7 @@ test('Create a new page without keyword', async ({ page }) => {
   await waitForEditorLoad(page);
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Doc');
+  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
   await addNewPage.click();
   await page.waitForTimeout(300);
   await assertTitle(page, '');
@@ -148,7 +148,9 @@ test('Create a new page with keyword', async ({ page }) => {
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
   await insertInputText(page, '"test123456"');
-  const addNewPage = page.locator('[cmdk-item] >> text=New ""test123456"" Doc');
+  const addNewPage = page.locator(
+    '[cmdk-item] >> text=New ""test123456"" Page'
+  );
   await addNewPage.click();
   await page.waitForTimeout(300);
   await assertTitle(page, '"test123456"');
@@ -170,7 +172,7 @@ test('Create a new page and search this page', async ({ page }) => {
   // input title and create new page
   await insertInputText(page, 'test123456');
   await page.waitForTimeout(300);
-  const addNewPage = page.locator('[cmdk-item] >> text=New "test123456" Doc');
+  const addNewPage = page.locator('[cmdk-item] >> text=New "test123456" Page');
   await addNewPage.click();
 
   await page.waitForTimeout(300);
@@ -239,7 +241,7 @@ test('Focus title after creating a new page', async ({ page }) => {
   await waitForEditorLoad(page);
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Doc');
+  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
   await addNewPage.click();
   await titleIsFocused(page);
 });
@@ -272,7 +274,7 @@ test('assert the recent browse pages are on the recent list', async ({
 
   // create second page
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Doc');
+  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
   await addNewPage.click();
   await waitForEditorLoad(page);
   {
@@ -312,7 +314,7 @@ test('assert the recent browse pages are on the recent list', async ({
   await waitForEditorLoad(page);
   await openQuickSearchByShortcut(page);
   {
-    const addNewPage = page.locator('[cmdk-item] >> text=New Doc');
+    const addNewPage = page.locator('[cmdk-item] >> text=New Page');
     await addNewPage.click();
   }
   await waitForEditorLoad(page);