Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125<script lang="ts"> import PanelLeftClose from "$icon/panel-left-close"; import ListTree from "$icon/list-tree"; import LoaderCircle from "$icon/loader-circle"; import SquareSplitHorizontal from "$icon/square-split-horizontal"; import SquareSplitVertical from "$icon/square-split-vertical"; import FoldVertical from "$icon/fold-vertical"; import UnfoldVertical from "$icon/unfold-vertical"; import Button from "$lib/components/ui/Button.svelte"; import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte"; import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte"; import PullDiffFileList from "./PullDiffFileList.svelte"; import PullFileTree from "./PullFileTree.svelte"; import type { DiffStyle } from "$lib/components/repo/pierre"; import type { PullDiff, PullDiffDeps } from "$lib/api/pullDiff";
interface Props { deps: PullDiffDeps; // absent while loading and on an error diff?: PullDiff; error?: string; loading?: boolean; }
let { deps, diff, error, loading = false }: Props = $props();
let treeOpen = $state(true); let allOpen = $state(true); let diffStyle = $state<DiffStyle>("unified");</script>
<div class="flex gap-4 rounded-sm border border-border-default bg-background-default px-4 pb-4"> <!-- file tree --> {#if treeOpen} <aside class="sticky top-17 flex max-h-[calc(100vh-5.25rem)] flex-col self-start" style="width: 17rem;" > <div class="sticky top-17 bg-background-default py-4"> <Button icon={PanelLeftClose} onclick={() => (treeOpen = false)} /> </div> <div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small"> {#if diff} <PullFileTree files={diff.files} /> {:else if loading} <span class="text-foreground-subtle"> <LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" /> loading... </span> {/if} </div> </aside> {/if} <!-- diffs --> <div class="min-w-0 flex-1"> <div class="sticky top-17 z-20 flex items-center justify-between bg-background-default py-4" > <div class="flex items-center gap-3"> {#if !treeOpen} <Button icon={ListTree} onclick={() => (treeOpen = true)} /> {/if} {#if diff} <DiffStatPill stat={diff.stat} /> <span class="text-foreground-muted"> {diff.files.length} changed {diff.files.length === 1 ? "file" : "files"} {#if diff.truncated > 0} · {diff.truncated} not rendered {/if} </span> {/if} </div> <div class="flex gap-2"> <Button icon={allOpen ? FoldVertical : UnfoldVertical} title={allOpen ? "Collapse all" : "Expand all"} onclick={() => (allOpen = !allOpen)} /> <ButtonGroup> <Button icon={SquareSplitVertical} title="Unified diff" onclick={() => (diffStyle = "unified")} {...segmentProps(diffStyle !== "split")} > Unified </Button> <Button icon={SquareSplitHorizontal} title="Split diff" onclick={() => (diffStyle = "split")} {...segmentProps(diffStyle === "split")} > Split </Button> </ButtonGroup> </div> </div>
{#if error} <div class="flex min-h-32 items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-4 typography-paragraph-regular text-foreground-danger" > <span>{error}</span> </div> {:else if diff && diff.files.length > 0} <!-- a new diff gets a fresh fill pool by teardown, so a version switch cannot show the previous version's text under a repeated file path --> {#key diff} <PullDiffFileList {deps} {diff} {diffStyle} {allOpen} /> {/key} {:else if diff} <div class="flex min-h-32 items-center justify-center rounded-sm border border-border-default bg-background-info-subtle p-4 typography-paragraph-regular text-foreground-info" > <span>No change between two revisions.</span> </div> {:else} <div class="flex min-h-32 items-center justify-center text-foreground-subtle"> <LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" /> </div> {/if} </div></div>