fix top level await and fix broken device delete

frontend/src/components/DeviceForm.svelte

@@ -1,6 +1,6 @@
 <script>
     import { goto } from '$app/navigation';
-    import { pocketbase } from '@stores/pocketbase';
+    import { pocketbase, devices } from '@stores/pocketbase';
     import { faEye, faEyeSlash, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
     import Fa from 'svelte-fa';
 
@@ -73,10 +73,11 @@
     async function deleteDevice() {
         deleteButton.state = 'waiting';
         try {
+            await $pocketbase.collection('devices').delete(device.id);
             device.ports.forEach(async (port) => {
                 await $pocketbase.collection('ports').delete(port);
             });
-            await $pocketbase.collection('devices').delete(device.id);
+            delete $devices[device.id];
             goto('/');
         } catch (error) {
             clearTimeout(timeout);

frontend/src/routes/+layout.svelte

@@ -4,9 +4,26 @@
     import { theme } from '@stores/theme';
     import Navbar from '@components/Navbar.svelte';
     import Transition from '@components/Transition.svelte';
+    import { pocketbase, settings, devices } from '@stores/pocketbase';
 
     let preferesDark;
 
+    onMount(async () => {
+        let settingsRes = {};
+        settingsRes = await $pocketbase.collection('settings').getList(1, 1);
+        settings.set(settingsRes.items[0]);
+
+        let tempDevices = {};
+        const devicesRes = await $pocketbase.collection('devices').getFullList(200, {
+            sort: 'name',
+            expand: 'ports'
+        });
+        devicesRes.forEach((device) => {
+            tempDevices[device.id] = device;
+        });
+        devices.set(tempDevices);
+    });
+
     onMount(() => {
         // import bootstrap js
         import('bootstrap/js/dist/dropdown');

frontend/src/routes/device/[id]/+page.svelte

@@ -3,10 +3,15 @@
     import DeviceForm from '@components/DeviceForm.svelte';
 
     export let data;
-    let device = $devices[data.params.id];
-    if (!device?.expand?.ports) {
-        device.expand.ports = [];
+    let device;
+
+    $: {
+        device = $devices[data.params.id];
+        if (device && !device?.expand?.ports) {
+            device.expand.ports = [];
+        }
     }
+    $:;
 </script>
 
 {#if device}

frontend/src/stores/pocketbase.ts

@@ -2,28 +2,19 @@ import { writable } from 'svelte/store';
 import PocketBase from 'pocketbase';
 
 // set backend url based on environment
-let backend_url = '';
+let backend_url = '/';
 let isDevMode = import.meta.env.DEV;
 if (isDevMode) {
     backend_url = 'http://127.0.0.1:8090';
-} else {
-    backend_url = '/';
 }
 
 // get default values for stores
 const pb = new PocketBase(backend_url);
 pb.autoCancellation(false);
-const settingsRes = await pb.collection('settings').getList(1, 1);
-let tempDevices = {};
-const devicesRes = await pb.collection('devices').getFullList(200, {
-    sort: 'name',
-    expand: 'ports'
-});
-devicesRes.forEach((device) => {
-    tempDevices[device.id] = device;
-});
 
 // export stores
 export const pocketbase = writable(pb);
-export const settings = writable(settingsRes.items[0]);
-export const devices = writable(tempDevices);
+export const settings = writable({
+    website_title: ''
+});
+export const devices = writable({});