vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: a /community page shows the site's week and month, from the same figures as the digests, and every recurring server task is a job of one scheduler — the digests' top dumps and community section (who joined, the new public playlists, the chat and the totals) existed only in emails. community-service.ts now gathers them for a period from listTopDumps, listNewUsers and listNewPublicPlaylists, each in its own service and returning the API's Dump, PublicUser and Playlist; the digest builds its sections from the same call, its email-only DumpRow and DUMP_COLS replaced by one Dump mapper that networkOf uses too, and links its community section to the page. The page, /community for the last week and /community/monthly for the month, signed in only and linked from the avatar menu, reads GET /api/community?period=, which serves figures kept in memory and recomputed every GERBEUR_COMMUNITY_REFRESH_MINUTES (15 by default). It shows the four figures, the top dumps and the new playlists as live cards, and the new members as UserCards, the follow tab's user row made shared. Its words are the emails' own: the messages both use are renamed from email.digest.* to digest.*, as digest.weekly.off was. api/lib/scheduler.ts's startJobs runs the digests, the community refresh, the WebSocket ping, the typing expiry and the rate-limit sweep, which main.ts starts, so none of them runs on import any more. PERIOD_MS moves to shared/settings.ts. community is reserved as a category slug, and migration 0022 renames a category that had it, with renameReservedCategories moved out of 0021 into reserved-slugs.ts. A group's dump or playlist cards now fill its column. 262 backend tests and 678 frontend tests pass, and deno check, tsc, eslint, doc:lint and i18n:compile --strict are clean; checked in screenshots in Smooth light at 1280 and 390px, Smooth dark with mocked playlists, Brutalist dark at 390px and Kanagawa dark at 1280px.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-09 11:42:01 +00:00
parent 7713c5a1b5
commit 708d113013
44 changed files with 1466 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/App.css
View File

