From ae92aef1a46002fc748560e59989a4f6ebf546f2 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Fri, 4 Apr 2025 05:36:59 +0000
Subject: [PATCH] feat(core): automatically focus on the Readwise token input
 when the window is focused (#11112)

---
 .../integration/readwise/connect.tsx           | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/readwise/connect.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/readwise/connect.tsx
index 15266d2cac..9039ad1b7b 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/readwise/connect.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/readwise/connect.tsx
@@ -4,7 +4,13 @@ import { IntegrationService } from '@affine/core/modules/integration';
 import { Trans, useI18n } from '@affine/i18n';
 import { ReadwiseLogoDuotoneIcon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
-import { type FormEvent, useCallback, useState } from 'react';
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { IntegrationCardIcon } from '../card';
 import {
@@ -27,6 +33,7 @@ const ConnectDialog = ({
   onSuccess: (token: string) => void;
 }) => {
   const t = useI18n();
+  const inputRef = useRef<HTMLInputElement>(null);
   const [status, setStatus] = useState<'idle' | 'verifying' | 'error'>('idle');
   const [token, setToken] = useState('');
   const readwise = useService(IntegrationService).readwise;
@@ -82,6 +89,14 @@ const ConnectDialog = ({
     [handleResult, readwise]
   );
 
+  useEffect(() => {
+    const onFocus = () => inputRef.current?.focus();
+    window.addEventListener('focus', onFocus);
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, []);
+
   return (
     <Modal
       open={true}
@@ -111,6 +126,7 @@ const ConnectDialog = ({
         />
       </div>
       <Input
+        ref={inputRef}
         value={token}
         onInput={handleInput}
         placeholder={t['com.affine.integration.readwise.connect.placeholder']()}