🩹 fix #474

src-tauri/src/app/event.rs

@@ -20,6 +20,8 @@ pub enum MouseButton {
     Left,
     Right,
     Middle,
+    Back,
+    Forward,
     Other,
 }
 
@@ -28,6 +30,9 @@ pub fn map_mouse_button(button: Button) -> MouseButton {
         Button::Left => MouseButton::Left,
         Button::Right => MouseButton::Right,
         Button::Middle => MouseButton::Middle,
+        // Common side-button codes across Windows, macOS, and Linux/X11.
+        Button::Unknown(code) if matches!(code, 1 | 3 | 8) => MouseButton::Back,
+        Button::Unknown(code) if matches!(code, 2 | 4 | 9) => MouseButton::Forward,
         _ => MouseButton::Other,
     }
 }

src/components/custom-filter.tsx

@@ -265,6 +265,9 @@ export const CustomFilter = () => {
               <ButtonKey rawKey={RawKey.Drag} />
             </div>
             <ButtonKey rawKey={RawKey.Right} className="mt-7" />
+            <ButtonKey rawKey={RawKey.Back} />
+            <div />
+            <ButtonKey rawKey={RawKey.Forward} />
           </div>
         }
         {

src/lib/keymaps.ts

@@ -421,6 +421,18 @@ export const keymaps: Record<string, DisplayData> = {
         icon: MouseRightClickIcon,
         category: "mouse",
     },
+    Back: {
+        label: "mouse back",
+        shortLabel: "back",
+        icon: ArrowLeftIcon,
+        category: "mouse",
+    },
+    Forward: {
+        label: "mouse forward",
+        shortLabel: "forward",
+        icon: ArrowRightIcon,
+        category: "mouse",
+    },
     Drag: {
         label: "drag",
         icon: MouseRightDragIcon,

src/stores/key_event.ts

@@ -282,6 +282,7 @@ const createKeyEventStore = createSyncedStore<KeyEventStore>(
         },
         onMouseButtonPress(event: MouseButtonEvent) {
             const state = get();
+            if (event.button === "Other") return;
             // set drag start position
             const mouse = {
                 ...state.mouse,
@@ -298,6 +299,7 @@ const createKeyEventStore = createSyncedStore<KeyEventStore>(
         },
         onMouseButtonRelease(event: MouseButtonEvent) {
             const state = get();
+            if (event.button === "Other") return;
             // reset drag state
             const mouse = {
                 ...state.mouse,

src/types/event.ts

@@ -32,6 +32,8 @@ export type MouseButton =
   | "Left"
   | "Right"
   | "Middle"
+  | "Back"
+  | "Forward"
   | "Other";
 
 export const RawKey = {
@@ -177,6 +179,8 @@ export const RawKey = {
   Left: "Left",
   Middle: "Middle",
   Right: "Right",
+  Back: "Back",
+  Forward: "Forward",
   Drag: "Drag",
   ScrollUp: "ScrollUp",
   ScrollDown: "ScrollDown",