From 0c72a756c56f99fd0b21c4df011412882068f2b5 Mon Sep 17 00:00:00 2001 From: Citali Date: Mon, 2 Feb 2026 19:19:52 +0100 Subject: [PATCH] Changed some stuf on artworks table --- src/app/(admin)/artworks/page.tsx | 84 +---------- src/components/artworks/ArtworksTable.tsx | 164 ++++++++++++++-------- src/components/global/Sidebar.tsx | 24 +++- src/components/global/nav.ts | 27 +--- 4 files changed, 136 insertions(+), 163 deletions(-) diff --git a/src/app/(admin)/artworks/page.tsx b/src/app/(admin)/artworks/page.tsx index a303f73..4bb7f03 100644 --- a/src/app/(admin)/artworks/page.tsx +++ b/src/app/(admin)/artworks/page.tsx @@ -1,94 +1,12 @@ import { ArtworkColorProcessor } from "@/components/artworks/ArtworkColorProcessor"; -import { ArtworkGalleryVariantProcessor } from "@/components/artworks/ArtworkGalleryVariantProcessor"; import { ArtworksTable } from "@/components/artworks/ArtworksTable"; -import { getArtworksPage } from "@/lib/queryArtworks"; - -export default async function ArtworksPage({ - searchParams -}: { - searchParams?: { - // type?: string; - published?: string; - // groupBy?: string; - // year?: string; - // album?: string; - cursor?: string; - } -}) { - const { - // type = "all", - published = "all", - // groupBy = "year", - // year, - // album, - cursor = undefined - } = await searchParams ?? {}; - // const groupMode = groupBy === "album" ? "album" : "year"; - // const groupId = groupMode === "album" ? album ?? "all" : year ?? "all"; - - // Filter by type - // if (type !== "all") { - // where.typeId = type === "none" ? null : type; - // } - - // Filter by published status - // if (published === "published") { - // where.published = true; - // } else if (published === "unpublished") { - // where.published = false; - // } else if (published === "needsWork") { - // where.needsWork = true; - // } - - // Filter by group (year or album) - // if (groupMode === "year" && groupId !== "all") { - // where.year = parseInt(groupId); - // } else if (groupMode === "album" && groupId !== "all") { - // where.albumId = groupId; - // } - - const { items, nextCursor } = await getArtworksPage( - { - published, - cursor, - take: 48 - } - ) +export default async function ArtworksPage() { return (

Artworks

- {/* */} -
- //
- //
- //

Artworks

- // - // Upload new artwork - // - // - // Upload many artwork - // - //
- // - //
- // {items.length > 0 ? ( - // - // ) : ( - //

No artworks found.

- // )} - //
- //
); } diff --git a/src/components/artworks/ArtworksTable.tsx b/src/components/artworks/ArtworksTable.tsx index 260b5cc..91f08e3 100644 --- a/src/components/artworks/ArtworksTable.tsx +++ b/src/components/artworks/ArtworksTable.tsx @@ -1,10 +1,10 @@ "use client"; import { - ColumnDef, - SortingState, + type ColumnDef, flexRender, getCoreRowModel, + type SortingState, useReactTable, } from "@tanstack/react-table"; import { @@ -65,7 +65,7 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; -import { ArtworkTableRow } from "@/schemas/artworks/tableSchema"; +import type { ArtworkTableRow } from "@/schemas/artworks/tableSchema"; import { MultiSelectFilter } from "./MultiSelectFilter"; type TriState = "any" | "true" | "false"; @@ -103,9 +103,15 @@ function SortHeader(props: { ); } -function YesNoBadge(props: { value: boolean; variant?: "default" | "secondary" }) { +function YesNoBadge(props: { + value: boolean; + variant?: "default" | "secondary"; +}) { return ( - + {props.value ? "Yes" : "No"} ); @@ -140,7 +146,10 @@ function TriSelectInline(props: { onChange: (v: TriState) => void; }) { return ( - props.onChange(v as TriState)} + > @@ -165,7 +174,7 @@ type Filters = { export function ArtworksTable() { const [sorting, setSorting] = React.useState([ - { id: "createdAt", desc: true }, + { id: "updatedAt", desc: true }, ]); const [pageIndex, setPageIndex] = React.useState(0); const [pageSize, setPageSize] = React.useState(25); @@ -186,14 +195,20 @@ export function ArtworksTable() { const [rows, setRows] = React.useState([]); const [total, setTotal] = React.useState(0); - const [albumOptions, setAlbumOptions] = React.useState<{ id: string; name: string }[]>([]); - const [categoryOptions, setCategoryOptions] = React.useState<{ id: string; name: string }[]>([]); + const [albumOptions, setAlbumOptions] = React.useState< + { id: string; name: string }[] + >([]); + const [categoryOptions, setCategoryOptions] = React.useState< + { id: string; name: string }[] + >([]); const [isPending, startTransition] = React.useTransition(); - // Delete dialog const [deleteOpen, setDeleteOpen] = React.useState(false); - const [deleteTarget, setDeleteTarget] = React.useState<{ id: string; name: string } | null>(null); + const [deleteTarget, setDeleteTarget] = React.useState<{ + id: string; + name: string; + } | null>(null); const pageCount = Math.max(1, Math.ceil(total / pageSize)); @@ -203,7 +218,6 @@ export function ArtworksTable() { setAlbumOptions(res.albums); setCategoryOptions(res.categories); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const columns = React.useMemo[]>( @@ -240,21 +254,33 @@ export function ArtworksTable() { />
-
{row.original.name}
-
{row.original.slug}
+
+ {row.original.name} +
+
+ {row.original.slug} +
- - + +
- Created: {new Date(row.original.createdAt).toLocaleString()} + Created:{" "} + {new Date(row.original.createdAt).toLocaleString()}
- Updated: {new Date(row.original.updatedAt).toLocaleString()} + Updated:{" "} + {new Date(row.original.updatedAt).toLocaleString()}
@@ -299,18 +325,28 @@ export function ArtworksTable() { accessorKey: "albumsCount", cell: ({ row }) => (
-
{row.original.albumsCount}
- {row.original.albums.length ? : —} +
+ {row.original.albumsCount} +
+ {row.original.albums.length ? ( + + ) : ( + — + )}
), }, { id: "categories", - header: ({ column }) => , + header: ({ column }) => ( + + ), accessorKey: "categoriesCount", cell: ({ row }) => (
-
{row.original.categoriesCount}
+
+ {row.original.categoriesCount} +
{row.original.categories.length ? ( ) : ( @@ -321,25 +357,26 @@ export function ArtworksTable() { }, { accessorKey: "published", - header: ({ column }) => , + header: ({ column }) => ( + + ), cell: ({ row }) => , }, - { - accessorKey: "nsfw", - header: ({ column }) => , - cell: ({ row }) => , - }, { accessorKey: "needsWork", - header: ({ column }) => , - cell: ({ row }) => , + header: ({ column }) => ( + + ), + cell: ({ row }) => ( + + ), }, { - accessorKey: "createdAt", - header: ({ column }) => , + accessorKey: "updatedAt", + header: ({ column }) => , cell: ({ row }) => ( - {new Date(row.original.createdAt).toLocaleDateString()} + {new Date(row.original.updatedAt).toLocaleDateString()} ), }, @@ -362,7 +399,10 @@ export function ArtworksTable() { - + Edit @@ -397,7 +437,9 @@ export function ArtworksTable() { manualSorting: true, pageCount, onSortingChange: (updater) => { - setSorting((prev) => (typeof updater === "function" ? updater(prev) : updater)); + setSorting((prev) => + typeof updater === "function" ? updater(prev) : updater, + ); setPageIndex(0); }, getCoreRowModel: getCoreRowModel(), @@ -412,10 +454,11 @@ export function ArtworksTable() { name: debouncedName || undefined, slug: debouncedSlug || undefined, published: filters.published, - nsfw: filters.nsfw, needsWork: filters.needsWork, albumIds: filters.albumIds.length ? filters.albumIds : undefined, - categoryIds: filters.categoryIds.length ? filters.categoryIds : undefined, + categoryIds: filters.categoryIds.length + ? filters.categoryIds + : undefined, }, }); @@ -429,7 +472,6 @@ export function ArtworksTable() { debouncedName, debouncedSlug, filters.published, - filters.nsfw, filters.needsWork, filters.albumIds, filters.categoryIds, @@ -453,7 +495,10 @@ export function ArtworksTable() { > {header.isPlaceholder ? null - : flexRender(header.column.columnDef.header, header.getContext())} + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} ))} @@ -464,7 +509,10 @@ export function ArtworksTable() { const colId = header.column.id; return ( - + {colId === "name" ? ( - ) : colId === "nsfw" ? ( - { - setFilters((f) => ({ ...f, nsfw: v })); - setPageIndex(0); - }} - /> ) : colId === "needsWork" ? ( {rows.length === 0 ? ( - +
{isPending ? "Loading…" : "No results."}
@@ -561,8 +604,14 @@ export function ArtworksTable() { ].join(" ")} > {r.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} ))} @@ -645,7 +694,9 @@ export function ArtworksTable() { Delete artwork? - This will delete {deleteTarget?.name}. This action cannot be undone. + This will delete{" "} + {deleteTarget?.name}. This + action cannot be undone. @@ -670,10 +721,13 @@ export function ArtworksTable() { name: debouncedName || undefined, slug: debouncedSlug || undefined, published: filters.published, - nsfw: filters.nsfw, needsWork: filters.needsWork, - albumIds: filters.albumIds.length ? filters.albumIds : undefined, - categoryIds: filters.categoryIds.length ? filters.categoryIds : undefined, + albumIds: filters.albumIds.length + ? filters.albumIds + : undefined, + categoryIds: filters.categoryIds.length + ? filters.categoryIds + : undefined, }, }); setRows(res.rows); diff --git a/src/components/global/Sidebar.tsx b/src/components/global/Sidebar.tsx index 729be55..48210bd 100644 --- a/src/components/global/Sidebar.tsx +++ b/src/components/global/Sidebar.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; +import { ChevronDown } from "lucide-react"; import { Button } from "@/components/ui/button"; import { @@ -43,7 +44,12 @@ export default function AdminSidebar() { key={entry.href} asChild variant={active ? "secondary" : "ghost"} - className={cn("justify-start")} + className={cn( + "justify-start border border-transparent", + "hover:bg-muted/60 dark:hover:bg-muted/40", + active && + "bg-primary/10 text-primary border-primary/30 dark:bg-primary/20" + )} > {entry.title} @@ -65,11 +71,14 @@ export default function AdminSidebar() { @@ -83,7 +92,12 @@ export default function AdminSidebar() { asChild variant={active ? "secondary" : "ghost"} size="sm" - className="justify-start" + className={cn( + "justify-start border border-transparent", + "hover:bg-muted/60 dark:hover:bg-muted/40", + active && + "bg-primary/10 text-primary border-primary/30 dark:bg-primary/20" + )} > {item.title} diff --git a/src/components/global/nav.ts b/src/components/global/nav.ts index b6f244d..17b536b 100644 --- a/src/components/global/nav.ts +++ b/src/components/global/nav.ts @@ -17,54 +17,41 @@ export type AdminNavGroup = export const adminNav: AdminNavGroup[] = [ { type: "link", title: "Home", href: "/" }, - { type: "group", - title: "Upload", + title: "Uploads", items: [ { title: "Single Image", href: "/uploads/single" }, { title: "Multiple Images", href: "/uploads/bulk" }, ], }, - - { type: "link", title: "Artworks", href: "/artworks" }, - { type: "group", - title: "Artwork Management", + title: "Artworks", items: [ + { title: "Artwork List", href: "/artworks" }, { title: "Categories", href: "/categories" }, ], }, - { type: "group", - title: "Topics", + title: "General", items: [{ title: "Tags", href: "/tags" }], }, - { type: "group", title: "Commissions", items: [ { title: "Requests", href: "/commissions/requests" }, { title: "Board", href: "/commissions/kanban" }, + { title: "Types", href: "/commissions/types" }, - { title: "Custom Cards", href: "/commissions/custom-cards" }, + { title: "Custom (YCH)", href: "/commissions/custom-cards" }, { title: "TypeOptions", href: "/commissions/types/options" }, { title: "TypeExtras", href: "/commissions/types/extras" }, { title: "Guidelines", href: "/commissions/guidelines" }, ], }, - { type: "link", title: "Terms of Service", href: "/tos" }, - - { - type: "group", - title: "Users", - items: [ - { title: "Users", href: "/users" }, - { title: "New User", href: "/users/new" }, - ], - }, + { type: "link", title: "Users", href: "/users" }, ];