Redesign layout of UI

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: CI
+
+on:
+    push:
+    pull_request:
+    workflow_dispatch:
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                version: 9.13.2
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                node-version: 20
+                cache: 'pnpm'
+
+            - name: Install modules
+              run: pnpm i
+            - name: Build app
+              run: npm run build
+
+    types:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                version: 9.13.2
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                node-version: 20
+                cache: 'pnpm'
+            - name: Install modules
+              run: pnpm i
+            - name: Check Types
+              run: npm run check-types

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+midi_files

package.json

@@ -4,24 +4,27 @@
   "main": "index.js",
   "scripts": {
     "dev": "sb dev src/index.tsx",
-    "build": "sb build src/index.tsx"
+    "build": "sb build src/index.tsx",
+    "check-types": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@jamtools/core": "0.15.0-rc20",
-    "@springboardjs/data-storage": "0.15.0-rc20",
-    "@springboardjs/platforms-browser": "0.15.0-rc20",
-    "@springboardjs/platforms-node": "0.15.0-rc20",
+    "@jamtools/core": "0.0.1-dev-midipoller-4",
+    "@springboardjs/data-storage": "0.0.1-dev-midipoller-4",
+    "@springboardjs/platforms-browser": "0.0.1-dev-midipoller-4",
+    "@springboardjs/platforms-node": "0.0.1-dev-midipoller-4",
     "hono": "4.7.6",
+    "mic": "^2.1.2",
     "react": "^19.1.0",
-    "springboard": "0.15.0-rc20",
-    "springboard-cli": "0.15.0-rc20",
-    "springboard-server": "0.15.0-rc20"
+    "springboard": "0.0.1-dev-midipoller-4",
+    "springboard-cli": "0.0.1-dev-midipoller-4",
+    "springboard-server": "0.0.1-dev-midipoller-4"
   },
   "devDependencies": {
+    "@types/node": "^24.0.14",
     "@types/react": "^19.1.2"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@julusian/midi'
+  - better-sqlite3
+  - esbuild
+packages:
+  - .

src/components/ConfigModal.tsx

@@ -0,0 +1,120 @@
+import React, { useRef, useEffect } from 'react';
+import { RecordingConfig } from '../services/recorder';
+
+type ConfigModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    recordingConfig: RecordingConfig;
+    draftInactivityTimeLimit: number;
+    onDraftInactivityTimeLimitChange: (newLimit: number) => void;
+    submitInactivityTimeLimitChange: () => void;
+    draftUploaderUrl: string;
+    onDraftUploaderUrlChange: (newUrl: string) => void;
+    submitUploaderUrlChange: () => void;
+};
+
+export function asModal<P extends { isOpen: boolean; onClose: () => void }>(
+    Component: React.ComponentType<P>
+) {
+    return (props: P) => {
+        const dialogRef = useRef<HTMLDialogElement>(null);
+
+        useEffect(() => {
+            const dialog = dialogRef.current;
+            if (!dialog) return;
+
+            if (props.isOpen) {
+                dialog.showModal();
+            } else {
+                dialog.close();
+            }
+        }, [props.isOpen]);
+
+        const handleClose = () => {
+            props.onClose();
+        };
+
+        return (
+            <dialog ref={dialogRef} onClose={handleClose}>
+                <Component {...props} />
+            </dialog>
+        );
+    };
+}
+
+function ConfigModalBase({
+    onClose,
+    recordingConfig,
+    draftInactivityTimeLimit,
+    onDraftInactivityTimeLimitChange,
+    submitInactivityTimeLimitChange,
+    draftUploaderUrl,
+    onDraftUploaderUrlChange,
+    submitUploaderUrlChange
+}: ConfigModalProps) {
+    return (
+        <div>
+            <div className="modal-header">
+                <h2 className="modal-title">⚙️ Recording Settings</h2>
+            </div>
+            <div className="modal-body">
+                <div className="form-group">
+                    <label className="form-label" htmlFor="inactivity-limit">
+                        Inactivity Time Limit (seconds)
+                    </label>
+                    <input
+                        id="inactivity-limit"
+                        type='number'
+                        className='form-input'
+                        value={draftInactivityTimeLimit}
+                        onChange={(e) => onDraftInactivityTimeLimitChange(parseInt(e.target.value))}
+                        min={1}
+                        max={300}
+                    />
+                    <p className="text-muted" style={{fontSize: '0.875rem', marginTop: '0.5rem'}}>
+                        Recording will automatically stop after this many seconds of inactivity
+                    </p>
+                </div>
+
+                <div className="form-group">
+                    <label className="form-label" htmlFor="uploader-url">
+                        Uploader URL
+                    </label>
+                    <input
+                        id="uploader-url"
+                        type='text'
+                        className='form-input'
+                        value={draftUploaderUrl}
+                        onChange={(e) => onDraftUploaderUrlChange(e.target.value)}
+                        placeholder="https://example.com/upload"
+                    />
+                    <p className="text-muted" style={{fontSize: '0.875rem', marginTop: '0.5rem'}}>
+                        URL endpoint for uploading recorded files (leave empty to disable uploads)
+                    </p>
+                </div>
+            </div>
+            <div className="modal-footer">
+                <button
+                    type='button'
+                    className='btn-secondary'
+                    onClick={onClose}
+                >
+                    Cancel
+                </button>
+                <button
+                    type='button'
+                    className='btn-primary'
+                    onClick={() => {
+                        submitInactivityTimeLimitChange();
+                        submitUploaderUrlChange();
+                        onClose();
+                    }}
+                >
+                    Save Changes
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export const ConfigModal = asModal(ConfigModalBase);

src/components/MidiDevices.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@jamtools/core/modules/io/io_module';
+import {useModule} from '../hooks/use_module';
+
+export const MidiDevices: React.FC = () => {
+    const ioModule = useModule('io');
+    const midiDevices = ioModule.midiDeviceState.useState().midiInputDevices;
+
+    return (
+        <div className="card midi-devices-card">
+            <div className="card-header">
+                <h2 className="card-title">🎹 MIDI Input Devices</h2>
+            </div>
+            {midiDevices && midiDevices.length > 0 ? (
+                <ul className="device-list">
+                    {midiDevices.map((device, index) => (
+                        <li key={index} className="device-item fade-in">
+                            <span className="device-icon">🎹</span>
+                            <span className="device-name">{device}</span>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <div className="empty-state">
+                    <div className="empty-state-icon">🎹</div>
+                    <p className="text-muted mb-0">No MIDI input devices connected</p>
+                    <p className="text-muted">Connect a MIDI device to start recording</p>
+                </div>
+            )}
+        </div>
+    );
+};

src/hooks/use_module.ts

@@ -0,0 +1,7 @@
+import {useSpringboardEngine} from 'springboard/engine/engine';
+import {AllModules} from 'springboard/module_registry/module_registry';
+
+export const useModule = <ModuleId extends keyof AllModules>(moduleId: ModuleId): AllModules[ModuleId] => {
+    const engine = useSpringboardEngine();
+    return engine.moduleRegistry.getModule(moduleId);
+};