@rainlanguage/ui-components 0.0.1-alpha.21 → 0.0.1-alpha.211

package/dist/components/EditableSpan.svelte

@@ -1,15 +1,10 @@
 <script>import { createEventDispatcher } from "svelte";
+import { PenSolid } from "flowbite-svelte-icons";
 export let displayValue;
-let focussed = false;
 let textContent;
 let editableSpan;
 let dispatch = createEventDispatcher();
-const inputFocussed = () => {
-  focussed = true;
-  dispatch("focus");
-};
 const inputBlurred = () => {
-  focussed = false;
   displayValue = textContent;
   dispatch("blur", { value: textContent });
 };
@@ -20,27 +15,21 @@ const handleKeyDown = (event) => {
 };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	data-testid="editableSpanWrapper"
-	on:click={inputFocussed}
-	class="flex gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
+	class="flex items-center gap-x-1 border-b-2 border-dotted text-sm text-gray-400 dark:text-gray-400"
 >
+	<PenSolid class="h-3 w-3 cursor-pointer" />
 	<span>Block:</span>
 	<div class="relative">
 		<span
 			data-testid="editableSpan"
-			class="absolute"
-			class:opacity-0={!focussed}
 			bind:this={editableSpan}
 			bind:textContent
 			contenteditable="true"
 			on:keydown={handleKeyDown}
 			on:blur={inputBlurred}>{displayValue}</span
 		>
-		<span data-testid="displayElement" class="pointer-events-none" class:opacity-0={focussed}
-			>{displayValue}</span
-		>
 	</div>
 </div>

package/dist/components/EditableSpan.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         displayValue: string;
     };
     events: {
-        focus: CustomEvent<any>;
         blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Hash.svelte

@@ -7,7 +7,7 @@
 })(HashType || {});
 </script>
 
