Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169<script lang="ts"> import GitBranch from "$icon/git-branch"; import Logs from "$icon/logs"; import Tags from "$icon/tags"; import TriangleAlert from "$icon/triangle-alert"; import BranchList from "./BranchList.svelte"; import CommitList from "./CommitList.svelte"; import EmptyRepo from "./EmptyRepo.svelte"; import FileTree from "./FileTree.svelte"; import LanguageBar from "./LanguageBar.svelte"; import PanelHeader from "./PanelHeader.svelte"; import Readme from "./Readme.svelte"; import RepoIndexPanelSkeleton from "./RepoIndexPanelSkeleton.svelte"; import RepoReadmeSkeleton from "./RepoReadmeSkeleton.svelte"; import TagList from "./TagList.svelte"; import RepoToolbar from "./RepoToolbar.svelte"; import Pending from "$lib/components/ui/Pending.svelte"; import TabPanel from "$lib/components/ui/TabPanel.svelte"; import type { loadRepoIndex } from "$lib/api/repoIndex"; import type { CommitStatuses } from "$lib/api/commitStatuses"; import type { RepoInfo } from "./types";
interface Props { repo: RepoInfo; data: Awaited<ReturnType<typeof loadRepoIndex>>; bobbinUrl: string; pipelineStatuses?: Promise<CommitStatuses | undefined>; }
let { repo, data, bobbinUrl, pipelineStatuses }: Props = $props();
const base = $derived(`/${repo.ownerHandle}/${repo.name}`);</script>
<Pending> {#snippet skeleton()} <RepoIndexPanelSkeleton /> {/snippet}
{@const content = await data.content} <TabPanel class="relative mx-auto w-full"> {#if content.availability === "needs-upgrade"} <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> <div> <span class="flex items-center justify-center gap-2"> <TriangleAlert class="size-5 shrink-0" aria-hidden="true" /> The knot hosting this repository needs an upgrade. </span> <p class="mt-2"> This repository is currently unavailable. <a href="https://docs.tangled.org/migrating-knots-and-spindles.html" rel="external noopener noreferrer" class="underline">Read the upgrade guide</a > </p> </div> </div> {:else if content.availability === "unreachable"} <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> <span class="flex items-center gap-2"> <TriangleAlert class="size-5 shrink-0" aria-hidden="true" /> The knot hosting this repository is unreachable. </span> </div> {:else if content.availability === "empty"} <EmptyRepo {repo} /> {:else} <!-- fills in silently, it's a thin strip --> <Pending> {@const languages = await data.languages} {#if languages.length > 0} <LanguageBar {languages} /> {/if} </Pending>
<RepoToolbar {repo} ref={content.ref} refs={content.refs} totalCommits={content.totalCommits} totalBranches={content.totalBranches} totalTags={content.totalTags} {bobbinUrl} /> <div class="grid grid-cols-1 gap-2 md:grid-cols-2"> <div class="min-w-0 pr-2 md:border-r md:border-border-default"> <FileTree ownerHandle={repo.ownerHandle} repoName={repo.name} ref={content.ref} entries={content.files} /> </div>
<div class="hidden md:block"> {#if content.commits.length > 0} <div class="border-border-default pr-2 pb-4 md:px-2"> <PanelHeader title="Commits" icon={Logs} href={`${base}/commits/${encodeURIComponent(content.ref)}`} count={content.totalCommits} /> <CommitList ownerHandle={repo.ownerHandle} repoName={repo.name} commits={content.commits} tagsByCommit={content.tagsByCommit} {pipelineStatuses} /> </div> {/if}
{#if content.branches.length > 0} <div class="border-t border-border-default py-4 pr-2 md:px-2"> <PanelHeader title="Branches" icon={GitBranch} href={`${base}/branches`} count={content.totalBranches} approximate={content.refs.capped} /> <BranchList ownerHandle={repo.ownerHandle} repoName={repo.name} currentRef={content.ref} branches={content.branches} /> </div> {/if}
{#if content.tags.length > 0} <div class="border-t border-border-default py-4 pr-2 md:px-2"> <PanelHeader title="Tags" icon={Tags} href={`${base}/tags`} count={content.totalTags} approximate={content.refs.capped} /> <TagList ownerHandle={repo.ownerHandle} repoName={repo.name} tags={content.tags} /> </div> {/if} </div> </div> {/if} </TabPanel></Pending>
<Pending> {#snippet skeleton()} <RepoReadmeSkeleton /> {/snippet}
{@const readme = (await data.content).readme} {#if readme} <Readme filename={readme.filename} contents={readme.contents} html={await data.readmeHtml} /> {/if}</Pending>