♿️(frontend) restore focus in docsGrid after modals

Use focus store to restore focus to triggers in docsGrid.

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -20,6 +20,8 @@ import {
   useTrans,
 } from '@/docs/doc-management';
 import { DocShareModal } from '@/docs/doc-share';
+import { MAIN_LAYOUT_ID } from '@/layouts/conf';
+import { useFocusStore } from '@/stores';
 
 import { DocMoveModal } from './DocMoveModal';
 
@@ -29,13 +31,21 @@ interface DocsGridActionsProps {
 
 export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
   const { t } = useTranslation();
+  const restoreFocus = useFocusStore((state) => state.restoreFocus);
 
   const deleteModal = useModal();
   const shareModal = useModal();
   const importModal = useModal();
   const { untitledDocument } = useTrans();
 
-  const { mutate: duplicateDoc } = useDuplicateDoc();
+  const { mutate: duplicateDoc } = useDuplicateDoc({
+    onSuccess: () => {
+      const mainContent = document.getElementById(MAIN_LAYOUT_ID);
+      if (mainContent) {
+        requestAnimationFrame(() => mainContent.focus());
+      }
+    },
+  });
 
   const removeFavoriteDoc = useDeleteFavoriteDoc({
     listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_FAVORITE_DOC],
@@ -135,15 +145,30 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
       </DropdownMenu>
 
       {deleteModal.isOpen && (
-        <ModalRemoveDoc onClose={deleteModal.onClose} doc={doc} />
+        <ModalRemoveDoc
+          onClose={() => {
+            deleteModal.onClose();
+            restoreFocus();
+          }}
+          doc={doc}
+        />
       )}
       {shareModal.isOpen && (
-        <DocShareModal doc={doc} onClose={shareModal.close} />
+        <DocShareModal
+          doc={doc}
+          onClose={() => {
+            shareModal.close();
+            restoreFocus();
+          }}
+        />
       )}
       {importModal.isOpen && (
         <DocMoveModal
           doc={doc}
-          onClose={importModal.close}
+          onClose={() => {
+            importModal.close();
+            restoreFocus();
+          }}
           isOpen={importModal.isOpen}
         />
       )}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Box, Icon, Text } from '@/components';
 import { Doc } from '@/docs/doc-management';
 import { DocShareModal } from '@/docs/doc-share';
+import { useFocusStore } from '@/stores';
 
 type Props = {
   doc: Doc;
@@ -14,6 +15,7 @@ export const DocsGridItemSharedButton = ({ doc, disabled }: Props) => {
   const sharedCount = doc.nb_accesses_direct;
   const isShared = sharedCount - 1 > 0;
   const shareModal = useModal();
+  const { addLastFocus, restoreFocus } = useFocusStore();
 
   if (!isShared) {
     return <Box $minWidth="50px">&nbsp;</Box>;
@@ -40,6 +42,7 @@ export const DocsGridItemSharedButton = ({ doc, disabled }: Props) => {
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
+            addLastFocus(event.currentTarget as HTMLElement);
             shareModal.open();
           }}
           color="brand"
@@ -60,7 +63,13 @@ export const DocsGridItemSharedButton = ({ doc, disabled }: Props) => {
         </Button>
       </Tooltip>
       {shareModal.isOpen && (
-        <DocShareModal doc={doc} onClose={shareModal.close} />
+        <DocShareModal
+          doc={doc}
+          onClose={() => {
+            shareModal.close();
+            restoreFocus();
+          }}
+        />
       )}
     </>
   );