feat(client): added full support for custom themes with theme picker,…

… help, and theme save
will-moss · Jan 9, 2024 · 56a8c21 · 56a8c21
1 parent 73281cf
commit 56a8c21
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 7 deletions.
diff --git a/app/client/assets/js/isaiah.js b/app/client/assets/js/isaiah.js
@@ -182,6 +182,7 @@
    * @param {string} action.Key
    * @param {string} action.Label
    * @param {boolean} action.RequiresResource
+   * @param {boolean} action.RequiresMenuAction
    * @param {boolean} action.RunLocally
    * @param {number} maxKeyWidth
    * @returns {string}
@@ -193,6 +194,7 @@
     if (action.PromptInput)
       html += ` data-prompt-input="${action.PromptInput}"`;
     if (action.RequiresResource) html += ` data-use-row="true"`;
+    if (action.RequiresMenuAction) html += ` data-use-menu-action="true"`;
     if (action.RunLocally) html += ` data-run-locally="true"`;
     html += ` data-command="${action.Command}">`;
 
@@ -656,6 +658,10 @@
                <span class="cell">G        </span>
                <span class="cell">open project on Github</span>
              </div>
+             <div class="row is-not-interactive">
+               <span class="cell">T        </span>
+               <span class="cell">open theme picker</span>
+             </div>
              <div class="row is-not-interactive"></div>
              <div class="row is-not-interactive">
                <span class="cell">Ctrl+C   </span>
@@ -692,6 +698,9 @@
   const renderApp = (_state) => {
     let html;
 
+    // -1. Set app's theme
+    document.body.setAttribute('data-theme', _state.appearance.currentTheme);
+
     // 0. Determine screen to display
 
     if (!_state.hasEstablishedConnection)
@@ -915,6 +924,7 @@
       hgetMobileControl('menu').classList.add('is-active');
       hgetMobileControl('bulk').classList.add('is-active');
       hgetMobileControl('shellSystem').classList.add('is-active');
+      hgetMobileControl('theme').classList.add('is-active');
     }
   };
 
@@ -969,7 +979,7 @@
      * @returns {boolean}
      */
     get isMenuIng() {
-      return state.popup && ['menu', 'bulk'].includes(state.popup);
+      return state.popup && ['menu', 'bulk', 'theme'].includes(state.popup);
     },
 
     /**
@@ -1003,6 +1013,7 @@
     /**
      * @typedef {object} Menu
      * @property {Array<MenuAction>} actions
+     * @property {'menu'|'bulk'|'theme'} key
      */
 
     /**
@@ -1036,7 +1047,7 @@
     helper: 'default',
 
     /**
-     * @type {"menu"|"bulk"|"prompt"|"message"|"tty"|"help"}
+     * @type {"menu"|"bulk"|"prompt"|"message"|"tty"|"help"|"theme"}
      */
     popup: null,
 
@@ -1050,6 +1061,16 @@
        * @type {"default"|"half"|"focus"}
        */
       currentLayout: 'default',
+
+      /**
+       * @type {Array<string>}
+       */
+      availableThemes: ['default', 'moon', 'dawn'],
+
+      /**
+       * @type {"default"|"moon"|"dawn"}
+       */
+      currentTheme: 'default',
     },
 
     /**
@@ -1211,6 +1232,13 @@
     ];
   };
 
+  /**
+   * @returns {MenuAction}
+   */
+  const sgetCurrentMenuAction = () => {
+    return state.menu.actions[state.navigation.currentMenuRow - 1];
+  };
+
   // === Commands-related methods
 
   /**
@@ -1636,6 +1664,15 @@
       websocketSend({ action: 'auth.login', args: { Password: password } });
     },
 
+    /**
+     * Private - Pick a theme and store it in LocalStorage
+     * @param {MenuAction} action
+     */
+    _pickTheme: function (action) {
+      state.appearance.currentTheme = action.Label.toLowerCase();
+      localStorage.setItem('theme', state.appearance.currentTheme);
+    },
+
     /**
      * Public - Quit the app / Quit the current popup
      * Requires prompt
@@ -1772,11 +1809,23 @@
           // Can clear anytime as the command is private ("_wsSend")
           cmdRun(cmds._clearPopup);
         } else {
+          // Save the focused menu row in case we need it later
+          const _menuAction = sgetCurrentMenuAction();
+
           // Must clear first to enable running a command out of menu context
           cmdRun(cmds._clearPopup);
 
-          if (!attributes.useRow) cmdRun(cmds[attributes.command]);
-          else cmdRun(cmds[attributes.command], sgetCurrentRow());
+          if (attributes.useRow) {
+            cmdRun(cmds[attributes.command], sgetCurrentRow());
+            return;
+          }
+
+          if (attributes.useMenuAction) {
+            cmdRun(cmds[attributes.command], _menuAction);
+            return;
+          }
+
+          cmdRun(cmds[attributes.command]);
         }
 
         return;
@@ -2209,6 +2258,22 @@
       if (!state.tabs[3]) return;
       state.navigation.currentTab = state.tabs[3].Key;
     },
+
+    /**
+     * Public - Show theme picker
+     */
+    theme: function () {
+      state.menu.key = 'theme';
+      state.menu.actions = state.appearance.availableThemes.map((t) => ({
+        RunLocally: true,
+        RequiresResource: false,
+        RequiresMenuAction: true,
+        Label: t,
+        Command: '_pickTheme',
+      }));
+      state.navigation.currentMenuRow = 1;
+      cmdRun(cmds._showPopup, 'menu');
+    },
   };
 
   // === Variables
@@ -2285,6 +2350,7 @@
     w: 'browser',
     h: 'hub',
     G: 'github',
+    T: 'theme',
     '?': 'help',
 
     // Misc
@@ -2784,13 +2850,16 @@
   // === Entry Point
   // ===
   window.addEventListener('load', () => {
-    // 1. Connect to server (first execution loop)
+    // 1. Load user settings if any
+    state.appearance.currentTheme = localStorage.getItem('theme') || 'default';
+
+    // 2. Connect to server (first execution loop)
     websocketConnect();
 
-    // 2. Set keyboard listener (second execution loop)
+    // 3. Set keyboard listener (second execution loop)
     window.addEventListener('keydown', listenerKeyDown);
 
-    // 3. Set mouse listener (third execution loop)
+    // 4. Set mouse listener (third execution loop)
     window.addEventListener('click', listenerMouseClick);
   });
 })(window);
diff --git a/app/client/index.html b/app/client/index.html
@@ -97,6 +97,11 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
                 </svg>
               </button>
+              <button class="has-icon" data-action="theme">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
+                </svg>
+              </button>
             </div>
           </div>