import clsx from 'clsx'; import DOMPurify from 'dompurify'; import hljs from 'highlight.js/lib/common'; import { Check, Copy, Download, ExternalLink, FileText, File, Square, SquareCheckBig, BookMarked, GitFork, Star, CircleDot, GitPullRequest, LoaderCircle, MessageSquarePlus, Reply, X, } from 'lucide-solid'; import { useAuth } from '../lib/auth'; import { resolveActor } from '../lib/api/identity'; import { marked } from 'marked'; import { A, useNavigate, useLocation } from '@solidjs/router'; import { For, Show, createMemo, createSignal, createEffect, onCleanup, onMount, type Component, type JSX } from 'solid-js'; import type { RepoContext, TreeEntry } from '../lib/api/repos'; import type { Did } from '@atcute/lexicons/syntax'; import { createQuery } from '@tanstack/solid-query'; import { getRepo, getRepoLanguages, getRepoForkCount, getRepoByDid } from '../lib/api/repos'; import { getRepoStarCount } from '../lib/api/stars'; import { getRepoIssueCount } from '../lib/api/issues'; import { getRepoPullCount } from '../lib/api/pulls'; import { formatRelativeTime, languageColor, encodePath, formatLanguagePercent, blobHref, treeHref, getErrorMessage } from '../lib/repo-utils'; import { getTangledAppviewService } from '../lib/settings'; import { Avatar, SkeletonBlock, StateBadge, PlaceholderAvatar, buttonStyles, cardStyles, textareaStyles } from './common'; import { useRepoPreloader } from '../lib/preloading'; marked.setOptions({ gfm: true, breaks: false, }); marked.use({ renderer: { code({ text, lang }) { const validLanguage = lang && hljs.getLanguage(lang) ? lang : 'plaintext'; const highlighted = hljs.highlight(text, { language: validLanguage }).value; return `
${highlighted}
`; }, }, }); DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => { if (data.attrName === 'class') { const classes = data.attrValue.split(/\s+/); const filtered = classes.filter( (cls) => cls === 'hljs' || cls.startsWith('hljs-') || cls.startsWith('language-'), ); if (filtered.length > 0) { data.attrValue = filtered.join(' '); } else { return (data.keepAttr = false); } } }); export const RepoTabLink: Component<{ active: boolean; href: string; icon: JSX.Element; label: string; meta?: string; reserveMeta?: boolean; }> = (props) => (
{props.icon} {props.label} {props.meta ?? '0'}
); const skeletonRows = Array.from({ length: 7 }); const listSkeletonRows = Array.from({ length: 10 }); const skeletonCodeLines = Array.from({ length: 18 }); const prFileTreeSkeletonRows = Array.from({ length: 8 }); const prDiffFileSkeletons = Array.from({ length: 2 }); const prDiffCodeLines = Array.from({ length: 8 }); export const RepoLanguageBarSkeleton: Component = () => ( ); export const TreeRowsSkeleton: Component = () => (
{(_, index) => (
)}
); export const RepoOverviewSidebarSkeleton: Component = () => (
{(_, index) => (
)}
); export const RepoTreeSkeleton: Component<{ nested?: boolean }> = (props) => ( <>
); export const RepoBlobSkeleton: Component = () => (
{(_, index) => (
)}
); export const RepoListSkeleton: Component<{ kind: 'issues' | 'pulls' }> = (props) => (
{(_, index) => (
)}
); export const RepoListPageSkeleton: Component<{ kind: 'issues' | 'pulls'; showCreate?: boolean; }> = (props) => ( <>
); export const RepoFormSkeleton: Component<{ titleWidth?: string }> = (props) => (
); export const PullComposeSkeleton: Component = () => (
{(_, index) => (
)}
); const IssueThreadSkeleton: Component = () => (
); const PullHeaderSkeleton: Component = () => (
); export const PullDiffSkeleton: Component = () => (
{(_, fileIndex) => (
{(_, index) => (
)}
)}
); const PullThreadSkeleton: Component = () => (
); export const RepoThreadSkeleton: Component<{ kind: 'issue' | 'pull' }> = (props) => ( }> ); const defaultRepoFrameSkeletonContent = (active: 'code' | 'issues' | 'pulls') => active === 'code' ? : ; export const RepoFrameSkeleton: Component<{ active: 'code' | 'issues' | 'pulls'; children?: JSX.Element; }> = (props) => ( <>
{props.children ?? defaultRepoFrameSkeletonContent(props.active)}
); export const OverviewFileRow: Component<{ name: string; href: string; icon: JSX.Element; lastCommit?: TreeEntry['last_commit']; lastCommitHref?: string; class?: string; onMouseEnter?: JSX.EventHandlerUnion; onMouseLeave?: JSX.EventHandlerUnion; onClick?: JSX.EventHandlerUnion; }> = (props) => (
{props.icon} {props.name} {(when) => ( {formatRelativeTime(when())}} > {(href) => ( {formatRelativeTime(when())} )} )}
); export const FileRow: Component<{ name: string; href: string; icon: JSX.Element; lastCommit?: TreeEntry['last_commit']; lastCommitHref?: string; commitMessage?: string; }> = (props) => (
{props.icon} {props.name}
{(when) => ( {formatRelativeTime(when())}}> {(href) => ( {formatRelativeTime(when())} )} )}
); export const ReadmeCard: Component<{ filename?: string; markdown: string; repo?: RepoContext; refName?: string; path?: string; }> = (props) => (
{props.filename}
); const cloneSshHost = (repo: RepoContext): string => { try { const host = new URL(repo.knot).hostname; return host === 'knot1.tangled.sh' ? 'tangled.org' : host; } catch { const host = repo.knot.replace(/^https?:\/\//, '').split('/')[0].replace(/:\d+$/, ''); return host === 'knot1.tangled.sh' ? 'tangled.org' : host; } }; const appviewArchiveUrl = (repo: RepoContext, refName: string): string => { const owner = encodeURIComponent(repo.owner.handle); const slug = encodeURIComponent(repo.slug); const ref = encodeURIComponent(refName); return new URL(`/${owner}/${slug}/archive/${ref}`, getTangledAppviewService()).toString(); }; const selectContents = (element: HTMLElement) => { const selection = window.getSelection(); if (!selection) return; const range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); }; const CloneUrlItem: Component<{ label: string; handleUrl: string; permaUrl: string; permalink: boolean; }> = (props) => { const [copied, setCopied] = createSignal(false); const visibleUrl = createMemo(() => (props.permalink ? props.permaUrl : props.handleUrl)); let copyTimer: ReturnType | undefined; onCleanup(() => clearTimeout(copyTimer)); const copy = () => { clearTimeout(copyTimer); void navigator.clipboard?.writeText(visibleUrl()); setCopied(true); copyTimer = setTimeout(() => setCopied(false), 2000); }; return (
selectContents(event.currentTarget)} title={visibleUrl()} > {visibleUrl()}
); }; export const CloneDropdown: Component<{ repo: RepoContext; refName: string }> = (props) => { const [open, setOpen] = createSignal(false); const [permalink, setPermalink] = createSignal(false); const sshHost = createMemo(() => cloneSshHost(props.repo)); let root: HTMLDivElement | undefined; onMount(() => { const closeOnOutsideClick = (event: MouseEvent) => { if (!open() || !root || root.contains(event.target as Node)) return; setOpen(false); }; const closeOnEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', closeOnOutsideClick); document.addEventListener('keydown', closeOnEscape); onCleanup(() => { document.removeEventListener('mousedown', closeOnOutsideClick); document.removeEventListener('keydown', closeOnEscape); }); }); return (
); }; export const CommentCard: Component<{ author: string; did: string; createdAt: string; markdown: string; replyDid?: string | null; variant?: 'default' | 'issue'; }> = (props) => (
{props.author} · {formatRelativeTime(props.createdAt)}
} >
{props.author} · {formatRelativeTime(props.createdAt)}
{(did) => (
Leave a reply...
)}
); export const resolveRelativePath = (currentPath: string, relativePath: string): string => { let normalized = relativePath; if (normalized.startsWith('/')) { normalized = normalized.slice(1); currentPath = ''; } if (normalized.startsWith('./')) { normalized = normalized.slice(2); } if (!currentPath) { return normalized; } const currentSegments = currentPath.split('/').filter(Boolean); const relativeSegments = normalized.split('/'); for (const segment of relativeSegments) { if (segment === '..') { currentSegments.pop(); } else if (segment !== '.' && segment !== '') { currentSegments.push(segment); } } return currentSegments.join('/'); }; export const MarkdownBlock: Component<{ markdown: string; variant?: 'default' | 'readme' | 'code'; repo?: RepoContext; refName?: string; path?: string; }> = (props) => { const navigate = useNavigate(); const html = createMemo(() => { const options: any = { async: false }; if (props.repo && props.refName) { const repo = props.repo; const refName = props.refName; options.walkTokens = (token: any) => { if (token.type === 'link' || token.type === 'image') { const href = token.href; if (href && !href.startsWith('#') && !/^[a-z][a-z0-9+.-]*:/i.test(href)) { const [pathAndQuery, fragment] = href.split('#'); const [pathPart, queryPart] = pathAndQuery.split('?'); const resolvedPath = resolveRelativePath(props.path ?? '', pathPart); const typeSegment = token.type === 'image' ? 'raw' : 'tree'; const newHref = `/${repo.owner.handle}/${repo.slug}/${typeSegment}/${encodeURIComponent(refName)}${resolvedPath ? `/${encodePath(resolvedPath)}` : ''}${queryPart ? `?${queryPart}` : ''}${fragment ? `#${fragment}` : ''}`; token.href = newHref; } } }; } return DOMPurify.sanitize(marked.parse(props.markdown, options) as unknown as string, { ADD_ATTR: ['class'], }); }); const classes = createMemo(() => props.variant === 'readme' ? 'untangled-readme-prose prose prose-sm sm:prose-base min-w-0 max-w-none dark:prose-invert prose-p:text-gray-800 dark:prose-p:text-gray-200 prose-li:text-gray-800 dark:prose-li:text-gray-200 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:rounded-md prose-pre:bg-gray-950 dark:prose-pre:bg-gray-950 prose-code:break-words' : props.variant === 'code' ? 'font-mono text-sm whitespace-pre-wrap break-words' : 'prose prose-sm sm:prose-base min-w-0 max-w-none break-words untangled-anywhere dark:prose-invert prose-p:text-gray-800 dark:prose-p:text-gray-200 prose-li:text-gray-800 dark:prose-li:text-gray-200 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:rounded-md prose-pre:bg-gray-950 dark:prose-pre:bg-gray-950 prose-code:break-words prose-a:break-all', ); const onMarkdownClick = (event: MouseEvent) => { const anchor = (event.target as HTMLElement).closest('a'); if (!anchor || event.defaultPrevented) { return; } if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { return; } const href = anchor.getAttribute('href'); if (!href) { return; } if (href.startsWith('/') && !href.startsWith('//')) { event.preventDefault(); navigate(href); return; } try { const url = new URL(href, window.location.origin); if (url.hostname === 'tangled.org' || url.hostname === 'tangled.sh') { event.preventDefault(); navigate(url.pathname + url.search + url.hash); } } catch { // ignore } }; return
; }; export const AsideCard: Component<{ title: string; children: JSX.Element }> = (props) => (
{props.title}
{props.children}
); export const BranchPill: Component<{ name: string }> = (props) => ( {props.name} ); export const AtUriPanel: Component<{ uri: string }> = (props) => { const selectUri: JSX.EventHandlerUnion = (event) => { const selection = window.getSelection(); if (!selection) return; const range = document.createRange(); range.selectNodeContents(event.currentTarget); selection.removeAllRanges(); selection.addRange(range); }; return (
AT URI
{props.uri}
); }; export interface RepoCardProps { owner: string; name: string; description?: string; isFork?: boolean; language?: string; stars?: number; forks?: number; openIssues?: number; openPRs?: number; compact?: boolean; href?: string; noBorder?: boolean; showOwner?: boolean; repoDid?: string; } export interface RepoStatsListProps { repoDid?: string; owner?: string; name?: string; language?: string; stars?: number; forks?: number; openIssues?: number; openPRs?: number; } export const RepoStatsList: Component = (props) => { const repoContextQuery = createQuery(() => ({ queryKey: props.repoDid ? ['repo-by-did', props.repoDid] : ['repo-context', props.owner, props.name], queryFn: async () => { if (props.repoDid) { return getRepoByDid(props.repoDid as Did); } else if (props.owner && props.name) { return getRepo(props.owner, props.name); } return null; }, enabled: Boolean(props.repoDid || (props.owner && props.name)), staleTime: 300_000, })); const repoContext = () => repoContextQuery.data; const starCountQuery = createQuery(() => ({ queryKey: ['repo-stars-count', repoContext()?.repoDid], queryFn: () => getRepoStarCount(repoContext()!), enabled: !!repoContext() && props.stars === undefined, staleTime: 300_000, })); const forkCountQuery = createQuery(() => ({ queryKey: ['repo-fork-count', repoContext()?.repoDid], queryFn: () => getRepoForkCount(repoContext()!), enabled: !!repoContext() && props.forks === undefined, staleTime: 300_000, })); const issueCountQuery = createQuery(() => ({ queryKey: ['repo-issues-count', repoContext()?.repoDid], queryFn: () => getRepoIssueCount(repoContext()!), enabled: !!repoContext() && props.openIssues === undefined, staleTime: 300_000, })); const pullCountQuery = createQuery(() => ({ queryKey: ['repo-pulls-count', repoContext()?.repoDid], queryFn: () => getRepoPullCount(repoContext()!), enabled: !!repoContext() && props.openPRs === undefined, staleTime: 300_000, })); const languagesQuery = createQuery(() => ({ queryKey: ['repo-languages', repoContext()?.repoDid], queryFn: () => getRepoLanguages(repoContext()!, 'HEAD'), enabled: !!repoContext() && props.language === undefined, staleTime: 300_000, })); const resolvedLanguage = () => { if (props.language !== undefined) return props.language; const list = languagesQuery.data?.languages; if (!list || list.length === 0) return undefined; const sorted = [...list].sort((a, b) => b.percentage - a.percentage); return sorted[0].name; }; const langColor = () => { const lang = resolvedLanguage(); return lang ? languageColor(lang) : undefined; }; const stars = () => props.stars !== undefined ? props.stars : starCountQuery.data; const forks = () => props.forks !== undefined ? props.forks : forkCountQuery.data; const openIssues = () => props.openIssues !== undefined ? props.openIssues : issueCountQuery.data; const openPRs = () => props.openPRs !== undefined ? props.openPRs : pullCountQuery.data; const isMetricsLoading = () => { const contextLoading = repoContextQuery.isLoading && (props.repoDid !== undefined || (props.owner !== undefined && props.name !== undefined)); const langLoading = props.language === undefined && (languagesQuery.isLoading || contextLoading); const starsLoading = props.stars === undefined && (starCountQuery.isLoading || contextLoading); const forksLoading = props.forks === undefined && (forkCountQuery.isLoading || contextLoading); const issuesLoading = props.openIssues === undefined && (issueCountQuery.isLoading || contextLoading); const prsLoading = props.openPRs === undefined && (pullCountQuery.isLoading || contextLoading); return langLoading || starsLoading || forksLoading || issuesLoading || prsLoading; }; return (
} >
{resolvedLanguage()}
0}>
{stars()}
0}>
{forks()}
0}>
{openIssues()}
0}>
{openPRs()}
); }; export const RepoCard: Component = (props) => { const linkHref = () => props.href || `/${props.owner}/${props.name}`; const preloadRepo = useRepoPreloader(); return (
} > {props.owner}/{props.name}
{props.description}
); }; export const RepoCardSkeleton: Component<{ compact?: boolean; noBorder?: boolean }> = (props) => { return (
); }; export const StringCardSkeleton: Component = () => (
); export const StringPageSkeleton: Component = () => (
/
{(_, index) => (
)}
); export const IssueOrPullRow: Component<{ title: string; number: number | string; state: 'open' | 'closed' | 'merged'; kind: 'issue' | 'pull'; author: { did: string; handle: string }; createdAt: string; href: string; meta?: JSX.Element; children?: JSX.Element; onMouseEnter?: JSX.EventHandlerUnion; onMouseLeave?: JSX.EventHandlerUnion; }> = (props) => { return (
{props.title}{' '} #{props.number}
{props.author.handle} · {formatRelativeTime(props.createdAt)} {props.meta}
{props.children}
); }; export const ThreadCommentView: Component<{ id?: string; author: { did: string; handle: string }; createdAt: string; markdown: string; isAuthor?: boolean; isReply?: boolean; class?: string; }> = (props) => (
{props.author.handle} (author) · {formatRelativeTime(props.createdAt)}}> {formatRelativeTime(props.createdAt)}
); const commitSummary = (message: string) => message.trim().split('\n')[0] || 'no commit message'; export const PathBreadcrumbs: Component<{ repo: Parameters[0]; refName: string; path: string; withDivider?: boolean; }> = (props) => { const segments = createMemo(() => props.path.split('/').filter(Boolean)); return (
{props.repo.slug} {(segment, index) => ( <> / {segment}} > {segment} )}
); }; export const TreeLatestCommitPanel: Component<{ repo: Parameters[0]; commit: { hash: string; message: string; when: string; author?: { email: string; name: string; }; }; }> = (props) => (
} > {(did) => } {props.commit.author?.name || 'unknown author'} · {commitSummary(props.commit.message)} · {formatRelativeTime(props.commit.when)}
{props.commit.hash.slice(0, 8)}
); export const RepoLanguageBar: Component<{ languages: Array<{ name: string; percentage: number; color?: string }>; loading?: boolean; }> = (props) => ( 0} fallback={}>
{(language) => { const name = language.name || 'Other'; const color = language.color || languageColor(name); return (
); }}
{(language) => { const name = language.name || 'Other'; const color = language.color || languageColor(name); return (
{name}{' '} {formatLanguagePercent(language.percentage)}
); }}
); export const LoadingFilePath: Component<{ repo: Parameters[0]; refName: string; path: string; }> = (props) => { const segments = createMemo(() => props.path.split('/').filter(Boolean)); const filename = createMemo(() => segments().at(-1) ?? props.path); return (
at {props.refName}
} class="untangled-file-row-loading" />
); }; export { CodeView, DiffView, PullDiffView } from './code-view'; export interface GenericComment { uri: string; cid?: string; rkey: string; author: { did: string; handle: string }; value: { body: string; createdAt: string; replyTo?: any; }; } export interface GenericCommentThread { item: GenericComment; replies: GenericComment[]; } export const CommentThreadsSection: Component<{ threads: GenericCommentThread[]; authorDid?: string; title?: string; onReplySubmit?: (body: string, parentComment: GenericComment) => Promise; }> = (props) => { const auth = useAuth(); const location = useLocation(); const [replyingTo, setReplyingTo] = createSignal(null); const [replyBody, setReplyBody] = createSignal(''); const [replyWorking, setReplyWorking] = createSignal(false); const [replyError, setReplyError] = createSignal(null); createEffect(() => { const hash = location.hash; const cleanHash = hash.startsWith('#') ? hash.slice(1) : hash; if (cleanHash && cleanHash.startsWith('comment-') && props.threads.length > 0) { setTimeout(() => { const element = document.getElementById(cleanHash); if (element) { // Remove highlight from any other elements first document.querySelectorAll('.untangled-comment-highlight').forEach((el) => { el.classList.remove('untangled-comment-highlight'); }); element.scrollIntoView({ behavior: 'smooth', block: 'center' }); element.classList.add('untangled-comment-highlight'); } }, 150); } }); const viewerQuery = createQuery(() => ({ queryKey: ['viewer', auth.currentDid()], enabled: Boolean(auth.currentDid()), queryFn: async () => resolveActor(auth.currentDid()!), })); const handleReplySubmit = async (e: SubmitEvent, parent: GenericComment) => { e.preventDefault(); if (!props.onReplySubmit || !replyBody().trim() || replyWorking()) return; setReplyWorking(true); setReplyError(null); try { await props.onReplySubmit(replyBody(), parent); setReplyBody(''); setReplyingTo(null); } catch (err) { setReplyError(getErrorMessage(err)); } finally { setReplyWorking(false); } }; return (

{props.title}

{(thread) => (
0}>
{(reply) => ( )}
{ setReplyingTo(thread.item); setReplyBody(''); setReplyError(null); }} > {(did) => } Leave a reply... } >
void handleReplySubmit(event, thread.item)} class="untangled-thread-reply-form" > {(viewer) => (
{viewer().handle || viewer().did}
)}