atbb / apps / web / src / routes / boards.tsx

import { Hono } from "hono";
import { BaseLayout } from "../layouts/base.js";
import { PageHeader, EmptyState, ErrorDisplay } from "../components/index.js";
import { fetchApi } from "../lib/api.js";
import { getSession } from "../lib/session.js";
import { isProgrammingError, isNetworkError, isNotFoundError } from "../lib/errors.js";
import { timeAgo } from "../lib/time.js";
import { logger } from "../lib/logger.js";
import { FALLBACK_THEME, type WebAppEnv } from "../lib/theme-resolution.js";

// API response type shapes

interface BoardResponse {
  id: string;
  did: string;
  uri: string;
  name: string;
  description: string | null;
  slug: string | null;
  sortOrder: number | null;
  categoryId: string;
  categoryUri: string | null;
  createdAt: string | null;
  indexedAt: string | null;
}

interface CategoryResponse {
  id: string;
  did: string;
  name: string;
  description: string | null;
  slug: string | null;
  sortOrder: number | null;
  forumId: string | null;
  createdAt: string | null;
  indexedAt: string | null;
}

interface AuthorResponse {
  did: string;
  handle: string | null;
}

interface TopicResponse {
  id: string;
  did: string;
  rkey: string;
  title: string | null;
  text: string;
  forumUri: string | null;
  boardUri: string | null;
  boardId: string | null;
  parentPostId: string | null;
  createdAt: string | null;
  author: AuthorResponse | null;
  replyCount: number;
  lastReplyAt: string | null;
}

interface TopicsListResponse {
  topics: TopicResponse[];
  total: number;
  offset: number;
  limit: number;
}

// ─── Inline components ──────────────────────────────────────────────────────

function TopicRow({ topic }: { topic: TopicResponse }) {
  const title = topic.title ?? topic.text.slice(0, 80);
  const handle = topic.author?.handle ?? topic.author?.did ?? topic.did;
  const replyLabel = topic.replyCount === 1 ? "1 reply" : `${topic.replyCount} replies`;
  const dateLabel = topic.lastReplyAt
    ? `last reply ${timeAgo(new Date(topic.lastReplyAt))}`
    : topic.createdAt
      ? timeAgo(new Date(topic.createdAt))
      : "unknown";
  return (
    <div class="topic-row">
      <a href={`/topics/${topic.id}`} class="topic-row__title">
        {title}
      </a>
      <div class="topic-row__meta">
        <span>by {handle}</span>
        <span>{dateLabel}</span>
        <span>{replyLabel}</span>
      </div>
    </div>
  );
}

function LoadMoreButton({
  boardId,
  nextOffset,
}: {
  boardId: string;
  nextOffset: number;
}) {
  return (
    <button
      hx-get={`/boards/${boardId}?offset=${nextOffset}`}
      hx-swap="outerHTML"
      hx-target="this"
      hx-indicator="#loading-spinner"
    >
      Load More
    </button>
  );
}

function TopicFragment({
  boardId,
  topics,
  total,
  offset,
}: {
  boardId: string;
  topics: TopicResponse[];
  total: number;
  offset: number;
}) {
  const nextOffset = offset + topics.length;
  const hasMore = nextOffset < total;
  return (
    <>
      {topics.map((topic) => (
        <TopicRow key={topic.id} topic={topic} />
      ))}
      {hasMore && (
        <LoadMoreButton boardId={boardId} nextOffset={nextOffset} />
      )}
    </>
  );
}

// ─── Route factory ───────────────────────────────────────────────────────────

