feat(component): shortcut style for tooltip (#7721)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/2e68337c-91f1-4ea7-8426-7fb33be02081.png)

- New `shortcut` prop for `<Tooltip />`
  - single key
      ```tsx
      <Tooltip shortcut="T" />
      ```
  - multiple
      ```tsx
      <Tooltip shortcut={["⌘",  "K"]} />
      ```
- Round tooltip's arrow
- Use new design system colors
- Replace some usage
  - App sidebar switch
  - Editor mode switch
  - New tab (new)

packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx

@@ -16,6 +16,7 @@ import { WindowsAppControls } from '@affine/core/components/pure/header/windows-
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { apis, events } from '@affine/electron-api';
+import { useI18n } from '@affine/i18n';
 import { CloseIcon, PlusIcon, RightSidebarIcon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
@@ -223,6 +224,7 @@ export const AppTabsHeader = ({
   className?: string;
   left?: ReactNode;
 }) => {
+  const t = useI18n();
   const sidebarWidth = useAtomValue(appSidebarWidthAtom);
   const sidebarOpen = useAtomValue(appSidebarOpenAtom);
   const sidebarFloating = useAtomValue(appSidebarFloatingAtom);
@@ -365,6 +367,8 @@ export const AppTabsHeader = ({
         <IconButton
           size={22.86}
           onClick={onAddTab}
+          tooltip={t['com.affine.multi-tab.new-tab']()}
+          tooltipShortcut={['$mod', 'T']}
           data-testid="add-tab-view-button"
           style={{ width: 32, height: 32 }}
           icon={<PlusIcon />}

packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts

@@ -36,7 +36,7 @@ export const tabs = style({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  padding: '0 8px',
+  paddingLeft: 8,
   overflow: 'clip',
   height: '100%',
   selectors: {