From 87d23e0b501137746259b24cddd9041e52101616 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 17 Mar 2026 18:50:11 +0100
Subject: [PATCH] nicolium: make closing the hotkeys modal navigate back to
 what opened it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/nicolium/src/features/ui/index.tsx |   4 +-
 packages/nicolium/src/stores/modals.ts      | 116 +++++++++++---------
 2 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/packages/nicolium/src/features/ui/index.tsx b/packages/nicolium/src/features/ui/index.tsx
index cd0393b55..c08736821 100644
--- a/packages/nicolium/src/features/ui/index.tsx
+++ b/packages/nicolium/src/features/ui/index.tsx
@@ -91,7 +91,7 @@ const UI: React.FC = React.memo(() => {
   };
 
   const handleOpenHotkeysModal = () => {
-    openModal('HOTKEYS');
+    openModal('HOTKEYS', undefined, document.getElementById('skip-link-hotkeys') || undefined);
   };
 
   /** Load initial data when a user is logged in */
@@ -164,7 +164,7 @@ const UI: React.FC = React.memo(() => {
           <button onClick={handleSkipToContent}>
             <FormattedMessage id='skip_links.skip_to_content' defaultMessage='Skip to content' />
           </button>
-          <button onClick={handleOpenHotkeysModal}>
+          <button id='skip-link-hotkeys' onClick={handleOpenHotkeysModal}>
             <FormattedMessage
               id='navigation.keyboard_shortcuts'
               defaultMessage='Keyboard shortcuts'
diff --git a/packages/nicolium/src/stores/modals.ts b/packages/nicolium/src/stores/modals.ts
index 1b7274cac..4d4e1c8ca 100644
--- a/packages/nicolium/src/stores/modals.ts
+++ b/packages/nicolium/src/stores/modals.ts
@@ -2,7 +2,6 @@ import { create } from 'zustand';
 import { mutative } from 'zustand-mutative';
 
 import type { ICryptoAddress } from '@/features/crypto-donate/components/crypto-address';
-import type { ModalType } from '@/features/ui/components/modal-root';
 import type { AltTextModalProps } from '@/modals/alt-text-modal';
 import type { AntennaEditorModalProps } from '@/modals/antenna-editor-modal';
 import type { BlockMuteModalProps } from '@/modals/block-mute-modal';
@@ -41,57 +40,66 @@ import type { TextFieldModalProps } from '@/modals/text-field-modal';
 import type { UnauthorizedModalProps } from '@/modals/unauthorized-modal';
 
 type OpenModalProps =
-  | [type: 'ALT_TEXT', props: AltTextModalProps]
-  | [type: 'ANTENNA_EDITOR', props: AntennaEditorModalProps]
-  | [type: 'BIRTHDAYS' | 'CREATE_GROUP' | 'HOTKEYS']
-  | [type: 'BOOST', props: BoostModalProps]
-  | [type: 'CIRCLE_EDITOR', props: CircleEditorModalProps]
-  | [type: 'COMPARE_HISTORY', props: CompareHistoryModalProps]
-  | [type: 'COMPONENT', props: ComponentModalProps]
-  | [type: 'COMPOSE', props?: ComposeModalProps]
-  | [type: 'COMPOSE_INTERACTION_POLICY', props?: ComposeInteractionPolicyModalProps]
-  | [type: 'CONFIRM', props: ConfirmationModalProps]
+  | [type: 'ALT_TEXT', props: AltTextModalProps, element?: HTMLElement]
+  | [type: 'ANTENNA_EDITOR', props: AntennaEditorModalProps, element?: HTMLElement]
+  | [type: 'BIRTHDAYS' | 'CREATE_GROUP' | 'HOTKEYS', props?: undefined, element?: HTMLElement]
+  | [type: 'BOOST', props: BoostModalProps, element?: HTMLElement]
+  | [type: 'CIRCLE_EDITOR', props: CircleEditorModalProps, element?: HTMLElement]
+  | [type: 'COMPARE_HISTORY', props: CompareHistoryModalProps, element?: HTMLElement]
+  | [type: 'COMPONENT', props: ComponentModalProps, element?: HTMLElement]
+  | [type: 'COMPOSE', props?: ComposeModalProps, element?: HTMLElement]
+  | [
+      type: 'COMPOSE_INTERACTION_POLICY',
+      props?: ComposeInteractionPolicyModalProps,
+      element?: HTMLElement,
+    ]
+  | [type: 'CONFIRM', props: ConfirmationModalProps, element?: HTMLElement]
   | [type: 'CRYPTO_DONATE', props: ICryptoAddress]
-  | [type: 'DISLIKES', props: DislikesModalProps]
-  | [type: 'DROPDOWN_MENU', props: DropdownMenuModalProps]
-  | [type: 'EDIT_ANNOUNCEMENT', props?: EditAnnouncementModalProps]
-  | [type: 'EDIT_BOOKMARK_FOLDER', props: EditBookmarkFolderModalProps]
-  | [type: 'EDIT_DOMAIN', props?: EditDomainModalProps]
-  | [type: 'EDIT_FEDERATION', props: EditFederationModalProps]
-  | [type: 'EDIT_RULE', props?: EditRuleModalProps]
-  | [type: 'EMBED', props: EmbedModalProps]
-  | [type: 'EVENT_MAP', props: EventMapModalProps]
-  | [type: 'EVENT_PARTICIPANTS', props: EventParticipantsModalProps]
-  | [type: 'FAMILIAR_FOLLOWERS', props: FamiliarFollowersModalProps]
-  | [type: 'FAVOURITES', props: FavouritesModalProps]
-  | [type: 'JOIN_EVENT', props: JoinEventModalProps]
-  | [type: 'LIST_ADDER', props: ListAdderModalProps]
-  | [type: 'LIST_EDITOR', props: ListEditorModalProps]
-  | [type: 'MEDIA', props: MediaModalProps]
-  | [type: 'MENTIONS', props: MentionsModalProps]
-  | [type: 'MISSING_DESCRIPTION', props: MissingDescriptionModalProps]
-  | [type: 'BLOCK_MUTE', props: BlockMuteModalProps]
-  | [type: 'REACTIONS', props: ReactionsModalProps]
-  | [type: 'REBLOGS', props: ReblogsModalProps]
-  | [type: 'REPLY_MENTIONS', props: ReplyMentionsModalProps]
-  | [type: 'REPORT', props: ReportModalProps]
-  | [type: 'SELECT_BOOKMARK_FOLDER', props: SelectBookmarkFolderModalProps]
-  | [type: 'SELECT_DRIVE_FILE', props: SelectDriveFileModalProps]
-  | [type: 'TEXT_FIELD', props: TextFieldModalProps]
-  | [type: 'UNAUTHORIZED', props?: UnauthorizedModalProps];
+  | [type: 'DISLIKES', props: DislikesModalProps, element?: HTMLElement]
+  | [type: 'DROPDOWN_MENU', props: DropdownMenuModalProps, element?: HTMLElement]
+  | [type: 'EDIT_ANNOUNCEMENT', props?: EditAnnouncementModalProps, element?: HTMLElement]
+  | [type: 'EDIT_BOOKMARK_FOLDER', props: EditBookmarkFolderModalProps, element?: HTMLElement]
+  | [type: 'EDIT_DOMAIN', props?: EditDomainModalProps, element?: HTMLElement]
+  | [type: 'EDIT_FEDERATION', props: EditFederationModalProps, element?: HTMLElement]
+  | [type: 'EDIT_RULE', props?: EditRuleModalProps, element?: HTMLElement]
+  | [type: 'EMBED', props: EmbedModalProps, element?: HTMLElement]
+  | [type: 'EVENT_MAP', props: EventMapModalProps, element?: HTMLElement]
+  | [type: 'EVENT_PARTICIPANTS', props: EventParticipantsModalProps, element?: HTMLElement]
+  | [type: 'FAMILIAR_FOLLOWERS', props: FamiliarFollowersModalProps, element?: HTMLElement]
+  | [type: 'FAVOURITES', props: FavouritesModalProps, element?: HTMLElement]
+  | [type: 'JOIN_EVENT', props: JoinEventModalProps, element?: HTMLElement]
+  | [type: 'LIST_ADDER', props: ListAdderModalProps, element?: HTMLElement]
+  | [type: 'LIST_EDITOR', props: ListEditorModalProps, element?: HTMLElement]
+  | [type: 'MEDIA', props: MediaModalProps, element?: HTMLElement]
+  | [type: 'MENTIONS', props: MentionsModalProps, element?: HTMLElement]
+  | [type: 'MISSING_DESCRIPTION', props: MissingDescriptionModalProps, element?: HTMLElement]
+  | [type: 'BLOCK_MUTE', props: BlockMuteModalProps, element?: HTMLElement]
+  | [type: 'REACTIONS', props: ReactionsModalProps, element?: HTMLElement]
+  | [type: 'REBLOGS', props: ReblogsModalProps, element?: HTMLElement]
+  | [type: 'REPLY_MENTIONS', props: ReplyMentionsModalProps, element?: HTMLElement]
+  | [type: 'REPORT', props: ReportModalProps, element?: HTMLElement]
+  | [type: 'SELECT_BOOKMARK_FOLDER', props: SelectBookmarkFolderModalProps, element?: HTMLElement]
+  | [type: 'SELECT_DRIVE_FILE', props: SelectDriveFileModalProps, element?: HTMLElement]
+  | [type: 'TEXT_FIELD', props: TextFieldModalProps, element?: HTMLElement]
+  | [type: 'UNAUTHORIZED', props?: UnauthorizedModalProps, element?: HTMLElement];
 
-type Modals = Array<{
+type ModalType = OpenModalProps[0];
+
+type Modal = {
   modalType: ModalType;
   modalProps?: Record<string, any>;
-}>;
+  element?: HTMLElement;
+};
+
+type Modals = Array<Modal>;
 
 type State = {
   modals: Modals;
   actions: {
     /** Open a modal of the given type */
-    openModal: (...[modalType, modalProps]: OpenModalProps) => void;
+    openModal: (...args: OpenModalProps) => void;
     /** Close the modal */
-    closeModal: (modalType?: ModalType, all?: boolean) => void;
+    closeModal: (modalType?: ModalType | null, all?: boolean) => void;
   };
 };
 
@@ -100,33 +108,33 @@ const useModalsStore = create<State>()(
     (set) => ({
       modals: [],
       actions: {
-        openModal: (...[modalType, modalProps]) => {
-          set((state: State) => {
-            state.modals.push({ modalType, modalProps });
+        openModal: (...[modalType, modalProps, element]) => {
+          set((state) => {
+            state.modals.push({ modalType, modalProps, element } as any);
           });
         },
         closeModal: (modalType, all) => {
-          set((state: State) => {
+          set((state) => {
             if (state.modals.length === 0) {
               return;
             }
-            let closedModal: Record<string, any> | undefined;
+            let closedModal: (typeof state.modals)[number] | undefined;
             if (all) {
-              closedModal = state.modals[0].modalProps;
+              closedModal = state.modals[0];
               state.modals = [];
-            } else if (modalType === undefined) {
-              closedModal = state.modals[state.modals.length - 1].modalProps;
+            } else if (!modalType) {
+              closedModal = state.modals[state.modals.length - 1];
               state.modals = state.modals.slice(0, -1);
             } else if (state.modals.some((modal) => modalType === modal.modalType)) {
               const lastIndex = state.modals.findLastIndex(
                 (modal) => modalType === modal.modalType,
               );
-              closedModal = state.modals[lastIndex].modalProps;
+              closedModal = state.modals[lastIndex];
               state.modals = state.modals.slice(0, lastIndex);
             }
-            if (closedModal?.element) {
-              const element = closedModal.element;
-              setTimeout(() => element.focus(), 0);
+            const element = closedModal?.element || closedModal?.modalProps?.element;
+            if (element) {
+              setTimeout(() => (element as HTMLElement).focus(), 0);
             }
           });
         },