Add battery indicator, keyboard key remapping; fix overlapping pickers

- Sidebar now shows a battery badge next to the mouse name when connected
- TopBar background/theme pickers share one open-state so they no longer
  overlap when switched directly
- Button remapping can now assign any single keyboard key per button
  (HID keyboard macro + slot write, verified against capture for 'a')
- Bump version to 1.3.5

Author: SpookyyQ

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ipi-fly-driver",
   "private": true,
-  "version": "1.3.4",
+  "version": "1.3.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "ipi-fly-driver"
-version = "1.3.4"
+version = "1.3.5"
 edition = "2021"
 
 [build-dependencies]

src-tauri/Cargo.toml

@@ -345,6 +345,23 @@ pub fn cmd_set_button(slot: u8, code: u8) -> Result<(), String> {
     with_device(|dev| dev.write(&frame))
 }
 
+#[tauri::command]
+pub fn cmd_set_button_key(slot: u8, keycode: u8) -> Result<(), String> {
+    if !protocol::is_valid_button_slot(slot) {
+        return Err(format!("unknown button slot 0x{slot:02x}"));
+    }
+    if keycode == 0 {
+        return Err("keycode must not be zero".to_string());
+    }
+    let frames = protocol::cmd_button_keyboard(slot, keycode);
+    with_device(|dev| {
+        for frame in &frames {
+            dev.write(frame)?;
+        }
+        Ok(())
+    })
+}
+
 #[tauri::command]
 pub fn cmd_raw(hex_frame: String) -> Result<String, String> {
     let bytes: Vec<u8> = hex_frame

src-tauri/src/commands.rs

@@ -32,6 +32,7 @@ fn main() {
             commands::cmd_factory_reset,
             commands::cmd_reset_buttons,
             commands::cmd_set_button,
+            commands::cmd_set_button_key,
             commands::cmd_raw,
         ])
         .run(tauri::generate_context!())

src-tauri/src/main.rs

@@ -94,6 +94,55 @@ pub fn cmd_button(slot: u8, category: u8, code: u8, modifier: u8) -> [u8; FRAME_
 /// Mouse-button action category.
 pub const ACTION_MOUSE: u8 = 0x01;
 
+/// Keyboard-key action category (category `0x05` in the button-slot write).
+pub const ACTION_KEYBOARD: u8 = 0x05;
+
+/// Macro-buffer block-write address used to stage a single key-press/release
+/// sequence before the button slot is pointed at category `ACTION_KEYBOARD`.
+const MACRO_BUFFER_ADDR: u8 = 0x20;
+
+/// Build the macro-buffer write that stages a single keyboard key (press then
+/// release of `keycode`, no modifiers).
+///
+/// Captured remap of the right button to keyboard `a` (0x04):
+///   `07 00 01 20 08 02 81 04 00 41 04 00 89 00 00 c8`
+///
+/// Layout: byte[2]=0x01 (macro marker), byte[3]=0x20 (buffer addr),
+/// byte[4]=0x08 (data length), byte[5]=0x02 (event count: down+up),
+/// byte[6]=0x81/byte[9]=0x41 (key-down / key-up event tags),
+/// byte[7]/byte[10]=keycode, byte[8]/byte[11]=0x00 (inter-event delay),
+/// byte[12]=inner checksum `0x55 - sum(byte[5..=11])`, byte[15]=tail checksum
+/// `0xF1 - byte[2] - byte[3] - byte[4]`, byte[0]=global checksum.
+pub fn cmd_keyboard_macro(keycode: u8) -> [u8; FRAME_LEN] {
+    let mut f = [0u8; FRAME_LEN];
+    f[2] = 0x01;
+    f[3] = MACRO_BUFFER_ADDR;
+    f[4] = 0x08;
+    f[5] = 0x02; // two events: key down, key up
+    f[6] = 0x81; // key-down event tag
+    f[7] = keycode;
+    f[8] = 0x00; // delay
+    f[9] = 0x41; // key-up event tag
+    f[10] = keycode;
+    f[11] = 0x00; // delay
+    let inner: u8 = f[5..=11].iter().fold(0u8, |a, &b| a.wrapping_add(b));
+    f[12] = 0x55u8.wrapping_sub(inner);
+    // Tail rule generalised to include byte[2] (0 for ordinary config frames).
+    f[15] = 0xF1u8.wrapping_sub(f[2]).wrapping_sub(f[3]).wrapping_sub(f[4]);
+    checksum(&mut f);
+    f
+}
+
+/// The two frames that remap a physical button slot to a single keyboard key:
+/// first the macro-buffer stage, then the button-slot write pointing the slot
+/// at category `ACTION_KEYBOARD` with the keycode in the modifier byte.
+pub fn cmd_button_keyboard(slot: u8, keycode: u8) -> [[u8; FRAME_LEN]; 2] {
+    [
+        cmd_keyboard_macro(keycode),
+        cmd_button(slot, ACTION_KEYBOARD, 0x00, keycode),
+    ]
+}
+
 // Mouse-button action codes (category `ACTION_MOUSE`). Confirmed from captures:
 // these are a standard HID button bitmask.
 pub const MOUSE_LEFT: u8 = 0x01;
@@ -522,6 +571,21 @@ mod tests {
         );
     }
 
