fnx_web/svelte/src/filesystem/Breadcrumbs.svelte

<script lang="ts">
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { path_link, type FSNavigator } from "./FSNavigator";
import FileMenu from "./filemanager/FileMenu.svelte";
import EditWindow from "./edit_window/EditWindow.svelte";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";

let {
	nav,
	edit_window = null
}: {
	nav: FSNavigator;
	edit_window?: EditWindow;
} = $props();

let file_menu: FileMenu = $state()

onMount(() => {
	return nav.subscribe(nav => {
		breadcrumbs_store.set(breadcrumbs)
	})
})
</script>

{#snippet breadcrumbs()}
	{#each $nav.path as node, i (node.path)}
		<a
			href={"/d"+fs_encode_path(node.path)}
			class="breadcrumb button flat"
			use:path_link={{nav: nav, node: node}}
			oncontextmenu={e => file_menu.open(node, e.target, e)}
		>
			{#if node.abuse_type !== undefined}
				<i class="icon small">block</i>
			{:else if node.is_shared()}
				<i class="icon small">share</i>
			{/if}
			<div class="node_name" class:base={$nav.base_index === i}>
				{node.name}
			</div>
		</a>
		{#if $nav.base_index !== i}
			<i class="icon">chevron_right</i>
		{/if}
	{/each}

	<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
{/snippet}

<style>
.breadcrumb {
	min-width: 1em;
	text-align: center;
	word-break: break-all;
	display: inline-flex;
	flex-direction: row;
	background-color: unset;
	box-shadow: none;
}
.node_name {
	max-width: 20vw;
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.base {
	/* The base name uses all available space */
	max-width: unset;
}
</style>