524149c · 3f6b917 · 6e666ab
@@ -0,0 +1,10 @@
# Waves
## The waves page at 390 px (#9325)
`/:owner/:name/waves` lists waves as `listCard` rows. A wave's headline is the
writer's words, so inside `[data-waves]` (an attribute, not a class) the row's
title and meta wrap and break long words anywhere, in place of the list's
one-line ellipsis. No fixed width; the page does not scroll sideways. No new
class. The owner's phone look of `/preview-admin/sample/waves` is attached to
the pull from its preview.
@@ -44,6 +44,9 @@
export const PREVIEW_FORKS: readonly { readonly owner: string; readonly of?: str
/** The owner's bets page, whose seeded proposed bets hold the long-name worst case (#9275). */
export const PREVIEW_BETS_PAGE = `${PREVIEW_REPO_HOME}/bets`;
/** The waves page, whose long headlines must wrap at a 390 px phone (#9325). */
export const PREVIEW_WAVES_PAGE = `${PREVIEW_REPO_HOME}/waves`;
      
        junipercrew
        11d ago
        
      
      This line now sits under the held page's doc comment ("The Later gate's proposal..."). Put PREVIEW_WAVES_PAGE above that comment with its own doc so each constant keeps its own.
    
/** The Later gate's proposal on the sample (#9212): what the gate holds, grouped by theme. */
export const PREVIEW_HELD_PAGE = `${PREVIEW_REPO_HOME}/held`;
/**
@@ -77,6 +80,7 @@
export const PREVIEW_OWNER_LOOKS: readonly OwnerLook[] = [
  PREVIEW_ITERATIONS_PAGE,
  PREVIEW_HELD_PAGE,
  PREVIEW_BETS_PAGE,
  PREVIEW_WAVES_PAGE,
].flatMap((page) => (["desktop", "phone"] as const).map((kind) => ({ page, kind })));
/**
@@ -25,6 +25,15 @@
import { btn, empty, listCard, pill, row } from "../ui.ts";
import { localScope } from "../scope.ts";
import { milestoneHref, planFor, progress } from "./milestones.ts";
/**
 * A wave's headline is the writer's words, so a row lets it wrap (a long word
 * breaks anywhere) instead of the list's one-line ellipsis, and the page
 * never scrolls sideways at 390 px. Scoped to `[data-waves]`; no new class.
 */
export const WAVES_CSS = `[data-waves] { overflow-wrap: anywhere; }
[data-waves] .row-title, [data-waves] .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
[data-waves] .row { align-items: flex-start; }`;
const WHAT_A_WAVE =
  "A wave is a release note in waves/<version>.md that names its highlights and the pulls merged since the last one.";
@@ -64,7 +73,7 @@
export async function wavesPage(ctx: Ctx): Promise<Response> {
  );
  const body = html`${scopeHeader(ctx, scope, "none", { compact: true })}
    <div class="mt">
    <div class="mt" data-waves>
      ${entries.length === 0
        ? empty({
            title: "No waves yet",
@@ -86,6 +95,7 @@
export async function wavesPage(ctx: Ctx): Promise<Response> {
    crumbs: scope.crumbs,
    palette: scope.palette,
    body,
    styleCss: WAVES_CSS,
    feed: {
      href: `${repoBase(repo)}/waves.atom`,
      title: `${repo.ownerName}/${repo.name} waves`,
@@ -0,0 +1,83 @@
/**
 * The waves page fits a 390 px phone (#9325): seeded long content (a 300-char
 * unbroken word, a long title, many rows) ships no fixed width over 390 px,
 * and the long-text container wraps anywhere.
 */
import { afterAll, beforeAll, describe, expect, test } from "bun:test";
import { mkdtemp, rm } from "node:fs/promises";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { commitToBranch, createRepo } from "../src/actions/repos.ts";
import { createApp, type App } from "../src/app.ts";
import { createSession } from "../src/core/sessions.ts";
import { createUser } from "../src/core/users.ts";
import { serve, type Servers } from "../src/http/server.ts";
import { PREVIEW_OWNER_LOOKS, PREVIEW_WAVES_PAGE } from "../src/spawn/preview-looks.ts";
import { utilities as base } from "../src/web/style/base.ts";
import { components } from "../src/web/style/components.ts";
import { content } from "../src/web/style/content.ts";
import { writeWave } from "../src/story/wave.ts";
const WORD = "W".repeat(300);
let dir: string;
let app: App;
let servers: Servers;
let page: string;
const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => {
  if (!r.ok) throw new Error(JSON.stringify(r.error));
  return r.value;
};
beforeAll(async () => {
  dir = await mkdtemp(join(tmpdir(), "forge-waves-fit-"));
  app = createApp({ dataDir: dir, port: 0 });
  servers = await serve(app);
  const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true }));
  const repo = must(await createRepo(app, u, { name: "fit", visibility: "public" }));
  const files = Array.from({ length: 30 }, (_, i) => {
    const headline = i === 0 ? WORD : i === 1 ? "A very long headline ".repeat(12).trim() : `Wave number ${i}`;
    const r = writeWave({ version: `0.${i + 1}.0`, date: "2026-01-01", headline, highlights: [1, 2, 3].map((n) => ({ title: `T${n}`, why: "w" })), pulls: [{ title: "#1 A pull", url: "https://forge.example/o/r/pulls/1" }] });
    return { path: `waves/0.${i + 1}.0.md`, content: must(r) };
  });
  must(await commitToBranch(app, u, repo, { message: "waves", files }));
  const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`;
  page = await (await fetch(`${servers.url}/alice/fit/waves`, { headers: { cookie } })).text();
}, 60_000);
afterAll(async () => {
  servers.stop();
  app.close();
  await rm(dir, { recursive: true, force: true });
});
describe("the waves page at 390 px", () => {
  test("the long content is on the page, in many rows", () => {
    expect(page).toContain(WORD);
    expect(page).toContain("A very long headline");
    expect(page.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(30);
  });
  test("no inline width and no shipped rule fixes a width over 390 px", () => {
    expect(page).not.toMatch(/style="[^"]*(?:^|[;\s])(?:min-|max-)?width\s*:/i);
    for (const m of page.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390);
    const over: string[] = [];
    for (const css of [base, components, content, ...(page.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? [])]) {
      for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s*:\s*(-?[\d.]+)(px|rem|em|ch)\b/g)) {
        if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]);
      }
    }
    expect(over).toEqual([]);
  });
  test("the list's container wraps anywhere, and its rows may wrap", () => {
    expect(page).toContain("<div class=\"mt\" data-waves>");
    const css = (page.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? []).join("\n");
    expect(css).toMatch(/\[data-waves\]\s*\{[^}]*overflow-wrap:\s*(anywhere|break-word)/);
    expect(css).toMatch(/\[data-waves\] \.row-title[^{]*\{[^}]*white-space:\s*normal/);
  });
});
test("the owner's phone look takes the waves page", () => {
  expect(PREVIEW_WAVES_PAGE).toBe("/preview-admin/sample/waves");
  expect(PREVIEW_OWNER_LOOKS).toContainEqual({ page: PREVIEW_WAVES_PAGE, kind: "phone" });
});
		@@ -0,0 +1,10 @@
	1	# Waves
	2
	3	## The waves page at 390 px (#9325)
	4
	5	`/:owner/:name/waves` lists waves as `listCard` rows. A wave's headline is the
	6	writer's words, so inside `[data-waves]` (an attribute, not a class) the row's
	7	title and meta wrap and break long words anywhere, in place of the list's
	8	one-line ellipsis. No fixed width; the page does not scroll sideways. No new
	9	class. The owner's phone look of `/preview-admin/sample/waves` is attached to
	10	the pull from its preview.
		@@ -44,6 +44,9 @@ export const PREVIEW_FORKS: readonly { readonly owner: string; readonly of?: str
44	44	/** The owner's bets page, whose seeded proposed bets hold the long-name worst case (#9275). */
45	45	export const PREVIEW_BETS_PAGE = `${PREVIEW_REPO_HOME}/bets`;
46	46
	47	/** The waves page, whose long headlines must wrap at a 390 px phone (#9325). */
	48	export const PREVIEW_WAVES_PAGE = `${PREVIEW_REPO_HOME}/waves`;
		junipercrew 11d ago This line now sits under the held page's doc comment ("The Later gate's proposal..."). Put PREVIEW_WAVES_PAGE above that comment with its own doc so each constant keeps its own.
	49
47	50	/** The Later gate's proposal on the sample (#9212): what the gate holds, grouped by theme. */
48	51	export const PREVIEW_HELD_PAGE = `${PREVIEW_REPO_HOME}/held`;
49	52	/**
		@@ -77,6 +80,7 @@ export const PREVIEW_OWNER_LOOKS: readonly OwnerLook[] = [
77	80	PREVIEW_ITERATIONS_PAGE,
78	81	PREVIEW_HELD_PAGE,
79	82	PREVIEW_BETS_PAGE,
	83	PREVIEW_WAVES_PAGE,
80	84	].flatMap((page) => (["desktop", "phone"] as const).map((kind) => ({ page, kind })));
81	85
82	86	/**
		@@ -25,6 +25,15 @@ import { btn, empty, listCard, pill, row } from "../ui.ts";
25	25	import { localScope } from "../scope.ts";
26	26	import { milestoneHref, planFor, progress } from "./milestones.ts";
27	27
	28	/**
	29	* A wave's headline is the writer's words, so a row lets it wrap (a long word
	30	* breaks anywhere) instead of the list's one-line ellipsis, and the page
	31	* never scrolls sideways at 390 px. Scoped to `[data-waves]`; no new class.
	32	*/
	33	export const WAVES_CSS = `[data-waves] { overflow-wrap: anywhere; }
	34	[data-waves] .row-title, [data-waves] .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
	35	[data-waves] .row { align-items: flex-start; }`;
	36
28	37	const WHAT_A_WAVE =
29	38	"A wave is a release note in waves/<version>.md that names its highlights and the pulls merged since the last one.";
30	39
		@@ -64,7 +73,7 @@ export async function wavesPage(ctx: Ctx): Promise<Response> {
64	73	);
65	74
66	75	const body = html`${scopeHeader(ctx, scope, "none", { compact: true })}
67		<div class="mt">
	76	<div class="mt" data-waves>
68	77	${entries.length === 0
69	78	? empty({
70	79	title: "No waves yet",
		@@ -86,6 +95,7 @@ export async function wavesPage(ctx: Ctx): Promise<Response> {
86	95	crumbs: scope.crumbs,
87	96	palette: scope.palette,
88	97	body,
	98	styleCss: WAVES_CSS,
89	99	feed: {
90	100	href: `${repoBase(repo)}/waves.atom`,
91	101	title: `${repo.ownerName}/${repo.name} waves`,
		@@ -0,0 +1,83 @@
	1	/**
	2	* The waves page fits a 390 px phone (#9325): seeded long content (a 300-char
	3	* unbroken word, a long title, many rows) ships no fixed width over 390 px,
	4	* and the long-text container wraps anywhere.
	5	*/
	6	import { afterAll, beforeAll, describe, expect, test } from "bun:test";
	7	import { mkdtemp, rm } from "node:fs/promises";
	8	import { tmpdir } from "node:os";
	9	import { join } from "node:path";
	10	import { commitToBranch, createRepo } from "../src/actions/repos.ts";
	11	import { createApp, type App } from "../src/app.ts";
	12	import { createSession } from "../src/core/sessions.ts";
	13	import { createUser } from "../src/core/users.ts";
	14	import { serve, type Servers } from "../src/http/server.ts";
	15	import { PREVIEW_OWNER_LOOKS, PREVIEW_WAVES_PAGE } from "../src/spawn/preview-looks.ts";
	16	import { utilities as base } from "../src/web/style/base.ts";
	17	import { components } from "../src/web/style/components.ts";
	18	import { content } from "../src/web/style/content.ts";
	19	import { writeWave } from "../src/story/wave.ts";
	20
	21	const WORD = "W".repeat(300);
	22	let dir: string;
	23	let app: App;
	24	let servers: Servers;
	25	let page: string;
	26
	27	const must = <T>(r: { ok: true; value: T } \| { ok: false; error: unknown }): T => {
	28	if (!r.ok) throw new Error(JSON.stringify(r.error));
	29	return r.value;
	30	};
	31
	32	beforeAll(async () => {
	33	dir = await mkdtemp(join(tmpdir(), "forge-waves-fit-"));
	34	app = createApp({ dataDir: dir, port: 0 });
	35	servers = await serve(app);
	36	const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true }));
	37	const repo = must(await createRepo(app, u, { name: "fit", visibility: "public" }));
	38	const files = Array.from({ length: 30 }, (_, i) => {
	39	const headline = i === 0 ? WORD : i === 1 ? "A very long headline ".repeat(12).trim() : `Wave number ${i}`;
	40	const r = writeWave({ version: `0.${i + 1}.0`, date: "2026-01-01", headline, highlights: [1, 2, 3].map((n) => ({ title: `T${n}`, why: "w" })), pulls: [{ title: "#1 A pull", url: "https://forge.example/o/r/pulls/1" }] });
	41	return { path: `waves/0.${i + 1}.0.md`, content: must(r) };
	42	});
	43	must(await commitToBranch(app, u, repo, { message: "waves", files }));
	44	const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`;
	45	page = await (await fetch(`${servers.url}/alice/fit/waves`, { headers: { cookie } })).text();
	46	}, 60_000);
	47	afterAll(async () => {
	48	servers.stop();
	49	app.close();
	50	await rm(dir, { recursive: true, force: true });
	51	});
	52
	53	describe("the waves page at 390 px", () => {
	54	test("the long content is on the page, in many rows", () => {
	55	expect(page).toContain(WORD);
	56	expect(page).toContain("A very long headline");
	57	expect(page.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(30);
	58	});
	59
	60	test("no inline width and no shipped rule fixes a width over 390 px", () => {
	61	expect(page).not.toMatch(/style="[^"](?:^\|[;\s])(?:min-\|max-)?width\s:/i);
	62	for (const m of page.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390);
	63	const over: string[] = [];
	64	for (const css of [base, components, content, ...(page.match(/<style[^>]>[\s\S]?<\/style>/g) ?? [])]) {
	65	for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s:\s(-?[\d.]+)(px\|rem\|em\|ch)\b/g)) {
	66	if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]);
	67	}
	68	}
	69	expect(over).toEqual([]);
	70	});
	71
	72	test("the list's container wraps anywhere, and its rows may wrap", () => {
	73	expect(page).toContain("<div class=\"mt\" data-waves>");
	74	const css = (page.match(/<style[^>]>[\s\S]?<\/style>/g) ?? []).join("\n");
	75	expect(css).toMatch(/\[data-waves\]\s\{[^}]overflow-wrap:\s*(anywhere\|break-word)/);
	76	expect(css).toMatch(/\[data-waves\] \.row-title[^{]\{[^}]white-space:\s*normal/);
	77	});
	78	});
	79
	80	test("the owner's phone look takes the waves page", () => {
	81	expect(PREVIEW_WAVES_PAGE).toBe("/preview-admin/sample/waves");
	82	expect(PREVIEW_OWNER_LOOKS).toContainEqual({ page: PREVIEW_WAVES_PAGE, kind: "phone" });
	83	});