ADD themes, load and save preferences

package.json

@@ -38,6 +38,7 @@
     "eslint": "8.28.0",
     "js-yaml": "4.1.0",
     "luxon": "3.1.0",
+    "mitt": "3.0.0",
     "sass": "1.56.1",
     "vite": "3.2.4",
     "vue": "3.2.45",

src/background/ipc.js

@@ -1,7 +1,7 @@
 const { homedir } = require('os');
 const { resolve } = require('path');
 const { readdir } = require('fs/promises');
-const { ipcMain } = require('electron');
+const { ipcMain, shell } = require('electron');
 const { KubeConfig, CoreV1Api, BatchV1Api, AppsV1Api, NetworkingV1Api, RbacAuthorizationV1Api } = require('@kubernetes/client-node');
 const { getDB, saveDB } = require('./db');
 const { loadKubeConfig } = require('./kubernetes');
@@ -174,6 +174,25 @@ function registerIpcHandlers() {
 
     stopLogEmitter(context, podName, containerName);
   });
+
+  ipcMain.handle('getPreferences', async () => {
+    const db = await getDB();
+
+    return db.preferences || {};
+  });
+
+  ipcMain.handle('savePreferences', async (event, data) => {
+    const db = await getDB();
+
+    db.preferences = data;
+
+    await saveDB(db);
+  });
+
+  const openGitHubRepository = () => shell.openExternal('https://github.com/RecuencoJones/vizkochos');
+
+  ipcMain.on('openGitHubRepository', openGitHubRepository);
+  ipcMain.handle('openGitHubRepository', openGitHubRepository);
 }
 
 module.exports = { registerIpcHandlers };

src/background/main.js

@@ -2,6 +2,8 @@ const { resolve } = require('path');
 const { app, BrowserWindow, screen } = require('electron');
 const { registerIpcHandlers } = require('./ipc');
 const { isDevelopment } = require('./constants');
+const { setMenu } = require('./menu');
+const { windows } = require('./windows');
 
 if (require('electron-squirrel-startup')) {
   app.quit();
@@ -24,11 +26,14 @@ const createWindow = () => {
     const productionHtml = resolve(__dirname, '..', '..', 'dist', 'index.html');
     window.loadFile(productionHtml);
   }
+
+  windows.set('appWindow', window);
 };
 
 async function main() {
   await app.whenReady();
 
+  setMenu();
   registerIpcHandlers();
   createWindow();
 

src/background/menu.js

@@ -0,0 +1,73 @@
+const { Menu, ipcMain } = require('electron');
+const { windows } = require('./windows');
+
+const sendToAppWindow = (...data) => windows.get('appWindow').webContents.send(...data);
+
+/** @type {Array<import('electron').MenuItemConstructorOptions | import('electron'.MenuItem>} */
+const appMenu = [
+  {
+    role: 'fileMenu',
+    submenu: [
+      {
+        role: 'newContext',
+        label: 'New Context',
+        accelerator: 'CommandOrControl+N',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:newContext' });
+        }
+      },
+      { type: 'separator' },
+      {
+        role: 'quickstart',
+        label: 'Go to Quickstart',
+        accelerator: 'CommandOrControl+Shift+H',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:quickstart' });
+        }
+      },
+      { type: 'separator' },
+      {
+        role: 'preferences',
+        label: 'Preferences',
+        accelerator: 'CommandOrControl+,',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:preferences' });
+        }
+      }
+    ]
+  },
+  { role: 'editMenu' },
+  { role: 'viewMenu' },
+  { role: 'windowMenu' },
+  {
+    role: 'helpMenu',
+    label: 'Help',
+    submenu: [
+      {
+        role: 'shortcuts',
+        label: 'Shortcuts',
+        accelerator: 'CommandOrControl+/',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'help:shortcuts' });
+        }
+      },
+      {
+        role: 'openInGitHub',
+        label: 'Open in GitHub',
+        click() {
+          ipcMain.emit('openGitHubRepository');
+        }
+      }
+    ]
+  }
+];
+
+if (process.platform === 'darwin') {
+  appMenu.unshift({ role: 'appMenu' });
+}
+
+function setMenu() {
+  Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu));
+}
+
+module.exports = { setMenu };

src/background/preload.js

@@ -1,4 +1,5 @@
 const { contextBridge, ipcRenderer } = require('electron');
+const { EventEmitter } = require('events');
 
 const invokify = (name) => (...args) => ipcRenderer.invoke(name, ...args);
 
