From a49b92e4c8c5e232f501b70ea2122afd7895c906 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Wed, 21 Aug 2024 05:48:04 +0000
Subject: [PATCH] feat(core): adjust sidebar style, add github & learn more
 (#7864)

close AF-1202
---
 .../src/components/app-sidebar/index.css.ts   |  4 +-
 .../core/src/components/app-sidebar/index.tsx |  1 +
 .../menu-item/external-menu-link-item.tsx     | 44 +++++++++++++++++++
 .../quick-search-input/index.css.ts           |  1 -
 .../sidebar-containers/index.css.ts           |  5 +++
 .../components/root-app-sidebar/index.css.ts  |  1 +
 .../src/components/root-app-sidebar/index.tsx | 18 +++++++-
 packages/frontend/i18n/src/resources/en.json  |  4 +-
 8 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/core/src/components/app-sidebar/menu-item/external-menu-link-item.tsx

diff --git a/packages/frontend/core/src/components/app-sidebar/index.css.ts b/packages/frontend/core/src/components/app-sidebar/index.css.ts
index 42b5aaef89..86808f3d1b 100644
--- a/packages/frontend/core/src/components/app-sidebar/index.css.ts
+++ b/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({
diff --git a/packages/frontend/core/src/components/app-sidebar/index.tsx b/packages/frontend/core/src/components/app-sidebar/index.tsx
index b11a0c52ae..e8dc76833a 100644
--- a/packages/frontend/core/src/components/app-sidebar/index.tsx
+++ b/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 />}
diff --git a/packages/frontend/core/src/components/app-sidebar/menu-item/external-menu-link-item.tsx b/packages/frontend/core/src/components/app-sidebar/menu-item/external-menu-link-item.tsx
new file mode 100644
index 0000000000..f8613ff8a9
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts
index 0f28a35204..13b2547f40 100644
--- a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts
+++ b/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',
 });
diff --git a/packages/frontend/core/src/components/app-sidebar/sidebar-containers/index.css.ts b/packages/frontend/core/src/components/app-sidebar/sidebar-containers/index.css.ts
index e17755f1f4..d0a6f90a7a 100644
--- a/packages/frontend/core/src/components/app-sidebar/sidebar-containers/index.css.ts
+++ b/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%',
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
index 88e267fe42..9012c5d23d 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
+++ b/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,
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index 214bb0fb3f..bffbaf7195 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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>
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index ed2b699481..1b02f51319 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/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"
 }