fix(electron): share page in electron issues (#8703)

fix AF-1592
fix AF-1612

packages/frontend/core/src/components/share-page-not-found-error.tsx

@@ -23,6 +23,7 @@ export const SharePageNotFoundError = () => {
           left: '16px',
           fontSize: '24px',
           cursor: 'pointer',
+          color: 'inherit',
         }}
       >
         <Logo1Icon />

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -19,6 +19,7 @@ import {
 } from '@affine/core/modules/editor';
 import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
 import { ShareReaderService } from '@affine/core/modules/share-doc';
+import { ViewIcon, ViewTitle } from '@affine/core/modules/workbench';
 import { CloudBlobStorage } from '@affine/core/modules/workspace-engine';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
@@ -42,7 +43,13 @@ import {
   WorkspacesService,
 } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { PageNotFound } from '../../404';
@@ -100,17 +107,12 @@ export const SharePage = ({
     shareReaderService.reader.loadShare({ workspaceId, docId });
   }, [shareReaderService, docId, workspaceId]);
 
+  let element: ReactNode = null;
+
   if (isLoading) {
-    return <AppContainer fallback />;
-  }
-
-  if (error) {
-    // TODO(@eyhn): show error details
-    return <SharePageNotFoundError />;
-  }
-
-  if (data) {
-    return (
+    element = null;
+  } else if (data) {
+    element = (
       <SharePageInner
         workspaceId={data.workspaceId}
         docId={data.docId}
@@ -123,9 +125,13 @@ export const SharePage = ({
         templateSnapshotUrl={templateSnapshotUrl}
       />
     );
+  } else if (error) {
+    element = <SharePageNotFoundError />;
   } else {
-    return <PageNotFound noPermission />;
+    element = <PageNotFound noPermission />;
   }
+
+  return <AppContainer fallback={!element}>{element}</AppContainer>;
 };
 
 const SharePageInner = ({
@@ -230,7 +236,8 @@ const SharePageInner = ({
     graphQLService,
   ]);
 
-  const pageTitle = useLiveData(page?.title$);
+  const t = useI18n();
+  const pageTitle = useLiveData(page?.title$) ?? t['unnamed']();
   const { jumpToPageBlock, openPage } = useNavigateHelper();
 
   usePageDocumentTitle(pageTitle);
@@ -276,43 +283,45 @@ const SharePageInner = ({
   }
 
   return (
-    <AppContainer>
-      <FrameworkScope scope={workspace.scope}>
-        <FrameworkScope scope={page.scope}>
-          <FrameworkScope scope={editor.scope}>
-            <div className={styles.root}>
-              <div className={styles.mainContainer}>
-                <ShareHeader
-                  pageId={page.id}
-                  publishMode={publishMode}
-                  isTemplate={isTemplate}
-                  templateName={templateName}
-                  snapshotUrl={templateSnapshotUrl}
-                />
-                <Scrollable.Root>
-                  <Scrollable.Viewport
-                    className={clsx(
-                      'affine-page-viewport',
-                      styles.editorContainer
-                    )}
-                  >
-                    <PageDetailEditor onLoad={onEditorLoad} />
-                    {publishMode === 'page' ? <ShareFooter /> : null}
-                  </Scrollable.Viewport>
-                  <Scrollable.Scrollbar />
-                </Scrollable.Root>
-                <EditorOutlineViewer
-                  editor={editorContainer}
-                  show={publishMode === 'page'}
-                />
-                <SharePageFooter />
-              </div>
+    <FrameworkScope scope={workspace.scope}>
+      <FrameworkScope scope={page.scope}>
+        <FrameworkScope scope={editor.scope}>
+          <ViewIcon icon={publishMode === 'page' ? 'doc' : 'edgeless'} />
+          <ViewTitle title={pageTitle} />
+          <div className={styles.root}>
+            <div className={styles.mainContainer}>
+              <ShareHeader
+                pageId={page.id}
+                publishMode={publishMode}
+                isTemplate={isTemplate}
+                templateName={templateName}
+                snapshotUrl={templateSnapshotUrl}
+              />
+              <Scrollable.Root>
+                <Scrollable.Viewport
+                  className={clsx(
+                    'affine-page-viewport',
+                    styles.editorContainer
+                  )}
+                >
+                  <PageDetailEditor onLoad={onEditorLoad} />
+                  {publishMode === 'page' && !BUILD_CONFIG.isElectron ? (
+                    <ShareFooter />
+                  ) : null}
+                </Scrollable.Viewport>
+                <Scrollable.Scrollbar />
+              </Scrollable.Root>
+              <EditorOutlineViewer
+                editor={editorContainer}
+                show={publishMode === 'page'}
+              />
+              {!BUILD_CONFIG.isElectron && <SharePageFooter />}
             </div>
-            <PeekViewManagerModal />
-          </FrameworkScope>
+          </div>
+          <PeekViewManagerModal />
         </FrameworkScope>
       </FrameworkScope>
-    </AppContainer>
+    </FrameworkScope>
   );
 };
 

packages/frontend/core/src/mobile/pages/workspace/index.tsx

@@ -1,7 +1,6 @@
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { AffineErrorComponent } from '@affine/core/components/affine/affine-error-boundary/affine-error-fallback';
 import { PageNotFound } from '@affine/core/desktop/pages/404';
-import { MobileWorkbenchRoot } from '@affine/core/desktop/pages/workspace/workbench-root';
 import { workbenchRoutes } from '@affine/core/mobile/workbench-router';
 import {
   useLiveData,
@@ -23,6 +22,7 @@ import {
 } from 'react-router-dom';
 
 import { WorkspaceLayout } from './layout';
+import { MobileWorkbenchRoot } from './workbench-root';
 
 type Route = { Component: React.ComponentType };
 /**

packages/frontend/core/src/modules/workbench/view/view-meta.tsx

@@ -1,29 +1,47 @@
 import { useServiceOptional } from '@toeverything/infra';
 import { useEffect } from 'react';
 
+import { DesktopApiService } from '../../desktop-api';
 import type { ViewIconName } from '../constants';
 import { ViewService } from '../services/view';
 
 export const ViewTitle = ({ title }: { title: string }) => {
   const view = useServiceOptional(ViewService)?.view;
+  const desktopApi = useServiceOptional(DesktopApiService);
 
   useEffect(() => {
     if (view) {
       view.setTitle(title);
+    } else if (desktopApi) {
+      desktopApi.handler.ui
+        .updateActiveViewMeta({
+          title,
+        })
+        .catch(e => {
+          console.error(e);
+        });
     }
-  }, [title, view]);
+  }, [desktopApi, title, view]);
 
   return null;
 };
 
 export const ViewIcon = ({ icon }: { icon: ViewIconName }) => {
   const view = useServiceOptional(ViewService)?.view;
-
+  const desktopApi = useServiceOptional(DesktopApiService);
   useEffect(() => {
     if (view) {
       view.setIcon(icon);
+    } else if (desktopApi) {
+      desktopApi.handler.ui
+        .updateActiveViewMeta({
+          iconName: icon,
+        })
+        .catch(e => {
+          console.error(e);
+        });
     }
-  }, [icon, view]);
+  }, [desktopApi, icon, view]);
 
   return null;
 };