Migrate frontend to Svelte 5 runes semantics

frontend/src/lib/components/layout/Breadcrumbs.svelte

@@ -12,15 +12,17 @@
    * @UX_RECOVERY: Click breadcrumb to navigate
    */
 
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
+  import { fromStore } from "svelte/store";
   import { t, _ } from "$lib/i18n";
   import Icon from "$lib/ui/Icon.svelte";
 
   let { maxVisible = 3 } = $props();
+  const translationState = fromStore(t);
 
   // Breadcrumb items derived from current path
   let breadcrumbItems = $derived(
-    getBreadcrumbs($page?.url?.pathname || "/", maxVisible),
+    getBreadcrumbs(page.url.pathname || "/", maxVisible, translationState.current),
   );
 
   /**
@@ -28,9 +30,9 @@
    * @param {string} pathname - Current path
    * @returns {Array} Array of breadcrumb items
    */
-  function getBreadcrumbs(pathname, maxVisible = 3) {
+  function getBreadcrumbs(pathname, maxVisible = 3, translation = null) {
     const segments = pathname.split("/").filter(Boolean);
-    const allItems = [{ label: $t.nav?.home , path: "/" }];
+    const allItems = [{ label: translation?.nav?.home, path: "/" }];
 
     let currentPath = "";
     segments.forEach((segment, index) => {
@@ -136,7 +138,7 @@
 
 <nav
   class="mx-4 md:mx-6"
-  aria-label={$t.nav?.breadcrumb_nav }
+  aria-label={translationState.current?.nav?.breadcrumb_nav}
 >
   <div class="inline-flex max-w-full items-center gap-1.5 rounded-xl border border-slate-200/80 bg-white/85 px-2 py-1.5 shadow-sm backdrop-blur">
     {#each breadcrumbItems as item, index}