v4: playlists have categories of their own — a set apart from the dumps', which admins manage on /manage under "Playlist categories", next to "Dump categories". Each category now has a kind, dump or playlist, its slug and name unique within its kind only; migration 0025 rebuilds categories with the column, every existing one becoming a dump category with its dumps, and adds playlist_categories. A playlist's owner files it under any of them in the create and edit forms, and it shows them as chips on its card and its page, each leading to /playlists/<slug>.
/playlists is the new page of every public playlist, newest first (GET /api/playlists), and /playlists/<slug> a playlist category's, with a menu of the categories, linked from the user menu as "All playlists"; `playlists` is reserved as a dump category's slug, and one that had it is renamed. A profile's Playlists tab narrows to a playlist category with the same menu as its Dumps tab (?category=), and so do the Dumps and Playlists tabs of /search, each with its own kind (category and playlistCategory for GET /api/search), another tab dropping it. The category service takes the kind throughout, so a dump can't be filed under a playlist category nor the other way round, and categoryJoin is the one filter join the dump, follow and playlist services share. useCategories(kind) gives one kind's set from the one fetch, CategoryChips replaces the chips the dump card and page each drew, useCategoryFilter keeps a list to its category as the socket brings more, and useCategorySelection holds a form's picked categories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -11,6 +11,7 @@ import { t } from "@lingui/core/macro";
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { dumpThumbnailUrl, dumpUrl, isAt } from "../utils/shared/urls.ts";
|
||||
import { can } from "../utils/auth/permissions.ts";
|
||||
import { CategoryChips } from "../components/category/CategoryChips.tsx";
|
||||
import { AddToPlaylistModal } from "../components/playlist/AddToPlaylistModal.tsx";
|
||||
|
||||
import { API_URL } from "../config/api.ts";
|
||||
@@ -30,7 +31,6 @@ import {
|
||||
import { friendlyFetchError, parseAPIResponse } from "../utils/shared/api.ts";
|
||||
|
||||
import { useAuth } from "../hooks/auth/useAuth.ts";
|
||||
import { useCategories } from "../hooks/category/useCategories.ts";
|
||||
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
|
||||
import { relativeTime } from "../utils/shared/relativeTime.ts";
|
||||
import { useHeightTransition } from "../hooks/shared/useHeightTransition.ts";
|
||||
@@ -116,7 +116,6 @@ export function Dump(): React.JSX.Element {
|
||||
const [titleError, setTitleError] = useState<string | null>(null);
|
||||
|
||||
const { user, mediaToken, authFetch } = useAuth();
|
||||
const { byId } = useCategories();
|
||||
const {
|
||||
voteCounts,
|
||||
myVotes,
|
||||
@@ -334,9 +333,6 @@ export function Dump(): React.JSX.Element {
|
||||
const { dump } = dumpState;
|
||||
const canEdit = !!user &&
|
||||
(dump.userId === user.id || can(user, "dump:moderate"));
|
||||
const dumpCategories = (dump.categoryIds ?? [])
|
||||
.map((id) => byId.get(id))
|
||||
.filter((c) => c !== undefined);
|
||||
|
||||
const startTitleEdit = () => {
|
||||
setTitleDraft(dump.title);
|
||||
@@ -512,19 +508,7 @@ export function Dump(): React.JSX.Element {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{dumpCategories.length > 0 && (
|
||||
<div className="dump-card-categories">
|
||||
{dumpCategories.map((category) => (
|
||||
<Link
|
||||
key={category.id}
|
||||
to={`/${category.slug}`}
|
||||
className="dump-card-category-chip"
|
||||
>
|
||||
{category.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<CategoryChips kind="dump" ids={dump.categoryIds} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -39,6 +39,7 @@ import { RichContentCard } from "../components/dump/RichContentCard.tsx";
|
||||
import { FilePreview } from "../components/dump/FilePreview.tsx";
|
||||
import { ImagePicker } from "../components/shared/ImagePicker.tsx";
|
||||
import { CategorySelect } from "../components/category/CategorySelect.tsx";
|
||||
import { useCategorySelection } from "../hooks/category/useCategorySelection.ts";
|
||||
import { FileField } from "../components/form/FileField.tsx";
|
||||
import { FormError } from "../components/form/FormError.tsx";
|
||||
import { FormProvider } from "react-hook-form";
|
||||
@@ -362,16 +363,9 @@ function DumpEditForm({
|
||||
onSaved,
|
||||
}: DumpEditFormProps) {
|
||||
const { authFetch } = useAuth();
|
||||
const [selectedCategoryIds, setSelectedCategoryIds] = useState<Set<string>>(
|
||||
() => new Set(dump.categoryIds ?? []),
|
||||
const [selectedCategoryIds, toggleCategory] = useCategorySelection(
|
||||
dump.categoryIds ?? [],
|
||||
);
|
||||
const toggleCategory = (id: string) =>
|
||||
setSelectedCategoryIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
const form = useApiForm<EditValues>({
|
||||
defaultValues: {
|
||||
title: dump.title,
|
||||
@@ -547,6 +541,7 @@ function DumpEditForm({
|
||||
/>
|
||||
|
||||
<CategorySelect
|
||||
kind="dump"
|
||||
selected={selectedCategoryIds}
|
||||
onToggle={toggleCategory}
|
||||
/>
|
||||
|
||||
@@ -65,7 +65,7 @@ export function Index(
|
||||
const { user, authFetch } = useAuth();
|
||||
const { recentDumps, deletedDumpIds, connectionEpoch } = useWS();
|
||||
|
||||
const { categories, isLoaded: categoriesLoaded } = useCategories();
|
||||
const { categories, isLoaded: categoriesLoaded } = useCategories("dump");
|
||||
const category = categorySlug
|
||||
? categories.find((c) => c.slug === categorySlug)
|
||||
: undefined;
|
||||
|
||||
@@ -23,10 +23,10 @@ import {
|
||||
import { NotFound } from "./NotFound.tsx";
|
||||
|
||||
/**
|
||||
* Renders the category manager and the instances the site trusts or blocks,
|
||||
* each to those who hold its permission, which the API checks again, the
|
||||
* instances only while federated sign-in goes at least one way; without
|
||||
* either, the page isn't found.
|
||||
* Renders the managers of the dump and the playlist categories, and the
|
||||
* instances the site trusts or blocks, each to those who hold its permission,
|
||||
* which the API checks again, the instances only while federated sign-in goes
|
||||
* at least one way; without either, the page isn't found.
|
||||
*/
|
||||
export function Manage(): React.JSX.Element {
|
||||
useDocumentTitle(t`Manage`);
|
||||
@@ -39,11 +39,18 @@ export function Manage(): React.JSX.Element {
|
||||
<PageShell narrow>
|
||||
<PageHeader icon="🛠️" title={<Trans>Manage</Trans>} />
|
||||
{categories && (
|
||||
<PageGroup label={<Trans>Categories</Trans>}>
|
||||
<div className="page-card">
|
||||
<CategoryManager />
|
||||
</div>
|
||||
</PageGroup>
|
||||
<>
|
||||
<PageGroup label={<Trans>Dump categories</Trans>}>
|
||||
<div className="page-card">
|
||||
<CategoryManager kind="dump" />
|
||||
</div>
|
||||
</PageGroup>
|
||||
<PageGroup label={<Trans>Playlist categories</Trans>}>
|
||||
<div className="page-card">
|
||||
<CategoryManager kind="playlist" />
|
||||
</div>
|
||||
</PageGroup>
|
||||
</>
|
||||
)}
|
||||
{instances && (
|
||||
<PageGroup label={<Trans>Instances</Trans>}>
|
||||
|
||||
135
src/pages/Playlists.tsx
Normal file
135
src/pages/Playlists.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Renders every public playlist, `/playlists`, and those of one playlist
|
||||
* category, `/playlists/:categorySlug`, newest first.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { API_URL } from "../config/api.ts";
|
||||
import type { Playlist } from "../../shared/playlist.ts";
|
||||
import { playlistsPath } from "../../shared/paths.ts";
|
||||
import { canLoadMore, pageUrl, readPage } from "../utils/feed/pagedList.ts";
|
||||
import {
|
||||
deserializePlaylist,
|
||||
hydratePlaylist,
|
||||
} from "../utils/shared/deserialize.ts";
|
||||
import { useAuth } from "../hooks/auth/useAuth.ts";
|
||||
import { useCategories } from "../hooks/category/useCategories.ts";
|
||||
import { useCategoryFilter } from "../hooks/category/useCategoryFilter.ts";
|
||||
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
|
||||
import { useFeedCache } from "../hooks/feed/useFeedCache.ts";
|
||||
import { usePagedList } from "../hooks/feed/usePagedList.ts";
|
||||
import { useInfiniteScroll } from "../hooks/feed/useInfiniteScroll.ts";
|
||||
import {
|
||||
useScrollRestore,
|
||||
useScrollSave,
|
||||
} from "../hooks/feed/useScrollSave.ts";
|
||||
import { usePlaylistListSync } from "../hooks/playlist/usePlaylistListSync.ts";
|
||||
import { PageShell } from "../components/layout/PageShell.tsx";
|
||||
import { PageHeader } from "../components/layout/PageHeader.tsx";
|
||||
import { CategorySwitcher } from "../components/category/CategorySwitcher.tsx";
|
||||
import { PlaylistCardList } from "../components/playlist/PlaylistCardList.tsx";
|
||||
import { FeedFooter } from "../components/feed/FeedFooter.tsx";
|
||||
import { ListState } from "../components/shared/ListState.tsx";
|
||||
import { NotFound } from "./NotFound.tsx";
|
||||
|
||||
/**
|
||||
* Renders the list for the route's category, or every public playlist
|
||||
* without one. Each category's list is another, which the page mounts
|
||||
* afresh. A slug that names no playlist category, once the categories have
|
||||
* loaded, is a page not found.
|
||||
*/
|
||||
export function Playlists(): React.JSX.Element {
|
||||
const { categorySlug } = useParams();
|
||||
const { categories, isLoaded } = useCategories("playlist");
|
||||
const category = categorySlug
|
||||
? categories.find((c) => c.slug === categorySlug)
|
||||
: undefined;
|
||||
useDocumentTitle(category ? category.name : t`Playlists`);
|
||||
|
||||
if (categorySlug && isLoaded && !category) return <NotFound />;
|
||||
return (
|
||||
<PlaylistsList
|
||||
key={categorySlug ?? ""}
|
||||
categorySlug={categorySlug}
|
||||
categoryId={category?.id}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the public playlists, from `GET /api/playlists`, a page at a time
|
||||
* as the list scrolls; with `categorySlug`, only those in that playlist
|
||||
* category, which the menu in the title row switches. The socket keeps them
|
||||
* live, and going back restores the list and the scroll.
|
||||
*/
|
||||
function PlaylistsList(
|
||||
{ categorySlug, categoryId }: { categorySlug?: string; categoryId?: string },
|
||||
) {
|
||||
const navigate = useNavigate();
|
||||
const { user, authFetch } = useAuth();
|
||||
const { cached, saveState } = useFeedCache<Playlist>(
|
||||
`feed:playlists:${categorySlug ?? "all"}`,
|
||||
hydratePlaylist,
|
||||
);
|
||||
const url = `${API_URL}/api/playlists${
|
||||
categorySlug ? `?category=${encodeURIComponent(categorySlug)}` : ""
|
||||
}`;
|
||||
const { state, setItems: setAllItems, loadMore } = usePagedList<Playlist>(
|
||||
`${url}:${user?.id ?? "guest"}`,
|
||||
useCallback(
|
||||
(page: number, signal?: AbortSignal) =>
|
||||
authFetch(pageUrl(url, page), { signal })
|
||||
.then((res) => readPage(res, deserializePlaylist)),
|
||||
[authFetch, url],
|
||||
),
|
||||
cached,
|
||||
);
|
||||
const loaded = state.status === "loaded" ? state.data : null;
|
||||
usePlaylistListSync(useCategoryFilter(setAllItems, categoryId));
|
||||
|
||||
const sentinelRef = useInfiniteScroll(loadMore, canLoadMore(loaded));
|
||||
useScrollSave(
|
||||
!!loaded,
|
||||
useCallback((y) => {
|
||||
if (loaded) saveState(loaded, y);
|
||||
}, [loaded, saveState]),
|
||||
);
|
||||
useScrollRestore(cached?.scrollY, !!loaded);
|
||||
|
||||
return (
|
||||
<PageShell narrow>
|
||||
<PageHeader icon="📋" title={<Trans>Playlists</Trans>}>
|
||||
<CategorySwitcher
|
||||
kind="playlist"
|
||||
categorySlug={categorySlug}
|
||||
onSelect={(slug) => navigate(playlistsPath(slug))}
|
||||
/>
|
||||
</PageHeader>
|
||||
<ListState
|
||||
state={state}
|
||||
isEmpty={({ data }) => data.items.length === 0}
|
||||
empty={
|
||||
<p className="empty-state">
|
||||
<Trans>No playlists yet.</Trans>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<PlaylistCardList playlists={data.items} />
|
||||
<FeedFooter
|
||||
hasMore={data.hasMore}
|
||||
loadingMore={data.loadingMore}
|
||||
sentinelRef={sentinelRef}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</ListState>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
/**
|
||||
* Renders the results of a search, in a tab for dumps, one for users and one
|
||||
* for playlists.
|
||||
* for playlists, the dumps and the playlists narrowed to a category of their
|
||||
* own.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
@@ -14,6 +15,7 @@ import { TabBar } from "../components/shared/TabBar.tsx";
|
||||
import { DumpCardList } from "../components/dump/DumpCardList.tsx";
|
||||
import { PlaylistCardList } from "../components/playlist/PlaylistCardList.tsx";
|
||||
import { FeedFooter } from "../components/feed/FeedFooter.tsx";
|
||||
import { CategorySwitcher } from "../components/category/CategorySwitcher.tsx";
|
||||
import { ErrorCard } from "../components/shared/ErrorCard.tsx";
|
||||
import { useAuth } from "../hooks/auth/useAuth.ts";
|
||||
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
|
||||
@@ -29,6 +31,7 @@ import type { Playlist } from "../../shared/playlist.ts";
|
||||
import type { PublicUser } from "../../shared/user.ts";
|
||||
import type { Wire } from "../../shared/api.ts";
|
||||
import type { SearchResults } from "../../shared/search.ts";
|
||||
import type { CategoryKind } from "../../shared/category.ts";
|
||||
import { SEARCH_URL } from "../config/api.ts";
|
||||
import { expectOk } from "../utils/shared/api.ts";
|
||||
import {
|
||||
@@ -59,29 +62,54 @@ interface Results {
|
||||
playlists: Playlist[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Names, for each tab a category narrows, the kind of its categories and the
|
||||
* parameter of `GET /api/search` that takes one.
|
||||
*/
|
||||
const TAB_CATEGORIES: Partial<
|
||||
Record<Tab, { kind: CategoryKind; param: string }>
|
||||
> = {
|
||||
dumps: { kind: "dump", param: "category" },
|
||||
playlists: { kind: "playlist", param: "playlistCategory" },
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders `/search?q=` and `/search/:searchTab?q=`, for anyone. The results come
|
||||
* from `GET /api/search`, signed in when the viewer is, so they find their own
|
||||
* private dumps and playlists too. The dumps load a page at a time as the
|
||||
* "dumps" tab scrolls. A new `q` aborts the search under way.
|
||||
*
|
||||
* On the "dumps" and "playlists" tabs, a menu narrows the results to a
|
||||
* category of their kind, kept in the URL's `?category=`, which another tab
|
||||
* drops.
|
||||
*/
|
||||
export function Search(): React.JSX.Element {
|
||||
useDocumentTitle(t`Search`);
|
||||
const [searchParams] = useSearchParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const q = searchParams.get("q") ?? "";
|
||||
const categorySlug = searchParams.get("category") || undefined;
|
||||
const [tab, setTab] = useTabParam<Tab>(searchPath(), SEARCH_TABS, "dumps");
|
||||
const filter = tab ? TAB_CATEGORIES[tab] : undefined;
|
||||
const categoryParam = filter && categorySlug ? filter.param : undefined;
|
||||
|
||||
const { user, authFetch } = useAuth();
|
||||
const search = useCallback(async (page: number, signal?: AbortSignal) => {
|
||||
const url = new URL(SEARCH_URL, location.origin);
|
||||
url.searchParams.set("q", q);
|
||||
if (categoryParam && categorySlug) {
|
||||
url.searchParams.set(categoryParam, categorySlug);
|
||||
}
|
||||
return expectOk<Wire<SearchResults>>(
|
||||
await authFetch(pageUrl(url.toString(), page), { signal }),
|
||||
);
|
||||
}, [authFetch, q]);
|
||||
}, [authFetch, q, categoryParam, categorySlug]);
|
||||
|
||||
const { state, setData } = useFetchState<Results>(
|
||||
q.trim() ? `${q}:${user?.id ?? "guest"}` : undefined,
|
||||
q.trim()
|
||||
? `${q}:${user?.id ?? "guest"}:${categoryParam ?? ""}:${
|
||||
categorySlug ?? ""
|
||||
}`
|
||||
: undefined,
|
||||
(signal) =>
|
||||
search(1, signal).then(({ dumps, users, playlists }) => ({
|
||||
dumps: firstPage(dumps.items.map(deserializeDump), dumps.hasMore),
|
||||
@@ -144,12 +172,33 @@ export function Search(): React.JSX.Element {
|
||||
),
|
||||
}))}
|
||||
activeTab={tab}
|
||||
onChange={setTab}
|
||||
onChange={(next) => {
|
||||
// Each tab's categories are its own.
|
||||
const params = new URLSearchParams(searchParams);
|
||||
params.delete("category");
|
||||
const query = params.toString();
|
||||
setTab(next, query ? `?${query}` : "");
|
||||
}}
|
||||
className="search-tabs"
|
||||
innerClassName="search-tabs-inner"
|
||||
/>
|
||||
)}
|
||||
|
||||
{q.trim() && filter && (
|
||||
<div className="search-filter">
|
||||
<CategorySwitcher
|
||||
kind={filter.kind}
|
||||
categorySlug={categorySlug}
|
||||
onSelect={(slug) =>
|
||||
setSearchParams((p) => {
|
||||
if (slug) p.set("category", slug);
|
||||
else p.delete("category");
|
||||
return p;
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!q.trim() && (
|
||||
<p className="search-page-empty">
|
||||
<Trans>Enter a query to search.</Trans>
|
||||
|
||||
Reference in New Issue
Block a user