frontend: mejorar navegación

frontend/src/App.svelte

@@ -15,8 +15,10 @@
     else if (route === "Dump") return Dump;
   }
 
-  $: component = chooseComponent($currentRoute.component) as any;
+  $: r = {
-  $: params = $currentRoute.params as any;
+    component: chooseComponent($currentRoute.component) as any,
+    params: $currentRoute.params as any,
+  };
 </script>
 
-<svelte:component this={component} {params} />
+<svelte:component this={r.component} params={r.params} />

frontend/src/lib/nav/Nav.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { inject } from "regexparam";
+  import ChevronRight from "eva-icons/outline/svg/chevron-right-outline.svg?component";
+  import { routes } from "../router";
+  import Portal from "../routes/Portal.svelte";
+
+  export let params:
+    | { dumpUrl: string }
+    | { dumpUrl: string; portal: string }
+    | { dumpUrl: string; portal: string; id: string };
+
+  function generateDumpName(dumpUrl: string) {
+    const clean = decodeURIComponent(dumpUrl).replace(/\/+$/, "");
+    return clean.slice(clean.lastIndexOf("/") + 1);
+  }
+
+  $: dumpName = generateDumpName(params.dumpUrl);
+</script>
+
+<nav class="flex justify-between m-2">
+  <ol
+    class="flex items-center mb-3 text-sm text-neutral-500 [&_.active-breadcrumb]:text-neutral-600 [&_.active-breadcrumb]:font-medium sm:mb-0"
+  >
+    <li class="flex items-center h-full">
+      <a
+        href={inject(routes.Dump, params)}
+        class="inline-flex items-center px-2 py-1.5 space-x-1.5 rounded-md hover:text-neutral-900 hover:bg-neutral-100"
+      >
+        <span>{dumpName}</span>
+      </a>
+    </li>
+    {#if "portal" in params}
+      <ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
+      <li>
+        <a
+          href={inject(routes.Portal, params)}
+          class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
+        >
+          <span>{params.portal}</span>
+        </a>
+      </li>
+    {/if}
+    {#if "id" in params}
+      <ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
+      <li>
+        <a
+          href={inject(routes.Dataset, params)}
+          class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
+        >
+          <span>{params.id}</span>
+        </a>
+      </li>
+    {/if}
+  </ol>
+</nav>

frontend/src/lib/router.ts

@@ -4,8 +4,8 @@ import { writable } from "svelte/store";
 export const routes = {
   Home: "/",
   Dump: "/dump/:dumpUrl",
-  Portal: "/portal/:portalUrl",
+  Portal: "/dump/:dumpUrl/:portal",
-  Dataset: "/portal/:portalUrl/dataset/:id",
+  Dataset: "/dump/:dumpUrl/:portal/dataset/:id",
 };
 
 export type ComponentType = "NotFound" | keyof typeof routes;

frontend/src/lib/routes/Dataset.svelte

@@ -5,16 +5,19 @@
   import NotFound from "./NotFound.svelte";
   import { inject } from "regexparam";
   import { routes } from "../router";
+  import Nav from "../nav/Nav.svelte";
 
-  export let params: { portalUrl: string; id: string };
+  export let params: { dumpUrl: string; portal: string; id: string };
-  const url = decodeURIComponent(params.portalUrl);
+  $: url = decodeURIComponent(params.dumpUrl) + "/" + params.portal;
 
-  const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
+  $: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
     ([data, errors]) => ({ data, errors }),
   );
 </script>
 
 <main class="mx-auto max-w-3xl">
+  <Nav {params} />
+
   <div class="rounded-lg border bg-white m-2">
     {#await data}
       <p class="p-6">Cargando dataset...</p>
@@ -27,7 +30,10 @@
           <small>
             <a
               class="flex text-blue-500 leading-none gap-1 items-center"
-              href={inject(routes.Portal, { portalUrl: params.portalUrl })}
+              href={inject(routes.Portal, {
+                dumpUrl: params.dumpUrl,
+                portal: params.portal,
+              })}
             >
               <ArrowBack fill="currentColor" class="h-[1.25em]" /> Viendo {data.title}
             </a>

frontend/src/lib/routes/Dump.svelte

@@ -5,9 +5,9 @@
   import { routes } from "../router";
 
   export let params: { dumpUrl: string };
-  const url = decodeURIComponent(params.dumpUrl);
+  $: url = decodeURIComponent(params.dumpUrl);
 
-  const metadataPromise = fetchDumpMetadata(url);
+  $: metadataPromise = fetchDumpMetadata(url);
 </script>
 
 <main class="mx-auto max-w-3xl">
@@ -43,7 +43,8 @@
       <ul class="divide-y divide-gray-100">
         {#each metadata.sites as site}
           {@const portalLink = inject(routes.Portal, {
-            portalUrl: encodeURIComponent(`${url}/${site.path}`),
+            dumpUrl: params.dumpUrl,
+            portal: site.path,
           })}
           <li>
             <div class="flex px-6 py-5 justify-between gap-3">

frontend/src/lib/routes/Portal.svelte

@@ -5,11 +5,12 @@
   import { fetchData, fetchErrors } from "../fetch";
   import { routes } from "../router";
   import type { Dataset } from "common/schema";
+  import Nav from "../nav/Nav.svelte";
 
-  export let params: { portalUrl: string };
+  export let params: { dumpUrl: string; portal: string };
-  const url = decodeURIComponent(params.portalUrl);
+  $: url = `${decodeURIComponent(params.dumpUrl)}/${params.portal}`;
 
-  const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
+  $: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
     ([data, errors]) => ({ data, errors }),
   );
 
@@ -29,6 +30,8 @@
 </script>
 
 <main class="mx-auto max-w-3xl">
+  <Nav {params} />
+
   <div class="rounded-lg border bg-white m-2">
     {#await data}
       <p class="p-6">Cargando..</p>
@@ -70,7 +73,8 @@
       <ul class="divide-y divide-gray-100">
         {#each filterDatasets(data.dataset, query) as dataset}
           {@const datasetLink = inject(routes.Dataset, {
-            portalUrl: params.portalUrl,
+            dumpUrl: params.dumpUrl,
+            portal: params.portal,
             id: dataset.identifier,
           })}
           <li>