Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140<script lang="ts"> import { resolve } from "$app/paths"; import CheckCheck from "$icon/check-check"; import Download from "$icon/download"; import type { GitHubAccount, GitHubRepo } from "$lib/github"; import type { Draft } from "./gitHubImportState.svelte"; import Button from "$lib/components/ui/Button.svelte"; import RepoConfig from "./RepoConfig.svelte"; import RepoRow from "./RepoRow.svelte"; import Step from "./Step.svelte"; import { isMigratable } from "./gitHubImportState.svelte"; import { isMigrateDisabled, isRepoSelectGated } from "./stepGating";
interface Props { number: number; account: GitHubAccount | null; authorized?: boolean; repos: GitHubRepo[]; drafts: Record<number, Draft>; expanded: Set<number>; allSelected: boolean; migratableCount: number; knotOptions: readonly string[]; disabled: boolean; onSelectAll: (checked: boolean) => void; onSelectRepo: (id: number, checked: boolean) => void; onToggleExpand: (id: number) => void; onUpdateDraft: (id: number, patch: Partial<Draft>) => void; onMigrate: () => void; }
let { number, account, authorized = false, repos, drafts, expanded, allSelected, migratableCount, knotOptions, disabled, onSelectAll, onSelectRepo, onToggleExpand, onUpdateDraft, onMigrate }: Props = $props();
const stepDisabled = $derived(isRepoSelectGated({ account, authorized, disabled })); const migrateDisabled = $derived( isMigrateDisabled({ account, authorized, migratableCount, knotCount: knotOptions.length, disabled }) );</script>
<Step {number} title="Choose & configure repositories" disabled={stepDisabled}> {#snippet action()} {#if repos.length} <button type="button" class="flex cursor-pointer items-center gap-1.5 typography-paragraph-small text-foreground-default disabled:pointer-events-none disabled:opacity-50" disabled={stepDisabled} onclick={() => onSelectAll(!allSelected)} > <CheckCheck class="size-4" aria-hidden="true" /> Select all repositories </button> {/if} {/snippet} {#if account} <div class="rounded-sm border border-border-default"> {#each repos as repo (repo.id)} {@const draft = drafts[repo.id]} {@const locked = stepDisabled || !isMigratable(draft.migration)} <RepoRow {repo} selected={draft.selected} disabled={locked} expanded={expanded.has(repo.id)} knotLabel={draft.knot && (draft.selected || draft.migration.status !== "idle") ? draft.knot : undefined} onToggle={() => onSelectRepo(repo.id, !draft.selected)} onExpand={() => onToggleExpand(repo.id)} language={repo.language ?? undefined} stars={repo.stars ?? undefined} issues={repo.issues ?? undefined} forks={repo.forks ?? undefined} updatedAt={repo.updatedAt ?? undefined} > {#snippet body()} <RepoConfig name={draft.name} description={draft.description} knots={[...knotOptions]} knot={draft.knot} onName={(v) => onUpdateDraft(repo.id, { name: v })} onDescription={(v) => onUpdateDraft(repo.id, { description: v })} onKnot={(v) => onUpdateDraft(repo.id, { knot: v })} disabled={locked} /> {/snippet} </RepoRow> {:else} <p class="p-3 typography-paragraph-small text-foreground-muted"> No public repositories found. </p> {/each} </div> {:else} <p class="typography-paragraph-small text-foreground-muted"> No repositories yet, connect your account first. </p> {/if} {#if knotOptions.length === 0} <p class="mt-3 typography-paragraph-small text-foreground-muted"> No knots are available yet. <a class="underline" href={resolve("/settings/knots")} >Manage your knots</a >. </p> {/if} <div class="mt-4 flex justify-end"> <Button variant="primary" icon={Download} disabled={migrateDisabled} onclick={onMigrate}> {migratableCount === 0 ? "Migrate repositories" : `Migrate ${migratableCount} ${migratableCount === 1 ? "repository" : "repositories"}`} </Button> </div></Step>