feat: add remotes and commands views

www/src/services/remotes-service.js

@@ -0,0 +1,18 @@
+function RemotesService() {
+  async function getRemotes() {
+    return [];
+  }
+
+  async function getCommands() {
+    return [];
+  }
+
+  return {
+    getRemotes,
+    getCommands,
+  };
+}
+
+RemotesService = new RemotesService();
+
+export default RemotesService;

www/src/views/main-view.jsx

@@ -1,27 +1,28 @@
+import { autoUpdate, computePosition, offset, shift } from "@floating-ui/dom";
 import {
+  createEffect,
+  createResource,
   createSignal,
   mergeProps,
-  createResource,
-  createEffect,
-  onMount,
   onCleanup,
+  onMount,
 } from "solid-js";
-import { computePosition, shift, autoUpdate, offset } from "@floating-ui/dom";
 
-import UserService from "../services/user-service.js";
 import ModalRegistry from "../modals/modal-registry.jsx";
+import UserService from "../services/user-service.js";
 import UrlUtils from "../tools/url-utils.js";
-import SettingsView from "./settings-view.jsx";
 import DevicesView from "./devices-view.jsx";
+import SettingsView from "./settings-view.jsx";
 
 import {
   DEVICES_VIEW,
-  REMOTES_VIEW,
-  RECORDINGS_VIEW,
-  SETTINGS_VIEW,
   INTEGRATION_VIEW,
+  RECORDINGS_VIEW,
+  REMOTES_VIEW,
+  SETTINGS_VIEW,
 } from "../data/constants.js";
 import IntegrationView from "./integration-view.jsx";
+import RemotesView from "./remotes/remotes-view.jsx";
 
 let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
 
@@ -215,6 +216,9 @@ const MainView = function (props) {
           <Match when={activeView() === INTEGRATION_VIEW}>
             <IntegrationView {...props} />
           </Match>
+          <Match when={activeView() === REMOTES_VIEW}>
+            <RemotesView {...props} />
+          </Match>
         </Switch>
       </div>
     );

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

@@ -0,0 +1,76 @@
+import { createResource, onMount } from "solid-js";
+import List from "../../modules/list";
+import RemotesService from "../../services/remotes-service";
+
+function CommandsList(props) {
+  const [commands, { refetch: refetchCommands }] = createResource(
+    RemotesService.getCommands
+  );
+
+  onMount(() => {
+    refetchCommands();
+  });
+
+  function handleNewCommand() {}
+
+  return (
+    <>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-row flex-fill">
+          {props.navigation ? props.navigation : null}
+        </div>
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewCommand}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Command
+          </button>
+        </div>
+      </div>
+      <List
+        items={(commands() || []).map((integration) => ({
+          id: {
+            html: <span class="font-monospace">{integration.getId()}</span>,
+          },
+          name: {
+            text: integration.getName(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteIntegration(integration);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          integration: integration,
+        }))}
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "name",
+            name: "Name",
+          },
+          {
+            id: "options",
+            name: "",
+            width: 4,
+          },
+        ]}
+      ></List>
+    </>
+  );
+}
+
+export default CommandsList;

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

@@ -0,0 +1,64 @@
+import { createResource, onMount } from "solid-js";
+import List from "../../modules/list";
+import RemotesService from "../../services/remotes-service";
+
+function RemotesList(props) {
+  const [remotes, { refetch: refetchRemotes }] =
+    createResource(RemotesService.getRemotes);
+
+  onMount(() => {
+    refetchRemotes();
+  });
+
+  function handleNewRemote() {}
+
+  return (
+    <>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-row flex-fill">
+          {props.navigation ? props.navigation : null}
+        </div>
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Remote
+          </button>
+        </div>
+      </div>
+      <List
+        onListItemClick={() => {}}
+        items={(remotes() || []).map((device) => ({
+          id: {
+            html: <span class="font-monospace">{device.getId()}</span>,
+          },
+          name: {
+            text: device.getName(),
+          },
+          description: {
+            text: device.getDescription(),
+          },
+          device,
+        }))}
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "name",
+            name: "Name",
+            width: 10,
+          },
+          {
+            id: "description",
+            name: "Description",
+          },
+        ]}
+      ></List>
+    </>
+  );
+}
+
+export default RemotesList;

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

@@ -0,0 +1,64 @@
+import {
+  createSignal,
+  Match,
+  mergeProps,
+  Switch
+} from "solid-js";
+
+import CommandsList from "./commands-list-view";
+import RemotesList from "./remotes-list-view";
+
+function RemotesView(props) {
+  props = mergeProps({ onIntegrationClicked: () => {} }, props);
+  const REMOTES_LIST_TYPE = "remotes";
+  const COMMANDS_LIST_TYPE = "commands";
+
+  const [listType, setListType] = createSignal(REMOTES_LIST_TYPE);
+
+  function Navigation(props) {
+    return (
+      <div class="d-flex flex-row flex-fill">
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (listType() === REMOTES_LIST_TYPE ? " btn-secondary" : " btn-dark")
+          }
+          onClick={() => setListType(REMOTES_LIST_TYPE)}
+        >
+          <i class="bi bi-tv me-2"></i>
+          Remotes
+        </button>
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (listType() === COMMANDS_LIST_TYPE ? " btn-secondary" : " btn-dark")
+          }
+          onClick={() => setListType(COMMANDS_LIST_TYPE)}
+        >
+          <i class="bi bi-gear me-2"></i>
+          Commands
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <Switch>
+        <Match when={listType() === REMOTES_LIST_TYPE}>
+          <RemotesList navigation={<Navigation />} />
+        </Match>
+        <Match when={listType() === COMMANDS_LIST_TYPE}>
+          <CommandsList navigation={<Navigation />} />
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+export default RemotesView;