UI overhaul: black/white graffiti theme, messenger redesign, logo + font

app/.dockerignore

@@ -5,7 +5,6 @@ out
 *.db-journal
 *.db-wal
 *.db-shm
-.env
-.env.local
+.env*
 coverage
 .git

app/Dockerfile

@@ -1,7 +1,7 @@
 # Multi-stage build for a small, self-contained production image.
 # Needs Node 22.5+ for node:sqlite (same requirement as local dev).
 
-FROM node:22-slim AS base
+FROM node:22.13-slim AS base
 
 FROM base AS deps
 WORKDIR /app

app/next.config.ts

@@ -12,7 +12,7 @@ const nextConfig: NextConfig = {
   // it's running on unless that origin is explicitly allowed here.
   experimental: {
     serverActions: {
-      allowedOrigins: ["localhost:3000", "*.app.github.dev", "*.trycloudflare.com"],
+      allowedOrigins: ["localhost:3000", "*.trycloudflare.com"],
     },
   },
 };

app/src/app/(platform)/asks/AnswerForm.tsx

@@ -5,6 +5,7 @@ import { answerAskAction, type AskActionState } from "./actions";
 
 const initialState: AskActionState = {};
 
+/** Form that lets the page owner submit an answer to a specific ask. */
 export function AnswerForm({ askId }: { askId: string }) {
   const boundAction = answerAskAction.bind(null, askId);
   const [state, formAction, pending] = useActionState(boundAction, initialState);

app/src/app/(platform)/asks/AskCard.tsx

@@ -1,12 +1,14 @@
 import type { Answer, Ask } from "@/lib/asks";
 import { AnswerForm } from "./AnswerForm";
 
+/** Formats an ISO date string as a short locale date for display in ask cards. */
 function formatDate(iso: string): string {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return iso;
   return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
+/** Renders a single ask with its answers and, for the page owner, an answer form. */
 export function AskCard({
   ask,
   answers,

app/src/app/(platform)/asks/AskForm.tsx

@@ -5,6 +5,7 @@ import { createAskAction, type AskActionState } from "./actions";
 
 const initialState: AskActionState = {};
 
+/** Form that lets a viewer submit a new ask to the current page owner. */
 export function AskForm() {
   const [state, formAction, pending] = useActionState(createAskAction, initialState);
 

app/src/app/(platform)/asks/actions.ts

@@ -17,12 +17,14 @@ export interface AskActionState {
   success?: string;
 }
 
+/** Maps AskError and RateLimitError to user-facing state; re-throws anything else. */
 function handleAskError(e: unknown): never | AskActionState {
   if (e instanceof AskError) return { error: e.message };
   if (e instanceof RateLimitError) return { error: e.message };
   throw e;
 }
 
+/** Server action: validate and submit a new ask for the signed-in viewer. */
 export async function createAskAction(
   _prevState: AskActionState,
   formData: FormData,
@@ -36,8 +38,6 @@ export async function createAskAction(
   const isSensitive = formData.get("sensitive") === "on";
 
   try {
-    const key = await rateLimitActorKey("ask-view", viewer.id);
-    checkRateLimit(key, 20);
     createAsk({ askerId: viewer.id, body, domain, isAnonymous, isSensitive });
   } catch (e) {
     return handleAskError(e);
@@ -48,6 +48,7 @@ export async function createAskAction(
   return { success: "Your ask is posted." };
 }
 
+/** Server action: submit an answer to *askId* from the signed-in viewer. */
 export async function answerAskAction(
   askId: string,
   _prevState: AskActionState,
@@ -70,6 +71,7 @@ export async function answerAskAction(
   return { success: "Your answer is posted." };
 }
 
+/** Server action: close *askId* — only the original asker may do this. */
 export async function closeAskAction(askId: string): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks/mine");
@@ -85,6 +87,7 @@ export async function closeAskAction(askId: string): Promise<void> {
   revalidatePath("/asks/mine");
 }
 
+/** Server action: opt the signed-in viewer in or out of the ask pool. */
 export async function setReachableAction(reachable: boolean): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks");

app/src/app/(platform)/asks/mine/page.tsx

@@ -4,6 +4,7 @@ import { listAnswers, listAsksByUser } from "@/lib/asks";
 import { getCurrentUser } from "@/lib/session";
 import { closeAskAction } from "../actions";
 
+/** Server page showing the signed-in user's own asks and their statuses. */
 export default async function MyAsksPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks/mine");

app/src/app/(platform)/asks/page.tsx

@@ -6,6 +6,7 @@ import { setReachableAction } from "./actions";
 import { AskCard } from "./AskCard";
 import { AskForm } from "./AskForm";
 
+/** Server page rendering the public Ask Us pool, with the ask form for signed-in users. */
 export default async function AsksPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks");

app/src/app/(platform)/explore/page.tsx

@@ -14,6 +14,7 @@ interface Props {
   searchParams: Promise<{ q?: string }>;
 }
 
+/** Server page for the public Explore/discovery feed, with tag and text search. */
 export default async function ExplorePage({ searchParams }: Props) {
   ensureSeedRings();
   ensureSeedCollections();

app/src/app/(platform)/make/actions.ts

@@ -18,6 +18,7 @@ export interface MakeState {
   error?: string;
 }
 
+/** Server action for the page-creation wizard. Validates template and display name, builds and saves the page document, then redirects to the new profile. */
 export async function makeFlowAction(_prevState: MakeState, formData: FormData): Promise<MakeState> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/make");

app/src/app/(platform)/messages/[handle]/ThreadComposer.tsx

@@ -5,6 +5,7 @@ import { sendMessageAction, type SendMessageState } from "../actions";
 
 const initialState: SendMessageState = {};
 
+/** Message-composition form for a direct-message thread with *recipientHandle*. */
 export function ThreadComposer({ recipientHandle }: { recipientHandle: string }) {
   const boundAction = sendMessageAction.bind(null, recipientHandle);
   const [state, formAction, pending] = useActionState(boundAction, initialState);

app/src/app/(platform)/messages/[handle]/page.tsx

@@ -11,6 +11,7 @@ interface Props {
   params: Promise<{ handle: string }>;
 }
 
+/** Server page rendering the direct-message thread between the signed-in user and the profile at *handle*. */
 export default async function MessageThreadPage({ params }: Props) {
   const { handle: rawParam } = await params;
   const viewer = await getCurrentUser();

app/src/app/(platform)/messages/actions.ts

@@ -11,6 +11,7 @@ export interface SendMessageState {
   error?: string;
 }
 
+/** Server action: send a message to *recipientHandle* from the signed-in viewer. */
 export async function sendMessageAction(
   recipientHandle: string,
   _prevState: SendMessageState,
@@ -38,6 +39,7 @@ export async function sendMessageAction(
   return {};
 }
 
+/** Server action: mark all unread messages in *conversationId* as read for the viewer. */
 export async function markConversationReadAction(conversationId: string): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/messages");

app/src/app/(platform)/messages/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { getCurrentUser } from "@/lib/session";
 import { listConversations } from "@/lib/messages";
 
+/** Server page listing all direct-message conversations for the signed-in user. */
 export default async function MessagesPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/messages");

app/src/app/(platform)/page.tsx

@@ -41,6 +41,7 @@ const STEPS = [
   { label: "Wander", desc: "Discover other pages, no feed required" },
 ];
 
+/** Server page rendering the platform landing page — signed-in users see their dashboard, visitors see the public feature overview. */
 export default async function HomePage() {
   const viewer = await getCurrentUser();
 

app/src/app/(platform)/studio/StudioClient.tsx

@@ -54,6 +54,7 @@ const TABS: { id: TabId; label: string }[] = [
   { id: "publish", label: "Publish" },
 ];
 
+/** Builds the live Top Eight preview list from the current handle selections and the user's friend list. */
 function buildTopEightPreview(handles: string[], friends: FriendSummary[]): TopEightLink[] {
   return handles.map((handle) => ({
     handle,
@@ -75,10 +76,12 @@ export interface StudioClientProps {
   guestbookEntries: GuestbookEntry[];
 }
 
+/** Generates a new random UUID for client-side module identifiers. */
 function newId(): string {
   return crypto.randomUUID();
 }
 
+/** Resizes a flat pixel array to new dimensions, preserving existing pixels and filling added cells with transparent. */
 function resizePixelGrid(
   width: number,
   height: number,
@@ -99,6 +102,7 @@ function resizePixelGrid(
   return next;
 }
 
+/** Returns a blank 8×8 pixel art piece with a generated id and all pixels set to transparent. */
 function defaultPixelArtPiece(): PixelArtPiece {
   const width = 8;
   const height = 8;
@@ -111,6 +115,7 @@ function defaultPixelArtPiece(): PixelArtPiece {
   };
 }
 
+/** Interactive client component for the page editor Studio, managing draft state, live preview, and all module editors. */
 export function StudioClient({
   initialDocument,
   publishedDocument,
@@ -191,6 +196,7 @@ export function StudioClient({
     [],
   );
 
+  /** Saves the current editor state as a draft without publishing it. */
   const saveDraft = () => {
     runAction("Draft saved — safe to preview without publishing.", () =>
       saveDraftAction(JSON.stringify(document)).then((r) => {
@@ -200,6 +206,7 @@ export function StudioClient({
     );
   };
 
+  /** Saves and immediately publishes the current editor state, discarding any pending draft. */
   const saveAndPublish = () => {
     runAction("Published live.", () =>
       saveAndPublishAction(JSON.stringify(document)).then((r) => {
@@ -209,6 +216,7 @@ export function StudioClient({
     );
   };
 
+  /** Publishes the saved draft without changing the editor's working state. */
   const publishExistingDraft = () => {
     runAction("Draft published live.", () =>
       publishDraftAction().then((r) => {
@@ -222,6 +230,7 @@ export function StudioClient({
     );
   };
 
+  /** Exports the current page document as a JSON file download. */
   const handleExport = () => {
     startTransition(async () => {
       setMessage(null);
@@ -243,6 +252,7 @@ export function StudioClient({
     });
   };
 
+  /** Reads *file*, imports it as the current page document, and publishes it immediately. */
   const handleImport = (file: File) => {
     startTransition(async () => {
       setMessage(null);
@@ -263,6 +273,7 @@ export function StudioClient({
     });
   };
 
+  /** Restores a previously saved version by *versionId* and reloads the editor state. */
   const restoreVersion = (versionId: string) => {
     runAction("Version restored.", () =>
       restoreVersionAction(versionId).then((r) => {
@@ -453,6 +464,7 @@ export function StudioClient({
   );
 }
 
+/** Studio tab for colors, fonts, background, and theme publishing. */
 function LookTab({
   document: doc,
   onChange,
@@ -664,6 +676,7 @@ function LookTab({
   );
 }
 
+/** Studio tab for reordering and toggling the visible page sections. */
 function LayoutTab({
   document: doc,
   onChange,
@@ -761,6 +774,7 @@ function LayoutTab({
   );
 }
 
+/** Studio tab for editing all page content: identity, links, modules, Top 8, and more. */
 function ContentTab({
   document: doc,
   onChange,
@@ -1608,6 +1622,7 @@ function ContentTab({
   );
 }
 
+/** Studio tab for custom CSS, contrast warnings, and scoped CSS preview. */
 function AccessTab({
   document: doc,
   onChange,
@@ -1725,6 +1740,7 @@ function AccessTab({
   );
 }
 
+/** Studio tab for publish state, visibility, discovery, guestbook, and page management actions. */
 function PublishTab({
   document: doc,
   onChange,