feat: add delete remotes

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

@@ -71,11 +71,11 @@ function CreateRemoteModal(props) {
           </div>
         </Show>
         <div class="mb-3 row">
-          <label for="new_remote_title" class="col-form-label col-sm-3">
+          <label for="new_remote_title" class="col-form-label col-sm-1">
             Title
           </label>
           <ValidatedTextInput
-            class="col-sm-9"
+            class="col-sm-11"
             id="new_remote_title"
             valid={isTitleValid()}
             value={title()}

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

@@ -0,0 +1,66 @@
+import { createSignal } from "solid-js";
+import Remote from "../data/remote.js";
+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";
+
+const [remote, setRemote] = createSignal(new Remote());
+const eventEmitter = new EventEmitter();
+const REMOTE_DELETED_EVENT = "success";
+
+function DeleteRemoteModal(props) {
+  const [error, setError] = createSignal("");
+
+  async function handleDeleteRemote() {
+    try {
+      await RemotesService.deleteRemote(remote().getId());
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+    DeleteRemoteModal.Handler.hide();
+    eventEmitter.dispatchEvent(REMOTE_DELETED_EVENT, remote);
+  }
+
+  return (
+    <Modal
+      ref={props.ref}
+      id="deleteRemoteModal"
+      modalTitle="Delete remote"
+      centered={true}
+    >
+      <div class="modal-body">
+        <Show when={error() !== ""}>
+          <div class="alert alert-danger" role="alert">
+            {error()}
+          </div>
+        </Show>
+        <div class="mb-3 row">
+          <span>
+            Do you really want to delete the remote {remote().getTitle()} ({remote().getId()})?
+          </span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleDeleteRemote}
+          class="btn btn-danger"
+        >
+          Delete
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+DeleteRemoteModal.Handler = new ModalHandler();
+DeleteRemoteModal.setRemote = setRemote;
+DeleteRemoteModal.onRemoteDeleted = (callback) =>
+  eventEmitter.on(REMOTE_DELETED_EVENT, callback);
+
+export default DeleteRemoteModal;

www/src/modals/modal-registry.jsx

@@ -9,6 +9,7 @@ import DeleteIntegrationModal from "./delete-integration-modal.jsx";
 import CreateCommandModal from "./create-command-modal.jsx";
 import DeleteCommandModal from "./delete-command-modal.jsx";
 import CreateRemoteModal from "./create-remote-modal.jsx";
+import DeleteRemoteModal from "./delete-remote-modal.jsx";
 
 const ModalRegistry = (function () {
   const modals = [
@@ -57,6 +58,11 @@ const ModalRegistry = (function () {
       component: CreateRemoteModal,
       ref: null,
     },
+    {
+      id: "deleteRemoteModal",
+      component: DeleteRemoteModal,
+      ref: null,
+    }
   ];
 
   function getModals(props) {

www/src/services/remotes-service.js

@@ -42,6 +42,13 @@ function RemotesService() {
     return remote;
   }
 
+  async function deleteRemote(remoteId) {
+    let index = remotes.findIndex((remote) => remote.getId() === remoteId);
+    if (index >= 0) {
+      remotes.splice(index, 1);
+    }
+  }
+
   async function getCommands() {
     return [].concat(commands);
   }
@@ -64,6 +71,7 @@ function RemotesService() {
   return {
     getRemotes,
     createRemote,
+    deleteRemote,
     getCommands,
     createCommand,
     deleteCommand,

www/src/views/remotes/remotes-list-view.jsx

@@ -2,6 +2,7 @@ import { createResource, onMount } from "solid-js";
 import List from "../../components/list";
 import RemotesService from "../../services/remotes-service";
 import CreateRemoteModal from "../../modals/create-remote-modal";
+import DeleteRemoteModal from "../../modals/delete-remote-modal";
 
 function RemotesList(props) {
   const [remotes, { refetch: refetchRemotes }] = createResource(
@@ -15,12 +16,19 @@ function RemotesList(props) {
   CreateRemoteModal.onRemoteCreated(() => {
     refetchRemotes();
   });
+  
+  DeleteRemoteModal.onRemoteDeleted(() => {
+    refetchRemotes();
+  });
 
   function handleNewRemote() {
     CreateRemoteModal.Handler.show();
   }
 
-  function handleDeleteRemote(remote) {}
+  function handleDeleteRemote(remote) {
+    DeleteRemoteModal.setRemote(remote);
+    DeleteRemoteModal.Handler.show();
+  }
 
   return (
     <>