feat: Add unlock/lock handling.

Author: petejohanson

src/App.tsx

@@ -1,6 +1,7 @@
 import { AppHeader } from "./AppHeader";
 
 import {
+  call_rpc,
   create_rpc_connection,
   RpcConnection,
 } from "@zmkfirmware/zmk-studio-ts-client";
@@ -22,7 +23,10 @@ import {
 } from "./tauri/serial";
 import Keyboard from "./keyboard/Keyboard";
 import { UndoRedoContext, useUndoRedo } from "./undoRedo";
-import { usePub } from "./usePubSub";
+import { usePub, useSub } from "./usePubSub";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+import { LockStateContext } from "./rpc/LockStateContext";
+import { UnlockModal } from "./UnlockModal";
 
 declare global {
   interface Window {
@@ -125,43 +129,70 @@ function App() {
   const [conn, setConn] = useState<RpcConnection | null>(null);
   const [doIt, undo, redo, canUndo, canRedo, reset] = useUndoRedo();
 
+  const [lockState, setLockState] = useState<LockState>(
+    LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
+  );
+
+  useSub("rpc_notification.core.lockStateChanged", (ls) => {
+    setLockState(ls);
+  });
+
   useEffect(() => {
     if (!conn) {
       reset();
+      setLockState(LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED);
+    }
+
+    async function updateLockState() {
+      if (!conn) {
+        return;
+      }
+
+      let locked_resp = await call_rpc(conn, { core: { getLockState: true } });
+
+      setLockState(
+        locked_resp.core?.getLockState ||
+          LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
+      );
     }
-  }, [conn]);
+
+    updateLockState();
+  }, [conn, setLockState]);
 
   return (
     <ConnectionContext.Provider value={conn}>
-      <UndoRedoContext.Provider value={doIt}>
-        <ConnectModal
-          open={!conn}
-          transports={TRANSPORTS}
-          onTransportCreated={(t) => connect(t, setConn)}
-        />
-        <div className="bg-bg-base text-text-base h-full grid grid-cols-[auto] grid-rows-[auto_1fr]">
-          <AppHeader connectedDeviceLabel={conn?.label} />
-          <Keyboard />
-          <button
-            type="button"
-            className="disabled:text-gray-500"
-            id="undo"
-            disabled={!canUndo}
-            onClick={() => undo()}
-          >
-            Undo
-          </button>
-          <button
-            type="button"
-            className="disabled:text-gray-500"
-            id="redo"
-            disabled={!canRedo}
-            onClick={() => redo()}
-          >
-            Redo
-          </button>
-        </div>
-      </UndoRedoContext.Provider>
+      <LockStateContext.Provider value={lockState}>
+        <UndoRedoContext.Provider value={doIt}>
+          <UnlockModal />
+          <ConnectModal
+            open={!conn}
+            transports={TRANSPORTS}
+            onTransportCreated={(t) => connect(t, setConn)}
+          />
+          <div className="bg-bg-base text-text-base h-full grid grid-cols-[auto] grid-rows-[auto_1fr]">
+            <AppHeader connectedDeviceLabel={conn?.label} />
+            <Keyboard />
+            <button
+              type="button"
+              className="disabled:text-gray-500"
+              id="undo"
+              disabled={!canUndo}
+              onClick={() => undo()}
+            >
+              Undo
+            </button>
+            <button
+              type="button"
+              className="disabled:text-gray-500"
+              id="redo"
+              disabled={!canRedo}
+              onClick={() => redo()}
+            >
+              Redo
+            </button>
+          </div>
+        </UndoRedoContext.Provider>
+      </LockStateContext.Provider>
     </ConnectionContext.Provider>
   );
 }

src/UnlockModal.tsx

@@ -0,0 +1,50 @@
+import { useContext, useEffect, useRef } from "react";
+
+import type { RpcTransport } from "@zmkfirmware/zmk-studio-ts-client/transport/index";
+import type { AvailableDevice } from "./tauri/index";
+import { LockStateContext } from "./rpc/LockStateContext";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+import { ConnectionContext } from "./rpc/ConnectionContext";
+
+export type TransportFactory = {
+  label: string;
+  connect?: () => Promise<RpcTransport>;
+  pick_and_connect?: {
+    list: () => Promise<Array<AvailableDevice>>;
+    connect: (dev: AvailableDevice) => Promise<RpcTransport>;
+  };
+};
+
+export interface UnlockModalProps {}
+
+export const UnlockModal = ({}: UnlockModalProps) => {
+  const dialog = useRef<HTMLDialogElement | null>(null);
+
+  let conn = useContext(ConnectionContext);
+  let lockState = useContext(LockStateContext);
+
+  useEffect(() => {
+    let open =
+      !!conn && lockState != LockState.ZMK_STUDIO_CORE_LOCK_STATE_UNLOCKED;
+
+    if (dialog.current) {
+      if (open) {
+        if (!dialog.current.open) {
+          dialog.current.showModal();
+        }
+      } else {
+        dialog.current.close();
+      }
+    }
+  }, [lockState, conn]);
+
+  return (
+    <dialog ref={dialog} className="p-5 rounded-lg border-text-base border">
+      <h1 className="text-xl">Unlock To Continue</h1>
+      <p>
+        For security reasons, your keyboard requires unlocking before using ZMK
+        Studio.
+      </p>
+    </dialog>
+  );
+};

