feat: add change log (#1734)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/pure/help-island/index.tsx

@@ -1,6 +1,6 @@
 import { MuiFade, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { CloseIcon } from '@blocksuite/icons';
+import { CloseIcon, DoneIcon } from '@blocksuite/icons';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
 
@@ -23,9 +23,9 @@ const ContactModal = dynamic(
   }
 );
 
-export type IslandItemNames = 'contact' | 'shortcuts';
+export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
 export const HelpIsland = ({
-  showList = ['contact', 'shortcuts'],
+  showList = ['whatNew', 'contact', 'shortcuts'],
 }: {
   showList?: IslandItemNames[];
 }) => {
@@ -62,6 +62,18 @@ export const HelpIsland = ({
         <StyledAnimateWrapper
           style={{ height: spread ? `${showList.length * 44}px` : 0 }}
         >
+          {showList.includes('whatNew') && (
+            <Tooltip content={t("Discover what's new")} placement="left-end">
+              <StyledIconWrapper
+                data-testid="right-bottom-change-log-icon"
+                onClick={() => {
+                  window.open('https://affine.pro', '_blank');
+                }}
+              >
+                <DoneIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
           {showList.includes('contact') && (
             <Tooltip content={t('Contact Us')} placement="left-end">
               <StyledIconWrapper

apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx

@@ -0,0 +1,52 @@
+import { IconButton } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { CloseIcon, DoneIcon } from '@blocksuite/icons';
+import { useCallback } from 'react';
+
+import {
+  useGuideHidden,
+  useGuideHiddenUntilNextUpdate,
+} from '../../../../hooks/affine/use-is-first-load';
+import { StyledListItem } from '../shared-styles';
+import { StyledLink } from '../style';
+export const ChangeLog = () => {
+  const [guideHidden, setGuideHidden] = useGuideHidden();
+  const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
+    useGuideHiddenUntilNextUpdate();
+  const { t } = useTranslation();
+  const onCloseWhatsNew = useCallback(() => {
+    setGuideHiddenUntilNextUpdate({
+      ...guideHiddenUntilNextUpdate,
+      changeLog: true,
+    });
+    setGuideHidden({ ...guideHidden, changeLog: true });
+  }, [
+    guideHidden,
+    guideHiddenUntilNextUpdate,
+    setGuideHidden,
+    setGuideHiddenUntilNextUpdate,
+  ]);
+  if (guideHiddenUntilNextUpdate.changeLog) {
+    return <></>;
+  }
+  return (
+    <>
+      <StyledListItem data-testid="change-log">
+        <StyledLink href={'https://affine.pro'} target="_blank">
+          <DoneIcon />
+          {t("Discover what's new!")}
+        </StyledLink>
+        <IconButton
+          onClick={() => {
+            onCloseWhatsNew();
+          }}
+          data-testid="change-log-close-button"
+        >
+          <CloseIcon />
+        </IconButton>
+      </StyledListItem>
+    </>
+  );
+};
+
+export default ChangeLog;

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -15,6 +15,7 @@ import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import type { RemWorkspace } from '../../../shared';
 import { SidebarSwitch } from '../../affine/sidebar-switch';
+import { ChangeLog } from './changeLog';
 import Favorite from './favorite';
 import { Pivots } from './Pivots';
 import { StyledListItem } from './shared-styles';
@@ -86,7 +87,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
             currentWorkspace={currentWorkspace}
             onClick={onOpenWorkspaceListModal}
           />
-
+          <ChangeLog />
           <StyledListItem
             data-testid="slider-bar-quick-search-button"
             onClick={useCallback(() => {
@@ -117,7 +118,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
               {t('Workspace Settings')}
             </StyledLink>
           </StyledListItem>
-
           <StyledListItem
             active={
               currentPath ===
@@ -133,7 +133,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
               <span data-testid="all-pages">{t('All pages')}</span>
             </StyledLink>
           </StyledListItem>
-
           <Favorite
             currentPath={currentPath}
             paths={paths}
@@ -148,7 +147,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
               allMetas={pageMeta}
             />
           )}
-
           <StyledListItem
             active={
               currentPath ===