feat(hotkeys modal): ⚡ loading state + performance improvements (#8694)

* feat(hotkeys modal): ⚡ loading state + performance improvements

* feat(hotkeys modal): add tooltip to edit button and adjust layout spacing

* style(hotkeys modal): 🚨 satisfy the linter

---------

Co-authored-by: Lincoln Stein <[email protected]>

Author: joshistoast

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx

@@ -1,11 +1,11 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Button, Flex, IconButton, Kbd, Text, Tooltip } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import type { Hotkey } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { IS_MAC_OS, useHotkeyConflictMap } from 'features/system/components/HotkeysModal/useHotkeyData';
+import type { AppThunkDispatch } from 'app/store/store';
+import type { Hotkey, HotkeyConflictInfo } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { IS_MAC_OS } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { hotkeyChanged, hotkeyReset } from 'features/system/store/hotkeysSlice';
+import type { TFunction } from 'i18next';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   PiArrowCounterClockwiseBold,
   PiCheckBold,
@@ -82,8 +82,6 @@ type HotkeyEditProps = {
   onEditDelete?: (index: number) => void;
 };
 
-type HotkeyConflictInfo = { category: string; id: string; title: string; fullId: string };
-
 type HotkeyItemProps = HotkeyEditProps & {
   sx?: SystemStyleObject;
   keyString: string;
@@ -92,6 +90,7 @@ type HotkeyItemProps = HotkeyEditProps & {
   currentHotkeyId: string;
   isNewHotkey?: boolean;
   conflictMap: Map<string, HotkeyConflictInfo>;
+  t: TFunction;
 };
 
 const HotkeyRecorderSx: SystemStyleObject = {
@@ -126,8 +125,8 @@ const HotkeyItem = memo(
     currentHotkeyId,
     isNewHotkey,
     conflictMap,
+    t,
   }: HotkeyItemProps) => {
-    const { t } = useTranslation();
     const [recordedKey, setRecordedKey] = useState<string | null>(null);
     const [isRecording, setIsRecording] = useState(false);
 
@@ -299,28 +298,30 @@ const HotkeyItem = memo(
       }
 
       return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onStartEdit}
-          rightIcon={<PiPencilSimpleBold />}
-          gap={0.5}
-          alignItems="center"
-          px={2}
-        >
-          {displayKeyParts.map((part, j) => (
-            <Fragment key={j}>
-              <Kbd fontSize="xs" textTransform="lowercase">
-                {part}
-              </Kbd>
-              {j !== displayKeyParts.length - 1 && (
-                <Text as="span" fontSize="xs" fontWeight="semibold" mx={0.5} mt={-0.5}>
-                  +
-                </Text>
-              )}
-            </Fragment>
-          ))}
-        </Button>
+        <Tooltip label={t('hotkeys.editHotkey')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onStartEdit}
+            rightIcon={<PiPencilSimpleBold />}
+            gap={0.5}
+            alignItems="center"
+            px={2}
+          >
+            {displayKeyParts.map((part, j) => (
+              <Fragment key={j}>
+                <Kbd fontSize="xs" textTransform="lowercase">
+                  {part}
+                </Kbd>
+                {j !== displayKeyParts.length - 1 && (
+                  <Text as="span" fontSize="xs" fontWeight="semibold" mx={0.5} mt={-0.5}>
+                    +
+                  </Text>
+                )}
+              </Fragment>
+            ))}
+          </Button>
+        </Tooltip>
       );
     };
 
