fix: workspace name should change in the setting panel (#3039)

(cherry picked from commit e95d28e136)

apps/web/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -4,7 +4,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DoneIcon } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { type FC, useCallback, useState } from 'react';
+import { type FC, useCallback, useRef, useState } from 'react';
 
 import type { AffineOfficialWorkspace } from '../../../shared';
 import { Upload } from '../../pure/file-upload';
@@ -37,12 +37,17 @@ export const ProfilePanel: FC<{
   const [, update] = useBlockSuiteWorkspaceAvatarUrl(
     workspace.blockSuiteWorkspace
   );
+
+  const [prevName, setPrevName] = useState(
+    workspace.blockSuiteWorkspace.meta.name
+  );
   const [name, setName] = useBlockSuiteWorkspaceName(
     workspace.blockSuiteWorkspace
   );
 
   const [input, setInput] = useState<string>(name);
 
+  const inputRef = useRef<HTMLInputElement>(null);
   const handleUpdateWorkspaceName = useCallback(
     (name: string) => {
       setName(name);
@@ -51,6 +56,13 @@ export const ProfilePanel: FC<{
     [setName, t]
   );
 
+  if (prevName !== name) {
+    setPrevName(name);
+    if (inputRef.current) {
+      inputRef.current.value = name;
+    }
+  }
+
   return (
     <div className={style.profileWrapper}>
       <div className={style.avatarWrapper}>
@@ -69,6 +81,7 @@ export const ProfilePanel: FC<{
       </div>
       <div className={style.profileHandlerWrapper}>
         <Input
+          ref={inputRef}
           width={280}
           height={32}
           defaultValue={input}

apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -128,7 +128,11 @@ const WorkspaceListItem = ({
     >
       <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
       <span className="setting-name">{workspaceName}</span>
-      {isCurrent ? <div className="current-label">Current</div> : null}
+      {isCurrent ? (
+        <div className="current-label" data-testid="current-workspace-label">
+          Current
+        </div>
+      ) : null}
     </div>
   );
 };