ss-tools/frontend/src/lib/components/layout/Breadcrumbs.svelte

<!-- [DEF:Breadcrumbs:Component] -->
<script>
  /**
   * @TIER: STANDARD
   * @PURPOSE: Display page hierarchy navigation
   * @LAYER: UI
   * @RELATION: DEPENDS_ON -> page store
   * @INVARIANT: Always shows current page path
   *
   * @UX_STATE: Idle -> Breadcrumbs showing current path
   * @UX_FEEDBACK: Hover on breadcrumb shows clickable state
   * @UX_RECOVERY: Click breadcrumb to navigate
   */

  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, translationState.current),
  );

  /**
   * Generate breadcrumb items from path
   * @param {string} pathname - Current path
   * @returns {Array} Array of breadcrumb items
   */
  function getBreadcrumbs(pathname, maxVisible = 3, translation = null) {
    const segments = pathname.split("/").filter(Boolean);
    const allItems = [{ label: translation?.nav?.home, path: "/" }];

    let currentPath = "";
    segments.forEach((segment, index) => {
      currentPath += `/${segment}`;
      const label = formatBreadcrumbLabel(segment);
      allItems.push({
        label,
        path: currentPath,
        isLast: index === segments.length - 1,
      });
    });

    if (allItems.length > maxVisible) {
      const firstItem = allItems[0];
      const itemsToShow = [];
      itemsToShow.push(firstItem);
      itemsToShow.push({ isEllipsis: true });

      const startFromIndex = allItems.length - (maxVisible - 1);
      for (let i = startFromIndex; i < allItems.length; i++) {
        itemsToShow.push(allItems[i]);
      }
      return itemsToShow;
    }

    return allItems;
  }

  /**
   * Format segment to readable label
   * @param {string} segment - URL segment
   * @returns {string} Formatted label
   */
  function formatBreadcrumbLabel(segment) {
    const specialCases = {
      dashboards: "nav.dashboard",
      datasets: "nav.tools_mapper",
      storage: "nav.tools_storage",
      admin: "nav.admin",
      settings: "nav.settings",
      git: "nav.git",
    };

    if (specialCases[segment]) {
      return _(specialCases[segment]) || segment;
    }

    return segment
      .split("-")
      .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="mx-4 md:mx-6"
  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}
      <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}
    {/each}
  </div>
</nav>

<!-- [/DEF:Breadcrumbs:Component] -->