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

v4: every page and API URL follows one of two rules, written down in API.md — pages are a hierarchy where @name is a user and any other root word a category or an app page, tabs and views are plain segments and a default view is the bare path; API resources are /api/<plural>/<key>, a user's key being an id or @name, the caller's things under /api/me, media a sub-resource, lookups by another key a query filter. ~ is gone: the feed is /, /hot, /new, /journal, /follow and /music/hot, a profile /@bob with its overview and the tabs dumps, upvoted, playlists (her own only), follow (users, and /follow/playlists), invitees and manage (role and name, for user:manage), which replace the separate UserDumps, UserUpvoted and UserPlaylists pages; /settings holds the account (now with the username) and /manage the category manager, both linked from the user menu and one's profile. Dumps and playlists live under their owner, /@bob/dumps/<slug> and /@bob/playlists/<slug>, named by slug alone: migration 0021 re-slugs them to the bare slugify(title), unique per owner and kind (the oldest keeps it, clashes get -2), renames the categories whose slug v4 reserves (hot, follow, settings…), and rewrites this site's v3 links in dump notes, comments, chat, and playlist and profile descriptions. A slug changes only when edited, through the edit forms' new link field, which proposes slugify(title) as the title changes; a username changes from /settings or, for user:manage, from /@name/manage. Every slug or name left behind stays an alias of its item or user for good (dump_slug_aliases, playlist_slug_aliases, user_aliases), so old links redirect without chaining and nobody else can take one; slugs change 3 times a day per item, names once in 30 days, moderators exempt. An alias, or a name in another case, answers the item with its current path: the pages put it in their URL (useCanonicalPath, without fetching again), and the OG middleware answers a 301. shared/paths.ts builds and parses every page path, for the client's links, the emails' (digest-service lost its own builders and its id fallbacks, and links /follow and /settings) and the server's matchers (OG tags, self previews, backlinks, self-url); shared/slug.ts holds slugify and the format categories share. Dumps and playlists carry ownerUsername and a required slug, and notifications join their users' current names and their items' paths each time they are sent or read, so renames reach them and a deleted item's has no link. The API was renamed per the plan's table: POST /api/users and /api/sessions, /api/password-resets, /api/me (with settings, password, avatar, media-token, playlists?contains=, follow, feed?from=, notifications), /api/users/:key/{dumps,upvoted,playlists,follow/users,follow/playlists,invitees,avatar} and by path /api/users/:key/{dumps,playlists}/:slug, /api/dumps?url= and ?category=, /api/dumps/:id/{file,thumbnail,metadata}, /api/playlists/:id/cover, /api/remote/{preview,image,bandcamp,youtube} (one router), and /api/unsubscribe, the v3 POST /api/users/unsubscribe staying for the digests already sent. A stored default feed tab "followed" reads as "follow" once. dumps.slug and playlists.slug stay nullable, since SQLite can't add NOT NULL without rebuilding tables others reference; every writer sets them and unique (user_id, slug) indexes hold them. 254 backend tests (new: migration 0021 on a v3 fixture, slug aliases, swaps and rate limits, username renames, aliases and limits, reads by path and their privacy, the OG 301s, both unsubscribe paths, v4-shaped digest links with no ids, notification joins, shared paths and slugs) and 668 frontend tests (new: the profile's tabs and follow views, Settings, Manage, the link field, canonical URLs on the dump, playlist and profile pages, bare default feed paths) pass, and tsc, eslint, deno check, deno lint, deno fmt and doc:lint are clean; the migration was also run on a copy of the development database.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-06 16:08:59 +00:00
parent fd0d81fe66
commit 4468438ba7
228 changed files with 7320 additions and 5193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/App.tsx
View File

