feat: enable share menu (#1883)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

apps/web/src/components/pure/footer/index.tsx

@@ -6,6 +6,7 @@ import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
 import type { CSSProperties } from 'react';
 import type React from 'react';
+import { forwardRef } from 'react';
 
 import { stringToColour } from '../../../utils';
 import { StyledFooter, StyledSignInButton, StyleUserInfo } from './styles';
@@ -74,54 +75,58 @@ interface WorkspaceAvatarProps {
   style?: CSSProperties;
 }
 
-export const WorkspaceAvatar: React.FC<WorkspaceAvatarProps> = props => {
-  const size = props.size || 20;
-  const sizeStr = size + 'px';
+export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
+  function WorkspaceAvatar(props, ref) {
+    const size = props.size || 20;
+    const sizeStr = size + 'px';
 
-  return (
-    <>
-      {props.avatar ? (
-        <div
-          style={{
-            ...props.style,
-            width: sizeStr,
-            height: sizeStr,
-            color: '#fff',
-            borderRadius: '50%',
-            overflow: 'hidden',
-            display: 'inline-block',
-            verticalAlign: 'middle',
-          }}
-        >
-          <picture>
-            <img
-              style={{ width: sizeStr, height: sizeStr }}
-              src={props.avatar}
-              alt=""
-              referrerPolicy="no-referrer"
-            />
-          </picture>
-        </div>
-      ) : (
-        <div
-          style={{
-            ...props.style,
-            width: sizeStr,
-            height: sizeStr,
-            border: '1px solid #fff',
-            color: '#fff',
-            fontSize: Math.ceil(0.5 * size) + 'px',
-            background: stringToColour(props.name || 'AFFiNE'),
-            borderRadius: '50%',
-            textAlign: 'center',
-            lineHeight: size + 'px',
-            display: 'inline-block',
-            verticalAlign: 'middle',
-          }}
-        >
-          {(props.name || 'AFFiNE').substring(0, 1)}
-        </div>
-      )}
-    </>
-  );
-};
+    return (
+      <>
+        {props.avatar ? (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              color: '#fff',
+              borderRadius: '50%',
+              overflow: 'hidden',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            <picture>
+              <img
+                style={{ width: sizeStr, height: sizeStr }}
+                src={props.avatar}
+                alt=""
+                referrerPolicy="no-referrer"
+              />
+            </picture>
+          </div>
+        ) : (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              border: '1px solid #fff',
+              color: '#fff',
+              fontSize: Math.ceil(0.5 * size) + 'px',
+              background: stringToColour(props.name || 'AFFiNE'),
+              borderRadius: '50%',
+              textAlign: 'center',
+              lineHeight: size + 'px',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            {(props.name || 'AFFiNE').substring(0, 1)}
+          </div>
+        )}
+      </>
+    );
+  }
+);

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

@@ -1,14 +1,17 @@
 import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
+import { WorkspaceFlavour } from '@affine/workspace/type';
 import {
   DeleteTemporarilyIcon,
   FolderIcon,
   PlusIcon,
   SearchIcon,
   SettingsIcon,
+  ShareIcon,
 } from '@blocksuite/icons';
 import type { Page, PageMeta } from '@blocksuite/store';
 import type React from 'react';
+import type { UIEvent } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { usePageMeta } from '../../../hooks/use-page-meta';
@@ -57,6 +60,7 @@ export type WorkSpaceSliderBarProps = {
     favorite: (workspaceId: string) => string;
     trash: (workspaceId: string) => string;
     setting: (workspaceId: string) => string;
+    shared: (workspaceId: string) => string;
   };
 };
 
@@ -174,7 +178,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
 
             <StyledScrollWrapper
               showTopBorder={!isScrollAtTop}
-              onScroll={e => {
+              onScroll={(e: UIEvent<HTMLDivElement>) => {
                 (e.target as HTMLDivElement).scrollTop === 0
                   ? setIsScrollAtTop(true)
                   : setIsScrollAtTop(false);
@@ -196,6 +200,37 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
               )}
             </StyledScrollWrapper>
 
+            {currentWorkspace?.flavour === WorkspaceFlavour.AFFINE &&
+            currentWorkspace.public ? (
+              <StyledListItem>
+                <StyledLink
+                  href={{
+                    pathname:
+                      currentWorkspaceId && paths.setting(currentWorkspaceId),
+                  }}
+                >
+                  <ShareIcon />
+                  <span data-testid="Published-to-web">Published to web</span>
+                </StyledLink>
+              </StyledListItem>
+            ) : (
+              <StyledListItem
+                active={
+                  currentPath ===
+                  (currentWorkspaceId && paths.shared(currentWorkspaceId))
+                }
+              >
+                <StyledLink
+                  href={{
+                    pathname:
+                      currentWorkspaceId && paths.shared(currentWorkspaceId),
+                  }}
+                >
+                  <ShareIcon />
+                  <span data-testid="shared-pages">{t('Shared Pages')}</span>
+                </StyledLink>
+              </StyledListItem>
+            )}
             <StyledListItem
               active={
                 currentPath ===