-<script>import { Tooltip } from "flowbite-svelte";
+<script>import Tooltip from "./Tooltip.svelte";
 import {
   WalletOutline,
   FingerprintOutline,
@@ -60,7 +60,7 @@ function copy(e) {
 {#if showCopiedMessage}
 	<div
 		out:fade
-		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white shadow"
+		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white"
 		style="top: {cursorY + 10}px; left: {cursorX + 10}px"
 	>
 		Copied to clipboard
@@ -68,7 +68,7 @@ function copy(e) {
 {/if}
 
 {#if shorten}
-	<Tooltip triggeredBy={`#${id}`} class="z-20 whitespace-normal">
+	<Tooltip triggeredBy={`#${id}`}>
 		<div class="flex items-center justify-start space-x-2">
 			{#if type === HashType.Wallet}
 				<WalletOutline size="sm" />

package/dist/components/License.svelte

@@ -2,19 +2,20 @@
 	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
 	import Markdown from 'svelte-markdown';
 	import { onMount } from 'svelte';
+	import { LICENSE_URL } from '../consts';
 
 	let source = '';
 
 	onMount(async () => {
 		try {
-			const response = await fetch(
-				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
-			);
+			const response = await fetch(LICENSE_URL);
 			if (response.ok) {
 				source = await response.text();
+			} else {
+				source = `Failed to fetch license: HTTP ${response.status}`;
 			}
 		} catch {
-			source = '';
+			source = 'Failed to fetch license.';
 		}
 	});
 </script>

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,41 +1,51 @@
-<script generics="T">import { isEmpty } from "lodash";
-import { Alert, Tooltip } from "flowbite-svelte";
-import DropdownActiveSubgraphs from "./dropdown/DropdownActiveSubgraphs.svelte";
-import DropdownOrderStatus from "./dropdown/DropdownOrderStatus.svelte";
+<script>import { useRaindexClient } from "../hooks/useRaindexClient";
+import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
+import { page } from "$app/stores";
+import { isEmpty } from "lodash";
+import { Alert } from "flowbite-svelte";
+import Tooltip from "./Tooltip.svelte";
+import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
+import DropdownTokensFilter from "./dropdown/DropdownTokensFilter.svelte";
+import DropdownOrderbooksFilter from "./dropdown/DropdownOrderbooksFilter.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
+import CheckboxInactiveOrdersVault from "./CheckboxInactiveOrdersVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
-export let settings;
-export let accounts;
+import { useAccount } from "../providers/wallet/useAccount";
 export let hideZeroBalanceVaults;
+export let hideInactiveOrdersVaults;
 export let activeAccountsItems;
 export let showMyItemsOnly;
-export let activeSubgraphs;
-export let activeOrderStatus;
+export let selectedChainIds;
+export let showInactiveOrders;
 export let orderHash;
-export let isVaultsPage;
-export let isOrdersPage;
-export let signerAddress;
+export let activeTokens;
+export let selectedTokens;
+export let tokensQuery;
+export let activeOrderbookAddresses;
+export let selectedOrderbookAddresses;
+$: isVaultsPage = $page.url.pathname === "/vaults";
+$: isOrdersPage = $page.url.pathname === "/orders";
+const { account } = useAccount();
+const raindexClient = useRaindexClient();
+$: networks = raindexClient.getAllNetworks();
+$: accounts = raindexClient.getAllAccounts();
 </script>
 
 <div
 	class="grid w-full items-center gap-4 md:flex md:justify-end lg:min-w-[600px]"
 	style="grid-template-columns: repeat(2, minmax(0, 1fr));"
 >
-	{#if isEmpty($settings?.networks)}
+	{#if networks.error || isEmpty(networks.value)}
 		<Alert color="gray" data-testid="no-networks-alert" class="w-full">
 			No networks added to <a class="underline" href="/settings">settings</a>
 		</Alert>
 	{:else}
-		{#if $accounts && !Object.values($accounts).length}
+		{#if !accounts.error && accounts.value.size === 0}
 			<div class="mt-4 w-full lg:w-auto" data-testid="my-items-only">
-				<CheckboxMyItemsOnly
-					context={isVaultsPage ? 'vaults' : 'orders'}
-					{showMyItemsOnly}
-					{signerAddress}
-				/>
-				{#if !$signerAddress}
+				<CheckboxMyItemsOnly context={isVaultsPage ? 'vaults' : 'orders'} {showMyItemsOnly} />
+				{#if !$account}
 					<Tooltip>Connect a wallet to filter by {isVaultsPage ? 'vault' : 'order'} owner</Tooltip>
 				{/if}
 			</div>
@@ -44,15 +54,27 @@ export let signerAddress;
 			<div class="mt-4 w-full lg:w-auto">
 				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
 			</div>
+			<div class="mt-4 w-full lg:w-auto">
+				<CheckboxInactiveOrdersVault {hideInactiveOrdersVaults} />
+			</div>
 		{/if}
 
 		{#if isOrdersPage}
 			<InputOrderHash {orderHash} />
-			<DropdownOrderStatus {activeOrderStatus} />
+			<div class="mt-4">
+				<CheckboxActiveOrders {showInactiveOrders} />
+			</div>
 		{/if}
-		{#if $accounts && Object.values($accounts).length > 0}
-			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
+		{#if !accounts.error && accounts.value.size > 0}
+			<DropdownOrderListAccounts {activeAccountsItems} />
 		{/if}
-		<DropdownActiveSubgraphs settings={$settings} {activeSubgraphs} />
+		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
+		<DropdownOrderbooksFilter
+			{activeOrderbookAddresses}
+			{selectedOrderbookAddresses}
+			selectedChainIds={$selectedChainIds}
+			label="Orderbooks"
+		/>
+		<DropdownActiveNetworks {selectedChainIds} />
 	{/if}
 </div>

package/dist/components/ListViewOrderbookFilters.svelte.d.ts

@@ -1,28 +1,33 @@
 import { SvelteComponent } from "svelte";
-import type { Readable, Writable } from 'svelte/store';
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
-declare class __sveltets_Render<T> {
-    props(): {
-        settings: Writable<ConfigSource | undefined>;
-        accounts: Readable<Record<string, string>> | undefined;
-        hideZeroBalanceVaults: Writable<boolean>;
-        activeAccountsItems: Writable<Record<string, string>> | undefined;
-        showMyItemsOnly: Writable<boolean>;
-        activeSubgraphs: Writable<Record<string, string>>;
-        activeOrderStatus: Writable<boolean | undefined>;
-        orderHash: Writable<string>;
-        isVaultsPage: boolean;
-        isOrdersPage: boolean;
-        signerAddress: Writable<string | null> | undefined;
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import type { Readable } from 'svelte/store';
+import type { Address, RaindexVaultToken } from '@rainlanguage/orderbook';
+import type { AppStoresInterface } from '../types/appStores';
+declare const __propDef: {
+    props: {
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"];
+        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+        orderHash: AppStoresInterface["orderHash"];
+        activeTokens: AppStoresInterface["activeTokens"];
+        selectedTokens: Address[];
+        tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
+        activeOrderbookAddresses: AppStoresInterface["activeOrderbookAddresses"];
+        selectedOrderbookAddresses: Address[];
     };
-    events(): {} & {
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {};
-}
-export type ListViewOrderbookFiltersProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type ListViewOrderbookFiltersEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type ListViewOrderbookFiltersSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class ListViewOrderbookFilters<T> extends SvelteComponent<ListViewOrderbookFiltersProps<T>, ListViewOrderbookFiltersEvents<T>, ListViewOrderbookFiltersSlots<T>> {
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ListViewOrderbookFiltersProps = typeof __propDef.props;
+export type ListViewOrderbookFiltersEvents = typeof __propDef.events;
+export type ListViewOrderbookFiltersSlots = typeof __propDef.slots;
+export default class ListViewOrderbookFilters extends SvelteComponent<ListViewOrderbookFiltersProps, ListViewOrderbookFiltersEvents, ListViewOrderbookFiltersSlots> {
 }
 export {};

package/dist/components/LocalDbStatusBadge.svelte

@@ -0,0 +1,27 @@
+<script>const STATUS_LABELS = {
+  active: "Active",
+  syncing: "Syncing",
+  failure: "Failure"
+};
+const DOT_CLASSES = {
+  active: "bg-emerald-400",
+  syncing: "bg-sky-400",
+  failure: "bg-red-500"
+};
+const TEXT_CLASSES = {
+  active: "text-emerald-400",
+  syncing: "text-sky-400",
+  failure: "text-red-400"
+};
+export let status = "active";
+</script>
+
+<span
+	class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+	data-testid="local-db-status"
+>
+	<span class={`h-2 w-2 rounded-full ${DOT_CLASSES[status]}`} aria-hidden="true" />
+	<span class={TEXT_CLASSES[status]}>
+		{STATUS_LABELS[status]}
+	</span>
+</span>

package/dist/components/LocalDbStatusBadge.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { LocalDbStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        status?: LocalDbStatus;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusBadgeProps = typeof __propDef.props;
+export type LocalDbStatusBadgeEvents = typeof __propDef.events;
+export type LocalDbStatusBadgeSlots = typeof __propDef.slots;
+export default class LocalDbStatusBadge extends SvelteComponent<LocalDbStatusBadgeProps, LocalDbStatusBadgeEvents, LocalDbStatusBadgeSlots> {
+}
+export {};

package/dist/components/LocalDbStatusCard.svelte

@@ -0,0 +1,40 @@
+<script>import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import LocalDbStatusModal from "./LocalDbStatusModal.svelte";
+import { ChevronRightOutline } from "flowbite-svelte-icons";
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let orderbookStatuses = /* @__PURE__ */ new Map();
+let modalOpen = false;
+$: networkList = Array.from(networkStatuses.values());
+$: hasNetworks = networkList.length > 0;
+$: hasFailure = networkList.some((s) => s.status === "failure");
+$: displayStatus = hasFailure ? "failure" : "active";
+function openModal() {
+  modalOpen = true;
+}
+</script>
+
+<div
+	class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+	data-testid="local-db-status-card"
+>
+	<button
+		type="button"
+		class="flex w-full items-center justify-between px-3 py-3 text-left transition hover:bg-gray-50 dark:hover:bg-gray-800"
+		on:click={openModal}
+		data-testid="local-db-status-header"
+	>
+		<div class="flex items-center gap-2">
+			<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+				>LocalDB</span
+			>
+		</div>
+		<div class="flex items-center gap-2">
+			<LocalDbStatusBadge status={displayStatus} />
+			{#if hasNetworks}
+				<ChevronRightOutline class="h-3 w-3 shrink-0" />
+			{/if}
+		</div>
+	</button>
+</div>
+
+<LocalDbStatusModal bind:open={modalOpen} {networkStatuses} {orderbookStatuses} />

package/dist/components/LocalDbStatusCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusCardProps = typeof __propDef.props;
+export type LocalDbStatusCardEvents = typeof __propDef.events;
+export type LocalDbStatusCardSlots = typeof __propDef.slots;
+export default class LocalDbStatusCard extends SvelteComponent<LocalDbStatusCardProps, LocalDbStatusCardEvents, LocalDbStatusCardSlots> {
+}
+export {};

package/dist/components/LocalDbStatusModal.svelte

@@ -0,0 +1,103 @@
+<script>import { Modal } from "flowbite-svelte";
+import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import { getNetworkName } from "../utils/getNetworkName";
+export let open = false;
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let orderbookStatuses = /* @__PURE__ */ new Map();
+$: networkList = Array.from(networkStatuses.values());
+$: orderbookList = Array.from(orderbookStatuses.values());
+$: networkGroups = buildNetworkGroups(networkList, orderbookList);
+function buildNetworkGroups(networks, orderbooks) {
+  const groups = [];
+  for (const network of networks) {
+    const networkOrderbooks = orderbooks.filter((ob) => ob.obId.chainId === network.chainId);
+    groups.push({
+      chainId: network.chainId,
+      networkName: getNetworkName(network.chainId) ?? `Chain ${network.chainId}`,
+      status: network,
+      orderbooks: networkOrderbooks
+    });
+  }
+  return groups;
+}
+</script>
+
+<Modal
+	bind:open
+	size="lg"
+	class="dark:border dark:border-gray-700 dark:bg-gray-900"
+	dialogClass="fixed top-0 start-0 end-1 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex justify-center items-center h-full"
+	data-testid="local-db-status-modal"
+>
+	<div class="flex flex-col gap-4" slot="header">
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Database Sync Status</h3>
+	</div>
+
+	<div class="max-h-[60vh] overflow-y-auto">
+		{#if networkList.length === 0}
+			<p class="text-sm text-gray-500 dark:text-gray-400">No networks are being synced.</p>
+		{:else}
+			<div class="space-y-4">
+				{#each networkGroups as group (group.chainId)}
+					<div
+						class="rounded-lg border border-gray-200 dark:border-gray-700"
+						data-testid="network-group-{group.chainId}"
+					>
+						<div
+							class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800"
+						>
+							<div class="flex items-center gap-2">
+								<span class="font-medium text-gray-900 dark:text-white">{group.networkName}</span>
+								{#if group.status.schedulerState === 'notLeader'}
+									<span
+										class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+									>
+										Observing
+									</span>
+								{/if}
+							</div>
+							<LocalDbStatusBadge status={group.status.status} />
+						</div>
+
+						{#if group.orderbooks.length > 0}
+							<ul class="divide-y divide-gray-100 dark:divide-gray-800">
+								{#each group.orderbooks as obStatus (obStatus.obId.orderbookAddress)}
+									<li class="px-4 py-3">
+										<div class="flex items-start justify-between gap-4">
+											<div class="min-w-0 flex-1">
+												<span
+													class="font-mono text-sm text-gray-700 dark:text-gray-300"
+													title={obStatus.obId.orderbookAddress}
+												>
+													{obStatus.obId.orderbookAddress}
+												</span>
+												{#if obStatus.status === 'syncing' && obStatus.phaseMessage && obStatus.schedulerState !== 'notLeader'}
+													<div class="mt-2 text-sm text-sky-600 dark:text-sky-400">
+														{obStatus.phaseMessage}
+													</div>
+												{/if}
+												{#if obStatus.status === 'failure' && obStatus.error}
+													<div class="mt-2 text-sm text-red-600 dark:text-red-400">
+														{obStatus.error}
+													</div>
+												{/if}
+											</div>
+										</div>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+
+						{#if group.status.status === 'failure' && group.status.error}
+							<div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
+								<div class="text-sm text-red-600 dark:text-red-400">
+									{group.status.error}
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</Modal>

package/dist/components/LocalDbStatusModal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusModalProps = typeof __propDef.props;
+export type LocalDbStatusModalEvents = typeof __propDef.events;
+export type LocalDbStatusModalSlots = typeof __propDef.slots;
+export default class LocalDbStatusModal extends SvelteComponent<LocalDbStatusModalProps, LocalDbStatusModalEvents, LocalDbStatusModalSlots> {
+}
+export {};

package/dist/components/OrderOrVaultHash.svelte

@@ -1,24 +1,24 @@
 <script>import { Button } from "flowbite-svelte";
 import Hash, { HashType } from "./Hash.svelte";
+import {
+  constructHashLink,
+  isOrderOrVaultActive,
+  extractHash
+} from "../utils/constructHashLink";
 export let orderOrVault;
 export let type;
-export let network;
-export let updateActiveNetworkAndOrderbook;
-let hash;
-$: isOrder = "orderHash" in (orderOrVault || {});
-$: slug = isOrder ? orderOrVault.orderHash : orderOrVault?.id;
-$: hash = isOrder ? orderOrVault.orderHash : orderOrVault?.id || "";
-$: isActive = isOrder ? orderOrVault.active : false;
+export let chainId;
+export let orderbookAddress;
+$: hash = extractHash(orderOrVault);
+$: isActive = isOrderOrVaultActive(orderOrVault);
+$: linkPath = constructHashLink(orderOrVault, type, chainId, orderbookAddress);
 </script>
 
-<a href={`/${type}/${network}-${slug}`}>
+<a data-testid="order-or-vault-hash" href={linkPath}>
 	<Button
 		class="mr-1 mt-1 px-2 py-1 text-sm"
 		color={isActive ? 'green' : 'yellow'}
 		data-testid="vault-order-input"
-		data-id={slug}
-		on:click={() => {
-			updateActiveNetworkAndOrderbook(network);
-		}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
+		data-id={hash}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
 	>
 </a>

package/dist/components/OrderOrVaultHash.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook/js_api';
+import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        orderOrVault: SgOrder | SgVault | SgOrderAsIO;
+        orderOrVault: RaindexVault | RaindexOrder | RaindexOrderAsIO;
         type: "orders" | "vaults";
-        network: string;
-        updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+        chainId: number;
+        orderbookAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/PageHeader.svelte

@@ -5,7 +5,7 @@ export let pathname;
 $: breadcrumbs = generateBreadcrumbs(pathname);
 </script>
 
-<div class="mb-4 flex w-full items-center justify-between">
+<div class="mb-4 flex w-full items-center justify-between" data-testid="page-header">
 	<Breadcrumb
 		olClass="inline-flex items-center rtl:space-x-reverse"
 		aria-label="Default breadcrumb example"