ui: move gh links, add minimum w/h (mistweaverco#32)

* refactor: swap multiple if for if else * feat: add min width/height to window * feat: align all navigation buttons to the left * feat: move gh links to settings page from navbar
cxz · Dec 2, 2024 · d052561 · d052561
1 parent 21496fc
commit d052561
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 57 deletions.
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -53,6 +53,8 @@ async function createWindow(): Promise<void> {
   MAIN_WINDOW = new BrowserWindow({
     width: mainWindowState.width,
     height: mainWindowState.height,
+    minWidth: 400,
+    minHeight: 200,
     x: mainWindowState.x,
     y: mainWindowState.y,
     show: false,

diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte
@@ -39,10 +39,8 @@
 
 {#if $activeView === 'join'}
   <Join />
-{/if}
-{#if $activeView === 'host'}
+{:else if $activeView === 'host'}
   <Host />
-{/if}
-{#if $activeView === 'settings'}
+{:else if $activeView === 'settings'}
   <Settings />
 {/if}
diff --git a/src/renderer/src/Navigation.svelte b/src/renderer/src/Navigation.svelte
@@ -4,37 +4,13 @@
   const isHosting = useIsHosting()
   const isWatching = useIsWatching()
   const navigationEnabled = useNavigationEnabled()
-  const externalLinkClickHandler = (root: HTMLButtonElement, url: string): void => {
-    root.classList.add('is-loading')
-    setTimeout(() => {
-      root.classList.remove('is-loading')
-    }, 3000)
-    window.open(url)
-  }
 
   const handleTopButtonsClick = (evt: MouseEvent): void => {
     evt.preventDefault()
     const target = evt.target as HTMLButtonElement
     const root = target.closest('button')
-    switch (root.dataset.action) {
-      case 'join':
-        $activeView = 'join'
-        break
-      case 'host':
-        $activeView = 'host'
-        break
-      case 'settings':
-        $activeView = 'settings'
-        break
-      case 'report-a-bug':
-        externalLinkClickHandler(root, 'https://github.com/mistweaverco/bananas/issues/new')
-        break
-      case 'see-the-code':
-        externalLinkClickHandler(root, 'https://github.com/mistweaverco/bananas')
-        break
-      default:
-        break
-    }
+
+    $activeView = root.dataset.action
   }
 </script>
 
@@ -84,33 +60,6 @@
           </div>
         </div>
       </div>
-
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <div class="buttons">
-            <button
-              class="button is-secondary"
-              data-action="report-a-bug"
-              on:click={handleTopButtonsClick}
-            >
-              <span class="icon">
-                <i class="fa-solid fa-bug"></i>
-              </span>
-              <strong>Report a bug</strong>
-            </button>
-            <button
-              class="button is-secondary"
-              data-action="see-the-code"
-              on:click={handleTopButtonsClick}
-            >
-              <span class="icon">
-                <i class="fa-solid fa-code"></i>
-              </span>
-              <strong>See the code</strong>
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </nav>
 </div>
diff --git a/src/renderer/src/Settings.svelte b/src/renderer/src/Settings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import ColorPicker from 'svelte-awesome-color-picker'
+  import { externalLinkClickHandler } from './Utils'
 
   let colorPreviewIcon: HTMLElement
   let usernameValue: string = 'Banana Joe'
@@ -16,6 +17,16 @@
   $: usernameValue, checkUsername()
   $: iceServersValue, checkIceServers()
 
+  const GITHUB_REPO_URL = 'https://github.com/mistweaverco/bananas'
+
+  function reportABug(e: MouseEvent & { currentTarget: HTMLButtonElement }): void {
+    externalLinkClickHandler(e.currentTarget, `${GITHUB_REPO_URL}/issues/new`)
+  }
+
+  function seeTheCode(e: MouseEvent & { currentTarget: HTMLButtonElement }): void {
+    externalLinkClickHandler(e.currentTarget, GITHUB_REPO_URL)
+  }
+
   const checkIceServers = (): void => {
     const serversObjects = iceServersValue.split('\n')
     isIceServersValid = serversObjects.every((serverObject) => {
@@ -149,6 +160,21 @@
       </div>
     </div>
   </form>
+
+  <hr />
+
+  <button class="button is-secondary" data-action="report-a-bug" on:click={reportABug}>
+    <span class="icon">
+      <i class="fa-solid fa-bug"></i>
+    </span>
+    <strong>Report a bug</strong>
+  </button>
+  <button class="button is-secondary" data-action="see-the-code" on:click={seeTheCode}>
+    <span class="icon">
+      <i class="fa-solid fa-code"></i>
+    </span>
+    <strong>See the code</strong>
+  </button>
 </div>
 
 <style>

diff --git a/src/renderer/src/Utils.ts b/src/renderer/src/Utils.ts
@@ -5,6 +5,14 @@ export const enum ConnectionType {
 
 export type RTCSessionDescriptionOptions = RTCSessionDescriptionInit
 
+export const externalLinkClickHandler = (root: HTMLButtonElement, url: string): void => {
+  root.classList.add('is-loading')
+  setTimeout(() => {
+    root.classList.remove('is-loading')
+  }, 3000)
+  window.open(url)
+}
+
 export const getUUIDv4 = (): string => {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0