@@ -0,0 +1,313 @@ +import { A, useNavigate } from '@solidjs/router'; +import { createQuery, useQueryClient } from '@tanstack/solid-query'; +import { BookPlus, LoaderCircle } from 'lucide-solid'; +import { For, Show, createEffect, createSignal, type Component } from 'solid-js'; + +import { Avatar } from '../../components/common'; +import { createRepo, listUserKnots, listRepoRecords } from '../../lib/api/repos'; +import { resolveActor } from '../../lib/api/identity'; +import { useAuth } from '../../lib/auth'; +import { getErrorMessage } from '../../lib/repo-utils'; + +export const validateRepoName = (name: string): string | null => { + if (name.length === 0) { + return 'repository name cannot be empty'; + } + if (name.length > 100) { + return 'repository name must be 100 characters or fewer'; + } + if (name.includes('/') || name.includes('\\')) { + return 'repository name contains invalid path characters'; + } + if (name.startsWith('.') || name.endsWith('.')) { + return 'repository name contains invalid path sequence'; + } + if (name.includes('..')) { + return 'repository name cannot contain sequential dots'; + } + const validChars = /^[a-zA-Z0-9\-_.]+$/; + if (!validChars.test(name)) { + return 'repository name can only contain alphanumeric characters, periods, hyphens, and underscores'; + } + if (name.toLowerCase() === 'self') { + return 'repository name "self" is reserved'; + } + return null; +}; + +export const NewRepoPage: Component = () => { + const auth = useAuth(); + const navigate = useNavigate(); + const queryClient = useQueryClient(); + + const [name, setName] = createSignal(''); + const [description, setDescription] = createSignal(''); + const [branch, setBranch] = createSignal('main'); + const [selectedKnot, setSelectedKnot] = createSignal(''); + + const [saving, setSaving] = createSignal(false); + const [error, setError] = 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()!), + })); + + // Automatically select the knot if there is only one + createEffect(() => { + const knots = knotsQuery.data; + if (knots && knots.length === 1) { + setSelectedKnot(knots[0]); + } + }); + + const handleSubmit = async (e: SubmitEvent) => { + e.preventDefault(); + const agent = auth.agent(); + if (!agent) return; + + const repoName = name().trim(); + const nameError = validateRepoName(repoName); + if (nameError) { + setError(nameError); + return; + } + + const knot = selectedKnot(); + if (!knot) { + setError('please select a knot.'); + return; + } + + setSaving(true); + setError(null); + + try { + // First check if the repository already exists for this user + const existingRecords = await queryClient.fetchQuery({ + queryKey: ['profile-repos', auth.currentDid()], + queryFn: () => listRepoRecords(auth.currentDid()!), + }); + + const cleanedName = repoName.endsWith('.git') ? repoName.slice(0, -4) : repoName; + const rkey = cleanedName.toLowerCase(); + const exists = existingRecords.some( + (r) => r.rkey === rkey || (r.value.name && r.value.name.toLowerCase() === rkey) + ); + + if (exists) { + setError(`you already have a repository named "${cleanedName}".`); + setSaving(false); + return; + } + + const result = await createRepo(agent, { + name: repoName, + description: description(), + defaultBranch: branch() || 'main', + knot: knot, + }); + + // Invalidate repos query for the current user + await queryClient.invalidateQueries({ + queryKey: ['profile-repos', auth.currentDid()], + }); + + // Navigate to the newly created repository + const handle = viewerQuery.data?.handle || auth.currentDid(); + navigate(`/${handle}/${result.rkey}`); + } catch (err) { + setError(getErrorMessage(err)); + } finally { + setSaving(false); + } + }; + + return ( + + please log in to create a new repository. + + } + > +

create a new repository

+ repositories contain a project's files and version history. all repositories are publicly accessible. +

+ +

+ {error() &&

{error()}

} + + {/* Step 1 */} +

+ 1 +

+ +

general

basic repository information.

+ +

+ {/* Repository Name */} +

+ + REPOSITORY NAME + +

+ + {viewerQuery.data?.handle || auth.currentDid()} +

+ setName(e.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 */} +

+ + DESCRIPTION + + setDescription(e.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 (max 140 characters). +

+ + {/* Step 2 */} +

+ 2 +

+ +

configuration

repository settings and hosting.

+ +

+ {/* Default Branch */} +

+ + DEFAULT BRANCH + + setBranch(e.currentTarget.value)} + required + 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]" + /> +

+ the primary branch where development happens. common choices are "main" or "master". +

+ + {/* Knot Selection */} +

+ + SELECT A KNOT + +

+ loading knots...

} + > + 0} + fallback={

no knots available.

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

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

+ )} + + + +

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

+ +

+ + + ); +};