Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<script lang="ts"> import type { Snippet } from "svelte"; import ArrowRight from "$icon/arrow-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 FileCardHeader from "$lib/components/repo/FileCardHeader.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) );</script>
{#snippet path(name: string)} {@const cut = name.lastIndexOf("/")} <span class="flex min-w-0 flex-1 items-center overflow-hidden"> <span class="min-w-0 truncate">{cut === -1 ? name : name.slice(0, cut)}</span> {#if cut !== -1} <span class="shrink-0">{name.slice(cut)}</span> {/if} </span>{/snippet}
<FileCardHeader {open} collapsible={!empty && onToggle != null} spacer={empty} {onToggle}> {#snippet title()} <DiffStatPill stat={file.stat} size="small" class="shrink-0" /> <div class="flex min-w-0 items-center gap-xs"> {#if renamed} {@render path(file.oldName ?? "")} <ArrowRight class="size-3.5 shrink-0" /> {@render path(file.name)} {:else} {@render path(file.name)} {/if} </div> {#if liveNote} <span class="shrink-0 typography-paragraph-small whitespace-nowrap text-foreground-muted" >{liveNote}</span > {/if} {/snippet}
{#snippet actions()} {#if blobUrl} <Button href={blobUrl as "/"} variant="ghost" size="small" icon={Eye} class="hidden md:inline-flex" > View file </Button> {/if} {@render headerActions?.(file.key)} {/snippet}</FileCardHeader>