@@ -1,135 +1,537 @@ import clsx from 'clsx'; +import { + BookMarked, + CircleDot, + FolderCode, + GalleryVertical, + GitPullRequest, + LoaderCircle, + Star, + Users, + UserRound, +} from 'lucide-solid'; -import { A, useNavigate } from '@solidjs/router'; +import { A } from '@solidjs/router'; import { createQuery } from '@tanstack/solid-query'; -import { For, Show, createMemo, createSignal, type Component } from 'solid-js'; +import { For, Show, createEffect, createMemo, onCleanup, type Component, type JSX } from 'solid-js'; -import { LoadingState, buttonStyles, cardStyles, inputStyles } from '../components/common'; +import { Avatar, ErrorState, LoadingState } from '../components/common'; +import { listFollowRecords } from '../lib/api/graph'; import { resolveActor } from '../lib/api/identity'; -import { listRepoRecords } from '../lib/api/repos'; +import { listRepoRecords, type RepoRecord } from '../lib/api/repos'; import { useAuth } from '../lib/auth'; +import { useLiveEvents, type LiveEvent } from '../lib/live-events'; -import { formatRelativeTime, loadRecentRepos, parseRepoJump } from '../lib/repo-utils'; +import { formatRelativeTime, loadRecentRepos } from '../lib/repo-utils'; const SAMPLE_REPOS = [ { owner: 'mary.my.id', slug: 'atcute' }, { owner: 'mary.my.id', slug: 'boat' }, { owner: 'mary.my.id', slug: 'aglais' }, ]; +const HOME_ACTIVITY_SOURCES = [ + 'sh.tangled.repo.issue:repoDid', + 'sh.tangled.repo.issue:repo', + 'sh.tangled.repo.pull:target.repo', +]; + +type HomeRepoItem = { + owner: string; + slug: string; + title: string; + href: string; + rkey: string; + repoDid?: string; + description?: string; + createdAt?: string; +}; + +type HomeActivityKind = 'issue' | 'pull' | 'repo'; + +type HomeActivityItem = { + id: string; + kind: HomeActivityKind; + title: string; + repoLabel: string; + href: string; + at?: string; + body?: string; + actorDid?: string; +}; + +type FollowingHomeData = { + actors: Array<{ + did: string; + handle: string; + repoCount: number; + }>; + activity: HomeActivityItem[]; +}; + +const repoSlug = (repo: RepoRecord): string => repo.value.name?.trim() || repo.rkey; + +const repoTimestamp = (repo: HomeRepoItem): number => { + const timestamp = repo.createdAt ? new Date(repo.createdAt).getTime() : 0; + return Number.isFinite(timestamp) ? timestamp : 0; +}; + +const activityTimestamp = (item: HomeActivityItem): number => { + const timestamp = item.at ? new Date(item.at).getTime() : 0; + return Number.isFinite(timestamp) ? timestamp : 0; +}; + +const formatCount = (count: number, singular: string, plural = `${singular}s`) => + `${count} ${count === 1 ? singular : plural}`; + +const homeRepoItem = (owner: string, repo: RepoRecord): HomeRepoItem => { + const slug = repoSlug(repo); + return { + owner, + slug, + title: `${owner}/${slug}`, + href: `/${owner}/${slug}`, + rkey: repo.rkey, + repoDid: repo.value.repoDid, + description: repo.value.description, + createdAt: repo.value.createdAt, + }; +}; + +const activityLabelForEvent = (event: LiveEvent): Pick => { + if (event.source.includes('.pull')) { + return { kind: 'pull', title: 'new pull request' }; + } + + return { kind: 'issue', title: 'new issue' }; +}; + +const eventActivityHref = (repo: HomeRepoItem, event: LiveEvent): string => { + const collection = event.source.includes('.pull') ? 'pulls' : 'issues'; + return `${repo.href}/${collection}/${encodeURIComponent(event.sourceRecord)}`; +}; + +const fetchFollowingHomeData = async (viewerDid: string): Promise => { + const follows = await listFollowRecords(viewerDid); + const resolved = await Promise.all( + follows.slice(0, 8).map(async (follow) => { + try { + const actor = await resolveActor(follow.value.subject); + const repos = await listRepoRecords(actor).catch(() => []); + return { + follow, + actor, + repos, + }; + } catch { + return null; + } + }), + ); + + const actors = resolved + .filter((item): item is NonNullable => Boolean(item)) + .map((item) => ({ + did: item.actor.did, + handle: item.actor.handle, + repoCount: item.repos.length, + })); + + const activity = resolved + .filter((item): item is NonNullable => Boolean(item)) + .flatMap((item) => + item.repos.map((repo) => { + const repoItem = homeRepoItem(item.actor.handle, repo); + return { + id: `following-repo:${repo.uri}`, + kind: 'repo' as const, + title: 'repository published', + repoLabel: repoItem.title, + href: repoItem.href, + at: repoItem.createdAt, + body: repoItem.description, + actorDid: item.actor.did, + }; + }), + ) + .sort((left, right) => activityTimestamp(right) - activityTimestamp(left)) + .slice(0, 8); + + return { actors, activity }; +}; + export const HomePage: Component = () => { const auth = useAuth(); - const [jump, setJump] = createSignal(''); + const live = useLiveEvents(); const recentRepos = createMemo(loadRecentRepos); - const navigate = useNavigate(); const ownReposQuery = createQuery(() => ({ queryKey: ['own-repos', auth.currentDid()], enabled: Boolean(auth.currentDid()), queryFn: async () => { const actor = await resolveActor(auth.currentDid()!); - return listRepoRecords(actor); + const records = await listRepoRecords(actor); + return { actor, records }; }, })); - const onSubmit = (event: SubmitEvent) => { - event.preventDefault(); - const parsed = parseRepoJump(jump()); - if (!parsed) { + const followingQuery = createQuery(() => ({ + queryKey: ['home-following', auth.currentDid()], + enabled: Boolean(auth.currentDid()), + queryFn: async () => fetchFollowingHomeData(auth.currentDid()!), + })); + + const ownRepoItems = createMemo(() => { + const data = ownReposQuery.data; + if (!data) return []; + return data.records + .map((repo) => homeRepoItem(data.actor.handle, repo)) + .sort((left, right) => repoTimestamp(right) - repoTimestamp(left)); + }); + + const repoByDid = createMemo(() => { + const repos = new Map(); + for (const repo of ownRepoItems()) { + if (repo.repoDid) repos.set(repo.repoDid, repo); + } + return repos; + }); + + createEffect(() => { + if (!auth.currentDid()) { + live.clear(); return; } - navigate(`/${parsed.owner}/${parsed.repo}`); - }; + if (ownReposQuery.isLoading) { + return; + } + const subjects = ownRepoItems() + .map((repo) => repo.repoDid) + .filter((repoDid): repoDid is string => Boolean(repoDid)); + + if (subjects.length === 0) { + live.clear(); + return; + } + + live.subscribe({ + subjects, + sources: HOME_ACTIVITY_SOURCES, + }); + + onCleanup(() => { + live.clear(); + }); + }); + + const activityItems = createMemo(() => { + const repos = repoByDid(); + const liveItems = live.events() + .map((event): HomeActivityItem | null => { + const repo = repos.get(event.subject); + if (!repo) return null; + const label = activityLabelForEvent(event); + return { + id: `live:${event.sourceRecord}:${event.receivedAt}`, + ...label, + repoLabel: repo.title, + href: eventActivityHref(repo, event), + at: event.receivedAt, + }; + }) + .filter((item): item is HomeActivityItem => Boolean(item)); + + const repoItems: HomeActivityItem[] = ownRepoItems().map((repo) => ({ + id: `repo:${repo.owner}/${repo.rkey}`, + kind: 'repo' as const, + title: 'repository published', + repoLabel: repo.title, + href: repo.href, + at: repo.createdAt, + body: repo.description, + })); + + return [...liveItems, ...repoItems] + .sort((left, right) => activityTimestamp(right) - activityTimestamp(left)) + .slice(0, 8); + }); + return ( -

untangled

tightly-knit social coding

+ + +

+ + activity +

+ + + 0} fallback="idle"> + {formatCount(ownRepoItems().length, 'repo')} watched + + +

- + } + > + } + > + } + > + 0} + fallback={} + > +

