Bring the datasets page in line with the models page

The datasets page arrived from main built against the pre-redesign models
page, so it kept a gradient masthead, the small search bar and a card
copied from the old model card.

Masthead, search and empty state now match the models page: one accent
word instead of a gradient, the large search bar with a count in its
placeholder, and the empty state as a card with a clear-filters button
rather than loose centred text.

The dataset card imported the redesigned model-card module while still
carrying `border-gray-300 bg-white shadow-lg` and a `.paired` class that
no longer exists. Those were dead weight — a CSS module beats a utility,
so the module's own border, surface and shadow were already winning. Its
type, author line and tag row now follow the model card, including the
two-row clamp with a `+N` chip.

Two things syncing the page exposed: the filter row said "All models" on
the datasets page, and the placeholder read "Search 1 datasets".

Also drops the second sentence from the footer blurb.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TpogQiNgM8Lg8PTTfTGSNk

Author: joeyballentine

src/elements/components/dataset-card.tsx

@@ -9,6 +9,7 @@ import { useWebApi } from '../../lib/hooks/use-web-api';
 import { joinList } from '../../lib/react-util';
 import { Dataset, DatasetId, ImageSize, PairedImage } from '../../lib/schema';
 import { asArray, assertNever, joinClasses } from '../../lib/util';
+import { ClampedTags } from './clamped-tags';
 import { EditableTags } from './editable-tags';
 import { Link } from './link';
 import style from './model-card.module.scss';