@@ -18,7 +19,10 @@ contextBridge.exposeInMainWorld('api', {
     'addRecentView',
     'listRecentViews',
     'listResourceType',
-    'getContextOverview'
+    'getContextOverview',
+    'getPreferences',
+    'savePreferences',
+    'openGitHubRepository'
   ),
   async subscribeToContainerLogs(contextName, podName, containerName, fn) {
     ipcRenderer.on(`logs:${ podName }:${ containerName }`, fn);
@@ -27,5 +31,16 @@ contextBridge.exposeInMainWorld('api', {
   async unsubscribeFromContainerLogs(contextName, podName, containerName) {
     ipcRenderer.removeAllListeners(`logs:${ podName }:${ containerName }`);
     await ipcRenderer.invoke('unsubscribeFromContainerLogs', contextName, podName, containerName);
+  },
+  subscribeToAppMenuEvents(...eventListeners) {
+    const events = new EventEmitter();
+
+    eventListeners.forEach(({ event, handler }) => {
+      events.on(event, handler);
+    });
+
+    ipcRenderer.on('app-menu-relay', (e, { command, ...data }) => {
+      events.emit(command, data);
+    });
   }
 });

src/background/windows.js

@@ -0,0 +1,3 @@
+const windows = new Map();
+
+module.exports = { windows };

src/foreground/App.vue

@@ -1,30 +1,90 @@
 <template>
-  <div class="app-wrapper">
+  <div class="app-wrapper" :class="theme || 'theme-default'">
     <AppHeader />
     <router-view class="app-view"></router-view>
     <AppBreadcrumb />
+    <div class="modal-wrapper" v-if="showShortcuts">
+      <section class="modal">
+        <div class="modal__header">
+          <button @click="showShortcuts = false">Close</button>
+        </div>
+        <div class="modal__main">
+          <table>
+            <tbody>
+              <tr>
+                <th>Create new context</th>
+                <td><pre>CmdOrCtrl + N</pre></td>
+              </tr>
+              <tr>
+                <th>Open Quickstart</th>
+                <td><pre>CmdOrCtrl + Shift + H</pre></td>
+              </tr>
+              <tr>
+                <th>Open Preferences</th>
+                <td><pre>CmdOrCtrl + ,</pre></td>
+              </tr>
+              <tr>
+                <th>View Shortcuts</th>
+                <td><pre>CmdOrCtrl + /</pre></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script>
 import AppHeader from './components/AppHeader.vue';
 import AppBreadcrumb from './components/AppBreadcrumb.vue';
+import { events } from './events';
 
 export default {
   components: {
     AppHeader,
     AppBreadcrumb
+  },
+  data() {
+    return {
+      listener: this.loadPreferences.bind(this),
+      theme: null,
+      showShortcuts: false
+    }
+  },
+  methods: {
+    async loadPreferences() {
+      const preferences = await api.getPreferences();
+
+      this.theme = preferences.theme;
+    },
+
+    toggleShortcuts() {
+      this.showShortcuts = !this.showShortcuts;
+    }
+  },
+  async mounted() {
+    events.on('reload-preferences', this.listener);
+
+    await this.loadPreferences();
+  },
+
+  beforeUnmount() {
+    events.off('reload-preferences', this.listener);
   }
 }
 </script>
 
 <style lang="scss">
 
 .app-wrapper {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
+  color: var(--color-main-text);
+  background-color: var(--color-main-background);
 
   .app-header,
   .app-breadcrumb {
@@ -35,5 +95,26 @@ export default {
     flex: 1;
     overflow: auto;
   }
+
+  .modal-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: auto;
+
+    .modal {
+      margin: 15% auto;
+      padding: 1rem;
+      width: 30vw;
+      border: 1px solid var(--color-modal-border);
+      background: var(--color-modal-background);
+      box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
+    }
+  }
 }
 </style>

src/foreground/components/AppHeader.vue

@@ -17,7 +17,7 @@
   height: 2rem;
   padding: .25rem 1rem;
   background-color: var(--color-header-background);
-  box-shadow: 0 0 3px 2px var(--color-header-background);
+  box-shadow: 0 0 3px 2px var(--color-box-shadow);
   z-index: 2;
 
   &__left,

src/foreground/components/ResourceDetail.vue

@@ -161,7 +161,7 @@ export default {
   overflow: auto;
   padding: 1rem;
   background-color: var(--color-detail-background);
-  box-shadow: 0 0 3px 0 var(--color-dark-cookie);
+  box-shadow: 0 0 3px 0 var(--color-box-shadow);
 
   table {
     padding: .5rem;

src/foreground/events.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+
+export const events = mitt();

src/foreground/main.js

@@ -45,4 +45,31 @@ const app = createApp(App);
 
 app.use(router);
 
-app.mount('#app');
+const appInstance = app.mount('#app');
+
+window.api.subscribeToAppMenuEvents(
+  {
+    event: 'file:newContext',
+    handler() {
+      router.push('/contexts/new');
+    }
+  },
+  {
+    event: 'file:quickstart',
+    handler() {
+      router.push('/');
+    }
+  },
+  {
+    event: 'file:preferences',
+    handler() {
+      router.push('/preferences');
+    }
+  },
+  {
+    event: 'help:shortcuts',
+    handler() {
+      appInstance.toggleShortcuts();
+    }
+  }
+);