chore(core): adjust selfhost sign in ui (#10226)

close AF-2227

packages/frontend/core/src/components/sign-in/add-selfhosted.tsx

@@ -89,7 +89,10 @@ export const AddSelfhostedStep = ({
 
   return (
     <AuthContainer>
-      <AuthHeader title={t['com.affine.auth.sign.add-selfhosted']()} />
+      <AuthHeader
+        title={t['com.affine.auth.sign-in.add-selfhosted.title']()}
+        subTitle={t['com.affine.auth.sign.add-selfhosted']()}
+      />
       <AuthContent>
         <AuthInput
           label={t['com.affine.auth.sign.add-selfhosted.baseurl']()}

packages/frontend/core/src/components/sign-in/sign-in.tsx

@@ -2,6 +2,7 @@ import { Button, notify } from '@affine/component';
 import {
   AuthContainer,
   AuthContent,
+  AuthFooter,
   AuthHeader,
   AuthInput,
 } from '@affine/component/auth-components';
@@ -28,6 +29,7 @@ import {
 } from 'react';
 
 import type { SignInState } from '.';
+import { Back } from './back';
 import * as style from './style.css';
 
 const emailRegex =
@@ -186,49 +188,53 @@ export const SignInStep = ({
         </Button>
 
         {!isSelfhosted && (
-          <div className={style.authMessage}>
+          <>
-            {/*prettier-ignore*/}
+            <div className={style.authMessage}>
-            <Trans i18nKey="com.affine.auth.sign.message">
+              {/*prettier-ignore*/}
+              <Trans i18nKey="com.affine.auth.sign.message">
                 By clicking &quot;Continue with Google/Email&quot; above, you acknowledge that
                 you agree to AFFiNE&apos;s <a href="https://affine.pro/terms" target="_blank" rel="noreferrer">Terms of Conditions</a> and <a href="https://affine.pro/privacy" target="_blank" rel="noreferrer">Privacy Policy</a>.
             </Trans>
-          </div>
-        )}
-
-        <div className={style.skipDivider}>
-          <div className={style.skipDividerLine} />
-          <span className={style.skipDividerText}>or</span>
-          <div className={style.skipDividerLine} />
-        </div>
-        <div className={style.skipSection}>
-          {!isSelfhosted &&
-          BUILD_CONFIG.isElectron &&
-          enableMultipleCloudServers ? (
-            <Button
-              variant="plain"
-              className={style.addSelfhostedButton}
-              prefix={
-                <PublishIcon className={style.addSelfhostedButtonPrefix} />
-              }
-              onClick={onAddSelfhosted}
-            >
-              {t['com.affine.auth.sign.add-selfhosted']()}
-            </Button>
-          ) : (
-            <div className={style.skipText}>
-              {t['com.affine.mobile.sign-in.skip.hint']()}
             </div>
-          )}
+            <div className={style.skipDivider}>
-          <Button
+              <div className={style.skipDividerLine} />
-            variant="plain"
+              <span className={style.skipDividerText}>or</span>
-            onClick={onSkip}
+              <div className={style.skipDividerLine} />
-            className={style.skipLink}
+            </div>
-            prefix={<LocalWorkspaceIcon className={style.skipLinkIcon} />}
+            <div className={style.skipSection}>
-          >
+              {BUILD_CONFIG.isElectron && enableMultipleCloudServers ? (
-            {t['com.affine.mobile.sign-in.skip.link']()}
+                <Button
-          </Button>
+                  variant="plain"
-        </div>
+                  className={style.addSelfhostedButton}
+                  prefix={
+                    <PublishIcon className={style.addSelfhostedButtonPrefix} />
+                  }
+                  onClick={onAddSelfhosted}
+                >
+                  {t['com.affine.auth.sign.add-selfhosted']()}
+                </Button>
+              ) : (
+                <div className={style.skipText}>
+                  {t['com.affine.mobile.sign-in.skip.hint']()}
+                </div>
+              )}
+              <Button
+                variant="plain"
+                onClick={onSkip}
+                className={style.skipLink}
+                prefix={<LocalWorkspaceIcon className={style.skipLinkIcon} />}
+              >
+                {t['com.affine.mobile.sign-in.skip.link']()}
+              </Button>
+            </div>
+          </>
+        )}
       </AuthContent>
+      {isSelfhosted && (
+        <AuthFooter>
+          <Back changeState={changeState} />
+        </AuthFooter>
+      )}
     </AuthContainer>
   );
 };

packages/frontend/i18n/src/i18n-completenesses.json

@@ -1,26 +1,26 @@
 {
-  "ar": 88,
+  "ar": 87,
   "ca": 4,
   "da": 5,
-  "de": 88,
+  "de": 87,
-  "el-GR": 88,
+  "el-GR": 87,
   "en": 100,
-  "es-AR": 88,
+  "es-AR": 87,
   "es-CL": 89,
-  "es": 88,
+  "es": 87,
-  "fa": 88,
+  "fa": 87,
-  "fr": 88,
+  "fr": 87,
   "hi": 2,
-  "it-IT": 88,
+  "it-IT": 87,
   "it": 1,
-  "ja": 88,
+  "ja": 87,
   "ko": 63,
-  "pl": 88,
+  "pl": 87,
-  "pt-BR": 88,
+  "pt-BR": 87,
-  "ru": 88,
+  "ru": 87,
-  "sv-SE": 88,
+  "sv-SE": 87,
-  "uk": 88,
+  "uk": 87,
   "ur": 2,
-  "zh-Hans": 88,
+  "zh-Hans": 87,
-  "zh-Hant": 88
+  "zh-Hant": 87
 }

packages/frontend/i18n/src/i18n.gen.ts

@@ -1215,6 +1215,10 @@ export function useAFFiNEI18N(): {
       * `Confirm your email`
       */
     ["com.affine.auth.sign.in.sent.email.subtitle"](): string;
+    /**
+      * `Self-Hosted`
+      */
+    ["com.affine.auth.sign.add-selfhosted.title"](): string;
     /**
       * `Connect to a Self-Hosted Instance`
       */
@@ -4301,6 +4305,14 @@ export function useAFFiNEI18N(): {
       * `Click or drag`
       */
     ["com.affine.split-view-drag-handle.tooltip"](): string;
+    /**
+      * `Split view does not support folders.`
+      */
+    ["com.affine.split-view-folder-warning.description"](): string;
+    /**
+      * `Do not show this again`
+      */
+    ["do-not-show-this-again"](): string;
     /**
       * `New`
       */
@@ -5329,14 +5341,6 @@ export function useAFFiNEI18N(): {
       * `Enables mind map import.`
       */
     ["com.affine.settings.workspace.experimental-features.enable-mind-map-import.description"](): string;
-    /**
-      * `Split View`
-      */
-    ["com.affine.settings.workspace.experimental-features.enable-multi-view.name"](): string;
-    /**
-      * `The Split View feature enables you to divide your tab into multiple sections for simultaneous viewing and editing of different documents.`
-      */
-    ["com.affine.settings.workspace.experimental-features.enable-multi-view.description"](): string;
     /**
       * `Emoji Folder Icon`
       */
@@ -6929,6 +6933,10 @@ export function useAFFiNEI18N(): {
       * `Edgeless`
       */
     ["com.affine.page-starter-bar.edgeless"](): string;
+    /**
+      * `Tips`
+      */
+    tips(): string;
     /**
       * `Template`
       */
@@ -7029,6 +7037,13 @@ export function useAFFiNEI18N(): {
       * `Bad request.`
       */
     ["error.BAD_REQUEST"](): string;
+    /**
+      * `GraphQL bad request, code: {{code}}, {{message}}`
+      */
+    ["error.GRAPHQL_BAD_REQUEST"](options: Readonly<{
+        code: string;
+        message: string;
+    }>): string;
     /**
       * `Query is too long, max length is {{max}}.`
       */
@@ -7373,6 +7388,12 @@ export function useAFFiNEI18N(): {
       * `Action has been taken, no more messages allowed.`
       */
     ["error.COPILOT_ACTION_TAKEN"](): string;
+    /**
+      * `Doc {{docId}} not found.`
+      */
+    ["error.COPILOT_DOC_NOT_FOUND"](options: {
+        readonly docId: string;
+    }): string;
     /**
       * `Copilot message {{messageId}} not found.`
       */

packages/frontend/i18n/src/resources/en.json

@@ -294,6 +294,7 @@
   "com.affine.auth.sign.email.placeholder": "Enter your email address",
   "com.affine.auth.sign.in": "Sign in",
   "com.affine.auth.sign.in.sent.email.subtitle": "Confirm your email",
+  "com.affine.auth.sign.add-selfhosted.title": "Self-Hosted",
   "com.affine.auth.sign.add-selfhosted": "Connect to a Self-Hosted Instance",
   "com.affine.auth.sign.add-selfhosted.baseurl": "Server URL",
   "com.affine.auth.sign.add-selfhosted.connect-button": "Connect",
@@ -1750,6 +1751,7 @@
   "error.TOO_MANY_REQUEST": "Too many requests.",
   "error.NOT_FOUND": "Resource not found.",
   "error.BAD_REQUEST": "Bad request.",
+  "error.GRAPHQL_BAD_REQUEST": "GraphQL bad request, code: {{code}}, {{message}}",
   "error.QUERY_TOO_LONG": "Query is too long, max length is {{max}}.",
   "error.USER_NOT_FOUND": "User not found.",
   "error.USER_AVATAR_NOT_FOUND": "User avatar not found.",
@@ -1821,6 +1823,7 @@
   "error.COPILOT_FAILED_TO_CREATE_MESSAGE": "Failed to create chat message.",
   "error.UNSPLASH_IS_NOT_CONFIGURED": "Unsplash is not configured.",
   "error.COPILOT_ACTION_TAKEN": "Action has been taken, no more messages allowed.",
+  "error.COPILOT_DOC_NOT_FOUND": "Doc {{docId}} not found.",
   "error.COPILOT_MESSAGE_NOT_FOUND": "Copilot message {{messageId}} not found.",
   "error.COPILOT_PROMPT_NOT_FOUND": "Copilot prompt {{name}} not found.",
   "error.COPILOT_PROMPT_INVALID": "Copilot prompt is invalid.",