add ui keyboard macros settings and macro bar

ui/src/components/MacroBar.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { LuCommand } from "react-icons/lu";
+
+import { Button } from "@components/Button";
+import Container from "@components/Container";
+import { useMacrosStore } from "@/hooks/stores";
+import useKeyboard from "@/hooks/useKeyboard";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+
+export default function MacroBar() {
+  const { macros, initialized, loadMacros, setSendFn } = useMacrosStore();
+  const { executeMacro } = useKeyboard();
+  const [send] = useJsonRpc();
+
+  // Set up sendFn and initialize macros if needed
+  useEffect(() => {
+    setSendFn(send);
+    
+    if (!initialized) {
+      loadMacros();
+    }
+  }, [initialized, loadMacros, setSendFn, send]);
+
+  if (macros.length === 0) {
+    return null;
+  }
+
+  return (
+    <Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
+      <div className="flex items-center gap-x-2 py-1.5">
+        <LuCommand className="h-4 w-4 text-slate-500 mr-1" />
+        <div className="flex flex-wrap gap-2">
+          {macros.map(macro => (
+            <Button
+              key={macro.id}
+              aria-label={macro.description || macro.name}
+              size="XS"
+              theme="light"
+              text={macro.name}
+              onClick={() => executeMacro(macro.steps)}
+            />
+          ))}
+        </div>
+      </div>
+    </Container>
+  );
+} 

ui/src/components/WebRTCVideo.tsx

@@ -13,6 +13,7 @@ import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cx } from "@/cva.config";
 import VirtualKeyboard from "@components/VirtualKeyboard";
 import Actionbar from "@components/ActionBar";
+import MacroBar from "@/components/MacroBar";
 import InfoBar from "@components/InfoBar";
 import useKeyboard from "@/hooks/useKeyboard";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
