feat: rewrite publish style

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -14,16 +14,18 @@ import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
 import { EnableWorkspaceButton } from '../enable-workspace';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
   const { publishWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
-  const [loaded, setLoaded] = useState(true);
+  const [loaded, setLoaded] = useState(false);
   const togglePublic = async (flag: boolean) => {
-    await publishWorkspace(workspace.id.toString(), flag);
+    try {
+      await publishWorkspace(workspace.id.toString(), flag);
+    } catch (e) {
+      toast('Failed to publish workspace');
+    }
   };
 
   const copyUrl = () => {
@@ -34,17 +36,21 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   return (
     <>
       {workspace.provider === 'affine' ? (
-        <div>
+        <div
+          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
           <StyledPublishContent>
             {workspace.published ? (
               <>
                 <StyledPublishExplanation>
-                  {t('Publishing')}
+                  The current workspace has been published to the web, everyone
+                  can view the contents of this workspace through the link.
                 </StyledPublishExplanation>
-                <StyledSettingH2 marginTop={48}>
-                  {t('Share with link')}
-                </StyledSettingH2>
+
                 <StyledPublishCopyContainer>
+                  <StyledSettingH2 marginBottom={16}>
+                    {t('Share with link')}
+                  </StyledSettingH2>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
                     <Button onClick={copyUrl} type="primary" shape="circle">
@@ -56,6 +62,20 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             ) : (
               <StyledPublishExplanation>
                 {t('Publishing Description')}
+                <div style={{ marginTop: '64px' }}>
+                  <Button
+                    onClick={async () => {
+                      setLoaded(true);
+                      await togglePublic(true);
+                      setLoaded(false);
+                    }}
+                    loading={loaded}
+                    type="primary"
+                    shape="circle"
+                  >
+                    {t('Publish to web')}
+                  </Button>
+                </div>
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
@@ -64,10 +84,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <StyledStopPublishContainer>
               <Button
                 onClick={async () => {
-                  setLoaded(false);
+                  setLoaded(true);
                   await togglePublic(false);
                   setLoaded(true);
                 }}
+                loading={false}
                 type="danger"
                 shape="circle"
               >
@@ -75,39 +96,22 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               </Button>
             </StyledStopPublishContainer>
           ) : (
-            <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  setLoaded(false);
-                  await togglePublic(true);
-                  setLoaded(true);
-                }}
-                type="primary"
-                shape="circle"
-              >
-                {t('Publish to web')}
-              </Button>
-            </StyledPublishCopyContainer>
+            <></>
           )}
         </div>
       ) : (
         <StyledPublishContent>
           <>
             <StyledPublishExplanation>
-              {t('Publishing')}
+              Publishing to web requires AFFiNE Cloud service.
             </StyledPublishExplanation>
 
-            <StyledPublishCopyContainer>
+            <div style={{ marginTop: '72px' }}>
               <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyledPublishCopyContainer>
+            </div>
           </>
         </StyledPublishContent>
       )}
-      {!loaded && (
-        <Wrapper>
-          <Loading size={25} />
-        </Wrapper>
-      )}
     </>
   );
 };