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

@@ -2,3 +2,29 @@ body {
     margin: 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,15 +1,19 @@
 <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>
 
+<Dialog close={() => close()}>
     <div class="add-stream-dialog">
         {#if step === 0}
-        <div>
+            <div class="step-0">
                 <h2>Add stream</h2>
+                <div class="buttons">
                     <button
                         onclick={() => {
                             type = "vdo";
@@ -23,16 +27,23 @@
                         }}>Twitch</button
                     >
                 </div>
+            </div>
         {/if}
         {#if step === 1}
-        <div>
+            <div class="step-1">
+                <h2>Add stream</h2>
                 <p>
                     Example:<br />
                     https://vdo.ninja/?view=<strong>doggoat</strong
                     >&bitrate=4500&proaudio<br />
                     https://www.twitch.tv/<strong>saltybet</strong>
                 </p>
-            <label>Stream ID: <input bind:value={streamId} /></label>
+                <label
+                    >Stream ID: <input
+                        type="text"
+                        bind:value={streamId}
+                    /></label
+                >
                 <button
                     onclick={() => {
                         add({ type, streamId });
@@ -42,16 +53,19 @@
             </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}
+        {#each buttons as { key, label }}
             <button
                 onclick={() => {
-                currentDialog = "add-stream";
+                    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>