Style dialog and buttons

src/App.svelte

@@ -3,6 +3,7 @@
     import Header from "./lib/Header.svelte";
     import Stream from "./lib/Stream.svelte";
     import AddStreamDialog from "./lib/AddStreamDialog.svelte";
+    import ManageStreamDialog from "./lib/ManageStreamDialog.svelte";
 
     let streams = $state([]);
     let fracsX = $state(0);
@@ -39,6 +40,10 @@
                 fracsY = 3;
         }
     });
+
+    function closeDialog() {
+        currentDialog = null;
+    }
 </script>
 
 <main>
@@ -54,8 +59,13 @@
                 newUrl.searchParams.append(newStream.type, newStream.streamId);
                 window.history.pushState({}, null, newUrl);
             }}
+            close={() => closeDialog()}
         ></AddStreamDialog>
     {/if}
+    {#if currentDialog === "manage-streams"}
+        <ManageStreamDialog close={() => closeDialog()} bind:streams
+        ></ManageStreamDialog>
+    {/if}
     <!--{#if currentDialog === "remove-stream"}
         <RemoveStreamDialog
             remove={(streamId) => {

src/app.css

@@ -1,4 +1,30 @@
 body {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
+}
+
+input[type="text"] {
+    border: none;
+    border-radius: 3px;
+    text-align: center;
+    text-decoration: none;
+    background: white;
+    line-height: 2rem;
+    padding: 0 1rem;
+    vertical-align: middle;
+    width: auto;
+    color: #000000;
+}
+
+button {
+    border: none;
+    border-radius: 3px;
+    text-align: center;
+    text-decoration: none;
+    background: white;
+    line-height: 2rem;
+    padding: 0 1rem;
+    vertical-align: middle;
+    width: auto;
+    color: #000000;
 }

src/lib/AddStreamDialog.svelte

@@ -1,57 +1,71 @@
 <script>
-    let { add } = $props();
+    import Dialog from "./Dialog.svelte";
+
+    let { add, close } = $props();
     let step = $state(0);
 
     let type = null;
     let streamId = $state("doggoat");
 </script>
 
-<div class="add-stream-dialog">
+<Dialog close={() => close()}>
-    {#if step === 0}
+    <div class="add-stream-dialog">
-        <div>
+        {#if step === 0}
-            <h2>Add stream</h2>
+            <div class="step-0">
-            <button
+                <h2>Add stream</h2>
-                onclick={() => {
+                <div class="buttons">
-                    type = "vdo";
+                    <button
-                    step = 1;
+                        onclick={() => {
-                }}>vdo.ninja</button
+                            type = "vdo";
-            >
+                            step = 1;
-            <button
+                        }}>vdo.ninja</button
-                onclick={() => {
+                    >
-                    type = "twitch";
+                    <button
-                    step = 1;
+                        onclick={() => {
-                }}>Twitch</button
+                            type = "twitch";
-            >
+                            step = 1;
-        </div>
+                        }}>Twitch</button
-    {/if}
+                    >
-    {#if step === 1}
+                </div>
-        <div>
+            </div>
-            <p>
+        {/if}
-                Example:<br />
+        {#if step === 1}
-                https://vdo.ninja/?view=<strong>doggoat</strong
+            <div class="step-1">
-                >&bitrate=4500&proaudio<br />
+                <h2>Add stream</h2>
-                https://www.twitch.tv/<strong>saltybet</strong>
+                <p>
-            </p>
+                    Example:<br />
-            <label>Stream ID: <input bind:value={streamId} /></label>
+                    https://vdo.ninja/?view=<strong>doggoat</strong
-            <button
+                    >&bitrate=4500&proaudio<br />
-                onclick={() => {
+                    https://www.twitch.tv/<strong>saltybet</strong>
-                    add({ type, streamId });
+                </p>
-                    step = 0;
+                <label
-                }}>Add</button
+                    >Stream ID: <input
-            >
+                        type="text"
-        </div>
+                        bind:value={streamId}
-    {/if}
+                    /></label
-</div>
+                >
+                <button
+                    onclick={() => {
+                        add({ type, streamId });
+                        step = 0;
+                    }}>Add</button
+                >
+            </div>
+        {/if}
+    </div>
+</Dialog>
 
 <style>
     .add-stream-dialog {
-        padding: 1rem;
+        h2 {
-        background-color: #0000000a;
+            text-align: center;
-        position: absolute;
+            margin: 0 0 0.75rem 0;
-        width: 50vh;
+        }
-        height: 50vh;
+
-        top: 50%;
+        .buttons {
-        left: 50%;
+            display: grid;
-        transform: translate(-50%, -50%);
+            justify-content: center;
+            gap: 0.25rem;
+        }
     }
 </style>

src/lib/Dialog.svelte

@@ -0,0 +1,43 @@
+<script>
+    let { children, close } = $props();
+</script>
+
+<div class="dialog">
+    <button
+        class="close"
+        onclick={() => {
+            if (close) close();
+        }}>x</button
+    >
+    {@render children()}
+</div>
+
+<style>
+    .dialog {
+        padding: 1rem;
+        position: absolute;
+        width: 50vw;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        color: white;
+        border: none;
+        border-radius: 3px;
+
+        /*
+        * Created with https://www.css-gradient.com
+        * Gradient link: https://www.css-gradient.com/?c1=0b49d0&c2=8e0871&gt=l&gd=dtl
+        */
+        background: #0b49d0;
+        background: linear-gradient(135deg, #0b49d0, #8e0871);
+
+        .close {
+            position: absolute;
+            top: 0.5rem;
+            left: 0.5rem;
+            padding: 0 0.5rem;
+            line-height: 1.25rem;
+        }
+    }
+</style>

src/lib/Header.svelte

@@ -4,6 +4,11 @@
         currentDialog = $bindable(null),
         containerElement = $bindable(null),
     } = $props();
+
+    const buttons = [
+        { key: "add-stream", label: "Add Stream" },
+        { key: "manage-streams", label: "Manage Streams" },
+    ];
 </script>
 
 <header>
@@ -13,13 +18,15 @@
         }}>[{showButtons ? "<" : ">"}]</button
     >
     {#if showButtons}
-        <button
+        {#each buttons as { key, label }}
-            onclick={() => {
+            <button
-                currentDialog = "add-stream";
+                onclick={() => {
-            }}
+                    currentDialog = key;
-        >
+                }}
-            Add Stream</button
+            >
-        >
+                {label}</button
+            >
+        {/each}
     {/if}
 </header>
 
@@ -27,6 +34,7 @@
     header {
         width: 100vw;
         display: flex;
+        flex-flow: row nowrap;
         position: absolute;
         top: 0;
         left: 0;

src/lib/ManageStreamDialog.svelte

@@ -0,0 +1,14 @@
+<script>
+    import Dialog from "./Dialog.svelte";
+
+    let { streams = $bindable(null), close } = $props();
+</script>
+
+<Dialog close={() => close()}>
+    <pre>
+      {JSON.stringify(streams)}
+    </pre>
+</Dialog>
+
+<style>
+</style>