@@ -1,30 +1,31 @@
/**
* Renders the whole app, its providers around its routes. `main.tsx` mounts
* it. The routes, in the order they match, are these.
* it. Its paths follow one rule (`shared/paths.ts`): `@name` is a user, any
* other word under the root a category or an app page, a view of a page one
* more segment, and a default view the bare path, with no redirect.
*
* - `/` redirects to the viewer's default feed tab, keeping the query string.
* - `/~/:feedTab` is the feed of every dump (`Index`).
* - `/dumps/:selectedDump` is a dump (`Dump`), and its `/edit` the dump's
* editor (`DumpEdit`), signed in only.
* - `/` is the feed of every dump on the viewer's default tab, and `/hot`,
* `/new`, `/journal` and `/follow` its tabs (`Index`). `/?share_url=` opens
* the create form on a shared link.
* - `/search` and `/search/:searchTab` are the search results (`Search`).
* - `/register` and `/login` sign up and sign in (`UserRegister`,
* `UserLogin`), signed out only.
* - `/users/:username` and `/users/:username/~/:profileTab` are a profile
* (`UserPublicProfile`). Its `/dumps`, `/upvoted` and `/playlists` are its
* full lists (`UserDumps`, `UserUpvoted`, `UserPlaylists`).
* - `/playlists/:playlistId` is a playlist (`PlaylistDetail`).
* - `/search` and `/search/~/:searchTab` are the search results (`Search`).
* - `/reset-password` sets a new password from an emailed link
* (`ResetPassword`).
* - `/unsubscribe` turns off a digest from its emailed link (`Unsubscribe`).
* - `/notifications` lists the user's notifications (`Notifications`), signed
* in only.
* - `/:categorySlug/:feedTab` is a category's feed (`Index`), and
* `/:categorySlug` redirects to its default tab.
* (`ResetPassword`), and `/unsubscribe` turns off a digest from its emailed
* link (`Unsubscribe`).
* - `/notifications` (`Notifications`) and `/settings` (`Settings`), signed in
* only, and `/manage`, the site's tools, for `category:manage` (`Manage`).
* - `/@: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`
* (`PlaylistDetail`).
* - `/:categorySlug` and `/:categorySlug/:feedTab` are a category's feed
* (`Index`).
* - Any other path is `NotFound`.
*
* The pages not marked are open to anyone. Every page is loaded with its
* route. Since category slugs share the root with the other routes, the server
* reserves those routes' names as slugs.
* route. Since category slugs share the root with the app's pages and the
* feed tabs, the server reserves those words as slugs; no slug has an `@`.
*
* @module
*/
@@ -32,7 +33,6 @@
import { lazy, Suspense } from "react";
import {
BrowserRouter,
Navigate,
Route,
Routes,
useLocation,
@@ -41,9 +41,7 @@ import {
import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
import { useAuth } from "./hooks/auth/useAuth.ts";
import { useDefaultFeedTab } from "./hooks/feed/useDefaultFeedTab.ts";
import { DEFAULT_FEED_TAB } from "./config/feedTabs.ts";
import { FEED_TABS, type FeedTab } from "../shared/paths.ts";
import { AuthProvider } from "./contexts/auth/AuthProvider.tsx";
import { PlayerProvider } from "./contexts/player/PlayerProvider.tsx";
@@ -78,17 +76,6 @@ const UserPublicProfile = lazy(() =>
const UserRegister = lazy(() =>
import("./pages/UserRegister.tsx").then((m) => ({ default: m.UserRegister }))
);
const UserDumps = lazy(() =>
import("./pages/UserDumps.tsx").then((m) => ({ default: m.UserDumps }))
);
const UserUpvoted = lazy(() =>
import("./pages/UserUpvoted.tsx").then((m) => ({ default: m.UserUpvoted }))
);
const UserPlaylists = lazy(() =>
import("./pages/UserPlaylists.tsx").then((m) => ({
default: m.UserPlaylists,
}))
);
const PlaylistDetail = lazy(() =>
import("./pages/PlaylistDetail.tsx").then((m) => ({
default: m.PlaylistDetail,
@@ -99,6 +86,12 @@ const Notifications = lazy(() =>
default: m.Notifications,
}))
);
const Settings = lazy(() =>
import("./pages/Settings.tsx").then((m) => ({ default: m.Settings }))
);
const Manage = lazy(() =>
import("./pages/Manage.tsx").then((m) => ({ default: m.Manage }))
);
const Search = lazy(() =>
import("./pages/Search.tsx").then((m) => ({ default: m.Search }))
);
@@ -115,56 +108,65 @@ const NotFound = lazy(() =>
);
/**
* Returns the viewer's default feed tab, from their settings. A signed-out
* viewer never gets "followed", which needs a session.
* Renders a feed, of every dump or of `categorySlug`'s, on the tab the path's
* segment after the scope names, or the viewer's default one on the bare
* path. Every feed path renders it at the same place in the tree, and the key
* keeps `Index` mounted on a change of tab, which sorts on the client, and
* remounts it on a change of category, so that it refetches.
*/
function useResolvedDefaultTab() {
const { user } = useAuth();
const [preferredTab] = useDefaultFeedTab();
return preferredTab === "followed" && !user ? DEFAULT_FEED_TAB : preferredTab;
}
/**
* Redirects `/` to the default feed tab. The query string and the navigation
* state must survive: the web app manifest's share target opens
* `/?share_url=…` for an Android share, and the edit page hands the feed the
* id of a dump it just deleted.
*/
function IndexRedirect() {
const { search, state } = useLocation();
function Feed({ categorySlug }: { categorySlug?: string }) {
const { pathname } = useLocation();
const segments = pathname.split("/").filter(Boolean);
const rest = segments.slice(categorySlug ? 1 : 0);
const feedTab = rest[0];
if (
rest.length > 1 ||
(feedTab && !(FEED_TABS as readonly string[]).includes(feedTab))
) {
return <NotFound />;
}
return (
<Navigate
to={`/~/${useResolvedDefaultTab()}${search}`}
state={state}
replace
<Index
key={categorySlug ?? ""}
categorySlug={categorySlug}
feedTab={feedTab as FeedTab | undefined}
/>
);
}
/**
* Redirects a bare `/<slug>` to that category's default feed tab, keeping the
* query string and the navigation state as {@link IndexRedirect} does.
* Renders the pages under user `@:handle`, which the page fetches by name: a
* former name or another case reaches them too, and the page then puts the
* current one in its URL. A tab or view the profile doesn't have is
* `NotFound`, which the profile answers itself.
*/
function CategoryRedirect() {
const { categorySlug } = useParams();
const { search, state } = useLocation();
function UserRoutes() {
return (
<Navigate
to={`/${categorySlug}/${useResolvedDefaultTab()}${search}`}
state={state}
replace
/>
<Routes>
<Route path="dumps/:slug" element={<Dump />} />
<Route
path="dumps/:slug/edit"
element={
<RestrictedLoggedIn>
<DumpEdit />
</RestrictedLoggedIn>
}
/>
<Route path="playlists/:slug" element={<PlaylistDetail />} />
<Route path="*" element={<UserPublicProfile />} />
</Routes>
);
}
/**
* Renders the feed of `/~/:feedTab` and `/:categorySlug/:feedTab` alike. The
* key remounts the feed on a change of category, so that it refetches, and
* keeps it mounted on a change of tab, which sorts on the client.
* Dispatches a path's first segment: `@name` is a user's, any other word a
* category's feed, the app's own pages having matched before.
*/
function ScopedIndex() {
const { categorySlug } = useParams();
return <Index key={categorySlug ?? "~"} categorySlug={categorySlug} />;
function HandleRoutes() {
const { handle = "" } = useParams();
return handle.startsWith("@")
? <UserRoutes />
: <Feed categorySlug={handle} />;
}
/** Renders the route table, and the floating buttons over every page. */
@@ -173,17 +175,12 @@ function AppRoutes() {
<>
<Suspense>
<Routes>
<Route path="/" element={<IndexRedirect />} />
<Route path="/~/:feedTab" element={<ScopedIndex />} />
<Route path="/dumps/:selectedDump" element={<Dump />} />
<Route
path="/dumps/:selectedDump/edit"
element={
<RestrictedLoggedIn>
<DumpEdit />
</RestrictedLoggedIn>
}
/>
<Route path="/" element={<Feed />} />
{FEED_TABS.map((tab) => (
<Route key={tab} path={`/${tab}`} element={<Feed />} />
))}
<Route path="/search" element={<Search />} />
<Route path="/search/:searchTab" element={<Search />} />
<Route
path="/register"
element={
@@ -200,20 +197,6 @@ function AppRoutes() {
</RestrictedGuest>
}
/>
<Route path="/users/:username" element={<UserPublicProfile />} />
<Route
path="/users/:username/~/:profileTab"
element={<UserPublicProfile />}
/>
<Route path="/users/:username/dumps" element={<UserDumps />} />
<Route path="/users/:username/upvoted" element={<UserUpvoted />} />
<Route
path="/users/:username/playlists"
element={<UserPlaylists />}
/>
<Route path="/playlists/:playlistId" element={<PlaylistDetail />} />
<Route path="/search" element={<Search />} />
<Route path="/search/~/:searchTab" element={<Search />} />
<Route path="/reset-password" element={<ResetPassword />} />
<Route path="/unsubscribe" element={<Unsubscribe />} />
<Route
@@ -224,8 +207,23 @@ function AppRoutes() {
</RestrictedLoggedIn>
}
/>
<Route path="/:categorySlug/:feedTab" element={<ScopedIndex />} />
<Route path="/:categorySlug" element={<CategoryRedirect />} />
<Route
path="/settings"
element={
<RestrictedLoggedIn>
<Settings />
</RestrictedLoggedIn>
}
/>
<Route
path="/manage"
element={
<RestrictedLoggedIn>
<Manage />
</RestrictedLoggedIn>
}
/>
<Route path="/:handle/*" element={<HandleRoutes />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Suspense>