+ + {(item, index) => } + +

+ + + + +

sample repositories

- - {(repo) => ( - -

- {repo.owner}/{repo.slug} -

- - )} - -

+ + -

recent

+ } title="recent repositories" /> 0} - fallback={

No recent repositories.

} + fallback={} > -

{(repo) => ( - -

{repo.title}

{formatRelativeTime(repo.updatedAt)}

+ + {repo.title} + {formatRelativeTime(repo.updatedAt)} )}

- -

your repositories

+ } title="following activity" /> } + when={auth.currentDid()} + fallback={} > -

- - {(repo) => ( - -

{repo.value.name?.trim() || repo.rkey}

- {repo.value.description || repo.value.repoDid} -

- - )} - -

+ } + > + } + > + 0} + fallback={} + > +

+ + {(item, index) => } + +

+ + + -

- -

+ +

+ } title="sample repositories" /> + +

); }; + +const HomeSectionHeader: Component<{ icon: JSX.Element; title: string }> = (props) => ( +

+ {props.icon} +

{props.title}

+); + +const HomeEmpty: Component<{ label: string }> = (props) => ( +

{props.label}

+); + +const HomeFeedEmpty: Component<{ title: string; body: string }> = (props) => ( +

+ +

{props.title}

{props.body}

+); + +const HomeFeedLoading: Component = () => ( +

+ +

Loading activity

Checking your repositories.

+); + +const RepoLinkRow: Component<{ + href: string; + title: string; + description?: string; + meta?: string; +}> = (props) => ( + + + + {props.title} + + + {props.description} + + + {props.meta} + + +); + +const ActivityRow: Component<{ item: HomeActivityItem; index: number }> = (props) => ( +

+ 0}> +

+ +

+ + + + + + + + {props.item.title} + {props.item.repoLabel} + + {formatRelativeTime(props.item.at)} +

+ + + {props.item.body} + + +

+); + +const ActivityIcon: Component<{ kind: HomeActivityKind }> = (props) => ( + }> + + + } + > + + +); + +const HomeSampleRepos: Component<{ compact?: boolean }> = (props) => ( +

+ + {(repo) => ( + + {repo.owner} + {repo.slug} + + )} + +

+);