feat: support enter to create workspace

packages/app/src/components/create-workspace/index.tsx

@@ -20,6 +20,12 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
     onClose({ workspaceId: workspace.id });
     setActiveWorkspace(workspace);
   };
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      // 👇 Get input value
+      handleCreateWorkspace();
+    }
+  };
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -40,6 +46,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
               just one person or together as a team.
             </p>
             <Input
+              onKeyDown={handleKeyDown}
               onChange={value => {
                 setWorkspaceName(value);
               }}

packages/app/src/components/workspace-avatar/index.tsx

@@ -20,7 +20,8 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
           background: stringToColour(props.name || 'AFFiNE'),
           borderRadius: '50%',
           textAlign: 'center',
-          lineHeight: sizeStr,
+          // Let the text inside the avatar be absolutely in the play
+          lineHeight: size - 2 + '[x',
         }}
       >
         {(props.name || 'AFFiNE').substring(0, 1)}

packages/app/src/ui/input/Input.tsx

@@ -11,6 +11,7 @@ type inputProps = {
   onChange?: (value: string) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onBlur?: (e: any) => void;
+  onKeyDown?: (e: any) => void;
 };
 
 export const Input = (props: inputProps) => {
@@ -23,6 +24,7 @@ export const Input = (props: inputProps) => {
     width = 260,
     onChange,
     onBlur,
+    onKeyDown,
   } = props;
   const [value, setValue] = useState<string>(valueProp || '');
   const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
@@ -37,6 +39,10 @@ export const Input = (props: inputProps) => {
   const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
     onBlur && onBlur(e);
   };
+  const handleKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] =
+    e => {
+      onKeyDown && onKeyDown(e);
+    };
   useEffect(() => {
     setValue(valueProp || '');
   }, [valueProp]);
@@ -50,6 +56,7 @@ export const Input = (props: inputProps) => {
       minLength={minLength}
       onChange={handleChange}
       onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
     ></StyledInput>
   );
 };