feat(ux): icons + fix protocol handler

Author: gorillamoe

src/main/index.ts

@@ -1,11 +1,18 @@
 import { app, shell, BrowserWindow, session, desktopCapturer } from 'electron'
+import path from 'path'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { windowStateKeeper } from './stateKeeper'
 import { ipcMainHandlersInit } from './ipcMainHandlers'
 
-app.setAsDefaultProtocolClient('bananas')
+if (process.defaultApp) {
+  if (process.argv.length >= 2) {
+    app.setAsDefaultProtocolClient('bananas', process.execPath, [path.resolve(process.argv[1])])
+  }
+} else {
+  app.setAsDefaultProtocolClient('bananas')
+}
 
 async function createWindow(): Promise<void> {
   const mainWindowState = await windowStateKeeper('main')

src/renderer/src/Host.svelte

@@ -61,7 +61,12 @@
   <div class="form">
     <div class="field">
       <div class="control">
-        <button class="button is-link" bind:this={copyButton}>Copy my connection string</button>
+        <button class="button is-link" bind:this={copyButton}>
+          <span class="icon">
+            <i class="fas fa-copy"></i>
+          </span>
+          <span>Copy my connection string</span>
+        </button>
       </div>
     </div>
 
@@ -91,20 +96,28 @@
 
     <div class="field">
       <div class="control">
-        <button class="button is-link" bind:this={connectButton} disabled>Connect</button>
+        <button class="button is-link" bind:this={connectButton} disabled>
+          <span class="icon">
+            <i class="fas fa-link"></i>
+          </span>
+          <span>Connect</span>
+        </button>
       </div>
     </div>
 
     <div class="field">
       <div class="control">
-        <button bind:this={toggleRemoteCursorsButton} class="button is-warning is-hidden" on:click={toggleRemoteCursors}>
+        <button
+          bind:this={toggleRemoteCursorsButton}
+          class="button is-warning is-hidden"
+          on:click={toggleRemoteCursors}
+        >
           <span class="icon">
             <i class="fas fa-mouse-pointer"></i>
           </span>
           <span>{cursorsActive ? 'Disable remote cursors' : 'Enable remote cursors'}</span>
         </button>
       </div>
     </div>
-
   </div>
 </div>

src/renderer/src/Join.svelte

@@ -93,16 +93,24 @@
 
     <div class="field">
       <div class="control">
-        <button class="button is-link" bind:this={connectButton} disabled>Connect</button>
+        <button class="button is-link" bind:this={connectButton} disabled>
+          <span class="icon">
+            <i class="fas fa-link"></i>
+          </span>
+          <span>Connect</span>
+        </button>
       </div>
     </div>
   </div>
 
   <div class="field">
     <div class="control">
-      <button class="button is-link is-hidden" bind:this={copyButton}
-        >Copy my connection string</button
-      >
+      <button class="button is-link is-hidden" bind:this={copyButton}>
+        <span class="icon">
+          <i class="fas fa-copy"></i>
+        </span>
+        <span>Copy my connection string</span>
+      </button>
     </div>
   </div>