export function createBoardsRoutes(appviewUrl: string) {
  return new Hono<WebAppEnv>().get("/boards/:id", async (c) => {
    const resolvedTheme = c.get("theme") ?? FALLBACK_THEME;
    const idParam = c.req.param("id");

    // Validate that the ID is an integer (parseable as BigInt)
    if (!/^\d+$/.test(idParam)) {
      // HTMX partial mode: return empty fragment silently
      if (c.req.header("HX-Request")) {
        return c.html("", 200);
      }
      return c.html(
        <BaseLayout title="Bad Request — atBB Forum" resolvedTheme={resolvedTheme}>
          <ErrorDisplay message="Invalid board ID." />
        </BaseLayout>,
        400
      );
    }

    const boardId = idParam;

    // ── HTMX partial mode ──────────────────────────────────────────────────
    if (c.req.header("HX-Request")) {
      const offsetRaw = parseInt(c.req.query("offset") ?? "0", 10);
      const offset = isNaN(offsetRaw) || offsetRaw < 0 ? 0 : offsetRaw;

      try {
        const topicsData = await fetchApi<TopicsListResponse>(
          `/boards/${boardId}/topics?offset=${offset}&limit=25`
        );
        const { topics, total } = topicsData;

        return c.html(
          <TopicFragment
            boardId={boardId}
            topics={topics}
            total={total}
            offset={offset}
          />,
          200
        );
      } catch (error) {
        if (isProgrammingError(error)) throw error;
        logger.error("Failed to load topics for HTMX partial request", {
          operation: "GET /boards/:id (HTMX partial)",
          boardId,
          offset,
          error: error instanceof Error ? error.message : String(error),
        });
        // On any error in HTMX partial mode, return empty fragment to avoid breaking the page
        return c.html("", 200);
      }
    }

    // ── Full page mode ────────────────────────────────────────────────────
    const postedSuccess = c.req.query("posted") === "1";
    const auth = await getSession(appviewUrl, c.req.header("cookie"));

    // Stage 1: fetch board metadata and topics in parallel
    let board: BoardResponse;
    let topicsData: TopicsListResponse;
    try {
      const [boardResult, topicsResult] = await Promise.all([
        fetchApi<BoardResponse>(`/boards/${boardId}`),
        fetchApi<TopicsListResponse>(`/boards/${boardId}/topics?offset=0&limit=25`),
      ]);
      board = boardResult;
      topicsData = topicsResult;
    } catch (error) {
      if (isProgrammingError(error)) throw error;

      if (isNotFoundError(error)) {
        return c.html(
          <BaseLayout title="Not Found — atBB Forum" auth={auth} resolvedTheme={resolvedTheme}>
            <ErrorDisplay message="This board doesn't exist." />
          </BaseLayout>,
          404
        );
      }

      logger.error("Failed to load board page data (stage 1: board + topics)", {
        operation: "GET /boards/:id",
        boardId,
        error: error instanceof Error ? error.message : String(error),
      });
      const status = isNetworkError(error) ? 503 : 500;
      const message =
        status === 503
          ? "The forum is temporarily unavailable. Please try again later."
          : "Something went wrong loading this board. Please try again later.";
      return c.html(
        <BaseLayout title="Error — atBB Forum" auth={auth} resolvedTheme={resolvedTheme}>
          <ErrorDisplay message={message} />
        </BaseLayout>,
        status
      );
    }

    // Stage 2: fetch category for breadcrumb (non-fatal — page renders without category name)
    let categoryName: string | null = null;
    try {
      const category = await fetchApi<CategoryResponse>(`/categories/${board.categoryId}`);
      categoryName = category.name;
    } catch (error) {
      if (isProgrammingError(error)) throw error;
      logger.error("Failed to load board page data (stage 2: category)", {
        operation: "GET /boards/:id",
        boardId: board.id,
        categoryId: board.categoryId,
        error: error instanceof Error ? error.message : String(error),
      });
      // categoryName remains null — page renders without category in breadcrumb
    }

    const { topics, total, offset } = topicsData;

    return c.html(
      <BaseLayout title={`${board.name} — atBB Forum`} auth={auth} resolvedTheme={resolvedTheme}>
        <nav class="breadcrumb" aria-label="Breadcrumb">
          <ol>
            <li><a href="/">Home</a></li>
            {categoryName && <li><a href="/">{categoryName}</a></li>}
            <li><span>{board.name}</span></li>
          </ol>
        </nav>

        <PageHeader
          title={board.name}
          description={board.description ?? undefined}
        />

        {postedSuccess && auth?.authenticated && (
          <div class="success-banner">
            Your topic has been posted. It will appear shortly.
          </div>
        )}

        {auth?.authenticated ? (
          <a href={`/new-topic?boardId=${boardId}`} class="btn">
            Start a new topic
          </a>
        ) : (
          <p>
            <a href="/login">Log in</a> to start a topic
          </p>
        )}

        <div id="topic-list">
          {topics.length === 0 ? (
            <EmptyState message="No topics yet." />
          ) : (
            <TopicFragment
              boardId={boardId}
              topics={topics}
              total={total}
              offset={offset}
            />
          )}
        </div>
      </BaseLayout>
    );
  });
}