Some UI improvements

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);
 }

gui/dashboard/settings.svelte

@@ -4,9 +4,11 @@
 
   let open = false;
   let showCopyCheck = false;
+  let copyButton;
 
-  function toggle() {
+  function openModal() {
-    open = !open;
+    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">

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({
+                buildDeps.svelte({ compilerOptions: { dev: false, generate: 'dom' } }),
-                  compilerOptions: {
-                    dev: false,
-                    generate: 'dom',
-                  },
-                }),
                 buildDeps.css({ output: style => cssOutput = style }),
-                buildDeps.resolve({
+                buildDeps.resolve({ browser: true, dedupe: [ 'svelte' ] }),
-                  browser: true,
-                  dedupe: [ 'svelte' ],
-                }),
                 buildDeps.commonjs(),
                 buildDeps.terser(),
               ],