@@ -380,6 +381,7 @@ type HotkeyItemsDisplayProps = HotkeyEditProps & {
   conflictMap: Map<string, HotkeyConflictInfo>;
   isCustomized?: boolean;
   onReset?: () => void;
+  t: TFunction;
 };
 
 const HotkeyItemsDisplaySx: SystemStyleObject = {
@@ -403,8 +405,8 @@ const HotkeyItemsDisplay = memo(
     conflictMap,
     isCustomized,
     onReset,
+    t,
   }: HotkeyItemsDisplayProps) => {
-    const { t } = useTranslation();
     const isAddingNew = editingIndex === hotkeys.length;
 
     return (
@@ -422,6 +424,7 @@ const HotkeyItemsDisplay = memo(
                 onEditDelete={onEditDelete}
                 currentHotkeyId={currentHotkeyId}
                 conflictMap={conflictMap}
+                t={t}
               />
             ))
           : !isAddingNew && (
@@ -441,6 +444,7 @@ const HotkeyItemsDisplay = memo(
             currentHotkeyId={currentHotkeyId}
             isNewHotkey={true}
             conflictMap={conflictMap}
+            t={t}
           />
         )}
         <Flex>
@@ -476,23 +480,26 @@ const HotkeyItemsDisplay = memo(
 HotkeyItemsDisplay.displayName = 'HotkeyItemsDisplay';
 
 type HotkeyListItemProps = {
+  lastItem?: boolean;
   hotkey: Hotkey;
   sx?: SystemStyleObject;
+  conflictMap: Map<string, HotkeyConflictInfo>;
+  t: TFunction;
+  dispatch: AppThunkDispatch;
 };
 
 const HotkeyListItemSx: SystemStyleObject = {
-  gap: 2,
   alignItems: 'start',
   justifyContent: 'space-between',
   width: '100%',
+  py: 3,
+  gap: 2,
 };
 
-export const HotkeyListItem = memo(({ hotkey, sx }: HotkeyListItemProps) => {
+export const HotkeyListItem = memo(({ lastItem, hotkey, sx, conflictMap, t, dispatch }: HotkeyListItemProps) => {
   const { title, desc, hotkeys: hotkeyKeys, defaultHotkeys } = hotkey;
 
-  const dispatch = useAppDispatch();
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
-  const conflictMap = useHotkeyConflictMap();
 
   // Check if hotkeys have been customized
   const isCustomized = useMemo(() => {
@@ -560,8 +567,8 @@ export const HotkeyListItem = memo(({ hotkey, sx }: HotkeyListItemProps) => {
   }, [dispatch, currentHotkeyId]);
 
   return (
-    <Flex sx={{ ...HotkeyListItemSx, ...sx }}>
-      <Flex lineHeight={1} gap={1} w="100%" flexDir="column">
+    <Flex sx={{ ...HotkeyListItemSx, borderBottomWidth: lastItem ? 0 : 1, ...sx }}>
+      <Flex lineHeight={1} gap={2} w="100%" flexDir="column">
         <Text fontWeight="semibold">{title}</Text>
         <Text variant="subtext">{desc}</Text>
       </Flex>
@@ -578,6 +585,7 @@ export const HotkeyListItem = memo(({ hotkey, sx }: HotkeyListItemProps) => {
           conflictMap={conflictMap}
           isCustomized={isCustomized}
           onReset={handleReset}
+          t={t}
         />
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysListWrapper.tsx

@@ -0,0 +1,50 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { AppThunkDispatch } from 'app/store/store';
+import type { Hotkey, HotkeyConflictInfo } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { StickyScrollable } from 'features/system/components/StickyScrollable';
+import type { TFunction } from 'i18next';
+import { memo } from 'react';
+
+import { HotkeyListItem } from './HotkeyListItem';
+
+const HotkeyListWrapperContentSx: SystemStyleObject = {
+  gap: 0,
+  py: 0,
+};
+
+const HotkeyListWrapperHeadingSx: SystemStyleObject = {
+  py: 3,
+};
+
+type HotkeysListWrapperProps = {
+  title: string;
+  hotkeysList: Hotkey[];
+  conflictMap: Map<string, HotkeyConflictInfo>;
+  t: TFunction;
+  dispatch: AppThunkDispatch;
+};
+
+export const HotkeysListWrapper = memo((props: HotkeysListWrapperProps) => {
+  const { title, hotkeysList, conflictMap, t, dispatch } = props;
+
+  if (hotkeysList.length === 0) {
+    return null;
+  }
+
+  return (
+    <StickyScrollable title={title} headingSx={HotkeyListWrapperHeadingSx} contentSx={HotkeyListWrapperContentSx}>
+      {hotkeysList.map((hotkey, index) => (
+        <HotkeyListItem
+          key={hotkey.id}
+          lastItem={index === hotkeysList.length - 1}
+          hotkey={hotkey}
+          conflictMap={conflictMap}
+          t={t}
+          dispatch={dispatch}
+        />
+      ))}
+    </StickyScrollable>
+  );
+});
+
+HotkeysListWrapper.displayName = 'HotkeysListWrapper';