🎉 Add some action buttons to open URIs

src/app.ts

@@ -122,6 +122,11 @@ export class KandoApp {
     ipcMain.on('move-pointer', (event, dist) => {
       this.backend.movePointer(Math.floor(dist.x), Math.floor(dist.y));
     });
+
+    ipcMain.on('open-uri', (event, uri) => {
+      this.window.hide();
+      shell.openExternal(uri);
+    });
   }
 
   // This is called when the user presses the shortcut. It will get the current

src/index.html

@@ -47,12 +47,26 @@ <h2>Welcome to Kando.</h2>
         </li>
       </ul>
 
-      <div id="dev-tools-button" class="editor-circle-button">
-        <i class="material-icons-round">code</i> Show Developer Tools
-      </div>
+      <div id="editor-buttons-grid">
+        <div
+          id="dev-tools-button"
+          class="editor-circle-button"
+          style="grid-column-start: 1; grid-column-end: 3"
+        >
+          <i class="material-icons-round">code</i> Show Developer Tools
+        </div>
+
+        <div id="shortcut-button" class="editor-circle-button">
+          <i class="material-icons-round">keyboard</i> Fake Shortcut
+        </div>
+
+        <div id="url-button" class="editor-circle-button">
+          <i class="material-icons-round">public</i> Open URL
+        </div>
 
-      <div id="shortcut-button" class="editor-circle-button">
-        <i class="material-icons-round">keyboard</i> Simulate a Shortcut
+        <div id="uri-button" class="editor-circle-button">
+          <i class="material-icons-round">folder_open</i> Open Folder
+        </div>
       </div>
     </div>
   </body>

src/index.scss

@@ -75,6 +75,13 @@ body.hidden #show-editor-button {
   opacity: 0;
 }
 
+#editor-buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 5px;
+  margin-top: 10px;
+}
+
 .editor-circle-button {
   min-width: 40px;
   height: 40px;
@@ -83,6 +90,7 @@ body.hidden #show-editor-button {
   border-radius: 20px;
   transition: all 150ms ease;
   margin-bottom: 5px;
+  font-weight: bold;
 
   // Center text.
   display: flex;

src/preload.ts

@@ -24,6 +24,9 @@ contextBridge.exposeInMainWorld('api', {
   movePointer: function (dist: { x: number; y: number }) {
     ipcRenderer.send('move-pointer', dist);
   },
+  openURI: function (uri: string) {
+    ipcRenderer.send('open-uri', uri);
+  },
   itemSelected: function () {
     ipcRenderer.send('item-selected');
   },

src/renderer.d.ts

@@ -14,6 +14,7 @@ export interface IElectronAPI {
   showDevTools: () => void;
   simulateShortcut: () => void;
   movePointer: (dist: { x: number; y: number }) => void;
+  openURI: (uri: string) => void;
   itemSelected: () => void;
   log: (message: string) => void;
   showMenu: (func: (pos: { x: number; y: number }) => void) => void;

src/renderer.ts

@@ -49,6 +49,14 @@ document.querySelector('#shortcut-button').addEventListener('click', () => {
   window.api.simulateShortcut();
 });
 
+document.querySelector('#url-button').addEventListener('click', () => {
+  window.api.openURI('https://github.com/kando-menu/kando');
+});
+
+document.querySelector('#uri-button').addEventListener('click', () => {
+  window.api.openURI('file:///');
+});
+
 document.addEventListener('keyup', (ev) => {
   if (ev.key === 'Escape') {
     document.querySelector('body').classList.add('hidden');