refactor(webui): use device name in header

Author: rednblkx

data/src/lib/components/NavigationMenu.svelte

@@ -9,6 +9,7 @@
 	import { websocketState } from "$lib/stores/websocket.svelte";
 	import { p } from "sv-router/generated";
 	import { isActiveLink } from 'sv-router';
+    import { systemInfo } from "$lib/stores/system.svelte";
 
 	let { onClose, id } = $props();
 
@@ -30,7 +31,13 @@
 				<img src={logoSrc()} alt="HomeKey-ESP32 logo" class="size-7" />
 			</div>
 			<div class="flex items-start flex-col w-full">
-				<span class="pl-2 text-sm font-bold">HomeKey-ESP32</span>
+				<span class="pl-2 text-sm font-bold">
+          {#if !systemInfo.deviceName}
+            <div class="skeleton h-5 w-32"></div>
+          {:else}
+            {systemInfo.deviceName}
+          {/if}
+        </span>
 				<div class="pl-2 flex items-center gap-1">
 					<div class="inline-grid *:[grid-area:1/1]">
 						<div

data/src/routes/layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '@/app.css';
 	import { onMount, onDestroy } from 'svelte';
-	import { getLoadingState, updateSystemInfo } from '$lib/stores/system.svelte.js';
+	import { getLoadingState, systemInfo, updateSystemInfo } from '$lib/stores/system.svelte.js';
 	import { initTheme, logoSrc } from '$lib/stores/theme.svelte.js';
 	import ws, { type WebSocketEvent } from '$lib/services/ws.js';
 	import Logo from '$lib/assets/favicon.png';
@@ -80,7 +80,13 @@
           </svg>
         </label>
         <div class="flex justify-between w-full">
-          <span class="font-bold text-lg">HomeKey-ESP32</span>
+          <span class="font-bold text-lg">
+            {#if !systemInfo.deviceName}
+              <div class="skeleton h-8 w-32"></div>
+            {:else}
+              {systemInfo.deviceName}
+            {/if}
+          </span>
           <div class="gap-1 pr-2">
             <div class="inline-grid *:[grid-area:1/1]">
               <div class="status animate-ping" class:status-success={websocketState.connected} class:status-error={!websocketState.connected} class:status-warning={websocketState.state == "reconnecting"}></div>