add desktop api to front

desktop/local-app/src/lib/InputField.svelte

@@ -9,7 +9,6 @@
         {title}
     </label>
     <slot />
-    <!-- <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************"> -->
     {#if description.length > 0}
         <p class="text-gray-200 text-xs mt-1 italic">{description}</p>
     {/if}

desktop/local-app/src/lib/Link.svelte

@@ -1,18 +0,0 @@
-<script>
-    import { navigate } from "svelte-navigator";
-    import { api } from "~/lib/ipc";
-
-    let to = "/";
-    let clazz = "";
-
-    export { clazz as class, to };
-
-    async function click() {
-        await api.showLocalApp();
-        navigate(to);
-    }
-</script>
-
-<div on:click={click} class={`${clazz}`}>
-    <slot />
-</div>

desktop/local-app/src/lib/Sidebar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import { Link } from "svelte-navigator";
 
-    import Link from "~/lib/Link.svelte";
-    import { servers, selectedServer, selectServer, loadServers } from "~/store";
+    import { servers, selectedServer, loadServers } from "~/store";
     import CogIcon from "~/assets/nes.icons/cog.svg";
     import { api } from "~/lib/ipc";
 
@@ -34,17 +34,16 @@
 <aside class="flex flex-col bg-gray-700 items-center">
     <div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
         {#each $servers as server, i}
-            <div class="flex flex-col items-center justify-center ">
+            <Link to="/server/{server._id}" class="flex flex-col items-center justify-center ">
                 <div
                     class={`w-16 h-16 p-1 rounded-md flex cursor-pointer text-light-50 border-4 border-transparent text-gray-200 hover:text-gray-500`}
                     class:border-gray-400={$selectedServer === server._id}
-                    on:click={() => selectServer(server)}
                 >
                     <div class={`flex w-full h-full text-center items-center justify-center rounded-md ${getServerColor(i)}`}>
                         {server.name.slice(0,2).toLocaleUpperCase()}
                     </div>
                 </div>
-            </div>
+            </Link>
         {/each}
     </div>
     <Link

desktop/local-app/src/lib/ipc.ts

@@ -1,5 +1,5 @@
 import type { WorkAdventureLocalAppApi, SettingsData, Server } from "@wa-preload-local-app";
 
 export { WorkAdventureLocalAppApi, SettingsData, Server };
-// TODO fix type
-export const api = (window as any)?.WorkAdventureDesktopApi as WorkAdventureLocalAppApi;
+
+export const api = window?.WAD;