Finalize task-020 reports navigation and stability fixes

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

@@ -14,6 +14,7 @@
 
   import { page } from "$app/stores";
   import { t, _ } from "$lib/i18n";
+  import Icon from "$lib/ui/Icon.svelte";
 
   let { maxVisible = 3 } = $props();
 
@@ -82,30 +83,103 @@
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
       .join(" ");
   }
+
+  function getCrumbMeta(item) {
+    if (item.path === "/") {
+      return {
+        icon: "home",
+        tone: "from-sky-100 to-cyan-100 text-sky-700 ring-sky-200",
+      };
+    }
+
+    const segment = item.path.split("/").filter(Boolean).at(-1) || "";
+
+    const map = {
+      dashboards: {
+        icon: "dashboard",
+        tone: "from-sky-100 to-sky-200 text-sky-700 ring-sky-200",
+      },
+      datasets: {
+        icon: "database",
+        tone: "from-emerald-100 to-emerald-200 text-emerald-700 ring-emerald-200",
+      },
+      storage: {
+        icon: "storage",
+        tone: "from-amber-100 to-amber-200 text-amber-800 ring-amber-200",
+      },
+      reports: {
+        icon: "reports",
+        tone: "from-violet-100 to-fuchsia-100 text-violet-700 ring-violet-200",
+      },
+      admin: {
+        icon: "admin",
+        tone: "from-rose-100 to-rose-200 text-rose-700 ring-rose-200",
+      },
+      settings: {
+        icon: "settings",
+        tone: "from-slate-100 to-slate-200 text-slate-700 ring-slate-200",
+      },
+      git: {
+        icon: "storage",
+        tone: "from-orange-100 to-orange-200 text-orange-700 ring-orange-200",
+      },
+    };
+
+    return (
+      map[segment] || {
+        icon: "layers",
+        tone: "from-slate-100 to-slate-200 text-slate-600 ring-slate-200",
+      }
+    );
+  }
 </script>
 
 <nav
-  class="flex items-center space-x-2 text-sm text-gray-600"
+  class="mx-4 md:mx-6"
   aria-label="Breadcrumb navigation"
 >
-  {#each breadcrumbItems as item, index}
-    <div class="flex items-center">
-      {#if item.isEllipsis}
-        <span class="text-gray-400">...</span>
-      {:else if item.isLast}
-        <span class="text-gray-900 font-medium">{item.label}</span>
-      {:else}
-        <a
-          href={item.path}
-          class="hover:text-primary hover:underline cursor-pointer transition-colors"
-          >{item.label}</a
-        >
+  <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}
+      <div class="flex min-w-0 items-center gap-1.5">
+        {#if item.isEllipsis}
+          <span class="px-2 py-1 text-xs font-semibold tracking-wide text-slate-400"
+            >...</span
+          >
+        {:else}
+          {@const meta = getCrumbMeta(item)}
+          {#if item.isLast}
+            <span
+              class="inline-flex min-w-0 items-center gap-2 rounded-lg bg-slate-900 px-2.5 py-1.5 text-sm font-medium text-white"
+            >
+              <span
+                class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white/10"
+              >
+                <Icon name={meta.icon} size={12} strokeWidth={2.1} />
+              </span>
+              <span class="truncate">{item.label}</span>
+            </span>
+          {:else}
+            <a
+              href={item.path}
+              class="inline-flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-slate-700 ring-1 ring-transparent transition-all hover:bg-slate-50 hover:ring-slate-200"
+            >
+              <span
+                class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-gradient-to-br ring-1 {meta.tone}"
+              >
+                <Icon name={meta.icon} size={12} strokeWidth={2.1} />
+              </span>
+              <span class="truncate">{item.label}</span>
+            </a>
+          {/if}
+        {/if}
+      </div>
+      {#if index < breadcrumbItems.length - 1}
+        <span class="text-slate-300">
+          <Icon name="chevronRight" size={14} strokeWidth={2.1} />
+        </span>
       {/if}
-    </div>
-    {#if index < breadcrumbItems.length - 1}
-      <span class="text-gray-400">/</span>
-    {/if}
-  {/each}
+    {/each}
+  </div>
 </nav>
 
 <!-- [/DEF:Breadcrumbs:Component] -->