feat(public-screens): all read-only screens wired to read API

apps/web/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
     "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.100.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",

apps/web/src/App.tsx

@@ -1,9 +1,22 @@
-import { createBrowserRouter, RouterProvider } from 'react-router';
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { AppShell } from '@/components/AppShell';
 import { NetworkErrorProvider } from '@/components/NetworkErrorBanner';
 import { AuthProvider } from '@/hooks/useAuth';
-import { HomeStub } from '@/pages/HomeStub';
+import { ApiQueryClientProvider } from '@/lib/queryClient';
+import { Home } from '@/screens/Home';
+import { ProjectsIndex } from '@/screens/ProjectsIndex';
+import { ProjectDetail } from '@/screens/ProjectDetail';
+import { PeopleIndex } from '@/screens/PeopleIndex';
+import { PersonDetail } from '@/screens/PersonDetail';
+import { HelpWantedIndex } from '@/screens/HelpWantedIndex';
+import { ProjectUpdatesFeed } from '@/screens/ProjectUpdatesFeed';
+import { ProjectBuzzFeed } from '@/screens/ProjectBuzzFeed';
+import { TagsOverview } from '@/screens/TagsOverview';
+import { TagsNamespace } from '@/screens/TagsNamespace';
+import { TagDetail } from '@/screens/TagDetail';
+import { Volunteer } from '@/screens/Volunteer';
+import { Sponsor } from '@/screens/Sponsor';
 import { ComingSoon } from '@/pages/ComingSoon';
 import { NotFound } from '@/pages/NotFound';
 import { LoginPlaceholder } from '@/pages/LoginPlaceholder';
@@ -12,35 +25,51 @@ const router = createBrowserRouter([
   {
     element: <AppShell />,
     children: [
-      { path: '/', element: <HomeStub /> },
-      { path: '/projects', element: <ComingSoon /> },
+      { path: '/', element: <Home /> },
+      { path: '/projects', element: <ProjectsIndex /> },
       { path: '/projects/create', element: <ComingSoon /> },
-      { path: '/projects/:slug', element: <ComingSoon /> },
+      { path: '/projects/:slug', element: <ProjectDetail /> },
       { path: '/projects/:slug/edit', element: <ComingSoon /> },
-      { path: '/help-wanted', element: <ComingSoon /> },
-      { path: '/members', element: <ComingSoon /> },
-      { path: '/members/:slug', element: <ComingSoon /> },
-      { path: '/volunteer', element: <ComingSoon /> },
-      { path: '/sponsor', element: <ComingSoon /> },
+      { path: '/projects/:slug/updates/:number', element: <ProjectDetail anchor="update" /> },
+      { path: '/projects/:slug/buzz/:buzzSlug', element: <ProjectDetail anchor="buzz" /> },
+      { path: '/projects/:slug/buzz/new', element: <ComingSoon /> },
+      { path: '/help-wanted', element: <HelpWantedIndex /> },
+      { path: '/people', element: <Navigate to="/members" replace /> },
+      { path: '/members', element: <PeopleIndex /> },
+      { path: '/members/:slug', element: <PersonDetail /> },
+      { path: '/members/:slug/edit', element: <ComingSoon /> },
+      { path: '/project-updates', element: <ProjectUpdatesFeed /> },
+      { path: '/project-buzz', element: <ProjectBuzzFeed /> },
+      { path: '/tags', element: <TagsOverview /> },
+      { path: '/tags/:namespace', element: <TagsNamespace /> },
+      { path: '/tags/:namespace/:slug', element: <TagDetail /> },
+      { path: '/volunteer', element: <Volunteer /> },
+      { path: '/sponsor', element: <Sponsor /> },
       { path: '/account', element: <ComingSoon /> },
-      { path: '/chat', element: <ComingSoon /> },
-      { path: '/search', element: <ComingSoon /> },
+      { path: '/search', element: <SearchRedirect /> },
       { path: '/pages/:slug', element: <ComingSoon /> },
       { path: '/contact', element: <ComingSoon /> },
-      { path: '/tags/:namespace/:slug', element: <ComingSoon /> },
       { path: '/login', element: <LoginPlaceholder /> },
       { path: '*', element: <NotFound /> },
     ],
   },
 ]);
 
