From 59d36ed2088d0ac37b209b6dc6ce14415ab64239 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Thu, 23 Feb 2023 11:03:15 +0100
Subject: [PATCH] Some UI improvements

---
 gui/dashboard/app.css         |  2 +-
 gui/dashboard/settings.svelte | 19 +++++++++++++++----
 index.js                      | 16 +++++-----------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/gui/dashboard/app.css b/gui/dashboard/app.css
index f62e8c8..5771a1f 100644
--- a/gui/dashboard/app.css
+++ b/gui/dashboard/app.css
@@ -40,7 +40,7 @@ button {
 }
 
 .btn {
-  border: 1px solid var(--dark);
+  border: 1px solid var(--body-fg);
   padding: 0.7rem;
   border-radius: var(--radius);
 }
diff --git a/gui/dashboard/settings.svelte b/gui/dashboard/settings.svelte
index 14a927a..c941111 100644
--- a/gui/dashboard/settings.svelte
+++ b/gui/dashboard/settings.svelte
@@ -4,9 +4,11 @@
 
   let open = false;
   let showCopyCheck = false;
+  let copyButton;
 
-  function toggle() {
-    open = !open;
+  function openModal() {
+    open = true;
+    copyButton?.focus();
   }
 
   function copy() {
@@ -16,15 +18,24 @@
       setTimeout(() => showCopyCheck = false, 2000);
     }
   }
+
+  function keydown(event) {
+    if ((event.key === ',') && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      openModal();
+    }
+  }
 </script>
 
-<button class="settings" on:click={toggle}>
+<svelte:window on:keydown={keydown} />
+
+<button class="settings" on:click={openModal}>
   Settings
 </button>
 
 <Modal title="Settings" bind:open>
   <div class="mb">
-    <button on:click={copy} class="btn copy">
+    <button on:click={copy} class="btn copy" bind:this={copyButton}>
       Copy settings to clipboard
       {#if showCopyCheck}
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405.27 405.27">
diff --git a/index.js b/index.js
index ad7db48..27295b2 100644
--- a/index.js
+++ b/index.js
@@ -803,7 +803,9 @@ module.exports = {
     { route: '/status/dashboard',
       method: 'get',
       handler: async (req, res) => {
-        if (!renderedDashboard) {
+        // const cacheValid = !!renderedDashboard;
+        const cacheValid = true;
+        if (!cacheValid) {
           // Build dashboard
           let cssOutput = '';
 
@@ -811,17 +813,9 @@ module.exports = {
             const bundle = await buildDeps.rollup({
               input: __dirname + '/gui/dashboard/index.js',
               plugins: [
-                buildDeps.svelte({
-                  compilerOptions: {
-                    dev: false,
-                    generate: 'dom',
-                  },
-                }),
+                buildDeps.svelte({ compilerOptions: { dev: false, generate: 'dom' } }),
                 buildDeps.css({ output: style => cssOutput = style }),
-                buildDeps.resolve({
-                  browser: true,
-                  dedupe: [ 'svelte' ],
-                }),
+                buildDeps.resolve({ browser: true, dedupe: [ 'svelte' ] }),
                 buildDeps.commonjs(),
                 buildDeps.terser(),
               ],