@@ -0,0 +1,314 @@ +import { A, useNavigate } from '@solidjs/router'; +import { createQuery, useQueryClient } from '@tanstack/solid-query'; +import { GitFork, Info, LoaderCircle } from 'lucide-solid'; +import { For, Match, Show, Switch, createEffect, createMemo, createSignal, type Component } from 'solid-js'; + +import { Avatar, ErrorState, LoadingState, cardStyles } from '../../components/common'; +import { resolveActor } from '../../lib/api/identity'; +import { forkRepo, listRepoRecords, listUserKnots } from '../../lib/api/repos'; +import { useAuth } from '../../lib/auth'; +import { getErrorMessage } from '../../lib/repo-utils'; +import { validateRepoName } from './new'; +import { useRepoQuery } from './shared'; + +export const ForkRepoPage: Component = () => { + const auth = useAuth(); + const navigate = useNavigate(); + const queryClient = useQueryClient(); + const repoQuery = useRepoQuery(); + + const [name, setName] = createSignal(''); + const [description, setDescription] = createSignal(''); + const [selectedKnot, setSelectedKnot] = createSignal(''); + const [saving, setSaving] = createSignal(false); + const [error, setError] = createSignal(null); + const [initializedForRepo, setInitializedForRepo] = createSignal(null); + + const viewerQuery = createQuery(() => ({ + queryKey: ['viewer', auth.currentDid()], + enabled: Boolean(auth.currentDid()), + queryFn: async () => resolveActor(auth.currentDid()!), + })); + + const knotsQuery = createQuery(() => ({ + queryKey: ['knots', auth.currentDid()], + enabled: Boolean(auth.currentDid()), + queryFn: async () => listUserKnots(auth.currentDid()!), + })); + + createEffect(() => { + const repo = repoQuery.data; + if (!repo || initializedForRepo() === repo.repoDid) { + return; + } + + setName(repo.slug); + setDescription(repo.record.value.description ?? ''); + setInitializedForRepo(repo.repoDid); + }); + + createEffect(() => { + const knots = knotsQuery.data; + if (knots && knots.length === 1) { + setSelectedKnot(knots[0]); + } + }); + + const descriptionLength = createMemo(() => description().length); + const viewerLabel = createMemo(() => viewerQuery.data?.handle || auth.currentDid() || ''); + + const handleSubmit = async (event: SubmitEvent) => { + event.preventDefault(); + + const agent = auth.agent(); + const currentDid = auth.currentDid(); + const sourceRepo = repoQuery.data; + if (!agent || !currentDid || !sourceRepo) return; + + const repoName = name().trim(); + const nameError = validateRepoName(repoName); + if (nameError) { + setError(nameError); + return; + } + + if (description().length > 140) { + setError('description must be 140 characters or fewer.'); + return; + } + + const knot = selectedKnot(); + if (!knot) { + setError('please select a knot.'); + return; + } + + setSaving(true); + setError(null); + + try { + const existingRecords = await queryClient.fetchQuery({ + queryKey: ['profile-repos', currentDid], + queryFn: () => listRepoRecords(currentDid), + }); + + const cleanedName = repoName.endsWith('.git') ? repoName.slice(0, -4) : repoName; + const rkey = cleanedName.toLowerCase(); + const exists = existingRecords.some( + (record) => record.rkey.toLowerCase() === rkey || record.value.name?.trim().toLowerCase() === rkey, + ); + + if (exists) { + setError(`you already have a repository named "${cleanedName}".`); + setSaving(false); + return; + } + + const result = await forkRepo(agent, { + sourceRepo, + name: repoName, + description: description(), + knot, + }); + + await Promise.all([ + queryClient.invalidateQueries({ queryKey: ['profile-repos', currentDid] }), + queryClient.invalidateQueries({ queryKey: ['repo-fork-count', sourceRepo.repoDid] }), + ]); + + navigate(`/${viewerLabel() || currentDid}/${result.rkey}`); + } catch (cause) { + setError(getErrorMessage(cause)); + } finally { + setSaving(false); + } + }; + + return ( + + +

+ +

+ + +

+ +

+ + + {(repo) => ( + + please log in to fork this repository. + + } + > +

+ + fork + + + + {repo().owner.handle} + + / + + {repo().slug} + + +

+ +

+ a fork is your own copy of this repository. +
+ use it to work independently, then open a pull request back upstream. +

+ +

+ {error() &&

{error()}

} + +

+ +

details

basic repository information.

+ +

+ + REPOSITORY NAME + +

+ + {viewerLabel()} +

+ setName(event.currentTarget.value)} + required + class="flex-1 md:rounded-r md:rounded-l-none rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 h-[38px]" + placeholder="repository-name" + /> +

+ choose a unique, descriptive name for your repository. use letters, numbers, and hyphens. +

+ +

+ + DESCRIPTION + + setDescription(event.currentTarget.value)} + maxlength="140" + class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 h-[38px]" + placeholder="a brief description of your project..." + /> +

+ optional. a short description to help others understand what your project does ({descriptionLength()}/140 characters). +

+ +

knot selection

repository settings and hosting.

+ +

+ + SELECT A KNOT + +

+ loading knots...

} + > + 0} + fallback={

no knots available.

} + > + + {(knot) => ( +

+ setSelectedKnot(knot)} + class="mr-2 cursor-pointer" + id={`fork-knot-${knot}`} + required + /> + + {knot} + +

+ )} + + + +

+ a knot hosts repository data and handles git operations. you can also{' '} + + register your own knot + + . +

+ +

+ + + )} + + + ); +};