@@ -2735,6 +2735,13 @@ body.has-player .chat-fab {
padding: 1rem;
}
/* A list of dump or playlist cards in a group fills the group's column, its
edges in line with the label's rule. */
.page-group .dump-feed {
padding: 0;
max-width: none;
}
/* A card of settings rules its rows apart; they keep the grid's columns, so
the labels still line up. */
.page-card.profile-appearance-grid {
@@ -5913,8 +5920,8 @@ body.has-player .chat-fab {
padding: 0.2rem 0;
}
/* ── Followed user list ── */
.followed-user-list {
/* ── User cards: the follow tab's users, the community's new members ── */
.user-card-list {
list-style: none;
margin: 0;
padding: 0;
@@ -5923,7 +5930,7 @@ body.has-player .chat-fab {
gap: 0.5rem;
}
.followed-user-card {
.user-card {
display: flex;
align-items: center;
justify-content: space-between;
@@ -5932,7 +5939,7 @@ body.has-player .chat-fab {
border-radius: var(--radius-md);
}
.followed-user-card-link {
.user-card-link {
display: flex;
align-items: center;
gap: 0.6rem;
@@ -5942,18 +5949,33 @@ body.has-player .chat-fab {
flex: 1;
}
.followed-user-card-link:hover .followed-user-card-name {
.user-card-link:hover .user-card-name {
color: var(--color-accent);
}
.followed-user-card-name {
font-size: var(--text-md);
font-weight: 600;
.user-card-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.user-card-name,
.user-card-note {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-card-name {
font-size: var(--text-md);
font-weight: 600;
}
.user-card-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ── Invite tree ── */
/* Every row but the very first has the same gap above it, a child's as a
sibling's: the gap is the node's top padding, so the connectors can run
@@ -7562,3 +7584,39 @@ body.has-player .chat-fab {
background: color-mix(in srgb, var(--color-danger, #c0392b) 18%, transparent);
color: var(--color-danger, #c0392b);
}
/* ── Community page ── */
.community-figures {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin: 0;
}
.community-figure {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 0.2rem;
min-width: 0;
}
.community-figure-value {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.community-figure-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-align: center;
}
@media (max-width: 480px) {
.community-figures {
grid-template-columns: repeat(2, 1fr);
}
}

16
src/App.tsx
View File

@@ -15,6 +15,8 @@
* link (`Unsubscribe`).
* - `/notifications` (`Notifications`) and `/settings` (`Settings`), signed in
* only, and `/manage`, the site's tools, for `category:manage` (`Manage`).
* - `/community` and `/community/monthly`, the site's week and month
* (`Community`), signed in only.
* - `/@:username/*` is a user's (`UserRoutes`): their profile and its tabs,
* their dumps at `dumps/:slug` (`Dump`) and `dumps/:slug/edit` (`DumpEdit`,
* signed in only), and their playlists at `playlists/:slug`
@@ -81,6 +83,9 @@ const PlaylistDetail = lazy(() =>
default: m.PlaylistDetail,
}))
);
const Community = lazy(() =>
import("./pages/Community.tsx").then((m) => ({ default: m.Community }))
);
const Notifications = lazy(() =>
import("./pages/Notifications.tsx").then((m) => ({
default: m.Notifications,
@@ -207,6 +212,17 @@ function AppRoutes() {
</RestrictedLoggedIn>
}
/>
{["/community", "/community/:view"].map((path) => (
<Route
key={path}
path={path}
element={
<RestrictedLoggedIn>
<Community />
</RestrictedLoggedIn>
}
/>
))}
<Route
path="/settings"
element={

19
src/components/layout/UserMenu.tsx
View File

@@ -1,7 +1,7 @@
/**
* Renders the avatar menu that leads the header's icon row at every width: it
* holds the profile link, the playlists one (on small screens, the only one),
* the settings, the site's tools, and logging out.
* the community page, the settings, the site's tools, and logging out.
*
* @module
*/
@@ -10,10 +10,11 @@ import { useEffect, useRef, useState } from "react";
import { Link } from "react-router";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { Trans as Message } from "@lingui/react";
import { Avatar } from "../shared/Avatar.tsx";
import type { SelfUser } from "../../../shared/user.ts";
import { can } from "../../utils/auth/permissions.ts";
import { userPath } from "../../../shared/paths.ts";
import { communityPath, userPath } from "../../../shared/paths.ts";
import { useAuth } from "../../hooks/auth/useAuth.ts";
/** Passed to {@link UserMenu} by `AppHeader`, for a signed-in user. */
@@ -23,9 +24,9 @@ export interface UserMenuProps {
/**
* Renders the signed-in user's avatar, which opens a menu with links to their
* profile, their playlists and `/settings`, to `/manage` for those who hold
* `category:manage`, and a Log out button. A click outside or Escape closes
* it.
* profile, their playlists, `/community` and `/settings`, to `/manage` for
* those who hold `category:manage`, and a Log out button. A click outside or
* Escape closes it.
*/
export function UserMenu({ user }: UserMenuProps): React.JSX.Element {
const { logout } = useAuth();
@@ -84,6 +85,14 @@ export function UserMenu({ user }: UserMenuProps): React.JSX.Element {
>
<Trans>Playlists</Trans>
</Link>
<Link
to={communityPath()}
className="user-menu-item"
role="menuitem"
onClick={() => setOpen(false)}
>
<Message id="digest.community" />
</Link>
<Link
to="/settings"
className="user-menu-item"

31
src/components/profile/ProfileFollowTab.tsx
View File

@@ -6,7 +6,7 @@
*/
import { useCallback } from "react";
import { Link, useNavigate } from "react-router";
import { useNavigate } from "react-router";
import { Trans } from "@lingui/react/macro";
import { API_URL } from "../../config/api.ts";
import type { Wire } from "../../../shared/api.ts";
@@ -21,11 +21,10 @@ import {
import { usePagedList } from "../../hooks/feed/usePagedList.ts";
import { useInfiniteScroll } from "../../hooks/feed/useInfiniteScroll.ts";
import { usePlaylistListSync } from "../../hooks/playlist/usePlaylistListSync.ts";
import { Avatar } from "../shared/Avatar.tsx";
import { ListState } from "../shared/ListState.tsx";
import { TabBar } from "../shared/TabBar.tsx";
import { FeedFooter } from "../feed/FeedFooter.tsx";
import { FollowUserButton } from "../social/FollowButton.tsx";
import { UserCard } from "../social/UserCard.tsx";
import { PlaylistCardList } from "../playlist/PlaylistCardList.tsx";
import { ProfileSection } from "./ProfileSection.tsx";
@@ -36,28 +35,6 @@ export interface ProfileFollowTabProps {
view: FollowView;
}
/** Renders a followed user, with a button to follow or unfollow them. */
function FollowedUserCard({ user }: { user: PublicUser }) {
return (
<li className="followed-user-card">
<Link to={userPath(user.username)} className="followed-user-card-link">
<Avatar
userId={user.id}
username={user.username}
hasAvatar={!!user.avatarMime}
size={36}
version={user.updatedAt?.getTime()}
/>
<span className="followed-user-card-name">@{user.username}</span>
</Link>
<FollowUserButton
targetUserId={user.id}
targetUsername={user.username}
/>
</li>
);
}
/**
* Returns page after page of what `userId` follows, from
* `GET /api/users/:userId/follow/<view>`, and the sentinel that loads the
@@ -102,8 +79,8 @@ function FollowedUsers({ userId }: { userId: string }) {
>
{({ data }) => (
<>
<ul className="followed-user-list">
{data.items.map((u) => <FollowedUserCard key={u.id} user={u} />)}
<ul className="user-card-list">
{data.items.map((u) => <UserCard key={u.id} user={u} />)}
</ul>
<FeedFooter
hasMore={data.hasMore}

51
src/components/social/UserCard.tsx Normal file
View File

@@ -0,0 +1,51 @@
/**
* Renders a user as a row of a list of users: their avatar and name, linking
* to their profile, and a button to follow them.
*
* @module
*/
import type { ReactNode } from "react";
import { Link } from "react-router";
import type { PublicUser } from "../../../shared/user.ts";
import { userPath } from "../../../shared/paths.ts";
import { Avatar } from "../shared/Avatar.tsx";
import { FollowUserButton } from "./FollowButton.tsx";
/**
* Passed to {@link UserCard} by the profile's follow tab and the community
* page's new members.
*/
export interface UserCardProps {
user: PublicUser;
/** A line under the name, such as who invited them. */
note?: ReactNode;
}
/**
* Renders `user` as an `<li>` of a `.user-card-list`, with the follow button,
* which `FollowUserButton` hides on the viewer's own card.
*/
export function UserCard({ user, note }: UserCardProps): React.JSX.Element {
return (
<li className="user-card">
<Link to={userPath(user.username)} className="user-card-link">
<Avatar
userId={user.id}
username={user.username}
hasAvatar={!!user.avatarMime}
size={36}
version={user.updatedAt?.getTime()}
/>
<span className="user-card-text">
<span className="user-card-name">@{user.username}</span>
{note && <span className="user-card-note">{note}</span>}
</span>
</Link>
<FollowUserButton
targetUserId={user.id}
targetUsername={user.username}
/>
</li>
);
}

2
src/config/api.ts
View File

@@ -34,6 +34,8 @@ export const WS_URL: string = API_URL
? API_URL.replace(/^http/, "ws")
: `${location.protocol.replace("http", "ws")}//${location.host}`;
/** The community endpoint, for the community page. */
export const COMMUNITY_URL = `${API_URL}/api/community`;
/** The search endpoint, for the search page. */
export const SEARCH_URL = `${API_URL}/api/search`;
/** How many items a page of a feed or list asks the API for. */

163
src/pages/Community.tsx Normal file
View File

@@ -0,0 +1,163 @@
/**
* Renders the community page, `/community` for the last week and
* `/community/monthly` for the last month, for a signed-in user: the site's
* figures, its most upvoted dumps, who joined and the new public playlists.
* The server recomputes them on a timer (`community-service.ts`), and the
* digests send each reader the same sections, in the same words.
*
* @module
*/
import { useCallback } from "react";
import { i18n } from "@lingui/core";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { Trans as Message } from "@lingui/react";
import type { Wire } from "../../shared/api.ts";
import type { CommunityStats } from "../../shared/community.ts";
import type { DigestCadence } from "../../shared/settings.ts";
import { COMMUNITY_VIEWS, communityPath } from "../../shared/paths.ts";
import { COMMUNITY_URL } from "../config/api.ts";
import { useAuth } from "../hooks/auth/useAuth.ts";
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
import { useFetchState } from "../hooks/shared/useFetchState.ts";
import { useTabParam } from "../hooks/shared/useTabParam.ts";
import { expectOk } from "../utils/shared/api.ts";
import { deserializeCommunityStats } from "../utils/shared/deserialize.ts";
import { PageShell } from "../components/layout/PageShell.tsx";
import { PageHeader } from "../components/layout/PageHeader.tsx";
import { PageGroup } from "../components/layout/PageGroup.tsx";
import { TabBar } from "../components/shared/TabBar.tsx";
import { ListState } from "../components/shared/ListState.tsx";
import { DumpCardList } from "../components/dump/DumpCardList.tsx";
import { PlaylistCardList } from "../components/playlist/PlaylistCardList.tsx";
import { UserCard } from "../components/social/UserCard.tsx";
import { NotFound } from "./NotFound.tsx";
/** Checks whether `stats` has nothing to show at all. */
function isQuiet(stats: CommunityStats): boolean {
const { dumps, upvotes, comments } = stats.totals;
return stats.top.length + stats.members.length + stats.playlists.length +
stats.chatMessages + dumps + upvotes + comments === 0;
}
/** Renders the period's four figures, each over its label. */
function Figures({ stats }: { stats: CommunityStats }) {
const { dumps, upvotes, comments } = stats.totals;
const figures: [number, string][] = [
[dumps, i18n._("digest.stat.dumps", { n: dumps })],
[upvotes, i18n._("digest.count.upvotes", { n: upvotes })],
[comments, i18n._("digest.count.comments", { n: comments })],
[
stats.chatMessages,
i18n._("digest.stat.chat", { n: stats.chatMessages }),
],
];
return (
<dl className="page-card community-figures">
{figures.map(([n, label]) => (
<div key={label} className="community-figure">
<dt className="community-figure-label">{label}</dt>
<dd className="community-figure-value">{i18n.number(n)}</dd>
</div>
))}
</dl>
);
}
/**
* Renders `/community` and `/community/:view`, from `GET /api/community`.
* A view no period names is `NotFound`.
*/
export function Community(): React.JSX.Element {
useDocumentTitle(i18n._("digest.community"));
const { user, authFetch } = useAuth();
const [period, setPeriod] = useTabParam<DigestCadence>(
communityPath(),
COMMUNITY_VIEWS,
"weekly",
);
const load = useCallback(
async (signal: AbortSignal) => {
const url = new URL(COMMUNITY_URL, location.origin);
url.searchParams.set("period", period ?? "weekly");
return deserializeCommunityStats(
await expectOk<Wire<CommunityStats>>(
await authFetch(url.toString(), { signal }),
),
);
},
[authFetch, period],
);
const { state } = useFetchState(period ?? undefined, load);
if (!period) return <NotFound />;
const weekly = period === "weekly";
return (
<PageShell narrow>
<PageHeader icon="🏘️" title={<Message id="digest.community" />} />
<TabBar
tabs={[
{ key: "weekly", label: <Trans>This week</Trans> },
{ key: "monthly", label: <Trans>This month</Trans> },
]}
activeTab={period}
onChange={setPeriod}
/>
<ListState
state={state}
isEmpty={({ data }) => isQuiet(data)}
empty={
<p className="empty-state">
{weekly
? t`Nothing happened this week.`
: t`Nothing happened this month.`}
</p>
}
>
{({ data }) => (
<>
<Figures stats={data} />
{data.top.length > 0 && (
<PageGroup
label={weekly
? <Message id="digest.topWeek" />
: <Message id="digest.topMonth" />}
>
<DumpCardList dumps={data.top} />
</PageGroup>
)}
{data.members.length > 0 && (
<PageGroup label={<Message id="digest.newMembers" />}>
<ul className="user-card-list">
{data.members.map((m) => (
<UserCard
key={m.id}
user={m}
note={m.invitedByUsername &&
(m.invitedByUsername === user?.username
? <Message id="digest.invitedByYou" />
: (
<Message
id="digest.invitedBy"
values={{ username: m.invitedByUsername }}
/>
))}
/>
))}
</ul>
</PageGroup>
)}
{data.playlists.length > 0 && (
<PageGroup label={<Message id="digest.newPlaylists" />}>
<PlaylistCardList playlists={data.playlists} />
</PageGroup>
)}
</>
)}
</ListState>
</PageShell>
);
}

6
src/test/components/layout/UserMenu.test.tsx
View File

@@ -7,7 +7,7 @@ import { currentPath, renderApp, renderWithContexts } from "../../render.tsx";
import { AUTH_STORAGE_KEY } from "../../../utils/auth/storage.ts";
describe("UserMenu", () => {
test("opens, links to profile and playlists, closes on Escape and outside", async () => {
test("opens, links to profile, playlists, community and settings, closes on Escape and outside", async () => {
const user = userEvent.setup();
renderWithContexts(
<>
@@ -26,6 +26,10 @@ describe("UserMenu", () => {
"href",
"/@ann/playlists",
);
expect(screen.getByRole("menuitem", { name: "Community" })).toHaveAttribute(
"href",
"/community",
);
expect(screen.getByRole("menuitem", { name: "Settings" })).toHaveAttribute(
"href",
"/settings",

98
src/test/pages/Community.test.tsx Normal file
View File

@@ -0,0 +1,98 @@
import { describe, expect, test } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { Community } from "../../pages/Community.tsx";
import { calls, route } from "../fetch.ts";
import {
makeDump,
makePlaylist,
makeSession,
makeUser,
wire,
} from "../fixtures.ts";
import { currentPath, renderApp } from "../render.tsx";
function stats(
{
top = [] as ReturnType<typeof makeDump>[],
members = [] as ReturnType<typeof makeUser>[],
playlists = [] as ReturnType<typeof makePlaylist>[],
chatMessages = 0,
totals = { dumps: 0, upvotes: 0, comments: 0 },
} = {},
) {
return wire({
from: new Date("2026-10-02T00:00:00Z"),
to: new Date("2026-10-09T00:00:00Z"),
top,
members,
playlists,
chatMessages,
totals,
});
}
function open(url: string) {
const user = userEvent.setup();
const session = makeSession({ username: "ann" });
renderApp(<Community />, { route: url, path: "/community/*", session });
return user;
}
describe("Community", () => {
test("the week: figures, top dumps, new members and playlists", async () => {
route("GET /api/community", () =>
stats({
top: [makeDump({ title: "Big hit", voteCount: 7 })],
members: [
makeUser({ username: "bob", invitedByUsername: "ann" }),
makeUser({ username: "cy", invitedByUsername: "bob" }),
makeUser({ username: "dee" }),
],
playlists: [makePlaylist({ title: "Fresh mix", dumpCount: 3 })],
chatMessages: 1284,
totals: { dumps: 12, upvotes: 1, comments: 0 },
}));
open("/community");
expect(await screen.findByText("Big hit")).toBeInTheDocument();
const [req] = calls("GET /api/community");
expect(req.url.searchParams.get("period")).toBe("weekly");
expect(req.headers.get("Authorization")).toMatch(/^Bearer /);
expect(screen.getByRole("heading", { name: /Community/ }))
.toBeInTheDocument();
expect(screen.getByText("Top this week")).toBeInTheDocument();
expect(screen.getByText("1,284")).toBeInTheDocument();
expect(screen.getByText("chat messages")).toBeInTheDocument();
expect(screen.getByText("upvote")).toBeInTheDocument();
expect(screen.getByText("invited by you")).toBeInTheDocument();
expect(screen.getByText("invited by @bob")).toBeInTheDocument();
expect(screen.getByRole("link", { name: /@dee/ })).toHaveAttribute(
"href",
"/@dee",
);
expect(screen.getByText("Fresh mix")).toBeInTheDocument();
});
test("the month is its own view, and a quiet one says so", async () => {
route(
"GET /api/community",
(req) =>
req.url.searchParams.get("period") === "monthly"
? stats()
: stats({ totals: { dumps: 1, upvotes: 0, comments: 0 } }),
);
const user = open("/community");
expect(await screen.findByText("dump")).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "This month" }));
expect(currentPath()).toBe("/community/monthly");
expect(await screen.findByText("Nothing happened this month."))
.toBeInTheDocument();
});
test("a view no period names is not found", () => {
open("/community/daily");
expect(screen.getByText("This page does not exist.")).toBeInTheDocument();
expect(calls("GET /api/community")).toHaveLength(0);
});
});

15
src/utils/shared/deserialize.ts
View File

@@ -11,6 +11,7 @@ import type { Wire } from "../../../shared/api.ts";
import type { Category } from "../../../shared/category.ts";
import type { ChatMessage } from "../../../shared/chat.ts";
import type { Comment } from "../../../shared/comment.ts";
import type { CommunityStats } from "../../../shared/community.ts";
import type { Dump, DumpUrlMatch } from "../../../shared/dump.ts";
import type { Notification } from "../../../shared/notification.ts";
import type {
@@ -127,3 +128,17 @@ export function deserializeNotification(raw: Wire<Notification>): Notification {
export function hydrateNotification(raw: unknown): Notification {
return deserializeNotification(raw as Wire<Notification>);
}
/** Returns `raw` as {@link CommunityStats}. */
export function deserializeCommunityStats(
raw: Wire<CommunityStats>,
): CommunityStats {
return {
...raw,
from: new Date(raw.from),
to: new Date(raw.to),
top: raw.top.map(deserializeDump),
members: raw.members.map(deserializePublicUser),
playlists: raw.playlists.map(deserializePlaylist),
};
}