feat: Tons of layout fixes, device selection.

* Tweaks to full app layout.
* Add device selection to connect modal.

Author: petejohanson

src/App.css

@@ -1,42 +1,12 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  margin: 0 0;
+  width: 100%;
+  height: 100vh;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+.zmk-app {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto 1fr;
+  height: 100%;
 }

src/App.tsx

@@ -1,14 +1,70 @@
 import './App.css'
-import RpcTest from './RpcTest';
+import { AppHeader } from './AppHeader';
+
+import { create_rpc_connection, RpcConnection } from "ts-zmk-rpc-core";
+import { ConnectionContext } from './rpc/ConnectionContext';
+import React, { useState } from 'react';
+import { ConnectModal, TransportFactory } from './ConnectModal';
+
+import type { RpcTransport } from "ts-zmk-rpc-core/transport/index";
+import { connect as gatt_connect } from "ts-zmk-rpc-core/transport/gatt";
+import { connect as serial_connect } from "ts-zmk-rpc-core/transport/serial";
+import { connect as tauri_ble_connect, list_devices as ble_list_devices } from './tauri/ble';
+import { connect as tauri_serial_connect, list_devices as serial_list_devices } from './tauri/serial';
+import Keyboard from './keyboard/Keyboard';
+
+declare global {
+  interface Window { __TAURI_INTERNALS__?: object; }
+}
+
+const TRANSPORTS: TransportFactory[] = [
+  navigator.bluetooth && { label: "BLE", connect: gatt_connect },
+  navigator.serial && { label: "Serial", connect: serial_connect },
+  ... window.__TAURI_INTERNALS__ ? [{ label: "BLE", pick_and_connect: {connect: tauri_ble_connect, list: ble_list_devices } }] : [],
+  ... window.__TAURI_INTERNALS__ ? [{ label: "Serial", pick_and_connect: { connect: tauri_serial_connect, list: serial_list_devices }}] : [],
+].filter((t) => t !== undefined);
+
+async function listen_for_notifications(notification_stream: ReadableStream<Notification>): Promise<void> {
+  let reader = notification_stream.getReader();
+  do {
+    try {
+      let { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      // TODO: Do something with the notifications 
+      console.log("Notification", value);
+    } catch (e) {
+      reader.releaseLock();
+      throw e;
+    }
+  } while (true)
+
+  reader.releaseLock();
+}
+
+async function connect(transport: RpcTransport, setConn: React.Dispatch<RpcConnection | null>) {
+  let rpc_conn = await create_rpc_connection(transport);
+
+  listen_for_notifications(rpc_conn.notification_readable).then(() => {
+    setConn(null);
+  });
+
+  setConn(rpc_conn);
+}
 
 function App() {
+  const [conn, setConn] = useState<RpcConnection | null>(null);
+
   return (
-    <>
-      <h1>ZMK Studio Proof Of Concept</h1>
-      <div className="card">
-	<RpcTest />
+    <ConnectionContext.Provider value={conn}>
+      <ConnectModal open={!conn} transports={TRANSPORTS} onTransportCreated={(t) => connect(t, setConn)} />
+      <div className='zmk-app'>
+        <AppHeader connectedDeviceLabel={conn?.label} />
+        <Keyboard />
       </div>
-    </>
+    </ConnectionContext.Provider>
   )
 }
 

src/AppHeader.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { AppHeader } from './AppHeader';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Application/AppHeader',
+  component: AppHeader,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {  },
+} satisfies Meta<typeof AppHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  args: {
+  },
+};

src/AppHeader.tsx

@@ -0,0 +1,15 @@
+import './app-header.css';
+
+export interface AppHeaderProps {
+    connectedDeviceLabel?: string;
+}
+
+export const AppHeader = ({connectedDeviceLabel}: AppHeaderProps) => {
+    return (
+        <header className="zmk-app-header">
+            <p className='zmk-app-header__product-label'>ZMK Studio</p>
+            <p className='zmk-app-header__connected-device'>{connectedDeviceLabel}</p>
+            <div><p>Controls</p></div>
+        </header>
+    );
+}

src/ConnectModal.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import type { RpcTransport } from "ts-zmk-rpc-core/transport/index";
+import type { AvailableDevice } from './tauri/index';
+
+export type TransportFactory = { label: string, connect?: () => Promise<RpcTransport>, pick_and_connect?: { list: () => Promise<Array<AvailableDevice>>, connect: (dev: AvailableDevice) => Promise<RpcTransport> }};
+
+export interface ConnectModalProps {
+    open?: boolean;
+    transports: TransportFactory[];
+    onTransportCreated: (t: RpcTransport) => void;
+}
+
+async function transportClicked(t: RpcTransport, setAvailableDevices: React.Dispatch<AvailableDevice[] | null>, onTransportCreated: (t: RpcTransport) => void) {
+    if (t.pick_and_connect) {
+        setAvailableDevices(await t.pick_and_connect.list());
+    } else {
+        onTransportCreated(await t.connect());
+    }
+}
+
+export const ConnectModal = ({ open, transports, onTransportCreated }: ConnectModalProps) => {
+    const dialog = useRef<HTMLDialogElement | null>(null);
+    const [availableDevices, setAvailableDevices] = useState<AvailableDevice[] | null>(null);
+    const [selectedTransport, setSelectedTransport] = useState<RpcTransport | null>(null);
+
+    useEffect(() => {
+        if (!selectedTransport) {
+            setAvailableDevices(null);
+            return;
+        }
+
+        let ignore = false;
+
+        if (selectedTransport.connect) {
+            async function connectTransport() {
+                const transport = await selectedTransport.connect();
+    
+                if (!ignore) {
+                    onTransportCreated(transport);
+                    setSelectedTransport(null);
+                }
+            }
+    
+            connectTransport();
+        } else {
+            async function loadAvailableDevices() {
+                const devices = await selectedTransport.pick_and_connect.list();
+    
+                if (!ignore) {
+                    setAvailableDevices(devices);
+                }
+            }
+    
+            loadAvailableDevices();
+        }
+
+
+        return () => { ignore = true };
+    }, [selectedTransport]);
+
+    let connections = transports.map((t) => <button key={t.label} onClick={async () => setSelectedTransport(t)}>{t.label}</button>);
+
+    useEffect(() => {
+        if (dialog.current) {
+            if (open) {
+                if (!dialog.current.open) {
+                    dialog.current.showModal();
+                }
+            } else {
+                dialog.current.close();
+            }
+        }
+    }, [open]);
+
+    return (
+        <dialog ref={dialog}>
+            <h1>Welcome to ZMK Studio</h1>
+            <p>Select a connection type:</p>
+            <ul>{connections}</ul>
+            {selectedTransport && availableDevices && (<ul>{availableDevices.map((d) => <li key={d.id} onClick={async () => {onTransportCreated(await selectedTransport.pick_and_connect.connect(d)); setSelectedTransport(null);}}>{d.label}</li>)}</ul>)}
+        </dialog>
+    );
+}

src/RpcTest.tsx

@@ -0,0 +1,20 @@
+
+.zmk-app-header {
+    /* position: fixed; */
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0 1em 0 1em;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    column-gap: 1em;
+    align-content: space-between;
+    justify-content: center; 
+
+    border-bottom: 1px solid light-dark(black, white);
+}
+
+.zmk-app-header__connected-device {
+    text-align: center;
+}

src/app-header.css

@@ -24,8 +24,8 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
+  /* display: flex; */
+  /* place-items: center; */
   min-width: 320px;
   min-height: 100vh;
 }