add desktop api to front

desktop/local-app/index.html

@@ -23,6 +23,10 @@
                 display: flex;
             }
 
+            a:hover {
+                text-decoration: none !important;
+            }
+
             *::-webkit-scrollbar {
                 width: 10px;
                 height: 10px;

desktop/local-app/src/App.svelte

@@ -8,6 +8,7 @@
     const Home = () => import("~/views/Home.svelte");
     const AddServer = () => import("~/views/AddServer.svelte");
     const Settings = () => import("~/views/Settings.svelte");
+    const Server = () => import("~/views/Server.svelte");
 
     let insideElectron = api.desktop;
 </script>
@@ -19,6 +20,7 @@
             <LazyRoute path="/" component={Home} delayMs={500}>Loading ...</LazyRoute>
             <LazyRoute path="/server/add" component={AddServer} delayMs={500}>Loading ...</LazyRoute>
             <LazyRoute path="/settings" component={Settings} delayMs={500}>Loading ...</LazyRoute>
+            <LazyRoute path="/server/:id" component={Server} delayMs={500}>Loading ...</LazyRoute>
             <Route>
                 <h3>404</h3>
                 <p>No Route could be matched.</p>

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;

desktop/local-app/src/store.ts

@@ -6,11 +6,11 @@ export const newServer = writable<Omit<Server, "_id">>({
     url: "",
 });
 export const servers = writable<Server[]>([]);
-export const selectedServer = writable<string | undefined>("");
+export const selectedServer = writable<string>("");
 
-export async function selectServer(server: Server) {
-    await api.selectServer(server._id);
-    selectedServer.set(server._id);
+export async function selectServer(serverId: string) {
+    await api.selectServer(serverId);
+    selectedServer.set(serverId);
 }
 
 export async function addServer() {
@@ -20,7 +20,7 @@ export async function addServer() {
     }
     newServer.set({ name: "", url: "" });
     servers.update((s) => [...s, addedServer]);
-    await selectServer(addedServer);
+    await selectServer(addedServer._id);
 }
 
 export async function loadServers() {

desktop/local-app/src/views/Server.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import { useParams } from "svelte-navigator";
+
+  import { selectServer, servers } from "~/store";
+  import { api } from "~/lib/ipc";
+
+  const params = useParams();
+
+  params.subscribe((_params) => {
+    selectServer(_params.id);
+  });
+
+  onMount(async () => {
+    await selectServer($params.id);
+  });
+
+  onDestroy(async () => {
+    await api.showLocalApp();
+  });
+
+  $: server = $servers.find(({ _id }) => _id === $params.id);
+</script>
+
+<div class="hidden m-auto text-gray-400">Server: "{server.name}"</div>

desktop/local-app/src/window.d.ts

@@ -0,0 +1,7 @@
+import type { WorkAdventureLocalAppApi } from "@wa-preload-local-app";
+
+declare global {
+    interface Window {
+        WAD: WorkAdventureLocalAppApi;
+    }
+}