fix(gui): [BF-59] open external links in default browser

apps/gui/src-tauri/Cargo.toml

@@ -13,7 +13,7 @@ tauri-build = { version = "1.4.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4", features = [ "window-close", "window-hide", "window-unmaximize", "window-start-dragging", "window-maximize", "window-unminimize", "window-show", "window-minimize"] }
+tauri = { version = "1.4", features = [ "shell-open", "window-close", "window-hide", "window-unmaximize", "window-start-dragging", "window-maximize", "window-unminimize", "window-show", "window-minimize"] }
 discord-rich-presence = "0.2.3"
 directories = "5.0.1"
 regex = "1.9.1"

apps/gui/src-tauri/tauri.conf.json

@@ -21,6 +21,13 @@
 				"startDragging": true,
 				"unmaximize": true,
 				"unminimize": true
+			},
+			"shell": {
+				"all": false,
+				"execute": false,
+				"open": true,
+				"scope": [],
+				"sidecar": false
 			}
 		},
 		"bundle": {

apps/gui/src/routes/+page.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+import { open } from '@tauri-apps/api/shell';
+
+</script>
 <div class="flex flex-col items-center justify-center h-full w-full">
 	<div
 		class="flex mb-4 flex-row items-center text-sm font-semibold uppercase tracking-[.125rem] text-[#ffffff66]"
@@ -10,16 +14,16 @@
 		</div>
 	</div>
 
-	<a href="https://discord.gg/U5QXh5zCDz" class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-t-xl rounded-b-md min-w-[240px] mb-1">
+	<button role="link" on:click={() => open('https://discord.gg/U5QXh5zCDz')} class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-t-xl rounded-b-md min-w-[240px] mb-1">
 		<img src="/icons/discord.svg" alt="Discord logo" class="flex mr-2" />
 		Discord
-	</a>
-	<a href="https://x.com/beatforged" class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-md min-w-[240px] mb-1">
+	</button>
+	<button role="link" on:click={() => open('https://x.com/beatforged')} href="" class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-md min-w-[240px] mb-1">
 		<img src="/icons/twitter-x.svg" alt="X logo" class="w-6 h-6 flex mr-2 ml-0.5 opacity-50" />
 		X
-	</a>
-	<a href="https://github.com/beat-forge" class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-t-md rounded-b-xl min-w-[240px]">
+	</button>
+	<button role="link" on:click={() => open('https://github.com/beat-forge')} class="flex flex-row items-center p-4 bg-black-700 hover:bg-black-600 rounded-t-md rounded-b-xl min-w-[240px]">
 		<img src="/icons/github.svg" alt="GitHub logo" class="flex mr-2" />
 		GitHub
-	</a>
+	</button>
 </div>