feat: Implement Undo/Redo functionality with Redux middleware and UI integration

package.json

@@ -23,6 +23,7 @@
         "nanoid": "^5.1.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hotkeys-hook": "^5.2.4",
         "react-i18next": "^15.7.4",
         "react-icons": "^5.5.0",
         "react-redux": "^9.2.0",

src/components/root/window-header.tsx

@@ -1,19 +1,56 @@
+
 import { useState } from 'react';
 import { Heading, HStack, IconButton } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { MdHelp } from 'react-icons/md';
+import { MdHelp, MdRedo, MdUndo } from 'react-icons/md';
 import HelpModal from '../modal/help-modal';
 import { RmgEnvBadge, RmgWindowHeader } from '@railmapgen/rmg-components';
 import rmgRuntime from '@railmapgen/rmg-runtime';
+import { useRootDispatch, useRootSelector } from '../../redux';
+import { redo, undo } from '../../redux/undo/undo-middleware';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export const WindowHeader = () => {
     const { t } = useTranslation();
+    const dispatch = useRootDispatch();
+    const { pastCount, futureCount } = useRootSelector(state => state.undo);
 
     const environment = rmgRuntime.getEnv();
     const appVersion = rmgRuntime.getAppVersion();
 
     const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
 
+    const isMacClient = navigator.platform.startsWith('Mac');
+    let undoHotkeys, redoHotkeys;
+
+    if (isMacClient) {
+        undoHotkeys = 'meta+z';
+        redoHotkeys = 'meta+shift+z';
+    } else {
+        undoHotkeys = 'ctrl+z';
+        redoHotkeys = 'ctrl+y';
+    }
+
+    useHotkeys(
+        undoHotkeys,
+        e => {
+            e.preventDefault();
+            if (pastCount > 0) dispatch(undo());
+        },
+        { enableOnFormTags: true },
+        [pastCount]
+    );
+
+    useHotkeys(
+        redoHotkeys,
+        e => {
+            e.preventDefault();
+            if (futureCount > 0) dispatch(redo());
+        },
+        { enableOnFormTags: true },
+        [futureCount]
+    );
+
     return (
         <RmgWindowHeader>
             <Heading as="h4" size="md">
@@ -22,6 +59,22 @@ export const WindowHeader = () => {
             <RmgEnvBadge environment={environment} version={appVersion} />
 
             <HStack ml="auto">
+                <IconButton
+                    size="sm"
+                    variant="ghost"
+                    aria-label="Undo"
+                    icon={<MdUndo />}
+                    isDisabled={pastCount === 0}
+                    onClick={() => dispatch(undo())}
+                />
+                <IconButton
+                    size="sm"
+                    variant="ghost"
+                    aria-label="Redo"
+                    icon={<MdRedo />}
+                    isDisabled={futureCount === 0}
+                    onClick={() => dispatch(redo())}
+                />
                 <IconButton
                     size="sm"
                     variant="ghost"
@@ -35,7 +88,6 @@ export const WindowHeader = () => {
         </RmgWindowHeader>
     );
 };
-
 export const ImportViewWindowHeader = () => {
     const { t } = useTranslation();
 

src/components/side-panel/branch-side-panel/coline-card.tsx

@@ -76,6 +76,7 @@ export default function ColineCard(props: ColineCardProps) {
                     value,
                     colineInfo.colors[0][5],
                 ]),
+            debouncedDelay: 300,
         },
         {
             type: 'input',
@@ -91,6 +92,7 @@ export default function ColineCard(props: ColineCardProps) {
                     colineInfo.colors[0][4],
                     value,
                 ]),
+            debouncedDelay: 300,
         },
     ];
 

src/components/side-panel/station-side-panel/info-section.tsx

@@ -29,18 +29,21 @@ export default function InfoSection() {
             placeholder: '01',
             onChange: (value: string) => dispatch(updateStationNum(selectedStation, value)),
             hidden: ![RmgStyle.GZMTR].includes(style),
+            debouncedDelay: 300,
         },
         {
             type: 'input',
             label: t('Chinese name'),
             value: localisedName.zh ?? '',
             onChange: (value: string) => dispatch(updateStationName(selectedStation, 'zh', value)),
+            debouncedDelay: 300,
         },
         {
             type: 'input',
             label: t('English name'),
             value: localisedName.en ?? '',
             onChange: (value: string) => dispatch(updateStationName(selectedStation, 'en', value)),
+            debouncedDelay: 300,
         },
         {
             type: 'custom',
@@ -66,6 +69,7 @@ export default function InfoSection() {
             placeholder: '1号航站楼',
             onChange: (value: string) => dispatch(updateStationSecondaryName(selectedStation, 'zh', value)),
             hidden: !localisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
+            debouncedDelay: 300,
         },
         {
             type: 'input',
@@ -74,6 +78,7 @@ export default function InfoSection() {
             placeholder: 'Terminal 1',
             onChange: (value: string) => dispatch(updateStationSecondaryName(selectedStation, 'en', value)),
             hidden: !localisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
+            debouncedDelay: 300,
         },
     ];
 

src/components/side-panel/station-side-panel/interchange-card.tsx

@@ -66,13 +66,15 @@ export default function InterchangeCard(props: InterchangeCardProps) {
             value: it.name[0],
             onChange: val => onUpdate?.(i, { ...it, name: [val, it.name[1]] }),
             optionList: usedNameList[0],
+            debouncedDelay: 300,
         },
         {
             type: 'input',
             label: t('English name'),
             value: it.name[1],
             onChange: val => onUpdate?.(i, { ...it, name: [it.name[0], val] }),
             optionList: usedNameList[1],
+            debouncedDelay: 300,
         },
         {
             type: 'select',

src/components/side-panel/station-side-panel/interchange-section.tsx

@@ -34,6 +34,7 @@ export default function InterchangeSection() {
                 dispatch(
                     updateStationOsiName(selectedStation, setIndex, [value, transfer.groups[setIndex].name?.[1] ?? ''])
                 ),
+            debouncedDelay: 300,
         },
         {
             type: 'input',
@@ -44,6 +45,7 @@ export default function InterchangeSection() {
                 dispatch(
                     updateStationOsiName(selectedStation, setIndex, [transfer.groups[setIndex].name?.[0] ?? '', value])
                 ),
+            debouncedDelay: 300,
         },
         {
             type: 'switch',