Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202<script module lang="ts"> import { tv } from "tailwind-variants";
const composeTab = tv({ base: "group flex flex-1 flex-col gap-1 rounded-sm p-3 text-left transition-colors disabled:cursor-not-allowed", variants: { active: { true: "cursor-default border border-border-default bg-background-default shadow-xs", false: "border border-transparent hover:bg-background-default/60" } } });</script>
<script lang="ts"> import type { PullSource } from "$lib/api/pullCompose"; import Field from "$lib/components/ui/Field.svelte"; import Select from "$lib/components/ui/Select.svelte"; import Textarea from "$lib/components/ui/Textarea.svelte"; import type { SelectOption } from "$lib/components/ui/selectField";
interface Props { source: PullSource; sourceBranch: string; targetBranch: string; fork: string; targetOptions: SelectOption[]; branchOptions: SelectOption[]; forkBranchOptions: SelectOption[]; forkOptions: SelectOption[]; forkDisabled?: boolean; patch?: string; onSource: (source: PullSource) => void; onTargetBranch: (branch: string) => void; onSourceBranch: (branch: string) => void; onFork: (fork: string) => void; }
let { source, sourceBranch, targetBranch, fork, targetOptions, branchOptions, forkBranchOptions, forkOptions, forkDisabled = false, patch = $bindable(""), onSource, onTargetBranch, onSourceBranch, onFork }: Props = $props();
const tabs: { mode: PullSource; heading: string; description: string; disabled?: boolean; }[] = [ { mode: "branch", heading: "Compare branches", description: "Select a source branch" }, { mode: "fork", heading: "Compare forks", description: "Select a fork and branch as the source" }, { mode: "patch", heading: "Paste patch", description: "Paste a git diff or git format-patch", disabled: true } ];
const branchSearch = { rich: true, searchPlaceholder: "Find a branch…", emptyLabel: "No branch matches" };
const PATCH_PLACEHOLDER = [ "diff --git a/file.txt b/file.txt", "index 1234567..abcdefg 100644", "--- a/file.txt", "+++ b/file.txt" ].join("\n");</script>
<div class="flex flex-col gap-3"> <div class="flex items-center justify-stretch gap-1 rounded-md border border-border-default bg-background-subtle p-1.5" > {#each tabs as tab (tab.mode)} <button type="button" disabled={tab.disabled} class={composeTab({ active: source === tab.mode })} onclick={() => source !== tab.mode && onSource(tab.mode)} > <span class="typography-paragraph-small font-medium text-foreground-default" >{tab.heading}</span ><span class="typography-paragraph-small text-foreground-muted" >{tab.description}</span > </button> {/each} </div>
{#if source === "patch"} <Field label="Merge into" class="max-w-xs"> {#snippet children({ id })} <Select {id} {...branchSearch} label="Merge into" options={targetOptions} value={targetBranch} placeholder={targetBranch ? undefined : "Target branch"} onSelect={onTargetBranch} /> {/snippet} </Field> <div class="flex flex-col gap-2"> <p class="my-0 typography-paragraph-small text-foreground-muted"> You can paste a <code>git diff</code> or a <code>git format-patch</code> patch series here. </p> <Textarea rows={12} bind:value={patch} class="resize-y typography-monospace-regular" placeholder={PATCH_PLACEHOLDER} /> </div> {:else} <div class="flex flex-col gap-3 md:flex-row md:flex-wrap"> <Field label="Merge into" class="min-w-48"> {#snippet children({ id })} <Select {id} {...branchSearch} label="Merge into" options={targetOptions} value={targetBranch} placeholder={targetBranch ? undefined : "Target branch"} onSelect={onTargetBranch} /> {/snippet} </Field>
{#if source === "fork"} <Field label="Pull from" class="min-w-48"> {#snippet children({ id })} <Select {id} options={forkOptions} value={fork} placeholder={fork ? undefined : "Select a fork"} disabled={forkDisabled} onSelect={onFork} /> {/snippet} </Field> {#if fork && forkBranchOptions.length > 0} <Field label="Branch" class="min-w-48"> {#snippet children({ id })} <Select {id} {...branchSearch} label="Branch" options={forkBranchOptions} value={sourceBranch} placeholder={sourceBranch ? undefined : "Source branch"} onSelect={onSourceBranch} /> {/snippet} </Field> {:else} <p class="self-end typography-paragraph-small text-foreground-muted"> Select a fork first to view available branches </p> {/if} {:else} <Field label="Pull from" class="min-w-48"> {#snippet children({ id })} <Select {id} {...branchSearch} label="Pull from" options={branchOptions} value={sourceBranch} placeholder={sourceBranch ? undefined : "Source branch"} onSelect={onSourceBranch} /> {/snippet} </Field> {/if} </div> {/if}</div>