+// /search?q=… isn't a separate page in v1 — redirect to /projects with the query preserved.
+function SearchRedirect() {
+  const q = new URLSearchParams(window.location.search).get('q');
+  return <Navigate to={`/projects${q ? `?q=${encodeURIComponent(q)}` : ''}`} replace />;
+}
+
 export function App() {
   return (
     <TooltipProvider>
       <NetworkErrorProvider>
-        <AuthProvider>
-          <RouterProvider router={router} />
-        </AuthProvider>
+        <ApiQueryClientProvider>
+          <AuthProvider>
+            <RouterProvider router={router} />
+          </AuthProvider>
+        </ApiQueryClientProvider>
       </NetworkErrorProvider>
     </TooltipProvider>
   );

apps/web/src/components/ActivityCard.tsx

@@ -0,0 +1,139 @@
+import { Link } from 'react-router';
+import { MarkdownView } from '@/components/MarkdownView';
+import { PersonAvatar } from '@/components/PersonAvatar';
+import { formatRelativeTime, formatAbsoluteDate } from '@/lib/time';
+import type { ProjectUpdateResponse, ProjectBuzzResponse } from '@/lib/api';
+
+export type ActivityItem =
+  | { kind: 'update'; data: ProjectUpdateResponse }
+  | { kind: 'buzz'; data: ProjectBuzzResponse };
+
+interface ActivityCardProps {
+  item: ActivityItem;
+}
+
+export function ActivityCard({ item }: ActivityCardProps) {
+  if (item.kind === 'update') return <UpdateCard update={item.data} />;
+  return <BuzzCard buzz={item.data} />;
+}
+
+function UpdateCard({ update }: { update: ProjectUpdateResponse }) {
+  return (
+    <article className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between mb-2 text-sm">
+        <div className="text-muted-foreground">
+          <Link to={`/projects/${update.project.slug}`} className="hover:text-primary font-medium">
+            {update.project.title}
+          </Link>
+          <span> · </span>
+          <Link
+            to={`/projects/${update.project.slug}/updates/${update.number}`}
+            className="hover:text-primary"
+          >
+            Update #{update.number}
+          </Link>
+        </div>
+        <span title={formatAbsoluteDate(update.createdAt)} className="text-xs text-muted-foreground">
+          {formatRelativeTime(update.createdAt)}
+        </span>
+      </div>
+
+      {update.author && (
+        <div className="flex items-center gap-2 mb-2 text-xs">
+          <PersonAvatar person={update.author} size={20} />
+          <Link to={`/members/${update.author.slug}`} className="text-muted-foreground hover:text-primary">
+            {update.author.fullName}
+          </Link>
+        </div>
+      )}
+
+      <div className="line-clamp-5">
+        <MarkdownView html={update.bodyHtml} />
+      </div>
+    </article>
+  );
+}
+
+function BuzzCard({ buzz }: { buzz: ProjectBuzzResponse }) {
+  let hostname: string;
+  try {
+    hostname = new URL(buzz.url).hostname;
+  } catch {
+    hostname = buzz.url;
+  }
+  return (
+    <article className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between mb-2 text-sm text-muted-foreground">
+        <span>
+          <Link to={`/projects/${buzz.project.slug}`} className="hover:text-primary font-medium">
+            {buzz.project.title}
+          </Link>
+          <span> · Buzz · </span>
+          <span title={formatAbsoluteDate(buzz.publishedAt)}>
+            {formatAbsoluteDate(buzz.publishedAt, { month: 'short', day: 'numeric', year: 'numeric' })}
+          </span>
+        </span>
+      </div>
+
+      <div className="flex gap-3">
+        {buzz.imageUrl && (
+          <img
+            src={buzz.imageUrl}
+            alt=""
+            width={96}
+            height={96}
+            className="rounded object-cover shrink-0"
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          <h3 className="text-base font-semibold mb-0.5">
+            <a href={buzz.url} target="_blank" rel="noopener noreferrer" className="hover:text-primary">
+              {buzz.headline}
+            </a>
+          </h3>
+          <p className="text-xs text-muted-foreground mb-2">{hostname}</p>
+          {buzz.summaryHtml && (
+            <div className="line-clamp-3 text-sm">
+              <MarkdownView html={buzz.summaryHtml} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between mt-3 pt-2 border-t border-border text-xs text-muted-foreground">
+        {buzz.postedBy && (
+          <span>
+            Logged by{' '}
+            <Link to={`/members/${buzz.postedBy.slug}`} className="hover:text-primary">
+              {buzz.postedBy.fullName}
+            </Link>
+          </span>
+        )}
+        <Link to={`/projects/${buzz.project.slug}/buzz/${buzz.slug}`} className="hover:text-primary">
+          View on site
+        </Link>
+      </div>
+    </article>
+  );
+}
+
+/** Merge update + buzz arrays into a single reverse-chronological feed. */
+export function mergeActivity(
+  updates: ProjectUpdateResponse[],
+  buzz: ProjectBuzzResponse[],
+  limit?: number,
+): ActivityItem[] {
+  const items: Array<{ item: ActivityItem; sortKey: string }> = [
+    ...updates.map((u) => ({
+      item: { kind: 'update' as const, data: u },
+      sortKey: u.createdAt,
+    })),
+    ...buzz.map((b) => ({
+      item: { kind: 'buzz' as const, data: b },
+      sortKey: b.publishedAt,
+    })),
+  ];
+  items.sort((a, b) => b.sortKey.localeCompare(a.sortKey));
+  const merged = items.map((x) => x.item);
+  return limit ? merged.slice(0, limit) : merged;
+}

apps/web/src/components/FacetSidebar.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TagChip } from '@/components/TagChip';
+import { STAGES, type Stage } from '@/components/StageBadge';
+import { Link } from 'react-router';
+import { cn } from '@/lib/utils';
+import type { Facets, FacetEntry } from '@/lib/api';
+
+interface FacetSidebarProps {
+  facets: Facets | undefined;
+  activeTags: string[];
+  onToggleTag: (handle: string) => void;
+  activeStages?: string[];
+  onToggleStage?: (stage: string) => void;
+  tabs?: Array<'topic' | 'tech' | 'event' | 'stage'>;
+  limit?: number;
+  className?: string;
+}
+
+const NS_LABELS = {
+  topic: 'Topics',
+  tech: 'Tech',
+  event: 'Events',
+  stage: 'Stages',
+} as const;
+
+const NS_SEE_ALL: Record<string, string> = {
+  topic: '/tags/topic',
+  tech: '/tags/tech',
+  event: '/tags/event',
+};
+
+function facetsForNamespace(facets: Facets | undefined, ns: 'topic' | 'tech' | 'event'): FacetEntry[] {
+  if (!facets) return [];
+  if (ns === 'topic') return facets.byTopic ?? [];
+  if (ns === 'tech') return facets.byTech ?? [];
+  return facets.byEvent ?? [];
+}
+
+export function FacetSidebar({
+  facets,
+  activeTags,
+  onToggleTag,
+  activeStages,
+  onToggleStage,
+  tabs = ['topic', 'tech', 'event', 'stage'],
+  limit = 10,
+  className,
+}: FacetSidebarProps) {
+  const [tab, setTab] = useState<string>(tabs[0] ?? 'topic');
+  const activeTagSet = new Set(activeTags);
+  const activeStageSet = new Set(activeStages ?? []);
+
+  return (
+    <aside className={cn('w-full', className)} aria-label="Filters">
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList className="w-full grid" style={{ gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }}>
+          {tabs.map((t) => (
+            <TabsTrigger key={t} value={t} className="text-xs">
+              {NS_LABELS[t]}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs
+          .filter((t): t is 'topic' | 'tech' | 'event' => t !== 'stage')
+          .map((ns) => {
+            const entries = facetsForNamespace(facets, ns).slice(0, limit);
+            return (
+              <TabsContent key={ns} value={ns} className="space-y-2 pt-3">
+                {entries.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">No tags yet.</p>
+                ) : (
+                  <div className="flex flex-wrap gap-1.5">
+                    {entries.map((e) => {
+                      const handle = e.handle ?? `${ns}.${e.slug ?? ''}`;
+                      return (
+                        <TagChip
+                          key={handle}
+                          tag={{
+                            namespace: ns,
+                            slug: e.slug ?? handle.split('.').slice(1).join('.'),
+                            title: e.title ?? e.slug ?? handle,
+                          }}
+                          count={e.count}
+                          active={activeTagSet.has(handle)}
+                          onClick={() => onToggleTag(handle)}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+                <div className="pt-1">
+                  <Link to={NS_SEE_ALL[ns] ?? '/tags'} className="text-xs text-primary hover:underline">
+                    See all {NS_LABELS[ns].toLowerCase()} →
+                  </Link>
+                </div>
+              </TabsContent>
+            );
+          })}
+
+        {tabs.includes('stage') && (
+          <TabsContent value="stage" className="space-y-2 pt-3">
+            <div className="flex flex-col gap-1">
+              {(Object.keys(STAGES) as Stage[]).map((s) => {
+                const stageFacet = facets?.byStage?.find((f) => f.stage === s);
+                const count = stageFacet?.count ?? 0;
+                const meta = STAGES[s];
+                const isActive = activeStageSet.has(s);
+                return (
+                  <button
+                    key={s}
+                    type="button"
+                    onClick={() => onToggleStage?.(s)}
+                    className={cn(
+                      'flex items-center justify-between gap-2 rounded border border-border px-2 py-1 text-sm hover:bg-accent transition-colors text-left',
+                      isActive && 'bg-accent ring-1 ring-primary',
+                    )}
+                  >
+                    <span className="flex items-center gap-2">
+                      <span className={cn('h-2 w-2 rounded-full', meta.barClassName)} />
+                      {meta.label}
+                    </span>
+                    <span className="text-xs text-muted-foreground">{count}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </TabsContent>
+        )}
+      </Tabs>
+    </aside>
+  );
+}