{#if creatingPart || debug}
{#if optionsForCreatedPart.length === 0}
No folders here. A new one will be created.
{:else}
{#each optionsForCreatedPart as part (part)} {@const isFocused = part === focusedOption}
{ path.push(part); blurDiscards = false; await tick(); await sleep(); blurDiscards = true; creationInput?.focus(); }}>
{/each}
{/if}
{/if}
{#snippet Button(label: string, props: HTMLButtonAttributes & { action?: Action } = {})} {#if props.action}
{label}
{:else}
{label}
{/if} {/snippet} {#snippet pathButton( label: string, i: number, props: HTMLButtonAttributes & { action?: Action } = {} )}
{@render Button(label, { ...props, onpointerdown: props.onclick ?? (async () => { await sleep(); focusedOption = path[i] ?? ''; path = path.slice(0, i); creatingPart = true; }) })}
{/snippet} {@render pathButton('/', 0, { onclick: () => { path.splice(0); focusedOption = ''; } })} {#each path as part, i (i)} {@render pathButton(part, i)} {/each} {#if creatingPart || debug}
{ focusedOption = ''; }} placeholder={(focusedOptionIndex === -1 ? undefined : optionsForCreatedPart[focusedOptionIndex]) ?? 'New folder'} onblur={(e) => { if ( e.relatedTarget instanceof HTMLButtonElement && e.relatedTarget.classList.contains('pathAddBtn') ) { return; } if (blurDiscards) addCreatedPart(); if (blurDiscards) discardCreatedPart(); }} use:keys={{ backspace: (e) => { if (createdPart.length > 0 || path.length === 0) return; e.preventDefault(); const tmp = path.pop()!; if (optionsForCreatedPart.includes(tmp)) { focusedOption = tmp; } else { createdPart = tmp; } } }} onkeydown={(e) => { if (e.key !== '/') return; e.preventDefault(); addCreatedPart(true); }} use:keys={{ preventDefault: true, enter: async (e) => { addCreatedPart(true); await tick(); await sleep(); e.target .closest('.breadcrumbs') ?.querySelector('.pathAddBtn') ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, escape: discardCreatedPart, down: () => { const i = (focusedOptionIndex + 1) % optionsForCreatedPart.length; focusedOption = optionsForCreatedPart[i]; }, up: () => { const i = (focusedOptionIndex - 1 + optionsForCreatedPart.length) % optionsForCreatedPart.length; focusedOption = optionsForCreatedPart[i]; } }} />
{/if}
{@render Button('+', { class: `pathAddBtn`, onclick: async (e) => { if (creatingPart && trimmedCreatedPart) { path.push(trimmedCreatedPart); createdPart = ''; await sleep(); creationInput?.focus(); } blurDiscards = false; creatingPart = true; await tick(); await sleep(); blurDiscards = true; await tick(); await sleep(); // Scroll button into view (e.target as HTMLButtonElement)?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } })}