prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): WIP add list details sheet

Browse source
This commit is contained in:
Collin Barrett 2025-06-29 19:50:36 -05:00
parent 6942dad482
commit 33d0d0f0c5
9 changed files with 248 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
web/package-lock.json generated
View file

Binary file not shown.

1
web/package.json
View file

@ -11,6 +11,7 @@
"dependencies": {
"@azure/monitor-opentelemetry": "^1.11.1",
"@opentelemetry/exporter-jaeger": "^2.0.1",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-tooltip": "^1.2.7",

17
web/src/app/@sheet/(.)lists/[listId]/page.tsx Normal file
View file

@ -0,0 +1,17 @@
import {
getFilterListDetails,
FilterListDetails,
} from "@/services/get-filterlist-details";
import { SheetContentRenderer } from "@/components/sheet-content-renderer";
export default async function InterceptedListDetailsPage({
params,
}: {
params: Promise<{ listId: string }>;
}) {
const { listId: rawListId } = await params;
const listId = parseInt(rawListId, 10);
const list: FilterListDetails = await getFilterListDetails(listId);
return <SheetContentRenderer list={list} />;
}

3
web/src/app/@sheet/default.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Default() {
return null;
}

3
web/src/app/layout.tsx
View file

@ -17,8 +17,10 @@ const geistMono = Geist_Mono({
export default function RootLayout({
children,
sheet,
}: Readonly<{
children: React.ReactNode;
sheet: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
@ -37,6 +39,7 @@ export default function RootLayout({
>
<Header />
<div className="flex-1 flex flex-col">{children}</div>
{sheet}
<Footer />
</div>
</ThemeProvider>

26
web/src/app/lists/[listId]/page.tsx Normal file
View file

@ -0,0 +1,26 @@
import {
getFilterListDetails,
FilterListDetails,
} from "@/services/get-filterlist-details";
export default async function ListDetailsPage({
params,
}: {
params: Promise<{ listId: string }>;
}) {
const { listId: rawListId } = await params;
const listId = parseInt(rawListId, 10);
const list: FilterListDetails = await getFilterListDetails(listId);
return (
<div className="container mx-auto py-10">
<h1 className="text-3xl font-bold mb-4">{list.name}</h1>
<p className="text-lg mb-6">{list.description}</p>
<p>Maintainers: {list.maintainerIds?.join(", ")}</p>
<p>Syntaxes: {list.syntaxIds?.join(", ")}</p>
<p>Languages: {list.languageIds?.join(", ")}</p>
<p>License: {list.licenseId}</p>
</div>
);
}

19
web/src/components/filterlist-table/columns.tsx
View file

@ -6,6 +6,7 @@ import { BadgeCloud } from "@/components/badge-cloud";
import { FilterList } from "@/services/get-filterlists";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
const SortableHeader = ({
column,
@ -37,7 +38,9 @@ export const columns = [
<SortableHeader column={column}>Name</SortableHeader>
),
cell: (info) => (
<div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
<div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">
{info.getValue()}
</div>
),
enableSorting: true,
size: 200,
@ -45,7 +48,9 @@ export const columns = [
columnHelper.accessor((row) => row.description, {
header: "Description",
cell: (info) => (
<div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
<div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">
{info.getValue()}
</div>
),
size: 400,
}),
@ -172,4 +177,14 @@ export const columns = [
},
size: 200,
}),
columnHelper.display({
id: "actions",
cell: ({ row }) => {
return (
<Link href={`/lists/${row.original.id}`}>
<Button variant="ghost">View Details</Button>
</Link>
);
},
}),
];

42
web/src/components/sheet-content-renderer.tsx Normal file
View file

@ -0,0 +1,42 @@
"use client";
import { useRouter } from "next/navigation";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
import { FilterListDetails } from "@/services/get-filterlist-details";
export function SheetContentRenderer({
list,
}: {
list: FilterListDetails | null;
}) {
const router = useRouter();
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.back();
}
};
return (
<Sheet open={true} onOpenChange={handleOpenChange}>
<SheetContent>
<SheetHeader>
<SheetTitle>{list?.name}</SheetTitle>
</SheetHeader>
{list ? (
<div>
<p>{list.description}</p>
{/* Render more details as needed */}
</div>
) : (
<p>Loading...</p>
)}
</SheetContent>
</Sheet>
);
}

139
web/src/components/ui/sheet.tsx Normal file
View file

@ -0,0 +1,139 @@
"use client";
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils";
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
function SheetOverlay({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className,
)}
{...props}
/>
);
}
function SheetContent({
className,
children,
side = "right",
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left";
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className,
)}
{...props}
>
{children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props}
/>
);
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
}
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-foreground font-semibold", className)}
{...props}
/>
);
}
function SheetDescription({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
};