Some refactoring and styles

src/App.svelte

@@ -171,7 +171,6 @@
 
     #option-view {
       box-sizing: border-box;
-      padding: 16px;
       overflow-y: auto;
       height: 100%;
       flex-grow: 1;

src/components/RedirectCreator.svelte

@@ -30,8 +30,9 @@
 </tr>
 
 <style lang="scss">
-  tr:nth-child(2n) {
+  tr.created {
-    background-color: #2a2a2a;
+    position: sticky;
+    top: 0;
   }
 
   .desc textarea {

src/components/RedirectRow.svelte

@@ -41,10 +41,6 @@
 {/if}
 
 <style lang="scss">
-  tr:nth-child(2n) {
-    background-color: #2a2a2a;
-  }
-
   tr.created {
     background-color: #1a5100;
 

src/components/RouteCreator.svelte

@@ -28,8 +28,9 @@
 </tr>
 
 <style lang="scss">
-  tr:nth-child(2n) {
+  tr.created {
-    background-color: #2a2a2a;
+    position: sticky;
+    top: 0;
   }
 
   .desc textarea {

src/components/RouteRow.svelte

@@ -38,10 +38,6 @@
 {/if}
 
 <style lang="scss">
-  tr:nth-child(2n) {
-    background-color: #2a2a2a;
-  }
-
   tr.created {
     background-color: #1a5100;
 

src/views/VioletView.svelte

@@ -136,93 +136,111 @@
   }
 </script>
 
-<div style="padding:8px;background-color:#bb7900;">
+<div class="wrapper">
-  Warning: This is currently still under development, however it DOES update the real server routes and redirects
+  <div style="padding:8px;background-color:#bb7900;">
+    Warning: This is currently still under development, however it DOES update the real server routes and redirects
+  </div>
+
+  <div class="scrolling-area">
+    {#await promiseForRoutes}
+      <div class="text-padding">
+        <h2>Routes</h2>
+        <div>Loading...</div>
+      </div>
+    {:then}
+      <table>
+        <thead>
+          <tr>
+            <th colspan="6"><h2>Routes</h2></th>
+          </tr>
+          <tr>
+            <th>Source</th>
+            <th>Destination</th>
+            <th>Flags</th>
+            <th>Description</th>
+            <th>Active</th>
+            <th>Option</th>
+          </tr>
+          <RouteCreator
+            on:make={e => {
+              const x = e.detail;
+              routeData[x.src] = {client: x, server: routeData[x.src]?.server};
+              routeSrcs.push(x.src);
+              routeSrcs = routeSrcs;
+            }}
+          />
+        </thead>
+        <tbody>
+          {#each routeSrcs as src (src)}
+            {#if routeData[src]}
+              <RouteRow bind:route={routeData[src]} />
+            {:else}
+              <tr><td colspan="5">Error loading row for {src}</td></tr>
+            {/if}
+          {/each}
+        </tbody>
+      </table>
+    {:catch err}
+      <div class="text-padding">
+        <h2>Routes</h2>
+        <div>Administrator... I hardly know her?</div>
+        <div>{err}</div>
+      </div>
+    {/await}
+
+    {#await promiseForRedirects}
+      <div class="text-padding">
+        <h2>Redirects</h2>
+        <div>Loading...</div>
+      </div>
+    {:then}
+      <table>
+        <thead>
+          <tr>
+            <th colspan="8"><h2>Redirects</h2></th>
+          </tr>
+          <tr>
+            <th>Source</th>
+            <th>Destination</th>
+            <th>Flags</th>
+            <th>Code</th>
+            <th>Description</th>
+            <th>Active</th>
+            <th>Option</th>
+          </tr>
+          <RedirectCreator
+            on:make={e => {
+              const x = e.detail;
+              redirectData[x.src] = {client: x, server: redirectData[x.src]?.server};
+              redirectSrcs.push(x.src);
+              redirectSrcs = redirectSrcs;
+            }}
+          />
+        </thead>
+        <tbody>
+          {#each redirectSrcs as src (src)}
+            {#if redirectData[src]}
+              <RedirectRow bind:redirect={redirectData[src]} />
+            {:else}
+              <tr><td colspan="5">Error loading row for {src}</td></tr>
+            {/if}
+          {/each}
+        </tbody>
+      </table>
+    {:catch err}
+      <div class="text-padding">
+        <h2>Redirects</h2>
+        <div>Administrator... I hardly know her?</div>
+        <div>{err}</div>
+      </div>
+    {/await}
+  </div>
+
+  <div class="footer">
+    <button on:click={() => saveChanges()}>Save Changes</button>
+  </div>
 </div>
 
-<h2>Routes</h2>
-{#await promiseForRoutes}
-  <div>Loading...</div>
-{:then}
-  <table>
-    <thead>
-      <tr>
-        <th>Source</th>
-        <th>Destination</th>
-        <th>Flags</th>
-        <th>Description</th>
-        <th>Active</th>
-        <th>Option</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each routeSrcs as src (src)}
-        {#if routeData[src]}
-          <RouteRow bind:route={routeData[src]} />
-        {:else}
-          <tr><td colspan="5">Error loading row for {src}</td></tr>
-        {/if}
-      {/each}
-
-      <RouteCreator
-        on:make={e => {
-          const x = e.detail;
-          routeData[x.src] = {client: x, server: routeData[x.src]?.server};
-          routeSrcs.push(x.src);
-          routeSrcs = routeSrcs;
-        }}
-      />
-    </tbody>
-  </table>
-{:catch err}
-  <div>{err}</div>
-{/await}
-
-<h2>Redirects</h2>
-{#await promiseForRedirects}
-  <div>Loading...</div>
-{:then}
-  <table>
-    <thead>
-      <tr>
-        <th>Source</th>
-        <th>Destination</th>
-        <th>Flags</th>
-        <th>Code</th>
-        <th>Description</th>
-        <th>Active</th>
-        <th>Option</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each redirectSrcs as src (src)}
-        {#if redirectData[src]}
-          <RedirectRow bind:redirect={redirectData[src]} />
-        {:else}
-          <tr><td colspan="5">Error loading row for {src}</td></tr>
-        {/if}
-      {/each}
-
-      <RedirectCreator
-        on:make={e => {
-          const x = e.detail;
-          redirectData[x.src] = {client: x, server: redirectData[x.src]?.server};
-          redirectSrcs.push(x.src);
-          redirectSrcs = redirectSrcs;
-        }}
-      />
-    </tbody>
-  </table>
-{:catch err}
-  <div>{err}</div>
-{/await}
-
-<div class="footer-fake" />
-
-<footer>
-  <button on:click={() => saveChanges()}>Save Changes</button>
-</footer>
-
 <style lang="scss">
   table {
     border-collapse: collapse;
@@ -230,7 +248,25 @@
     width: 100%;
 
     thead {
-      background-color: #04aa6d;
+      background-color: #333333;
+      position: sticky;
+      top: 0;
+      z-index: 9999;
+      box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
+
+      th h2 {
+        margin: 0;
+      }
+    }
+
+    tbody :global(tr) {
+      &:nth-child(2n) {
+        background-color: #2a2a2a;
+      }
+
+      &:nth-child(2n + 1) {
+        background-color: #242424;
+      }
     }
 
     :global(th),
@@ -240,16 +276,26 @@
     }
   }
 
-  .footer-fake {
+  .wrapper {
-    height: 50px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .scrolling-area {
+      overflow: auto;
+      height: 100%;
+    }
   }
 
-  footer {
+  .text-padding {
-    position: absolute;
+    padding: 4px 16px;
-    bottom: 0;
+  }
+
+  .footer {
     height: 50px;
     background-color: #2c2c2c;
-    width: calc(100% - 150px - 32px);
     box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
 
     button {
@@ -262,8 +308,8 @@
       font-size: 20px;
       font-weight: 700;
       line-height: 24px;
-      width: calc(100%);
       height: 50px;
+      padding: 4px 16px;
     }
   }
 </style>

test-server/main.go

@@ -105,72 +105,50 @@ var serveApiCors = cors.New(cors.Options{
 func apiServer(verify mjwt.Verifier) {
 	r := http.NewServeMux()
 	r.Handle("/v1/violet/route", hasPerm(verify, "violet:route", func(rw http.ResponseWriter, req *http.Request) {
-		json.NewEncoder(rw).Encode([]map[string]any{
+		m := make([]map[string]any, 0, 40)
-			{
+		for i := 0; i < 20; i++ {
-				"src":    "example.com",
+			m = append(m, map[string]any{
+				"src":    uuid.NewString() + ".example.com",
 				"dst":    "127.0.0.1:8080",
 				"desc":   "This is a test description",
 				"flags":  181,
 				"active": true,
-			},
+			})
-			{
+		}
-				"src":    "test.example.com",
+		for i := 0; i < 20; i++ {
-				"dst":    "127.0.0.1:8081",
+			m = append(m, map[string]any{
-				"desc":   "This is a test description",
+				"src":    uuid.NewString() + ".example.org",
-				"flags":  17,
-				"active": true,
-			},
-			{
-				"src":    "example.org/hello",
-				"dst":    "127.0.0.1:8082",
-				"desc":   "This is a test description",
-				"flags":  16,
-				"active": true,
-			},
-			{
-				"src":    "test.example.org/hello",
-				"dst":    "127.0.0.1:8083",
-				"desc":   "This is a test description",
-				"flags":  15,
-				"active": true,
-			},
-		})
-	}))
-	r.Handle("/v1/violet/redirect", hasPerm(verify, "violet:redirect", func(rw http.ResponseWriter, req *http.Request) {
-		json.NewEncoder(rw).Encode([]map[string]any{
-			{
-				"src":    "example.org",
-				"dst":    "127.0.0.1:8084",
-				"desc":   "This is a test description",
-				"flags":  181,
-				"code":   307,
-				"active": true,
-			},
-			{
-				"src":    "test.example.org",
 				"dst":    "127.0.0.1:8085",
 				"desc":   "This is a test description",
 				"flags":  17,
-				"code":   302,
 				"active": true,
-			},
+			})
-			{
+		}
-				"src":    "example.org/hello",
+		json.NewEncoder(rw).Encode(m)
-				"dst":    "127.0.0.1:8086",
+	}))
+	r.Handle("/v1/violet/redirect", hasPerm(verify, "violet:redirect", func(rw http.ResponseWriter, req *http.Request) {
+		m := make([]map[string]any, 0, 40)
+		for i := 0; i < 20; i++ {
+			m = append(m, map[string]any{
+				"src":    uuid.NewString() + ".example.com",
+				"dst":    "test1.example.com",
 				"desc":   "This is a test description",
-				"flags":  16,
+				"flags":  1,
 				"code":   308,
 				"active": true,
-			},
+			})
-			{
+		}
-				"src":    "test.example.org/hello",
+		for i := 0; i < 20; i++ {
-				"dst":    "127.0.0.1:8087",
+			m = append(m, map[string]any{
+				"src":    uuid.NewString() + ".example.org",
+				"dst":    "test2.example.org",
 				"desc":   "This is a test description",
-				"flags":  15,
+				"flags":  3,
-				"code":   301,
+				"code":   307,
 				"active": true,
-			},
+			})
-		})
+		}
+		json.NewEncoder(rw).Encode(m)
 	}))
 
 	logger := http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {