Skip to content
Sign up

flagon-io/g1t

public
0
698 linesCodeBlameRaw
1/**
2 * A person's profile at `/u/<username>`, apart from workspaces at
3 * `/<workspace>` (as Docker Hub keeps people under `/u/`).
4 *
5 * The left column is who they are; the main column is their work, as
6 * tabs: an overview (their contribution calendar first), then their pull
7 * requests and issues with a filter aside. Everything is filtered on the server by `work.byAuthor`, which
8 * only ever returns work on repositories the viewer may read, and the
9 * workspaces shown are only those the viewer could know about anyway (see
10 * `profile_workspaces` in services/identity/src/profiles.rs).
11 */
12import {
13 CalendarDays,
14 CircleDot,
15 GitMerge,
16 GitPullRequest,
17 LayoutGrid,
18 Link2,
19 MapPin,
20 Pencil,
21 Star,
22} from "lucide-react";
23import type { ReactNode } from "react";
24import { Form, Link, redirect, useNavigate, useSearchParams } from "react-router";
25
26import { type Authored, type AuthoredItem, type AuthoredSort, type AuthoredState, type Contributions, type Profile, type StarredRepo, shownUsername } from "@g1t/contracts";
27
28import type { Route } from "./+types/user";
29import { page } from "../lib/meta";
30import { ContributionCalendar } from "../components/contribution-calendar";
31import { ButtonLink, EmptyState, TimeAgo } from "../components/ui";
32import { Avatar } from "../components/ui/avatar";
33import { Badge } from "../components/ui/badge";
34import { Button } from "../components/ui/button";
35import { Card } from "../components/ui/card";
36import { RadioGroup, RadioOption } from "../components/ui/radio-group";
37import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
38import { IssueIcon, PullIcon } from "../components/work-icons";
39import { lastDay } from "../lib/contribution-calendar";
40import { notFound } from "../lib/not-found.server";
41import { identity, repos, work } from "../lib/services.server";
42import { getViewer } from "../lib/session.server";
43
44type Tab = "overview" | "pulls" | "issues" | "stars";
45
46const EMPTY: Authored = {
47 items: [],
48 next: null,
49 counts: { pullsMerged: 0, pullsOpen: 0, pulls: 0, issues: 0, issuesOpen: 0 },
50 repos: [],
51};
52
53/** How many recent items the overview shows. */
54const RECENT = 8;
55
56function displayName(profile: Profile): string {
57 const handle = shownUsername(profile);
58 return profile.name ? `${profile.name} (@${handle})` : handle;
59}
60
61export function meta({ loaderData, params, ...args }: Route.MetaArgs) {
62 const profile = loaderData?.profile;
63 if (!profile) return page(args, { title: `${params.username} · g1t` });
64 return page(args, {
65 title: `${displayName(profile)} · g1t`,
66 description: profile.bio || `${profile.name ?? shownUsername(profile)} (@${shownUsername(profile)}) on g1t: their pull requests, issues and workspaces.`,
67 // What the card shows, so it is drawn again when any of it changes.
68 version: [profile.name, profile.bio, profile.avatar, loaderData.publicCounts],
69 });
70}
71
72function pick<T extends string>(value: string | null, allowed: readonly T[]): T | undefined {
73 return allowed.find((option) => option === value);
74}
75
76export async function loader({ params, request, context }: Route.LoaderArgs) {
77 const viewer = getViewer(context);
78 const url = new URL(request.url);
79 const username = params.username.toLowerCase();
80 const profile = await identity.profile(username);
81 if (!profile) throw notFound("person");
82 // One address per person: `/u/Ada` is `/u/ada`.
83 if (params.username !== profile.username) {
84 throw redirect(`/u/${profile.username}${url.search}`);
85 }
86
87 const query = url.searchParams;
88 const tab: Tab = pick(query.get("tab"), ["pulls", "issues", "stars"] as const) ?? "overview";
89 const state = pick(query.get("state"), (tab === "pulls" ? ["open", "closed", "merged"] : ["open", "closed"]) as AuthoredState[]);
90 const sort = pick(query.get("sort"), ["updated", "oldest"] as const satisfies AuthoredSort[]);
91 const repo = query.get("repo")?.trim() || undefined;
92 const before = query.get("before") || undefined;
93 const filter =
94 tab === "overview"
95 ? { limit: RECENT }
96 : { kind: tab === "pulls" ? ("pull" as const) : ("issue" as const), state, repo, sort, before };
97
98 // Only real memberships, and only those the viewer could see anyway.
99 const workspaces = identity
100 .userByUsername(username)
101 .then((person) => (person ? repos.publicNamespaces(person.id) : []))
102 .catch(() => [] as string[])
103 .then((publicIn) => identity.profileWorkspaces(username, viewer, publicIn));
104 // The card is drawn for no one in particular, so its version uses what
105 // everyone sees; for a signed-out viewer that is these counts already.
106 const [authored, shown, starred, year] = await Promise.all([
107 work.byAuthor(username, viewer, filter),
108 workspaces,
109 // What they starred that the viewer can see, on its own tab.
110 tab === "stars" ? repos.starred(username, viewer).catch(() => [] as StarredRepo[]) : ([] as StarredRepo[]),
111 // Their year, on the overview: counted only where the viewer can see.
112 tab === "overview"
113 ? work
114 .contributions(username, viewer)
115 .then((result) => (result.ok ? result.value : null))
116 .catch(() => null as Contributions | null)
117 : null,
118 ]);
119 const activity = authored.ok ? authored.value : EMPTY;
120 // The calendar ends today, as the work service counted it (UTC).
121 const today = (year && lastDay(year.from)) || new Date().toISOString().slice(0, 10);
122 return {
123 profile,
124 tab,
125 filter: { state: state ?? null, repo: repo ?? null, sort: sort ?? "created", before: before ?? null },
126 activity,
127 failed: !authored.ok,
128 workspaces: shown,
129 starred,
130 contributions: year ? { ...year, today } : null,
131 isSelf: viewer?.username === profile.username,
132 publicCounts: viewer ? null : activity.counts,
133 };
134}
135
136export default function UserProfile({ loaderData }: Route.ComponentProps) {
137 const { profile, tab, activity, workspaces, isSelf } = loaderData;
138 return (
139 <main className="mx-auto max-w-6xl px-4 py-8 sm:px-8 md:py-10">
140 <div className="grid gap-8 md:grid-cols-[minmax(0,240px)_minmax(0,1fr)] lg:grid-cols-[minmax(0,280px)_minmax(0,1fr)] lg:gap-12">
141 <PersonColumn profile={profile} workspaces={workspaces} isSelf={isSelf} />
142 <section className="min-w-0">
143 <ProfileTabs username={profile.username} tab={tab} counts={activity.counts} />
144 <div className="mt-6">
145 {tab === "overview" ? (
146 <Overview {...loaderData} />
147 ) : tab === "stars" ? (
148 <StarredList starred={loaderData.starred} isSelf={isSelf} />
149 ) : (
150 <WorkList {...loaderData} />
151 )}
152 </div>
153 </section>
154 </div>
155 </main>
156 );
157}
158
159// --- Who they are -------------------------------------------------------------
160
161function joined(at: string): string {
162 // In UTC, so the server and the browser agree.
163 return new Date(at).toLocaleDateString("en-US", { month: "long", year: "numeric", timeZone: "UTC" });
164}
165
166function PersonColumn({
167 profile,
168 workspaces,
169 isSelf,
170}: {
171 profile: Profile;
172 workspaces: { slug: string; name: string; avatar: string | null }[];
173 isSelf: boolean;
174}) {
175 return (
176 <aside className="min-w-0">
177 <div className="flex items-center gap-4 md:block">
178 <span className="md:hidden">
179 <Avatar name={profile.username} image={profile.avatar} size={80} />
180 </span>
181 <span className="hidden md:block">
182 <span className="block w-fit rounded-full ring-1 ring-line">
183 <Avatar name={profile.username} image={profile.avatar} size={240} />
184 </span>
185 </span>
186 <div className="min-w-0 md:mt-5">
187 {profile.name ? (
188 <>
189 <h1 className="text-2xl leading-tight font-semibold tracking-tight wrap-anywhere">
190 {profile.name}
191 </h1>
192 <p className="mt-0.5 font-mono text-base text-muted">@{shownUsername(profile)}</p>
193 </>
194 ) : (
195 <h1 className="font-mono text-2xl leading-tight font-semibold tracking-tight wrap-anywhere">
196 {shownUsername(profile)}
197 </h1>
198 )}
199 {profile.pronouns && <p className="mt-1 text-sm text-faint">{profile.pronouns}</p>}
200 </div>
201 </div>
202
203 {profile.bio && <p className="mt-4 text-[0.9375rem] leading-relaxed text-fg/90">{profile.bio}</p>}
204
205 {isSelf && (
206 <div className="mt-4">
207 <ButtonLink to="/settings/profile" variant="outline">
208 <Pencil size={14} />
209 Edit profile
210 </ButtonLink>
211 </div>
212 )}
213
214 <ul className="mt-4 space-y-1.5 text-sm text-muted">
215 {profile.location && (
216 <Detail icon={<MapPin size={15} />}>
217 <span className="wrap-anywhere">{profile.location}</span>
218 </Detail>
219 )}
220 {profile.website && (
221 <Detail icon={<Link2 size={15} />}>
222 <a
223 href={profile.website}
224 rel="nofollow ugc noopener noreferrer me"
225 target="_blank"
226 className="text-fg wrap-anywhere hover:underline"
227 >
228 {profile.website.replace(/^https:\/\//, "").replace(/\/$/, "")}
229 </a>
230 </Detail>
231 )}
232 <Detail icon={<CalendarDays size={15} />}>Joined {joined(profile.createdAt)}</Detail>
233 </ul>
234
235 {workspaces.length > 0 && (
236 <div className="mt-6 border-t border-line pt-5">
237 <h2 className="text-sm font-medium">Workspaces</h2>
238 <ul className="mt-3 space-y-1">
239 {workspaces.map((workspace) => (
240 <li key={workspace.slug}>
241 <Link
242 to={`/${workspace.slug}`}
243 className="-mx-2 flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-surface"
244 >
245 <Avatar name={workspace.slug} image={workspace.avatar} size={22} square />
246 <span className="min-w-0 truncate">{workspace.name}</span>
247 {workspace.name !== workspace.slug && (
248 <span className="ml-auto shrink-0 truncate font-mono text-xs text-faint">{workspace.slug}</span>
249 )}
250 </Link>
251 </li>
252 ))}
253 </ul>
254 </div>
255 )}
256 </aside>
257 );
258}
259
260function Detail({ icon, children }: { icon: ReactNode; children: ReactNode }) {
261 return (
262 <li className="flex items-start gap-2">
263 <span className="mt-0.5 shrink-0 text-faint">{icon}</span>
264 <span className="min-w-0">{children}</span>
265 </li>
266 );
267}
268
269// --- Tabs ------------------------------------------------------------------------
270
271function ProfileTabs({
272 username,
273 tab,
274 counts,
275}: {
276 username: string;
277 tab: Tab;
278 counts: Authored["counts"];
279}) {
280 const item = (value: Tab, label: string, icon: ReactNode, count?: number) => (
281 <Link
282 to={value === "overview" ? `/u/${username}` : `/u/${username}?tab=${value}`}
283 aria-current={tab === value ? "page" : undefined}
284 preventScrollReset
285 className={`-mb-px flex items-center gap-2 border-b-2 px-3 pb-3 text-sm whitespace-nowrap transition-colors ${
286 tab === value ? "border-accent font-medium text-fg" : "border-transparent text-muted hover:text-fg"
287 }`}
288 >
289 {icon}
290 {label}
291 {count != null && count > 0 && (
292 <span className="rounded-full bg-raised px-1.5 py-px text-xs text-muted">{count}</span>
293 )}
294 </Link>
295 );
296 return (
297 <nav aria-label="Profile" className="flex gap-1 overflow-x-auto overflow-y-hidden border-b border-line [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
298 {item("overview", "Overview", <LayoutGrid size={15} />)}
299 {item("pulls", "Pull requests", <GitPullRequest size={15} />, counts.pulls)}
300 {item("issues", "Issues", <CircleDot size={15} />, counts.issues)}
301 {item("stars", "Stars", <Star size={15} />)}
302 </nav>
303 );
304}
305
306// --- Stars -------------------------------------------------------------------------
307
308function StarredList({ starred, isSelf }: { starred: StarredRepo[]; isSelf: boolean }) {
309 if (starred.length === 0) {
310 return (
311 <EmptyState title={isSelf ? "You have not starred anything yet" : "No stars yet"}>
312 {isSelf ? "Star a repository from the button beside Watch to keep it here." : null}
313 </EmptyState>
314 );
315 }
316 return (
317 <Card asChild divided className="overflow-hidden">
318 <ul>
319 {starred.map(({ repo, starredAt, stars }) => (
320 <li key={repo.id} className="px-4 py-3">
321 <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
322 <Link to={`/${repo.namespace}/${repo.name}`} className="min-w-0 truncate font-medium hover:text-accent">
323 <span className="text-muted">{repo.namespace}/</span>
324 {repo.name}
325 </Link>
326 <span className="ml-auto inline-flex items-center gap-1 text-xs text-muted tabular-nums">
327 <Star size={13} className="text-faint" />
328 {stars.toLocaleString("en-US")}
329 </span>
330 </div>
331 {repo.description && <p className="mt-1 text-sm text-muted">{repo.description}</p>}
332 <p className="mt-1 text-xs text-faint">
333 Starred <TimeAgo at={starredAt} />
334 </p>
335 </li>
336 ))}
337 </ul>
338 </Card>
339 );
340}
341
342// --- Overview ----------------------------------------------------------------------
343
344type Data = Route.ComponentProps["loaderData"];
345
346function Overview({ profile, activity, failed, contributions }: Data) {
347 const { counts, items } = activity;
348 const who = profile.name ?? shownUsername(profile);
349 return (
350 <div className="space-y-8">
351 {contributions && (
352 <ContributionCalendar
353 days={contributions.days}
354 total={contributions.total}
355 today={contributions.today}
356 from={contributions.from}
357 />
358 )}
359 <dl className="grid grid-cols-1 gap-3 sm:grid-cols-3">
360 <Stat
361 label="Pull requests merged"
362 value={counts.pullsMerged}
363 icon={<GitMerge size={15} className="text-merged" />}
364 to={`/u/${profile.username}?tab=pulls&state=merged`}
365 />
366 <Stat
367 label="Open pull requests"
368 value={counts.pullsOpen}
369 icon={<GitPullRequest size={15} className="text-success" />}
370 to={`/u/${profile.username}?tab=pulls&state=open`}
371 />
372 <Stat
373 label="Issues opened"
374 value={counts.issues}
375 icon={<CircleDot size={15} className="text-success" />}
376 to={`/u/${profile.username}?tab=issues`}
377 />
378 </dl>
379
380 <section>
381 <h2 className="text-sm font-medium">Recent activity</h2>
382 <div className="mt-3">
383 {failed ? (
384 <EmptyState title="Activity could not be loaded">Try again in a moment.</EmptyState>
385 ) : items.length === 0 ? (
386 <EmptyState title={`No activity from ${who} yet`}>
387 Pull requests and issues @{profile.username} opens on repositories you can see show up here.
388 </EmptyState>
389 ) : (
390 <>
391 <ItemList items={items} />
392 {(counts.pulls > 0 || counts.issues > 0) && (
393 <p className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm">
394 {counts.pulls > 0 && (
395 <Link to={`/u/${profile.username}?tab=pulls`} className="text-muted hover:text-fg">
396 All {counts.pulls} pull {counts.pulls === 1 ? "request" : "requests"} →
397 </Link>
398 )}
399 {counts.issues > 0 && (
400 <Link to={`/u/${profile.username}?tab=issues`} className="text-muted hover:text-fg">
401 All {counts.issues} {counts.issues === 1 ? "issue" : "issues"} →
402 </Link>
403 )}
404 </p>
405 )}
406 </>
407 )}
408 </div>
409 </section>
410 </div>
411 );
412}
413
414function Stat({ label, value, icon, to }: { label: string; value: number; icon: ReactNode; to: string }) {
415 return (
416 <Link
417 to={to}
418 className="block rounded-xl border border-line bg-surface/50 px-4 py-3.5 transition-colors hover:border-line-strong hover:bg-surface"
419 >
420 <dt className="flex items-center gap-2 text-xs text-muted">
421 {icon}
422 {label}
423 </dt>
424 <dd className="mt-1.5 text-2xl font-semibold tabular-nums tracking-tight">{value.toLocaleString("en-US")}</dd>
425 </Link>
426 );
427}
428
429// --- Lists ---------------------------------------------------------------------------
430
431function itemUrl(item: AuthoredItem): string {
432 const base = `/${item.repo.namespace}/${item.repo.name}`;
433 return item.kind === "pull" ? `${base}/pull/${item.number}` : `${base}/issues/${item.number}`;
434}
435
436function ItemList({ items }: { items: AuthoredItem[] }) {
437 return (
438 <Card asChild tone="plain" divided className="overflow-hidden">
439 <ul>
440 {items.map((item) => (
441 <li key={`${item.kind}:${item.repo.namespace}/${item.repo.name}#${item.number}`}>
442 <Link
443 prefetch="intent"
444 to={itemUrl(item)}
445 className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-surface"
446 >
447 <span className="mt-0.5">
448 {item.kind === "pull" ? (
449 <PullIcon status={item.status ?? (item.state === "open" ? "open" : "closed")} />
450 ) : (
451 <IssueIcon issue={{ state: item.state, reason: item.reason }} />
452 )}
453 </span>
454 <span className="min-w-0 grow">
455 <span className="flex items-center gap-2">
456 <span className="truncate font-medium">{item.title}</span>
457 {item.draft && (
458 <Badge className="px-1.5 font-normal text-faint">
459 draft
460 </Badge>
461 )}
462 </span>
463 <span className="mt-0.5 block truncate text-xs text-faint">
464 <span className="font-mono text-muted">
465 {item.repo.namespace}/{item.repo.name}
466 </span>{" "}
467 #{item.number} · opened <TimeAgo at={item.createdAt} />
468 {item.merged && item.mergedAt ? (
469 <>
470 {" "}
471 · merged <TimeAgo at={item.mergedAt} />
472 </>
473 ) : item.updatedAt !== item.createdAt ? (
474 <>
475 {" "}
476 · updated <TimeAgo at={item.updatedAt} />
477 </>
478 ) : null}
479 </span>
480 </span>
481 </Link>
482 </li>
483 ))}
484 </ul>
485 </Card>
486 );
487}
488
489const SORTS: { value: AuthoredSort; label: string }[] = [
490 { value: "created", label: "Newest" },
491 { value: "updated", label: "Recently updated" },
492 { value: "oldest", label: "Oldest" },
493];
494
495function WorkList({ profile, tab, filter, activity, failed }: Data) {
496 const pulls = tab === "pulls";
497 const noun = pulls ? "pull requests" : "issues";
498 const filtered = filter.state != null || filter.repo != null;
499 const base = `/u/${profile.username}?tab=${tab}`;
500 const [params] = useSearchParams();
501 const next = new URLSearchParams(params);
502 if (activity.next) next.set("before", activity.next);
503 const first = new URLSearchParams(params);
504 first.delete("before");
505 return (
506 <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_220px]">
507 <div className="min-w-0 lg:order-1">
508 {failed ? (
509 <EmptyState title={`${pulls ? "Pull requests" : "Issues"} could not be loaded`}>
510 Try again in a moment.
511 </EmptyState>
512 ) : activity.items.length === 0 ? (
513 filtered || filter.before ? (
514 <EmptyState title={`No ${noun} match these filters`}>
515 <Link to={base} className="text-fg underline underline-offset-4">
516 Clear filters
517 </Link>{" "}
518 to see all of them.
519 </EmptyState>
520 ) : (
521 <EmptyState title={`No ${noun} yet`}>
522 {pulls
523 ? `Pull requests @${profile.username} opens on repositories you can see show up here.`
524 : `Issues @${profile.username} opens on repositories you can see show up here.`}
525 </EmptyState>
526 )
527 ) : (
528 <>
529 <ItemList items={activity.items} />
530 {(activity.next || filter.before) && (
531 <nav aria-label="Pages" className="mt-4 flex items-center justify-between gap-3">
532 {filter.before ? (
533 <ButtonLink to={`?${first}`} variant="outline" preventScrollReset>
534 ← {filter.sort === "oldest" ? "Oldest" : "Newest"}
535 </ButtonLink>
536 ) : (
537 <span />
538 )}
539 {activity.next && (
540 <ButtonLink to={`?${next}`} variant="outline" preventScrollReset>
541 Next page →
542 </ButtonLink>
543 )}
544 </nav>
545 )}
546 </>
547 )}
548 </div>
549 <FilterAside tab={tab} filter={filter} activity={activity} username={profile.username} />
550 </div>
551 );
552}
553
554/**
555 * The filters beside a list, as on GitHub's search: each change reloads
556 * the list from the server, from the first page. Without script, the
557 * form's Apply button does the same.
558 */
559function FilterAside({
560 tab,
561 filter,
562 activity,
563 username,
564}: {
565 tab: Tab;
566 filter: Data["filter"];
567 activity: Authored;
568 username: string;
569}) {
570 const [params] = useSearchParams();
571 const navigate = useNavigate();
572 const set = (key: string, value: string | null) => {
573 const next = new URLSearchParams(params);
574 if (value === null) next.delete(key);
575 else next.set(key, value);
576 next.delete("before");
577 void navigate(`?${next}`, { preventScrollReset: true });
578 };
579 const pulls = tab === "pulls";
580 const { counts } = activity;
581 const states: { value: string; label: string; count?: number }[] = pulls
582 ? [
583 { value: "all", label: "All", count: counts.pulls },
584 { value: "open", label: "Open", count: counts.pullsOpen },
585 { value: "merged", label: "Merged", count: counts.pullsMerged },
586 { value: "closed", label: "Closed" },
587 ]
588 : [
589 { value: "all", label: "All", count: counts.issues },
590 { value: "open", label: "Open", count: counts.issuesOpen },
591 { value: "closed", label: "Closed", count: counts.issues - counts.issuesOpen },
592 ];
593 const filtered = filter.state != null || filter.repo != null || filter.sort !== "created";
594 return (
595 <aside aria-label="Filters" className="min-w-0 lg:order-2">
596 <Card asChild tone="plain" className="space-y-5 p-4 lg:sticky lg:top-20">
597 <Form method="get">
598 <input type="hidden" name="tab" value={tab} />
599 <FilterGroup title="Type">
600 <RadioGroup
601 value={tab}
602 onValueChange={(value) => void navigate(`/u/${username}?tab=${value}`, { preventScrollReset: true })}
603 aria-label="Type"
604 >
605 <RadioOption value="pulls" label={<Counted label="Pull requests" count={counts.pulls} />} />
606 <RadioOption value="issues" label={<Counted label="Issues" count={counts.issues} />} />
607 </RadioGroup>
608 </FilterGroup>
609 <FilterGroup title="State">
610 <RadioGroup
611 name="state"
612 value={filter.state ?? "all"}
613 onValueChange={(value) => set("state", value === "all" ? null : value)}
614 aria-label="State"
615 >
616 {states.map((state) => (
617 <RadioOption
618 key={state.value}
619 value={state.value}
620 label={<Counted label={state.label} count={state.count} />}
621 />
622 ))}
623 </RadioGroup>
624 </FilterGroup>
625 <FilterGroup title="Repository">
626 <Select
627 name="repo"
628 value={filter.repo ?? "all"}
629 onValueChange={(value) => set("repo", value === "all" ? null : value)}
630 >
631 <SelectTrigger size="sm" aria-label="Repository">
632 <SelectValue />
633 </SelectTrigger>
634 <SelectContent>
635 <SelectItem value="all">All repositories</SelectItem>
636 {activity.repos.map(({ repo, count }) => {
637 const path = `${repo.namespace}/${repo.name}`;
638 return (
639 <SelectItem key={path} value={path} description={`${count} by @${username}`}>
640 {path}
641 </SelectItem>
642 );
643 })}
644 {filter.repo && !activity.repos.some(({ repo }) => `${repo.namespace}/${repo.name}` === filter.repo) && (
645 <SelectItem value={filter.repo}>{filter.repo}</SelectItem>
646 )}
647 </SelectContent>
648 </Select>
649 </FilterGroup>
650 <FilterGroup title="Sort">
651 <Select name="sort" value={filter.sort} onValueChange={(value) => set("sort", value === "created" ? null : value)}>
652 <SelectTrigger size="sm" aria-label="Sort">
653 <SelectValue />
654 </SelectTrigger>
655 <SelectContent>
656 {SORTS.map((sort) => (
657 <SelectItem key={sort.value} value={sort.value}>
658 {sort.label}
659 </SelectItem>
660 ))}
661 </SelectContent>
662 </Select>
663 </FilterGroup>
664 <div className="flex items-center justify-between gap-2">
665 <noscript>
666 <Button type="submit" variant="outline">
667 Apply
668 </Button>
669 </noscript>
670 {filtered && (
671 <Link to={`/u/${username}?tab=${tab}`} preventScrollReset className="text-xs text-muted hover:text-fg">
672 Clear filters
673 </Link>
674 )}
675 </div>
676 </Form>
677 </Card>
678 </aside>
679 );
680}
681
682function FilterGroup({ title, children }: { title: string; children: ReactNode }) {
683 return (
684 <fieldset className="min-w-0">
685 <legend className="mb-2 text-[0.6875rem] font-medium tracking-wide text-faint uppercase">{title}</legend>
686 {children}
687 </fieldset>
688 );
689}
690
691function Counted({ label, count }: { label: string; count?: number }) {
692 return (
693 <>
694 {label}
695 {count != null && <span className="text-xs text-faint tabular-nums">{count}</span>}
696 </>
697 );
698}