add home grid and adjust nav

frontend/src/lib/components/DeviceCard.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Record } from 'pocketbase';
+
+	export let device: Record;
+</script>
+
+<div class="card bg-base-300 shadow-md">
+	<div class="card-body">
+		<h2 class="card-title">{device.name}</h2>
+		<p>{device.ip}</p>
+		<div class="card-actions">
+			<button class="btn btn-sm btn-success">Wake</button>
+			<button class="btn btn-sm btn-error">Shutdown</button>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/Navbar.svelte

@@ -2,9 +2,12 @@
 	import { goto } from '$app/navigation';
 	import { pocketbase } from '$lib/stores/pocketbase';
 	import { settingsPub } from '$lib/stores/settings';
+	import Fa from 'svelte-fa';
+	import { faCog, faHome, faCircleQuestion, faKey } from '@fortawesome/free-solid-svg-icons';
 
-	$: console.log($pocketbase);
-	$: avatar = $pocketbase.authStore?.model?.avatar ? $pocketbase.authStore?.model.avatar : '0';
+	$: avatar = $pocketbase.authStore?.model?.avatar
+		? $pocketbase.authStore?.model.avatar
+		: Math.floor(Math.random() * 9).toString();
 
 	function logout() {
 		$pocketbase.authStore.clear();
@@ -13,8 +16,8 @@
 </script>
 
 <div class="navbar bg-base-100">
-	<div class="flex-1">
-		<a class="btn btn-ghost normal-case text-xl" href="/">
+	<div class="navbar-start">
+		<div class="dropdown">
 			<img
 				src={$settingsPub?.collectionId && $settingsPub?.favicon
 					? `/api/files/settings_public/${$settingsPub?.collectionId}/${$settingsPub?.favicon}`
@@ -23,9 +26,27 @@
 				width="45"
 				height="45"
 			/>{$settingsPub?.website_title ? $settingsPub?.website_title : ''}
-		</a>
+		</div>
 	</div>
-	<div class="flex-none">
+	<div class="navbar-center hidden md:flex">
+		<ul class="menu menu-horizontal px-1">
+			<li><a href="/"><Fa icon={faHome} />Home</a></li>
+			{#if $pocketbase.authStore.model?.collectionName !== 'users'}
+				<li><a href="/"><Fa icon={faKey} />Permissions</a></li>
+				<li><a href="/"><Fa icon={faCog} />Settings</a></li>
+			{/if}
+			<li>
+				<details>
+					<summary><Fa icon={faCircleQuestion} />FAQ</summary>
+					<ul class="p-2 bg-base-300">
+						<li><a href="/">Submenu 1</a></li>
+						<li><a href="/">Submenu 2</a></li>
+					</ul>
+				</details>
+			</li>
+		</ul>
+	</div>
+	<div class="navbar-end">
 		{#if $pocketbase.authStore?.model !== null}
 			<div class="dropdown dropdown-end">
 				<label tabindex="-1" class="btn btn-ghost btn-circle avatar" for="avatar">
@@ -38,12 +59,10 @@
 				</label>
 				<ul
 					tabindex="-1"
-					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-40"
+					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-300 rounded-box w-40"
 				>
 					<li>
-						<a class="justify-between" href="/profile/{$pocketbase.authStore.model?.id}"
-							>Edit profile</a
-						>
+						<a class="justify-between" href="/account">Edit profile</a>
 					</li>
 					<li>
 						<div on:click={() => logout()} on:keydown={() => logout()} role="none">Logout</div>

frontend/src/lib/stores/pocketbase.ts

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import PocketBase from 'pocketbase';
-import type AdminAuthResponse from 'pocketbase';
+import type { Record } from 'pocketbase';
 
 // set backend url based on environment
 export const backendUrl = import.meta.env.DEV ? 'http://127.0.0.1:8090' : '';
@@ -11,3 +11,4 @@ pb.autoCancellation(false);
 
 // export stores
 export const pocketbase = writable(pb);
+export const devices = writable<Record[]>([]);

frontend/src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { pocketbase } from '$lib/stores/pocketbase';
+	import { pocketbase, backendUrl, devices } from '$lib/stores/pocketbase';
 	import { settingsPub } from '$lib/stores/settings';
 	import Navbar from '$lib/components/Navbar.svelte';
 
@@ -37,17 +37,18 @@
 		}
 
 		if ($pocketbase.authStore.model?.collectionName === 'users') {
-			$pocketbase
-				.collection('users')
-				.authRefresh()
-				.catch(() => {
-					$pocketbase.authStore.clear();
-				});
+			$pocketbase.collection('users').authRefresh();
 		} else {
-			$pocketbase.admins.authRefresh().catch(() => {
-				$pocketbase.authStore.clear();
-			});
+			$pocketbase.admins.authRefresh();
 		}
+
+		// fill devices store
+		$pocketbase
+			.collection('devices')
+			.getFullList({ perPage: 1000 })
+			.then((data) => {
+				devices.set(data);
+			});
 	});
 </script>
 
@@ -55,7 +56,7 @@
 	<link
 		rel="shortcut icon"
 		href={$settingsPub?.collectionId && $settingsPub?.favicon
-			? `/api/files/settings_public/${$settingsPub?.collectionId}/${$settingsPub?.favicon}`
+			? `${backendUrl}/api/files/settings_public/${$settingsPub?.collectionId}/${$settingsPub?.favicon}`
 			: '/gopher.svg'}
 	/>
 </svelte:head>
@@ -64,4 +65,6 @@
 	<Navbar />
 {/if}
 
-<slot />
+<div class="container mx-auto">
+	<slot />
+</div>

frontend/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const trailingSlash = 'always';

frontend/src/routes/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import DeviceCard from '$lib/components/DeviceCard.svelte';
+	import { devices } from '$lib/stores/pocketbase';
+</script>
+
+{#each $devices as device}
+	<div
+		class="grid grid-flow-row-dense grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4"
+	>
+		<DeviceCard {device} />
+	</div>
+{:else}
+	<div class="container mx-auto text-center">No devices</div>
+{/each}

frontend/src/routes/account/+page.svelte

@@ -0,0 +1 @@
+account

frontend/svelte.config.js

@@ -11,7 +11,12 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			fallback: 'index.html'
+		}),
+		prerender: {
+			entries: ['/', '/login', '/welcome']
+		}
 	}
 };