Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394<script lang="ts"> import type { Snippet } from "svelte"; import ArrowRight from "$icon/arrow-right"; import ChevronDown from "$icon/chevron-down"; import ChevronRight from "$icon/chevron-right"; import Eye from "$icon/eye"; import type { SvelteMap } from "svelte/reactivity"; import Button from "$lib/components/ui/Button.svelte"; import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte"; import type { CodeViewFile } from "$lib/components/repo/DiffCodeView.svelte";
interface Props { file: CodeViewFile; openState: SvelteMap<string, boolean>; noteState?: SvelteMap<string, string>; note?: string; blobUrl?: string; headerActions?: Snippet<[string]>; onToggle?: () => void; }
let { file, openState, noteState, note, blobUrl, headerActions, onToggle }: Props = $props();
const open = $derived(openState.get(file.key) ?? true); const empty = $derived(file.stat.insertions === 0 && file.stat.deletions === 0); const renamed = $derived( file.oldName != null && file.oldName !== "" && file.oldName !== file.name ); const liveNote = $derived( note ?? noteState?.get(file.key) ?? (empty ? "no changes to the file itself" : undefined) );
const titleClass = "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto px-2.5 py-2 text-left select-none";</script>
<div class={[ "flex justify-between rounded-t-sm border border-border-default bg-background-default transition-colors duration-150 hover:bg-background-subtle", !open && "rounded-b-sm" ]}> {#snippet titleContent()} {#if empty} <span class="size-3.5 shrink-0" aria-hidden="true"></span> {:else if open} <ChevronDown class="size-3.5 shrink-0" aria-hidden="true" /> {:else} <ChevronRight class="size-3.5 shrink-0" aria-hidden="true" /> {/if} <DiffStatPill stat={file.stat} size="small" /> <div class="flex items-center gap-2 overflow-x-auto"> {#if renamed} {file.oldName} <ArrowRight class="size-4" /> {file.name} {:else} <span>{file.name}</span> {/if} </div> {#if liveNote} <span class="typography-paragraph-small text-foreground-muted">{liveNote}</span> {/if} {/snippet}
{#if empty || !onToggle} <div class={titleClass}> {@render titleContent()} </div> {:else} <button type="button" class={[titleClass, "cursor-pointer"]} onclick={() => onToggle?.()}> {@render titleContent()} </button> {/if}
{#if blobUrl || headerActions} <div class="flex shrink-0 items-center pr-1"> {#if blobUrl} <Button href={blobUrl as "/"} variant="ghost" size="small" icon={Eye} class="hidden md:inline-flex" onclick={(event) => event.stopPropagation()} > View file </Button> {/if} {@render headerActions?.(file.key)} </div> {/if}</div>