feat(core): adjust sidebar style, add github & learn more (#7864)

close AF-1202

Author: CatsJuice

packages/frontend/core/src/components/app-sidebar/index.css.ts

@@ -2,7 +2,6 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 export const floatingMaxWidth = 768;
 export const navWrapperStyle = style({
-  paddingBottom: '8px',
   '@media': {
     print: {
       display: 'none',
@@ -16,6 +15,9 @@ export const navWrapperStyle = style({
     '&[data-is-floating="true"]': {
       backgroundColor: cssVar('backgroundPrimaryColor'),
     },
+    '&[data-client-border="true"]': {
+      paddingBottom: 8,
+    },
   },
 });
 export const navHeaderButton = style({

packages/frontend/core/src/components/app-sidebar/index.tsx

@@ -102,6 +102,7 @@ export function AppSidebar({
         data-has-border={hasRightBorder}
         data-testid="app-sidebar-wrapper"
         data-is-macos-electron={isMacosDesktop}
+        data-client-border={clientBorder}
       >
         <nav className={navStyle} data-testid="app-sidebar">
           {!environment.isDesktop && <SidebarHeader />}

packages/frontend/core/src/components/app-sidebar/menu-item/external-menu-link-item.tsx

@@ -0,0 +1,44 @@
+import { DualLinkIcon } from '@blocksuite/icons/rc';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import type { ReactElement } from 'react';
+import type { To } from 'react-router-dom';
+
+import { MenuLinkItem } from '.';
+
+const RawLink = ({
+  children,
+  to,
+  className,
+}: {
+  children?: React.ReactNode;
+  to: To;
+  className?: string;
+}) => {
+  const href = typeof to === 'string' ? to : to.pathname;
+  return (
+    <a className={className} href={href} target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  );
+};
+
+export const ExternalMenuLinkItem = ({
+  href,
+  icon,
+  label,
+}: {
+  href: string;
+  icon: ReactElement;
+  label: string;
+}) => {
+  return (
+    <MenuLinkItem to={href} linkComponent={RawLink} icon={icon}>
+      {label}
+      <DualLinkIcon
+        width={12}
+        height={12}
+        style={{ marginLeft: 4, color: cssVarV2('icon/tertiary') }}
+      />
+    </MenuLinkItem>
+  );
+};

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

@@ -13,7 +13,6 @@ export const root = style({
   userSelect: 'none',
   cursor: 'pointer',
   padding: '0 12px',
-  margin: '20px 0',
   position: 'relative',
   whiteSpace: 'nowrap',
 });

packages/frontend/core/src/components/app-sidebar/sidebar-containers/index.css.ts

@@ -4,6 +4,9 @@ export const baseContainer = style({
   padding: '4px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
+  ':empty': {
+    display: 'none',
+  },
 });
 export const scrollableContainerRoot = style({
   flex: '1 1 auto',
@@ -30,6 +33,8 @@ export const scrollTopBorder = style({
 export const scrollableViewport = style({
   height: '100%',
   marginTop: '4px',
+  // safe area to avoid bottom clipping
+  paddingBottom: 8,
 });
 globalStyle(`${scrollableViewport} > div`, {
   maxWidth: '100%',

packages/frontend/core/src/components/root-app-sidebar/index.css.ts

@@ -13,6 +13,7 @@ export const quickSearchAndNewPage = style({
   display: 'flex',
   alignItems: 'center',
   gap: 8,
+  padding: '8px 0',
 });
 export const quickSearch = style({
   width: 0,

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -12,7 +12,12 @@ import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/service
 import { isNewTabTrigger } from '@affine/core/utils';
 import { events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
-import { AllDocsIcon, SettingsIcon } from '@blocksuite/icons/rc';
+import {
+  AllDocsIcon,
+  GithubIcon,
+  JournalIcon,
+  SettingsIcon,
+} from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
@@ -33,6 +38,7 @@ import {
   SidebarContainer,
   SidebarScrollableContainer,
 } from '../app-sidebar';
+import { ExternalMenuLinkItem } from '../app-sidebar/menu-item/external-menu-link-item';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
@@ -158,6 +164,16 @@ export const RootAppSidebar = (): ReactElement => {
         <div style={{ padding: '0 8px' }}>
           <TrashButton />
           <ImportPage docCollection={docCollection} />
+          <ExternalMenuLinkItem
+            href="https://affine.pro/blog?tag=Release+Note"
+            icon={<JournalIcon />}
+            label={t['com.affine.app-sidebar.learn-more']()}
+          />
+          <ExternalMenuLinkItem
+            href="https://github.com/toeverything/affine"
+            icon={<GithubIcon />}
+            label={t['com.affine.app-sidebar.star-us']()}
+          />
         </div>
       </SidebarScrollableContainer>
       <SidebarContainer>

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

@@ -1456,5 +1456,7 @@
   "unnamed": "unnamed",
   "upgradeBrowser": "Please upgrade to the latest version of Chrome for the best experience.",
   "will be moved to Trash": "{{title}} will be moved to trash",
-  "will delete member": "will delete member"
+  "will delete member": "will delete member",
+  "com.affine.app-sidebar.star-us": "Star us",
+  "com.affine.app-sidebar.learn-more": "Learn more"
 }