+    #[test]
+    fn test_button_right_slot_to_keyboard_a() {
+        // Captured: right button slot 0x64 remapped to keyboard 'a' (0x04).
+        // The official software sends the macro-buffer stage then the slot write.
+        let frames = cmd_button_keyboard(SLOT_RIGHT, 0x04);
+        assert_eq!(
+            frames[0],
+            hex("07 00 01 20 08 02 81 04 00 41 04 00 89 00 00 c8")
+        );
+        assert_eq!(
+            frames[1],
+            hex("07 00 00 64 04 05 00 04 4c 00 00 00 00 00 00 89")
+        );
+    }
+
     #[test]
     fn test_button_left_slot_to_left_click() {
         // Captured: left button slot 0x60 set to Left Click.

src-tauri/src/protocol.rs

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "IPI STAY FLY Driver",
-    "version": "1.3.4"
+    "version": "1.3.5"
   },
   "tauri": {
     "allowlist": {

src-tauri/tauri.conf.json

@@ -116,7 +116,7 @@ export default function App() {
     <div className={`atk-shell flex h-screen w-screen overflow-hidden text-white ${demoMode ? 'demo-shell' : ''}`}>
       <div className="atk-ribbon" />
       <BackgroundLayer mode={background} wallpaper={wallpaper} />
-      {tab !== 'home' && <Sidebar activeTab={tab} onTabChange={setTab} />}
+      {tab !== 'home' && <Sidebar activeTab={tab} onTabChange={setTab} status={status} />}
       <div className="flex flex-col flex-1 overflow-hidden">
         <TopBar
           status={status}

src/App.tsx

@@ -11,19 +11,23 @@ interface Props {
   onBackgroundChange: (id: BackgroundId) => void
   hasWallpaper: boolean
   onWallpaperChange: (dataUrl: string | null) => void
+  open: boolean
+  onOpenChange: (open: boolean) => void
 }
 
 export default function BackgroundPicker({
   background,
   onBackgroundChange,
   hasWallpaper,
   onWallpaperChange,
+  open,
+  onOpenChange,
 }: Props) {
-  const [open, setOpen] = useState(false)
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
   const fileRef = useRef<HTMLInputElement>(null)
+  const setOpen = onOpenChange
 
   useEffect(() => {
     if (!open) return
@@ -52,7 +56,7 @@ export default function BackgroundPicker({
     <div ref={rootRef} className="relative z-50" onPointerDown={event => event.stopPropagation()}>
       <button
         type="button"
-        onClick={() => setOpen(value => !value)}
+        onClick={() => setOpen(!open)}
         className="grid h-8 w-8 place-items-center rounded-lg text-white/55 transition hover:bg-white/[.08] hover:text-accent"
         title="Background"
         aria-label="Change background"

src/components/BackgroundPicker.tsx

@@ -1,6 +1,21 @@
 import { useTranslation } from 'react-i18next'
-import { Boxes, ChevronDown, Gauge, Home, Languages, Mouse, SlidersHorizontal, Wand2, Zap } from 'lucide-react'
+import {
+  Battery,
+  BatteryFull,
+  BatteryLow,
+  BatteryMedium,
+  Boxes,
+  ChevronDown,
+  Gauge,
+  Home,
+  Languages,
+  Mouse,
+  SlidersHorizontal,
+  Wand2,
+  Zap,
+} from 'lucide-react'
 import mouseImage from '../assets/fly-pro-top.png'
+import { StatusInfo } from '../lib/ipc'
 
 type Tab = 'home' | 'dpi' | 'performance' | 'buttons' | 'advanced' | 'other' | 'lightning'
 
@@ -9,6 +24,14 @@ export type { Tab }
 interface Props {
   activeTab: Tab
   onTabChange: (tab: Tab) => void
+  status: StatusInfo
+}
+
+function batteryVisual(percent: number) {
+  if (percent >= 80) return { Icon: BatteryFull, color: 'text-emerald-300' }
+  if (percent >= 45) return { Icon: BatteryMedium, color: 'text-emerald-300' }
+  if (percent >= 20) return { Icon: BatteryLow, color: 'text-amber-300' }
+  return { Icon: Battery, color: 'text-red-300' }
 }
 
 const navItems: { id: Tab; labelKey: string; icon: typeof Mouse }[] = [
@@ -32,8 +55,10 @@ const languageOptions = [
   { code: 'zh', label: '中文（简体）' },
 ]
 
-export default function Sidebar({ activeTab, onTabChange }: Props) {
+export default function Sidebar({ activeTab, onTabChange, status }: Props) {
   const { i18n, t } = useTranslation()
+  const battery = batteryVisual(status.battery_percent)
+  const BatteryIcon = battery.Icon
   const activeLanguage = i18n.resolvedLanguage ?? i18n.language
   const baseLanguage = activeLanguage.split('-')[0]
   const selectedLanguage = languageOptions.some(option => option.code === activeLanguage)
@@ -51,6 +76,15 @@ export default function Sidebar({ activeTab, onTabChange }: Props) {
               <div className="flex items-center gap-2">
                 <img src={mouseImage} alt="" className="h-8 w-8 object-contain opacity-80" draggable={false} />
                 <p className="text-base font-semibold">IPI STAY FLY</p>
+                {status.connected && (
+                  <span
+                    className="flex items-center gap-1 rounded-full border border-white/10 bg-white/[.06] px-1.5 py-0.5 text-xs font-semibold text-white/80"
+                    title={`${t('topbar.battery', 'Battery')}: ${status.battery_percent}%`}
+                  >
+                    <BatteryIcon size={14} className={battery.color} />
+                    {status.battery_percent}%
+                  </span>
+                )}
               </div>
               <Home size={14} className="text-white/40" />
             </div>