- {/* Deep Brand Blue Hero Header */}
-
+
-
-
- {/* Category Filter Tabs */}
-
-
- - {dict.members.title} -
-- {dict.members.lede} -
-
-
-
- {/* Search, Sort, and View Controls */}
-
-
- {categories.map((entry) => (
-
- ))}
-
-
-
-
- {/* Search Box */}
-
-
- {/* Right Controls: Sort & Grid/Table Toggle */}
-
-
- {/* Directory Content */}
-
- {/* Sort Dropdown */}
-
-
- {/* View Mode Switcher — table view is unavailable on phones. */}
-
-
-
-
-
-
- {visible.length === 0 ? (
-
-
-
- {dict.members.emptyTitle}
-
-
- ) : effectiveView === "grid" ? (
- /* Grid View */
- {dict.members.emptyBody}
- -
- {visible.map((member) => (
-
-
- ))}
-
- ) : (
- /* Table View */
-
- {/* Top Row: Avatar + Name */}
-
-
- {/* View Profile Action */}
-
-
-
- {/* Metadata Subtitle */}
- {member.affiliation !== null || member.location !== null ? (
-
-
-
- {member.displayName.slice(0, 2).toUpperCase()}
-
-
-
-
-
- {member.displayName}
-
-
- - {member.headline ?? `@${member.githubUsername}`} -
-
- {member.affiliation !== null ? (
-
-
- ) : null}
-
- {/* Skills Chips */}
- {member.skills.length > 0
- ? (() => {
- const shown = member.skills.slice(0, 2);
- const hidden = member.skills.slice(2);
- return (
-
- {shown.map((skill) => (
-
- {skill}
-
- ))}
- {hidden.length > 0 ? (
-
- );
- })()
- : null}
-
-
- +{hidden.length} more
-
-
- ) : null}
-
-
-
- {hidden.map((skill) => (
-
- {skill}
-
- ))}
-
-
-
- }
- className="w-full sm:w-auto"
- >
- {dict.members.viewProfile}
-
-
-
-
- )}
-
-
-
-
-
- | MEMBER | -ROLE | -ORGANISATION | -CITY | -SKILLS | -
|---|---|---|---|---|
|
-
-
-
-
- {member.displayName}
-
-
- @{member.githubUsername}
-
-
- |
-
- {/* Role */}
- - {member.headline ?? "—"} - | - - {/* Organisation */} -- {member.affiliation ?? "—"} - | - - {/* City */} -- {member.location ?? "—"} - | - - {/* Skills */} -
-
- {member.skills.length > 0
- ? member.skills.map((skill) => (
-
- {skill}
-
- ))
- : "—"}
-
- |
-
@@ -72,171 +66,12 @@ export default function ProjectPage() {
{project.title}
- {/* Repo identity, stats, status and actions read as one object, so they
- share a single card rather than floating as separate blocks. */}
-
-
+
-
-
-
-
-
- {owner} /
-- {name ?? project.fullName} -
-- {project.description ?? dict.project.none} -
--
-
- {dict.project.openIssues} -
- - {project.openIssueCount} - -
- {dict.project.members} -
- {project.memberCount} -
-
-
-
-
- {dict.project.publicLabel}
- {dict.project.openLabel}
-
- {dict.project.lastSync}{" "}
- {synced}
-
-
-
-
- }>
- {dict.project.chooseIssue}
-
- }
- >
- {dict.project.viewOnGitHub}
-
-
- {dict.project.githubSourceNote}
-
-
-
-
-
-
-
-
-
+
-
-
-
- - {dict.project.aboutKicker} -
-- {dict.project.aboutTitle} -
-
-
-
-
-
-
-
-
- - {dict.project.contributeKicker} -
-{dict.project.contributeBody}
-- {dict.project.repository} -
- -- {dict.project.licence} -
-- {project.license ?? dict.project.notPublished} -
-
- {dict.project.allIssues} →
-
- {recentIssues.length === 0 ? (
-
-
- - {dict.project.issuesKicker} -
-- {dict.project.issuesTitle} -
-
-
- {dict.project.noIssues}
-
-
- ) : (
-
- {recentIssues.map((issue) => (
-
- )}
-
-
- {dict.project.sheetTitle}
-
- {project.license ?? dict.project.none}
-
-
- {[
- {
- label: dict.project.repository,
- value: (
-
- {project.fullName}
-
- ),
- },
- { label: dict.project.openIssues, value: project.openIssueCount },
- { label: dict.project.members, value: project.memberCount },
- ].map((item) => (
-
-
-
- {item.label}
-
- {item.value}
-
- ))}
- - {dict.project.lastSync} · {synced} -
-
{dict.brand}
diff --git a/apps/api/src/config.ts b/apps/api/src/config.ts
index 8ecd88f..f1ee482 100644
--- a/apps/api/src/config.ts
+++ b/apps/api/src/config.ts
@@ -1,39 +1,16 @@
-import { z } from "zod";
+import { env } from "./env";
-const envSchema = z.object({
- DATABASE_URL: z.url(),
- AUTH_SECRET: z.string().min(32, "AUTH_SECRET must be at least 32 characters"),
- AUTH_GITHUB_ID: z.string().min(1, "AUTH_GITHUB_ID is required"),
- AUTH_GITHUB_SECRET: z.string().min(1, "AUTH_GITHUB_SECRET is required"),
- ADMIN_GITHUB_IDS: z.string().default(""),
- WEB_ORIGIN: z.url().default("http://localhost:5173"),
- STORAGE_DIR: z.string().min(1).default("./storage"),
- GITHUB_WEBHOOK_SECRET: z.string().default(""),
-});
-
-export type AppEnv = z.infer
+ {dict.issues.openLabel}
+ {total}
+
+
+ {dict.issues.firstIssueLabel}
+ {starterCount}
+
+
+ }
+ kicker={dict.issues.kicker}
+ lede={dict.issues.lede}
+ title={dict.issues.title}
+ titleId="issues-heading"
+ />
+ );
+}
diff --git a/apps/api/src/features/issues/components/issues-label-pills.tsx b/apps/api/src/features/issues/components/issues-label-pills.tsx
new file mode 100644
index 0000000..0a742f0
--- /dev/null
+++ b/apps/api/src/features/issues/components/issues-label-pills.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+
+import { localePath } from "@/lib/i18n";
+import type { IssuesLabelPillsProps } from "../types/issues.types";
+
+const QUICK_LINK_CLASS =
+ "inline-flex min-h-8 items-center gap-2 rounded-full border border-border px-3 text-sm text-foreground no-underline hover:bg-muted aria-[current=true]:border-primary aria-[current=true]:bg-primary/5 aria-[current=true]:text-primary";
+
+export function IssuesLabelPills({ q, label, labels, locale, dict }: IssuesLabelPillsProps) {
+ if (labels.length === 0) return null;
+
+ return (
+
+
+ {dict.issues.filterBy}
+
+ {labels.map((facet) => {
+ const isCurrent = label === facet.name;
+ const search = new URLSearchParams();
+ if (!isCurrent) {
+ search.set("label", facet.name);
+ }
+ if (q !== undefined && q.trim().length > 0) {
+ search.set("q", q.trim());
+ }
+ const suffix = search.size > 0 ? `?${search.toString()}` : "";
+ const href = localePath(locale, `/issues${suffix}`);
+
+ return (
+
+ {facet.name}
+
+ {facet.count}
+
+
+ );
+ })}
+ {label !== undefined || q !== undefined ? (
+
+ {dict.issues.clear}
+
+ ) : null}
+
+ );
+}
diff --git a/apps/api/src/features/issues/components/issues-list.tsx b/apps/api/src/features/issues/components/issues-list.tsx
new file mode 100644
index 0000000..528b09c
--- /dev/null
+++ b/apps/api/src/features/issues/components/issues-list.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+
+import { ErrorPanel, LoadingPanel } from "@/components/modules/common";
+import { Button } from "@/components/ui/button";
+import { IssueRow } from "@/components/ui/issue-row";
+import { localePath } from "@/lib/i18n";
+import type { IssuesListProps } from "../types/issues.types";
+
+export function IssuesList({ issues, isLoading, error, locale, dict }: IssuesListProps) {
+ if (error !== undefined) {
+ return (
+
+
+ {dict.issues.emptyTitle}
+
+
+ );
+ }
+
+ return (
+ {dict.issues.emptyBody}
+ }> + {dict.issues.clear} + +
+ {issues.map((issue) => (
+
+ );
+}
diff --git a/apps/api/src/features/issues/components/issues-pagination.tsx b/apps/api/src/features/issues/components/issues-pagination.tsx
new file mode 100644
index 0000000..58b565f
--- /dev/null
+++ b/apps/api/src/features/issues/components/issues-pagination.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import type { IssuesPaginationProps } from "../types/issues.types";
+
+export function IssuesPagination({ page, totalPages, onNavigate, dict }: IssuesPaginationProps) {
+ if (totalPages <= 1) return null;
+
+ return (
+
+ );
+}
diff --git a/apps/api/src/features/issues/components/issues-search-form.tsx b/apps/api/src/features/issues/components/issues-search-form.tsx
new file mode 100644
index 0000000..670ff4c
--- /dev/null
+++ b/apps/api/src/features/issues/components/issues-search-form.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import type { IssuesSearchFormProps } from "../types/issues.types";
+
+const SELECT_CLASS =
+ "h-9 w-full min-w-0 rounded-md border border-input bg-card px-2.5 py-1 text-sm text-foreground shadow-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50";
+
+export function IssuesSearchForm({ q, label, labels, onNavigate, dict }: IssuesSearchFormProps) {
+ return (
+
+ {/* Hero Header */}
+
+ );
+}
+
+/* ─── Grid View ─────────────────────────────────────────────────────────── */
+
+function MemberGridView({
+ members,
+ locale,
+ dict,
+}: {
+ members: PublicMemberDto[];
+ locale: Locale;
+ dict: Dictionary;
+}) {
+ return (
+
+
+
+ {/* Skill Category Tabs */}
+
+
+ + {dict.members.title} +
++ People who chose to contribute. +
+
+
+
+ {/* Controls */}
+
+
+ {categories.map((entry) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* Results */}
+
+
+
+
+
+
+
+
+
+ {visible.length === 0 ? (
+
+
+
+ {dict.members.emptyTitle}
+
+
+ ) : effectiveView === "grid" ? (
+ {dict.members.emptyBody}
+ +
+ {members.map((member) => (
+
+
+ ))}
+
+ );
+}
+
+/* ─── Table View ─────────────────────────────────────────────────────────── */
+
+function MemberTableView({
+ members,
+ locale,
+ dict,
+}: {
+ members: PublicMemberDto[];
+ locale: Locale;
+ dict: Dictionary;
+}) {
+ return (
+
+
+
+
+
+
+ {member.affiliation !== null || member.location !== null ? (
+
+
+ {member.displayName.slice(0, 2).toUpperCase()}
+
+
+
+
+ {member.displayName}
+
+
+ + {member.headline ?? `@${member.githubUsername}`} +
+
+ {member.affiliation !== null ? (
+
+
+ ) : null}
+
+ {member.skills.length > 0 ? (
+
+ }
+ className="w-full sm:w-auto"
+ >
+ {dict.members.viewProfile}
+
+
+
+
+ );
+}
+
+/* ─── Skill chips (shared sub-component) ────────────────────────────────── */
+
+function MemberSkillChips({ skills }: { skills: string[] }) {
+ if (skills.length === 0) return null;
+ const shown = skills.slice(0, 2);
+ const hidden = skills.slice(2);
+ return (
+
+
+
+
+
+ | MEMBER | +ROLE | +ORGANISATION | +CITY | +SKILLS | +
|---|---|---|---|---|
|
+
+
+
+
+ {member.displayName}
+
+
+ @{member.githubUsername}
+
+
+ |
+ {member.headline ?? "—"} | ++ {member.affiliation ?? "—"} + | +{member.location ?? "—"} | +
+
+ {member.skills.length > 0
+ ? (member.skills as string[]).map((s) => (
+
+ {s}
+
+ ))
+ : "—"}
+
+ |
+
+ {shown.map((s) => (
+
+ {s}
+
+ ))}
+ {hidden.length > 0 && (
+
+ );
+}
diff --git a/apps/api/src/features/members/components/member-overview-tab.tsx b/apps/api/src/features/members/components/member-overview-tab.tsx
new file mode 100644
index 0000000..b133741
--- /dev/null
+++ b/apps/api/src/features/members/components/member-overview-tab.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { CaretRightIcon } from "@phosphor-icons/react";
+
+import type { MemberOverviewTabProps } from "../types/members.types";
+
+export function MemberOverviewTab({ bio, displayName, contributions }: MemberOverviewTabProps) {
+ return (
+
+
+ +{hidden.length} more
+
+
+ )}
+
+
+
+ {hidden.map((s) => (
+
+ {s}
+
+ ))}
+
+
+ {/* Bio Prose */}
+
+ );
+}
diff --git a/apps/api/src/features/members/components/member-profile-hero.tsx b/apps/api/src/features/members/components/member-profile-hero.tsx
new file mode 100644
index 0000000..540494a
--- /dev/null
+++ b/apps/api/src/features/members/components/member-profile-hero.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {
+ BriefcaseIcon,
+ CheckCircleIcon,
+ GithubLogoIcon,
+ MapPinIcon,
+ PencilIcon,
+ ShareNetworkIcon,
+} from "@phosphor-icons/react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Chip } from "@/components/ui/chip";
+import { MemberAvatar } from "@/components/ui/member-avatar";
+import { localePath } from "@/lib/i18n";
+import type { MemberProfileHeroProps } from "../types/members.types";
+
+export function MemberProfileHero({
+ profile,
+ isOwner,
+ actor,
+ copied,
+ onShare,
+ locale,
+ dict,
+}: MemberProfileHeroProps) {
+ return (
+
+
+
+ {/* Contributions Section */}
+ + {bio ?? + "I work on payment rails and I am interested in how public systems handle money. Happy to mentor on Django, especially for a first contribution to a government repository."} +
+
+
+ Contributions
+ +
+ {contributions.map((item) => (
+
+
+
+ ))}
+
+ {item.author || displayName}
+ {item.action}
+
+
+
+ {item.status === "MERGED" ? (
+
+ {item.status}
+
+ ) : item.status === "OPENED" ? (
+
+ {item.status}
+
+ ) : (
+
+ {item.status}
+
+ )}
+
+ {item.date}
+
+
+
+
+ );
+}
diff --git a/apps/api/src/features/members/components/member-sidebar.tsx b/apps/api/src/features/members/components/member-sidebar.tsx
new file mode 100644
index 0000000..19f8fcc
--- /dev/null
+++ b/apps/api/src/features/members/components/member-sidebar.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { BuildingsIcon } from "@phosphor-icons/react";
+
+import type { MemberSidebarProps } from "../types/members.types";
+
+export function MemberSidebar({ skills, affiliation, links }: MemberSidebarProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {dict.profile.statusShort[actor.member.status]}
+
+ ) : null}
+
+
+ + {profile.displayName} +
+ {isOwner && actor !== null ? ( +
+ {profile.headline !== null || profile.affiliation !== null ? (
+
+
+
+ {isOwner ? (
+ }
+ className="gap-2 cursor-pointer"
+ >
+
+
+
+ {copied ? (
+
+ Copied link!
+
+ ) : null}
+
+
+ }
+ className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90"
+ >
+
+ {/* Skills Card */}
+ {skills.length > 0 ? (
+
+ );
+}
diff --git a/apps/api/src/features/members/components/member-tabs.tsx b/apps/api/src/features/members/components/member-tabs.tsx
new file mode 100644
index 0000000..3bb9814
--- /dev/null
+++ b/apps/api/src/features/members/components/member-tabs.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import type { MemberTabsProps } from "../types/members.types";
+
+export function MemberTabs({ activeTab, onChangeTab }: MemberTabsProps) {
+ return (
+
+
+ ) : null}
+
+ {/* Affiliation Card */}
+ {affiliation !== null ? (
+ Skills
+
+ {skills.map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+ ) : null}
+
+ {/* Links Card */}
+ {links.length > 0 ? (
+ Affiliation
+
+
+
+
+
+
+ ) : null}
+ Links
+
+ {links.map((link) => (
+
+ {link.replace(/^https?:\/\//, "")}
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/api/src/features/members/constants.ts b/apps/api/src/features/members/constants.ts
new file mode 100644
index 0000000..e5756ac
--- /dev/null
+++ b/apps/api/src/features/members/constants.ts
@@ -0,0 +1,74 @@
+import type { MemberContribution } from "./types/members.types";
+
+export const SAMPLE_MEMBER_CONTRIBUTIONS: MemberContribution[] = [
+ {
+ id: "1",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "2",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "3",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "4",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "5",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "6",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "MERGED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "7",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "OPENED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "8",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "CLOSED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "9",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "CLOSED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+ {
+ id: "10",
+ author: "",
+ action: "improved the Nepali translation of the contribute page",
+ status: "CLOSED",
+ date: "14 Bhadra 2083 (30 Aug)",
+ },
+];
diff --git a/apps/api/src/features/members/hooks/use-member-directory.ts b/apps/api/src/features/members/hooks/use-member-directory.ts
new file mode 100644
index 0000000..7808721
--- /dev/null
+++ b/apps/api/src/features/members/hooks/use-member-directory.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useMediaQuery, useMemberFilters, useMembers } from "@/hooks";
+import { MEMBER_SKILL_PREVIEW_COUNT } from "@/shared/constants";
+import type { SortMode, ViewMode } from "../types/members.types";
+
+/**
+ * Owns all stateful logic for the member directory page:
+ * filtering, sorting, view mode, and responsive compaction.
+ */
+export function useMemberDirectory() {
+ const { members, isLoading, error } = useMembers();
+ const { query, setQuery, skill, setSkill, filtered, clear } = useMemberFilters(members);
+
+ const [viewMode, setViewMode] = useState
+
+
+
+
+
+
+
+ + {dict.project.aboutKicker} +
++ {dict.project.aboutTitle} +
+
+
+
+
+
+
+
+
+ + {dict.project.contributeKicker} +
+{dict.project.contributeBody}
++ {dict.project.repository} +
+ ++ {dict.project.licence} +
++ {project.license ?? dict.project.notPublished} +
+
+
+ {dict.project.sheetTitle}
+
+ {project.license ?? dict.project.none}
+
+
+ {[
+ {
+ label: dict.project.repository,
+ value: (
+
+ {project.fullName}
+
+ ),
+ },
+ { label: dict.project.openIssues, value: project.openIssueCount },
+ { label: dict.project.members, value: project.memberCount },
+ ].map((item) => (
+
+
+
+ {item.label}
+
+ {item.value}
+
+ ))}
+ + {dict.project.lastSync} · {synced} +
+
+
+
+
+
+
+ {owner} /
++ {name ?? project.fullName} +
++ {project.description ?? dict.project.none} +
+-
+
- {dict.project.openIssues} +
- {project.openIssueCount} +
- {dict.project.members} +
- {project.memberCount} +
+
+
+
+
+ {dict.project.publicLabel}
+ {dict.project.openLabel}
+
+ {dict.project.lastSync}{" "}
+ {synced}
+
+
+
+
+ }>
+ {dict.project.chooseIssue}
+
+ }
+ >
+ {dict.project.viewOnGitHub}
+
+
+ {dict.project.githubSourceNote}
+
+ {dict.project.allIssues} →
+
+ {recentIssues.length === 0 ? (
+
+
+ + {dict.project.issuesKicker} +
++ {dict.project.issuesTitle} +
+
+
+ {dict.project.noIssues}
+
+
+ ) : (
+
+ {recentIssues.map((issue) => (
+
+ )}
+