@@ -87,7 +88,9 @@ const SideBySideImage = ({ datasetName, image }: { datasetName: string; image: P
 const getDatasetCardImageComponent = (dataset: Dataset | undefined) => {
     const image = dataset?.images?.[0];
     if (!dataset || !image) {
-        return <div className="margin-auto z-0 w-full py-20 text-center text-gray-500">No Image</div>;
+        return (
+            <div className="z-0 flex h-full w-full items-center justify-center text-sm text-ink-subtle">No preview</div>
+        );
     }
     switch (image.type) {
         case 'paired': {
@@ -119,31 +122,29 @@ const DatasetCardContent = memo(({ id, dataset }: DatasetCardProps) => {
     const { webApi, editMode } = useWebApi();
     const { updateDatasetProperty } = useUpdateDataset(webApi, id);
 
-    const isPaired = dataset.images?.[0]?.type === 'paired' && !editMode;
-
     return (
         <div className={style.inner}>
             <Link
-                className={joinClasses(style.thumbnail, isPaired && style.paired, 'bg-fade-300 dark:bg-fade-700 ')}
+                className={joinClasses(style.thumbnail, 'bg-surface-sunken')}
                 href={`/datasets/${id}`}
                 tabIndex={-1}
             >
                 {getDatasetCardImageComponent(dataset)}
             </Link>
 
-            <div className={joinClasses(style.details, isPaired && style.paired)}>
+            <div className={style.details}>
                 <Link
-                    className={`${style.name} block text-xl font-bold text-gray-800 dark:text-gray-100`}
+                    className={`${style.name} block text-base font-semibold leading-snug text-ink line-clamp-2`}
                     href={`/datasets/${id}`}
                 >
                     {dataset.name}
                 </Link>
-                <div className="text-sm text-gray-600 dark:text-gray-400">
+                <div className="truncate text-sm text-ink-muted">
                     {'by '}
                     {joinList(
                         asArray(dataset.author).map((userId) => (
                             <Link
-                                className="font-bold text-accent-600 dark:text-accent-400"
+                                className="font-medium text-accent-text hover:underline"
                                 href={`/users/${userId}`}
                                 key={userId}
                             >
@@ -154,18 +155,24 @@ const DatasetCardContent = memo(({ id, dataset }: DatasetCardProps) => {
                 </div>
 
                 {/* Description */}
-                <div className="mb-2 mt-1 text-sm text-gray-600 line-clamp-3 dark:text-gray-400">
-                    {dataset.description}
-                </div>
-
-                {/* Tags */}
-                <div className="flex flex-row flex-wrap gap-1 text-xs">
-                    <EditableTags
-                        readonly={!editMode}
+                <div className="mt-1 mb-2 text-sm leading-snug text-ink-muted line-clamp-2">{dataset.description}</div>
+
+                {/* Tags. Same split as the model card: edit mode keeps the full
+                    editor, read mode clamps to two rows with a `+N` chip. */}
+                {editMode ? (
+                    <div className={joinClasses(style.tagRow, style.tagRowOpen, 'text-xs')}>
+                        <EditableTags
+                            readonly={false}
+                            tags={dataset.tags}
+                            onChange={(tags) => updateDatasetProperty('tags', tags)}
+                        />
+                    </div>
+                ) : (
+                    <ClampedTags
+                        className={joinClasses(style.tagRow, 'text-xs')}
                         tags={dataset.tags}
-                        onChange={(tags) => updateDatasetProperty('tags', tags)}
                     />
-                </div>
+                )}
             </div>
         </div>
     );
@@ -174,14 +181,11 @@ const DatasetCardContent = memo(({ id, dataset }: DatasetCardProps) => {
 export const DatasetCard = memo(({ id, dataset, lazy = false }: DatasetCardProps) => {
     const { editMode } = useWebApi();
 
+    // No border/background/shadow utilities: `.modelCard` carries all three
+    // from the design tokens now, and being a CSS module it wins over them
+    // anyway — they were dead weight fighting the card they sat on.
     const inner = (
-        <div
-            className={joinClasses(
-                style.modelCard,
-                !editMode && style.overflowHidden,
-                'border-gray-300 bg-white shadow-lg hover:shadow-2xl dark:border-gray-700 dark:bg-fade-900'
-            )}
-        >
+        <div className={joinClasses(style.modelCard, !editMode && style.overflowHidden)}>
             <DatasetCardContent
                 dataset={dataset}
                 id={id}
@@ -192,13 +196,7 @@ export const DatasetCard = memo(({ id, dataset, lazy = false }: DatasetCardProps
     if (!lazy) return inner;
 
     return (
-        <LazyLoadComponent
-            placeholder={
-                <div
-                    className={`${style.modelCard} border-gray-300 bg-white shadow-lg hover:shadow-2xl dark:border-gray-700 dark:bg-fade-900`}
-                />
-            }
-        >
+        <LazyLoadComponent placeholder={<div className={joinClasses(style.modelCard, style.placeholder)} />}>
             {inner}
         </LazyLoadComponent>
     );

src/elements/footer.tsx

@@ -60,10 +60,7 @@ export function Footer() {
             <div className={style.inner}>
                 <div className={style.columns}>
                     <div className={style.about}>
-                        <p className={style.blurb}>
-                            A community-driven database of AI upscaling models. Everything here is maintained in the
-                            open — corrections and new models are welcome.
-                        </p>
+                        <p className={style.blurb}>A community-driven database of AI upscaling models.</p>
                         <div className={style.social}>
                             <Link
                                 external

src/elements/tag-selector.tsx

@@ -255,7 +255,7 @@ function SimpleTagSelector({ selection, onChange, context = 'models' }: TagSelec
                 <div className={style.groupTags}>
                     <TagButton
                         noIcon
-                        name="All models"
+                        name={context === 'datasets' ? 'All datasets' : 'All models'}
                         state={selected === undefined ? 'required' : 'any'}
                         onClick={() => {
                             if (selected !== undefined) {

src/pages/datasets/index.tsx

@@ -15,6 +15,7 @@ import { SearchResult } from '../../lib/search/search-index';
 import { tokenize } from '../../lib/search/token';
 import { fileApi } from '../../lib/server/file-data';
 import { TagSelection, getTagCondition } from '../../lib/tag-condition';
+import { EMPTY_MAP } from '../../lib/util';
 
 interface Props {
     datasetData: Record<DatasetId, Dataset>;
@@ -63,20 +64,26 @@ export default function Page({ datasetData: staticDatasetData }: Props) {
                 scrollToTop
                 wrapper
             >
-                <h1 className="mb-4 text-center text-4xl font-extrabold md:mb-6 md:text-5xl lg:text-6xl">
-                    <span className="font-bold text-gray-800 dark:text-gray-100">Training </span>
-                    <span className="bg-gradient-to-r from-accent-400 via-accent-500 to-accent-600 bg-clip-text text-transparent">
-                        Datasets
-                    </span>
-                </h1>
+                {/* Same masthead as the models page: one accent word rather
+                    than a gradient, and theme tokens instead of paired greys. */}
+                <section className="mx-auto max-w-3xl pt-8 pb-2 text-center md:pt-12">
+                    <h1 className="m-0 text-4xl font-extrabold leading-tight tracking-tight text-ink md:text-5xl lg:text-6xl">
+                        Training <span className="text-accent-text">Datasets</span>
+                    </h1>
 
-                <p className="mx-auto mb-8 max-w-screen-md text-center text-gray-600 dark:text-gray-400 md:text-lg">
-                    Explore and search for datasets used to train upscaling and restoration models.
-                </p>
+                    <p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-ink-muted md:text-lg">
+                        Explore and search for datasets used to train upscaling and restoration models.
+                    </p>
+                </section>
 
                 {/* Search */}
                 <SearchBar
-                    className="mb-4 w-full"
+                    aria-label="Search datasets"
+                    className="mx-auto mt-7 w-full max-w-3xl"
+                    placeholder={`Search ${datasetData.size.toLocaleString('en-US')} dataset${
+                        datasetData.size === 1 ? '' : 's'
+                    } by name or purpose`}
+                    size="large"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value, 400)}
                     onEnter={(e) => {
@@ -98,7 +105,7 @@ export default function Page({ datasetData: staticDatasetData }: Props) {
                 />
 
                 {/* Tags */}
-                <div className="my-4">
+                <div className="mt-8 mb-10">
                     <TagSelector
                         context="datasets"
                         selection={tagSelection}
@@ -117,9 +124,23 @@ export default function Page({ datasetData: staticDatasetData }: Props) {
                         datasets={selectedDatasets}
                     />
                 ) : (
-                    <div className="mt-10 flex flex-col items-center justify-center p-6">
-                        <div className="text-2xl font-bold text-accent-500 dark:text-gray-100">No datasets found</div>
-                        <div className="text-gray-500 dark:text-gray-400">Try changing your search filters</div>
+                    <div className="flex flex-col items-center justify-center rounded-card border border-solid border-line bg-surface px-6 py-16 text-center">
+                        <p className="m-0 text-lg font-semibold text-ink">No datasets match those filters</p>
+                        <p className="m-0 mt-1 max-w-md text-sm text-ink-muted">
+                            {searchQuery
+                                ? `Nothing matched “${searchQuery}”. Try a broader term, or clear the filters to start over.`
+                                : 'That combination of tags has no datasets. Try removing one, or clear the filters to start over.'}
+                        </p>
+                        <button
+                            className="mt-5 cursor-pointer rounded-control border-0 bg-accent-600 px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 dark:bg-accent-500"
+                            type="button"
+                            onClick={() => {
+                                setSearchQuery('', 0);
+                                setTagSelection(EMPTY_MAP, 0);
+                            }}
+                        >
+                            Clear search and filters
+                        </button>
                     </div>
                 )}
             </PageContainer>