feat: Add disconnect and settings reset UI.

petejohanson · petejohanson · commit 18b3f22a0bc0 · 2024-08-26T18:41:20.000-06:00
* Use a drop down menu from the device name to access disconnect
  and settings reset actions.
* Add confirm dialog for destructive settings reset action.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@heroicons/react": "^2.1.4",
     "@tauri-apps/api": "^2.0.0-beta.16",
     "@tauri-apps/plugin-cli": "^2.0.0-beta.8",
-    "@zmkfirmware/zmk-studio-ts-client": "^0.0.14",
+    "@zmkfirmware/zmk-studio-ts-client": "^0.0.16",
     "emittery": "^1.0.3",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -4,7 +4,7 @@
 use futures::lock::Mutex;
 
 mod transport;
-use transport::commands::{transport_send_data, ActiveConnection};
+use transport::commands::{transport_close, transport_send_data, ActiveConnection};
 
 use transport::gatt::{gatt_connect, gatt_list_devices};
 use transport::serial::{serial_connect, serial_list_devices};
@@ -17,6 +17,7 @@ fn main() {
         })
         .invoke_handler(tauri::generate_handler![
             transport_send_data,
+            transport_close,
             gatt_list_devices,
             gatt_connect,
             serial_list_devices,
diff --git a/src-tauri/src/transport/commands.rs b/src-tauri/src/transport/commands.rs
@@ -38,3 +38,13 @@ pub async fn transport_send_data(
 
     Ok(())
 }
+
+#[command]
+pub async fn transport_close(
+    req: Request<'_>,
+    state: State<'_, ActiveConnection<'_>>,
+) -> Result<(), ()> {
+    *state.conn.lock().await = None;
+
+    Ok(())
+}
diff --git a/src-tauri/src/transport/gatt.rs b/src-tauri/src/transport/gatt.rs
@@ -58,7 +58,7 @@ pub async fn gatt_connect(
             });
 
             let ah2 = app_handle.clone();
-            tauri::async_runtime::spawn(async move {
+            let disconnect_handle = tauri::async_runtime::spawn(async move {
                 // Need to keep adapter from being dropped while active/connected
                 let a = adapter;
 
@@ -75,7 +75,7 @@ pub async fn gatt_connect(
                                 println!("ERROR RAISING! {:?}", e);
                             }
 
-                            notify_handle.abort();
+                            *state.conn.lock().await = None;
                         }
                     }
                 };
@@ -87,6 +87,9 @@ pub async fn gatt_connect(
                 while let Some(data) = recv.next().await {
                     c.write(&data).await.expect("Write uneventfully");
                 }
+
+                disconnect_handle.abort();
+                notify_handle.abort();
             });
 
             Ok(true)
diff --git a/src/App.tsx b/src/App.tsx
@@ -66,9 +66,15 @@ const TRANSPORTS: TransportFactory[] = [
 ].filter((t) => t !== undefined);
 
 async function listen_for_notifications(
-  notification_stream: ReadableStream<Notification>
+  notification_stream: ReadableStream<Notification>,
+  signal: AbortSignal
 ): Promise<void> {
   let reader = notification_stream.getReader();
+  const onAbort = () => {
+    reader.cancel();
+    reader.releaseLock();
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
   do {
     let pub = usePub();
 
@@ -104,20 +110,24 @@ async function listen_for_notifications(
 
       pub(topic, eventData);
     } catch (e) {
+      signal.removeEventListener("abort", onAbort);
       reader.releaseLock();
       throw e;
     }
   } while (true);
 
+  signal.removeEventListener("abort", onAbort);
   reader.releaseLock();
+  notification_stream.cancel();
 }
 
 async function connect(
   transport: RpcTransport,
   setConn: Dispatch<ConnectionState>,
-  setConnectedDeviceName: Dispatch<string | undefined>
+  setConnectedDeviceName: Dispatch<string | undefined>,
+  signal: AbortSignal
 ) {
-  let conn = await create_rpc_connection(transport);
+  let conn = await create_rpc_connection(transport, { signal });
 
   let details = await Promise.race([
     call_rpc(conn, { core: { getDeviceInfo: true } })
@@ -135,7 +145,7 @@ async function connect(
     return;
   }
 
-  listen_for_notifications(conn.notification_readable)
+  listen_for_notifications(conn.notification_readable, signal)
     .then(() => {
       setConnectedDeviceName(undefined);
       setConn({ conn: null });
@@ -157,6 +167,7 @@ function App() {
   const [doIt, undo, redo, canUndo, canRedo, reset] = useUndoRedo();
   const [showAbout, setShowAbout] = useState(false);
   const [showLicenseNotice, setShowLicenseNotice] = useState(false);
+  const [connectionAbort, setConnectionAbort] = useState(new AbortController());
 
   const [lockState, setLockState] = useState<LockState>(
     LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
@@ -225,6 +236,49 @@ function App() {
     doDiscard();
   }, [conn]);
 
+  const resetSettings = useCallback(() => {
+    async function doReset() {
+      if (!conn.conn) {
+        return;
+      }
+
+      let resp = await call_rpc(conn.conn, {
+        core: { resetSettings: true },
+      });
+      if (!resp.core?.resetSettings) {
+        console.error("Failed to settings reset", resp);
+      }
+
+      reset();
+      setConn({ conn: conn.conn });
+    }
+
+    doReset();
+  }, [conn]);
+
+  const disconnect = useCallback(() => {
+    async function doDisconnect() {
+      if (!conn.conn) {
+        return;
+      }
+
+      await conn.conn.request_writable.close();
+      connectionAbort.abort("User disconnected");
+      setConnectionAbort(new AbortController());
+    }
+
+    doDisconnect();
+  }, [conn]);
+
+  const onConnect = useCallback(
+    (t: RpcTransport) => {
+      const ac = new AbortController();
+      setConnectionAbort(ac);
+      connect(t, setConn, setConnectedDeviceName, ac.signal);
+    },
+    [setConn, setConnectedDeviceName, setConnectedDeviceName]
+  );
+
   return (
     <ConnectionContext.Provider value={conn}>
       <LockStateContext.Provider value={lockState}>
@@ -233,9 +287,7 @@ function App() {
           <ConnectModal
             open={!conn.conn}
             transports={TRANSPORTS}
-            onTransportCreated={(t) =>
-              connect(t, setConn, setConnectedDeviceName)
-            }
+            onTransportCreated={onConnect}
           />
           <AboutModal open={showAbout} onClose={() => setShowAbout(false)} />
           <LicenseNoticeModal
@@ -251,6 +303,8 @@ function App() {
               onRedo={redo}
               onSave={save}
               onDiscard={discard}
+              onDisconnect={disconnect}
+              onResetSettings={resetSettings}
             />
             <Keyboard />
             <AppFooter
diff --git a/src/AppHeader.tsx b/src/AppHeader.tsx
@@ -1,16 +1,30 @@
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+} from "react-aria-components";
 import { useConnectedDeviceData } from "./rpc/useConnectedDeviceData";
 import { useSub } from "./usePubSub";
 import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
 } from "@heroicons/react/24/solid";
+import { useContext, useEffect, useState } from "react";
+import { useModalRef } from "./misc/useModalRef";
+import { LockStateContext } from "./rpc/LockStateContext";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+import { ConnectionContext } from "./rpc/ConnectionContext";
 
 export interface AppHeaderProps {
   connectedDeviceLabel?: string;
   onSave?: () => void | Promise<void>;
   onDiscard?: () => void | Promise<void>;
   onUndo?: () => Promise<void>;
   onRedo?: () => Promise<void>;
+  onResetSettings?: () => void | Promise<void>;
+  onDisconnect?: () => void | Promise<void>;
   canUndo?: boolean;
   canRedo?: boolean;
 }
@@ -23,7 +37,25 @@ export const AppHeader = ({
   onUndo,
   onSave,
   onDiscard,
+  onDisconnect,
+  onResetSettings,
 }: AppHeaderProps) => {
+  const [showSettingsReset, setShowSettingsReset] = useState(false);
+
+  const lockState = useContext(LockStateContext);
+  const connectionState = useContext(ConnectionContext);
+
+  useEffect(() => {
+    if (
+      (!connectionState.conn ||
+        lockState != LockState.ZMK_STUDIO_CORE_LOCK_STATE_UNLOCKED) &&
+      showSettingsReset
+    ) {
+      setShowSettingsReset(false);
+    }
+  }, [lockState, showSettingsReset]);
+
+  const showSettingsRef = useModalRef(showSettingsReset);
   const [unsaved, setUnsaved] = useConnectedDeviceData<boolean>(
     { keymap: { checkUnsavedChanges: true } },
     (r) => r.keymap?.checkUnsavedChanges
@@ -36,7 +68,51 @@ export const AppHeader = ({
   return (
     <header className="top-0 left-0 right-0 grid grid-cols-[1fr_auto_1fr] items-center justify-between border-b border-text-base">
       <p className="px-3">ZMK Studio</p>
-      <p className="text-center">{connectedDeviceLabel}</p>
+      <dialog
+        ref={showSettingsRef}
+        className="p-5 rounded-lg border-text-base border max-w-[50vw]"
+      >
+        <h2 className="my-2 text-lg">Settings Reset</h2>
+        <div>
+          <p>
+            Settings reset will remove any customizations previously made in ZMK
+            Studio and restore the stock keymap
+          </p>
+          <p>Continue?</p>
+          <div className="flex justify-end my-2 gap-3">
+            <button onClick={() => setShowSettingsReset(false)}>Cancel</button>
+            <button
+              onClick={() => {
+                setShowSettingsReset(false);
+                onResetSettings?.();
+              }}
+            >
+              Reset Settings
+            </button>
+          </div>
+        </div>
+      </dialog>
+      <MenuTrigger>
+        <Button
+          className="text-center enabled:after:content-['⏷'] after:relative after:left-2 pr-3"
+          isDisabled={!connectedDeviceLabel}
+        >
+          {connectedDeviceLabel}
+        </Button>
+        <Popover>
+          <Menu className="border rounded bg-bg-base">
+            <MenuItem className="p-1" onAction={onDisconnect}>
+              Disconnect
+            </MenuItem>
+            <MenuItem
+              className="p-1"
+              onAction={() => setShowSettingsReset(true)}
+            >
+              Settings Reset
+            </MenuItem>
+          </Menu>
+        </Popover>
+      </MenuTrigger>
       <div className="flex justify-end">
         {onUndo && (
           <button
diff --git a/src/tauri/ble.ts b/src/tauri/ble.ts
@@ -13,6 +13,8 @@ export async function connect(dev: AvailableDevice): Promise<RpcTransport> {
     throw new Error("Failed to connect");
   }
 
+  let abortController = new AbortController();
+
   let writable = new WritableStream({
     async write(chunk, _controller) {
       await invoke("transport_send_data", new Uint8Array(chunk));
@@ -39,5 +41,16 @@ export async function connect(dev: AvailableDevice): Promise<RpcTransport> {
     }
   );
 
-  return { label: dev.label, readable, writable };
+  let signal = abortController.signal;
+
+  let abort_cb = async (_reason: any) => {
+    unlisten_data();
+    unlisten_disconnected();
+    await invoke("transport_close");
+    signal.removeEventListener("abort", abort_cb);
+  };
+
+  signal.addEventListener("abort", abort_cb);
+
+  return { label: dev.label, abortController, readable, writable };
 }
diff --git a/src/tauri/serial.ts b/src/tauri/serial.ts
@@ -13,6 +13,8 @@ export async function connect(dev: AvailableDevice): Promise<RpcTransport> {
     throw new Error("Failed to connect");
   }
 
+  let abortController = new AbortController();
+
   let writable = new WritableStream({
     async write(chunk, _controller) {
       await invoke("transport_send_data", new Uint8Array(chunk));
@@ -39,5 +41,16 @@ export async function connect(dev: AvailableDevice): Promise<RpcTransport> {
     }
   );
 
-  return { label: dev.label, readable, writable };
+  let signal = abortController.signal;
+
+  let abort_cb = async (_reason: any) => {
+    unlisten_data();
+    unlisten_disconnected();
+    await invoke("transport_close");
+    signal.removeEventListener("abort", abort_cb);
+  };
+
+  signal.addEventListener("abort", abort_cb);
+
+  return { label: dev.label, abortController, readable, writable };
 }

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ pub async fn gatt_connect(`
`58`	`58`	`});`
`59`	`59`
`60`	`60`	`let ah2 = app_handle.clone();`
`61`		`- tauri::async_runtime::spawn(async move {`
	`61`	`+ let disconnect_handle = tauri::async_runtime::spawn(async move {`
`62`	`62`	`// Need to keep adapter from being dropped while active/connected`
`63`	`63`	`let a = adapter;`
`64`	`64`
`@@ -75,7 +75,7 @@ pub async fn gatt_connect(`
`75`	`75`	`println!("ERROR RAISING! {:?}", e);`
`76`	`76`	`}`
`77`	`77`
`78`		`- notify_handle.abort();`
	`78`	`+ *state.conn.lock().await = None;`
`79`	`79`	`}`
`80`	`80`	`}`
`81`	`81`	`};`
`@@ -87,6 +87,9 @@ pub async fn gatt_connect(`
`87`	`87`	`while let Some(data) = recv.next().await {`
`88`	`88`	`c.write(&data).await.expect("Write uneventfully");`
`89`	`89`	`}`
	`90`	`+`
	`91`	`+ disconnect_handle.abort();`
	`92`	`+ notify_handle.abort();`
`90`	`93`	`});`
`91`	`94`
`92`	`95`	`Ok(true)`