From 89fe0f11ae39652d7571f3fe0dfe6e4019b3e8bb Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Fri, 8 Dec 2023 12:12:58 -0500
Subject: [PATCH] cleaning up

---
 website/src/repl/panel/AudioDeviceSelector.jsx | 15 +++++++++++----
 website/src/repl/panel/SelectInput.jsx         | 13 ++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/website/src/repl/panel/AudioDeviceSelector.jsx b/website/src/repl/panel/AudioDeviceSelector.jsx
index afdaff00..a90b3dcd 100644
--- a/website/src/repl/panel/AudioDeviceSelector.jsx
+++ b/website/src/repl/panel/AudioDeviceSelector.jsx
@@ -52,10 +52,17 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
     onChange(deviceName);
     deviceID && setAudioDevice(deviceID);
   };
-  const options = new Set();
-
+  const options = new Map();
   Array.from(devices.keys()).forEach((deviceName) => {
-    options.add({ id: deviceName, label: deviceName });
+    options.set(deviceName, deviceName);
   });
-  return <SelectInput options={options} onClick={onClick} value={audioDeviceName} onChange={onDeviceChange} />;
+  return (
+    <SelectInput
+      options={options}
+      onClick={onClick}
+      placeholder="select device"
+      value={audioDeviceName}
+      onChange={onDeviceChange}
+    />
+  );
 }
diff --git a/website/src/repl/panel/SelectInput.jsx b/website/src/repl/panel/SelectInput.jsx
index 53f958b8..6693d669 100644
--- a/website/src/repl/panel/SelectInput.jsx
+++ b/website/src/repl/panel/SelectInput.jsx
@@ -1,16 +1,19 @@
 import React from 'react';
-//      value: ID, options: Set<{id: ID, label: string}>, onChange: ID => null, onClick: event => void
-export function SelectInput({ value, options, onChange, onClick }) {
+//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, placeholder?: string
+export function SelectInput({ value, options, onChange, onClick, placeholder }) {
   return (
     <select
       onClick={onClick}
       className="p-2 bg-background rounded-md text-foreground"
-      value={value}
+      value={value ?? ''}
       onChange={(e) => onChange(e.target.value)}
     >
-      {Array.from(options).map(({ id, label }) => (
+      <option disabled value="">
+        {`-- ${placeholder ?? 'select an option'} --`}
+      </option>
+      {Array.from(options.keys()).map((id) => (
         <option key={id} className="bg-background" value={id}>
-          {label}
+          {options.get(id)}
         </option>
       ))}
     </select>