start implementation

www/src/components/list-manager.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from "solid-js";
+
+function ListManager(props) {
+  props = mergeProps(
+    { items: [], availableItems: [], itemToString: () => "" },
+    props
+  );
+  return <></>;
+}
+
+export default ListManager;

www/src/modals/create-remote-modal.jsx

@@ -1,9 +1,10 @@
-import { createMemo, createSignal } from "solid-js";
+import { createMemo, createResource, createSignal } from "solid-js";
 import ValidatedTextInput from "../components/validated-text-input.jsx";
 import RemotesService from "../services/remotes-service.js";
 import EventEmitter from "../tools/event-emitter.js";
 import ModalHandler from "./modal-handler.js";
 import Modal from "./modal.jsx";
+import ListManager from "../components/list-manager.jsx";
 
 const eventEmitter = new EventEmitter();
 const REMOTE_CREATED_EVENT = "success";
@@ -12,6 +13,7 @@ const MIN_TITLE_LENGTH = 3;
 function CreateRemoteModal(props) {
   const [title, setTitle] = createSignal("");
   const [commands, setCommands] = createSignal([]);
+  const [availableCommands] = createResource(RemotesService.getCommands);
   const [error, setError] = createSignal("");
 
   const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH);
@@ -67,7 +69,11 @@ function CreateRemoteModal(props) {
           />
         </div>
       </div>
-      
+      <ListManager
+        items={commands()}
+        availableItems={availableCommands()}
+        itemToString={(command) => command.getName()}
+      />
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
           Cancel