improve types

desktop/local-app/src/App.svelte

@@ -2,14 +2,14 @@
     import { Router, Route } from "svelte-navigator";
 
     import Sidebar from "~/lib/Sidebar.svelte";
-
     import LazyRoute from "~/lib/LazyRoute.svelte";
+    import { api } from "~/lib/ipc";
 
     const Home = () => import("~/views/Home.svelte");
     const AddServer = () => import("~/views/AddServer.svelte");
     const Settings = () => import("~/views/Settings.svelte");
 
-    let insideElectron = window?.WorkAdventureDesktopApi?.desktop;
+    let insideElectron = api.desktop;
 </script>
 
 {#if insideElectron}

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

@@ -1,5 +1,6 @@
 <script>
     import { navigate } from "svelte-navigator";
+    import { api } from "~/lib/ipc";
 
     let to = "/";
     let clazz = "";
@@ -7,7 +8,7 @@
     export { clazz as class, to };
 
     async function click() {
-        await window?.WorkAdventureDesktopApi?.showLocalApp();
+        await api.showLocalApp();
         navigate(to);
     }
 </script>

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

@@ -2,8 +2,9 @@
     import { onMount } from "svelte";
 
     import Link from "~/lib/Link.svelte";
-    import { servers, selectedServer, selectServer, loadServers, Server } from "../store";
+    import { servers, selectedServer, selectServer, loadServers } from "~/store";
     import CogIcon from "~/assets/nes.icons/cog.svg";
+    import { api } from "~/lib/ipc";
 
     let isDevelopment = false;
 
@@ -26,7 +27,7 @@
 
     onMount(async () => {
         await loadServers();
-        isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment();
+        isDevelopment = await api.isDevelopment();
     });
 </script>
 

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

@@ -0,0 +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;

desktop/local-app/src/store.ts

@@ -1,10 +1,5 @@
 import { writable, get } from "svelte/store";
-
-export type Server = {
-    _id: string;
-    name: string;
-    url: string;
-};
+import { api, Server } from "~/lib/ipc";
 
 export const newServer = writable<Omit<Server, "_id">>({
     name: "",
@@ -14,15 +9,14 @@ export const servers = writable<Server[]>([]);
 export const selectedServer = writable<string | undefined>("");
 
 export async function selectServer(server: Server) {
-    await window.WorkAdventureDesktopApi.selectServer(server._id);
+    await api.selectServer(server._id);
     selectedServer.set(server._id);
 }
 
 export async function addServer() {
-    const addedServer = await window?.WorkAdventureDesktopApi?.addServer(get(newServer));
-    if (!addedServer?._id) {
-        console.log(addedServer);
-        throw new Error(addedServer);
+    const addedServer = await api.addServer(get(newServer));
+    if (addedServer instanceof Error) {
+        throw new Error(addedServer as unknown as string);
     }
     newServer.set({ name: "", url: "" });
     servers.update((s) => [...s, addedServer]);
@@ -30,5 +24,5 @@ export async function addServer() {
 }
 
 export async function loadServers() {
-    servers.set(await window.WorkAdventureDesktopApi.getServers());
+    servers.set(await api.getServers());
 }

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

@@ -17,7 +17,6 @@
 
 <div class="flex w-full h-full justify-center items-center">
     <form class="flex flex-col justify-center" on:submit|preventDefault={_addServer}>
-        <!-- <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required > -->
         <InputField title="Name" id="name">
             <TextInput bind:value={$newServer.name} required id="name" />
         </InputField>

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

@@ -2,11 +2,12 @@
     import { onMount } from "svelte";
 
     import Logo from "~/../../electron/assets/icons/logo.svg";
+    import { api } from "~/lib/ipc";
 
     let version = "";
 
     onMount(async () => {
-        version = await window?.WorkAdventureDesktopApi?.getVersion();
+        version = await api.getVersion();
     });
 </script>
 

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

@@ -1,19 +1,33 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { writable } from "svelte/store";
+    import { writable, get } from "svelte/store";
 
     import ToggleSwitch from "~/lib/ToggleSwitch.svelte";
     import InputField from "~/lib/InputField.svelte";
     import KeyRecord from "~/lib/KeyRecord.svelte";
+    import { api, SettingsData } from "../lib/ipc";
 
-    const shortCuts = writable<Record<string, string> | undefined>({});
+    type ShortCuts = Record<"mute_toggle" | "camera_toggle", string>;
 
-    onMount(async () => {
-        shortCuts.set(await window?.WorkAdventureDesktopApi?.getShortcuts());
+    const shortCuts = writable<ShortCuts>({
+        mute_toggle: "",
+                camera_toggle: "",
     });
 
-    async function saveShortcut(key: string, value: string) {
-        await window?.WorkAdventureDesktopApi?.saveShortcut(key, value);
+    onMount(async () => {
+        const newShortCuts = await api.getSettings()?.["shortcuts"];
+        shortCuts.set({
+            ...get(shortCuts),
+            ...newShortCuts,
+        });
+    });
+
+    async function saveShortcut(key: keyof SettingsData['shortcuts'], value: string) {
+        shortCuts.update((shortCuts) => ({
+            ...shortCuts,
+            [key]: value,
+        }));
+        await api.saveSetting('shortcuts', get(shortCuts));
     }
 </script>
 

desktop/local-app/tsconfig.json

@@ -15,7 +15,8 @@
     "allowJs": true,
     "checkJs": true,
     "paths": {
-      "~/*": ["./*"]
+      "~/*": ["./src/*"],
+      "@wa-preload-local-app": ["../electron/src/preload-local-app/types.ts"],
     }
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],