@@ -526,7 +527,7 @@ export default function WebRTCVideo() {
 
   return (
     <div className="grid h-full w-full grid-rows-layout">
-      <div className="min-h-[39.5px]">
+      <div className="min-h-[39.5px] flex flex-col">
         <fieldset disabled={peerConnectionState !== "connected"}>
           <Actionbar
             requestFullscreen={async () =>
@@ -535,6 +536,7 @@ export default function WebRTCVideo() {
               })
             }
           />
+          <MacroBar />
         </fieldset>
       </div>
 

ui/src/hooks/stores.ts

@@ -1,6 +1,18 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
+// Define the JsonRpc types for better type checking
+interface JsonRpcResponse {
+  jsonrpc: string;
+  result?: unknown;
+  error?: {
+    code: number;
+    message: string;
+    data?: unknown;
+  };
+  id: number | string | null;
+}
+
 // Utility function to append stats to a Map
 const appendStatToMap = <T extends { timestamp: number }>(
   stat: T,
@@ -649,3 +661,144 @@ export const useDeviceStore = create<DeviceState>(set => ({
   setAppVersion: version => set({ appVersion: version }),
   setSystemVersion: version => set({ systemVersion: version }),
 }));
+
+export interface KeySequenceStep {
+  keys: string[];
+  modifiers: string[];
+  delay: number;
+}
+
+export interface KeySequence {
+  id: string;
+  name: string;
+  description?: string;
+  steps: KeySequenceStep[];
+  sortOrder?: number;
+}
+
+export interface MacrosState {
+  macros: KeySequence[];
+  loading: boolean;
+  initialized: boolean;
+  loadMacros: () => Promise<void>;
+  saveMacros: (macros: KeySequence[]) => Promise<void>;
+  sendFn: ((method: string, params: unknown, callback?: ((resp: JsonRpcResponse) => void) | undefined) => void) | null;
+  setSendFn: (sendFn: ((method: string, params: unknown, callback?: ((resp: JsonRpcResponse) => void) | undefined) => void)) => void;
+}
+
+const MAX_STEPS_PER_MACRO = 10;
+const MAX_TOTAL_MACROS = 25;
+const MAX_KEYS_PER_STEP = 10;
+
+export const useMacrosStore = create<MacrosState>((set, get) => ({
+  macros: [],
+  loading: false,
+  initialized: false,
+  sendFn: null,
+
+  setSendFn: (sendFn) => {
+    set({ sendFn });
+  },
+
+  loadMacros: async () => {
+    if (get().initialized) return;
+
+    const { sendFn } = get();
+    if (!sendFn) {
+      console.warn("JSON-RPC send function not available.");
+      return;
+    }
+
+    set({ loading: true });
+
+    try {
+      await new Promise<void>((resolve, reject) => {
+        sendFn("getKeyboardMacros", {}, (response) => {
+          if (response.error) {
+            console.error("Error loading macros:", response.error);
+            reject(new Error(response.error.message));
+            return;
+          }
+
+          const macros = (response.result as KeySequence[]) || [];
+
+          const sortedMacros = [...macros].sort((a, b) => {
+            if (a.sortOrder !== undefined && b.sortOrder !== undefined) {
+              return a.sortOrder - b.sortOrder;
+            }
+            if (a.sortOrder !== undefined) return -1;
+            if (b.sortOrder !== undefined) return 1;
+            return 0;
+          });
+
+          set({
+            macros: sortedMacros,
+            initialized: true
+          });
+
+          resolve();
+        });
+      });
+    } catch (error) {
+      console.error("Failed to load macros:", error);
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  saveMacros: async (macros: KeySequence[]) => {
+    const { sendFn } = get();
+    if (!sendFn) {
+      console.warn("JSON-RPC send function not available.");
+      return;
+    }
+
+    if (macros.length > MAX_TOTAL_MACROS) {
+      console.error(`Cannot save: exceeded maximum of ${MAX_TOTAL_MACROS} macros`);
+      throw new Error(`Cannot save: exceeded maximum of ${MAX_TOTAL_MACROS} macros`);
+    }
+
+    for (const macro of macros) {
+      if (macro.steps.length > MAX_STEPS_PER_MACRO) {
+        console.error(`Cannot save: macro "${macro.name}" exceeds maximum of ${MAX_STEPS_PER_MACRO} steps`);
+        throw new Error(`Cannot save: macro "${macro.name}" exceeds maximum of ${MAX_STEPS_PER_MACRO} steps`);
+      }
+
+      for (let i = 0; i < macro.steps.length; i++) {
+        const step = macro.steps[i];
+        if (step.keys && step.keys.length > MAX_KEYS_PER_STEP) {
+          console.error(`Cannot save: macro "${macro.name}" step ${i+1} exceeds maximum of ${MAX_KEYS_PER_STEP} keys`);
+          throw new Error(`Cannot save: macro "${macro.name}" step ${i+1} exceeds maximum of ${MAX_KEYS_PER_STEP} keys`);
+        }
+      }
+    }
+
+    set({ loading: true });
+
+    try {
+      const macrosWithSortOrder = macros.map((macro, index) => ({
+        ...macro,
+        sortOrder: macro.sortOrder !== undefined ? macro.sortOrder : index
+      }));
+
+      set({ macros: macrosWithSortOrder });
+
+      await new Promise<void>((resolve, reject) => {
+        sendFn("setKeyboardMacros", { params: { macros: macrosWithSortOrder } }, (response) => {
+          if (response.error) {
+            console.error("Error saving macros:", response.error);
+            reject(new Error(response.error.message));
+            return;
+          }
+
+          resolve();
+        });
+      });
+    } catch (error) {
+      console.error("Failed to save macros:", error);
+      get().loadMacros();
+    } finally {
+      set({ loading: false });
+    }
+  }
+}));

ui/src/hooks/useKeyboard.ts

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 
 import { useHidStore, useRTCStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { keys, modifiers } from "@/keyboardMappings";
 
 export default function useKeyboard() {
   const [send] = useJsonRpc();
@@ -28,5 +29,28 @@ export default function useKeyboard() {
     sendKeyboardEvent([], []);
   }, [sendKeyboardEvent]);
 
-  return { sendKeyboardEvent, resetKeyboardState };
+  const executeMacro = async (steps: { keys: string[] | null; modifiers: string[] | null; delay: number }[]) => {
+    for (const [index, step] of steps.entries()) {
+      const keyValues = step.keys?.map(key => keys[key]).filter(Boolean) || [];
+      const modifierValues = step.modifiers?.map(mod => modifiers[mod]).filter(Boolean) || [];
+
+      // If the step has keys and/or modifiers, press them and hold for the delay
+      if (keyValues.length > 0 || modifierValues.length > 0) {
+        sendKeyboardEvent(keyValues, modifierValues);
+        await new Promise(resolve => setTimeout(resolve, step.delay || 50));
+
+        resetKeyboardState();
+      } else {
+        // This is a delay-only step, just wait for the delay amount
+        await new Promise(resolve => setTimeout(resolve, step.delay || 50));
+      }
+
+      // Add a small pause between steps if not the last step
+      if (index < steps.length - 1) {
+        await new Promise(resolve => setTimeout(resolve, 10));
+      }
+    }
+  };
+
+  return { sendKeyboardEvent, resetKeyboardState, executeMacro };
 }

ui/src/index.css

@@ -201,3 +201,132 @@ video::-webkit-media-controls {
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
+
+/* Macro Component Styles */
+@keyframes macroFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes macroScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.macro-animate-fadeIn { animation: macroFadeIn 0.2s ease-out; }
+.macro-animate-scaleIn { animation: macroScaleIn 0.2s ease-out; }
+
+/* Base Macro Element Styles */
+.macro-sortable, .macro-step, [data-macro-item] {
+  transition: box-shadow 0.15s ease-out, background-color 0.2s ease-out, transform 0.1s, border-color 0.2s;
+  position: relative;
+  touch-action: none;
+}
+
+.macro-sortable.dragging, .macro-step.dragging, [data-macro-item].dragging {
+  z-index: 10;
+  opacity: 0.8;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  @apply bg-blue-500/10;
+}
+
+.macro-sortable.drop-target, .macro-step.drop-target, [data-macro-item].drop-target {
+  @apply border-2 border-dashed border-blue-500 bg-blue-500/5;
+}
+
+.macro-sortable.ghost {
+  position: static;
+  opacity: 0.3;
+  pointer-events: none;
+  background-color: transparent;
+  border: 2px dashed rgb(148 163 184);
+  transform: none;
+}
+
+/* Drag Handle Styles */
+.drag-handle, .macro-sortable-handle {
+  cursor: grab;
+  touch-action: none;
+  @apply flex items-center p-1 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300;
+}
+
+.drag-handle:active, .macro-sortable-handle:active {
+  cursor: grabbing;
+}
+
+@media (hover: none) {
+  .macro-sortable, .macro-step, [data-macro-item] {
+    user-select: none;
+  }
+}
+
+/* Macro Form Elements */
+.macro-input {
+  @apply w-full rounded-md border border-slate-300 bg-white p-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white;
+}
+
+.macro-input-error {
+  @apply border-red-500 dark:border-red-500;
+}
+
+.macro-select, .macro-delay-select {
+  @apply w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-sm shadow-sm 
+         focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 
+         dark:border-slate-600 dark:bg-slate-800 dark:text-white;
+}
+
+/* Macro Card Elements */
+.macro-card, .macro-step-card {
+  @apply rounded-md border border-slate-300 bg-white p-4 shadow-sm 
+         dark:border-slate-600 dark:bg-slate-800
+         transition-colors duration-200;
+}
+
+.macro-step-card:hover {
+  @apply border-blue-300 dark:border-blue-700;
+}
+
+/* Badge & Step Number Styles */
+.macro-key-badge, .macro-step-number {
+  @apply inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200;
+}
+
+/* Section Styling Utilities */
+.macro-section {
+  @apply space-y-4 mt-2;
+}
+
+.macro-section-header {
+  @apply flex items-center justify-between;
+}
+
+.macro-section-title {
+  @apply text-sm font-medium text-slate-700 dark:text-slate-300;
+}
+
+.macro-section-subtitle {
+  @apply text-xs text-slate-500 dark:text-slate-400;
+}
+
+/* Error Styles */
+.macro-error {
+  @apply mb-4 rounded-md bg-red-50 p-3 dark:bg-red-900/30;
+}
+
+.macro-error-icon {
+  @apply h-5 w-5 text-red-400 dark:text-red-300;
+}
+
+.macro-error-text {
+  @apply text-sm font-medium text-red-800 dark:text-red-200;
+}
+
+/* Container Styles */
+.macro-modifiers-container {
+  @apply flex flex-wrap gap-2;
+}
+
+.macro-modifier-group {
+  @apply inline-flex flex-col rounded-md border border-slate-200 p-2 dark:border-slate-700;
+  min-width: fit-content;
+}

ui/src/main.tsx

@@ -40,6 +40,7 @@ import * as SettingsAccessIndexRoute from "./routes/devices.$id.settings.access.
 import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
 import SettingsVideoRoute from "./routes/devices.$id.settings.video";
 import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
+import SettingsMacrosRoute from "./routes/devices.$id.settings.macros";
 import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
 import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
 import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
@@ -175,6 +176,10 @@ if (isOnDevice) {
               path: "appearance",
               element: <SettingsAppearanceRoute />,
             },
+            {
+              path: "macros",
+              element: <SettingsMacrosRoute />,
+            },
           ],
         },
       ],
@@ -283,6 +288,10 @@ if (isOnDevice) {
                       path: "appearance",
                       element: <SettingsAppearanceRoute />,
                     },
+                    {
+                      path: "macros",
+                      element: <SettingsMacrosRoute />,
+                    },
                   ],
                 },
               ],

ui/src/routes/devices.$id.settings.tsx

@@ -8,6 +8,7 @@ import {
   LuWrench,
   LuArrowLeft,
   LuPalette,
+  LuCommand,
 } from "react-icons/lu";
 import React, { useEffect, useRef, useState } from "react";
 
@@ -195,6 +196,17 @@ export default function SettingsRoute() {
                     </div>
                   </NavLink>
                 </div>
+                <div className="shrink-0">
+                  <NavLink
+                    to="macros"
+                    className={({ isActive }) => (isActive ? "active" : "")}
+                  >
+                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                      <LuCommand className="h-4 w-4 shrink-0" />
+                      <h1>Keyboard Macros</h1>
+                    </div>
+                  </NavLink>
+                </div>
                 <div className="shrink-0">
                   <NavLink
                     to="advanced"