src/keyboard/Keyboard.tsx

@@ -24,16 +24,22 @@ import { ConnectionContext } from "../rpc/ConnectionContext";
 import { UndoRedoContext } from "../undoRedo";
 import { BehaviorBindingPicker } from "../behaviors/BehaviorBindingPicker";
 import { produce } from "immer";
+import { LockStateContext } from "../rpc/LockStateContext";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
 
 function useBehaviors(): BehaviorMap {
   let connection = useContext(ConnectionContext);
+  let lockState = useContext(LockStateContext);
 
   const [behaviors, setBehaviors] = useState<BehaviorMap>({});
 
   useEffect(() => {
-    if (!connection) {
+    if (
+      !connection ||
+      lockState != LockState.ZMK_STUDIO_CORE_LOCK_STATE_UNLOCKED
+    ) {
       setBehaviors({});
       return;
     }
@@ -83,7 +89,7 @@ function useBehaviors(): BehaviorMap {
     return () => {
       ignore = true;
     };
-  }, [connection]);
+  }, [connection, lockState]);
 
   return behaviors;
 }
@@ -95,6 +101,7 @@ function useLayouts(): [
   React.Dispatch<SetStateAction<number>>
 ] {
   let connection = useContext(ConnectionContext);
+  let lockState = useContext(LockStateContext);
 
   const [layouts, setLayouts] = useState<PhysicalLayout[] | undefined>(
     undefined
@@ -103,7 +110,10 @@ function useLayouts(): [
     useState<number>(0);
 
   useEffect(() => {
-    if (!connection) {
+    if (
+      !connection ||
+      lockState != LockState.ZMK_STUDIO_CORE_LOCK_STATE_UNLOCKED
+    ) {
       setLayouts(undefined);
       return;
     }
@@ -133,7 +143,7 @@ function useLayouts(): [
     return () => {
       ignore = true;
     };
-  }, [connection]);
+  }, [connection, lockState]);
 
   return [
     layouts,
@@ -152,7 +162,8 @@ export default function Keyboard() {
   ] = useLayouts();
   const [keymap, setKeymap] = useConnectedDeviceData<Keymap>(
     { keymap: { getKeymap: true } },
-    (keymap) => keymap?.keymap?.getKeymap
+    (keymap) => keymap?.keymap?.getKeymap,
+    true
   );
   const [selectedLayerIndex, setSelectedLayerIndex] = useState<number>(0);
   const [selectedKeyPosition, setSelectedKeyPosition] = useState<

src/rpc/LockStateContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+
+export const LockStateContext = createContext<LockState>(
+  LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
+);

src/rpc/useConnectedDeviceData.ts

@@ -6,40 +6,53 @@ import {
   Request,
   RequestResponse,
 } from "@zmkfirmware/zmk-studio-ts-client";
+import { LockStateContext } from "./LockStateContext";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
 
 export function useConnectedDeviceData<T>(
   req: Omit<Request, "requestId">,
-  response_mapper: (resp: RequestResponse) => T | undefined
+  response_mapper: (resp: RequestResponse) => T | undefined,
+  requireUnlock?: boolean
 ): [T | undefined, React.Dispatch<SetStateAction<T | undefined>>] {
   let connection = useContext(ConnectionContext);
+  let lockState = useContext(LockStateContext);
   let [data, setData] = useState<T | undefined>(undefined);
 
-  useEffect(() => {
-    if (!connection) {
-      setData(undefined);
-      return;
-    }
-
-    async function startRequest() {
-      setData(undefined);
-      if (!connection) {
+  useEffect(
+    () => {
+      if (
+        !connection ||
+        (requireUnlock &&
+          lockState != LockState.ZMK_STUDIO_CORE_LOCK_STATE_UNLOCKED)
+      ) {
+        setData(undefined);
         return;
       }
 
-      let response = response_mapper(await call_rpc(connection, req));
+      async function startRequest() {
+        setData(undefined);
+        if (!connection) {
+          return;
+        }
 
-      if (!ignore) {
-        setData(response);
-      }
-    }
+        let response = response_mapper(await call_rpc(connection, req));
 
-    let ignore = false;
-    startRequest();
+        if (!ignore) {
+          setData(response);
+        }
+      }
 
-    return () => {
-      ignore = true;
-    };
-  }, [connection]);
+      let ignore = false;
+      startRequest();
+
+      return () => {
+        ignore = true;
+      };
+    },
+    requireUnlock
+      ? [connection, requireUnlock, lockState]
+      : [connection, requireUnlock]
+  );
 
   return [data, setData];
 }