From fa89bd904f70e35856eb8c5a62b43039f0def189 Mon Sep 17 00:00:00 2001
From: Fritz Heiden <fritz.heiden@mailbox.org>
Date: Mon, 7 Apr 2025 15:44:41 +0200
Subject: [PATCH] start implementation

---
 www/src/components/list-manager.jsx    | 11 +++++++++++
 www/src/modals/create-remote-modal.jsx | 10 ++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 www/src/components/list-manager.jsx

diff --git a/www/src/components/list-manager.jsx b/www/src/components/list-manager.jsx
new file mode 100644
index 0000000..d4fa12f
--- /dev/null
+++ b/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;
diff --git a/www/src/modals/create-remote-modal.jsx b/www/src/modals/create-remote-modal.jsx
index 351ef9a..8f2b061 100644
--- a/www/src/modals/create-remote-modal.jsx
+++ b/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