Add plugins page

src/frontend/src/lib/components/plugins/Box.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+</script>
+
+<div class="box">
+  <slot></slot>
+</div>
+
+<style>
+  .box {
+    height: fit-content;
+    padding: 10px;
+    margin: 15px 10px 15px 10;
+    border: 1px solid whitesmoke;
+  }
+</style>

src/frontend/src/lib/components/plugins/Header.svelte

@@ -0,0 +1,22 @@
+<div class="container">
+  <pre>
+    ____  __            _           
+   / __ \/ /_  ______ _(_)___  _____
+  / /_/ / / / / / __ `/ / __ \/ ___/
+ / ____/ / /_/ / /_/ / / / / (__  ) 
+/_/   /_/\__,_/\__, /_/_/ /_/____/  
+              /____/                
+      </pre>
+</div>
+
+<style>
+  pre {
+    margin: -10px 0px 0px 0px;
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    color: whitesmoke;
+  }
+
+  .container {
+    overflow: hidden;
+  }
+</style>

src/frontend/src/lib/components/plugins/UrlField.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let pluginUrl: string;
+  let pluginUrlInput: HTMLInputElement;
+
+  onMount(() => {
+    pluginUrlInput.focus();
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      fetch("/plugins", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        body: JSON.stringify({
+          url: pluginUrl,
+        }),
+      });
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div class="grid">
+  <label for="plugin-url">Plugin.toml URL></label>
+  <input
+    type="text"
+    id="plugin-url"
+    bind:this={pluginUrlInput}
+    bind:value={pluginUrl}
+  />
+</div>
+
+<style>
+  .grid {
+    display: flex;
+  }
+
+  label {
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    color: whitesmoke;
+    font-size: 16px;
+    flex: 0 0 150px;
+  }
+
+  input {
+    border: none;
+    background: none;
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    color: whitesmoke;
+    outline: none;
+    caret: whitesmoke block;
+    margin: 0px;
+    font-size: 16px;
+    flex-grow: 1;
+  }
+
+  input:focus {
+    outline: none;
+  }
+</style>

src/frontend/src/routes/plugins/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = true;

src/frontend/src/routes/plugins/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Box from "$lib/components/plugins/Box.svelte";
+  import Header from "$lib/components/plugins/Header.svelte";
+  import UrlField from "$lib/components/plugins/UrlField.svelte";
+  import Separator from "$lib/components/shared/Separator.svelte";
+  import Statusbar from "$lib/components/shared/statusbar/Statusbar.svelte";
+  import DNotificationContainer from "$lib/notifications/DNotificationContainer.svelte";
+</script>
+
+<Box>
+  <Header />
+  <Separator />
+  <UrlField />
+</Box>
+
+<DNotificationContainer />
+<Statusbar />
+
+<style>
+  :root {
+    background-color: black;
+  }
+</style>