feat: new sidebar (app shell) styles (#2303)

packages/component/src/components/app-sidebar/quick-search-input/index.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  display: 'inline-flex',
+  background: 'var(--affine-white-10)',
+  alignItems: 'center',
+  borderRadius: '8px',
+  border: '1px solid var(--affine-black-10)',
+  fontSize: 'var(--affine-font-sm)',
+  width: '100%',
+  height: '36px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  padding: '0 12px',
+  margin: '12px 0',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const icon = style({
+  marginRight: '14px',
+  color: 'var(--affine-icon-color)',
+});
+
+export const spacer = style({
+  flex: 1,
+});
+
+export const shortcutHint = style({
+  color: 'var(--affine-black-30)',
+  fontSize: 'var(--affine-font-base)',
+});

packages/component/src/components/app-sidebar/quick-search-input/index.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { QuickSearchInput } from '.';
+
+export default {
+  title: 'Components/AppSidebar/QuickSearchInput',
+  component: QuickSearchInput,
+} satisfies Meta;
+
+export const Default: StoryFn = () => {
+  return (
+    <main style={{ width: '240px' }}>
+      <QuickSearchInput onClick={() => alert('opened')} />
+    </main>
+  );
+};

packages/component/src/components/app-sidebar/quick-search-input/index.tsx

@@ -0,0 +1,32 @@
+import { getEnvironment } from '@affine/env/config';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SearchIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+
+import * as styles from './index.css';
+
+interface QuickSearchInputProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClick?: () => void;
+}
+
+// Although it is called an input, it is actually a button.
+export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
+  const t = useAFFiNEI18N();
+  const environment = getEnvironment();
+  const isMac = environment.isBrowser && environment.isMacOs;
+
+  return (
+    <div
+      {...props}
+      className={clsx([props.className, styles.root])}
+      onClick={onClick}
+    >
+      <SearchIcon className={styles.icon} />
+      {t['Quick search']()}
+      <div className={styles.spacer} />
+      <div className={styles.shortcutHint}>
+        {isMac ? ' ⌘ + K' : ' Ctrl + K'}
+      </div>
+    </div>
+  );
+}