bernard-ng/basango
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: categories carousel

Browse Source
This commit is contained in:
bernard-ng
2025-12-03 18:29:04 +02:00
parent 78c27b8220
commit 3d102e4876
12 changed files with 363 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/trpc/routers/_app.ts
+2
View File
@@ -3,12 +3,14 @@ import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
import { createTRPCRouter } from "#api/trpc/init";
import { articlesRouter } from "#api/trpc/routers/articles";
import { authRouter } from "#api/trpc/routers/auth";
import { categoriesRouter } from "#api/trpc/routers/categories";
import { reportsRouter } from "#api/trpc/routers/reports";
import { sourcesRouter } from "#api/trpc/routers/sources";
export const appRouter = createTRPCRouter({
articles: articlesRouter,
auth: authRouter,
categories: categoriesRouter,
reports: reportsRouter,
sources: sourcesRouter,
});
apps/api/src/trpc/routers/categories.ts
+7
View File
@@ -0,0 +1,7 @@
import { getCategories } from "@basango/db/queries";
import { createTRPCRouter, protectedProcedure } from "#api/trpc/init";
export const categoriesRouter = createTRPCRouter({
list: protectedProcedure.query(async ({ ctx }) => getCategories(ctx.db)),
});
apps/dashboard/src/app/[locale]/(app)/(sidebar)/articles/page.tsx
+1
View File
@@ -9,6 +9,7 @@ export const metadata: Metadata = {
};
export default function Page() {
prefetch(trpc.categories.list.queryOptions());
prefetch(trpc.articles.list.infiniteQueryOptions({ limit: 12 }));
return (
apps/dashboard/src/app/[locale]/(app)/(sidebar)/sources/[id]/page.tsx
+1
View File
@@ -20,6 +20,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
trpc.sources.getById.queryOptions({ id }),
trpc.sources.getCategoryShares.queryOptions({ id, limit: 10 }),
trpc.sources.getPublications.queryOptions({ id }),
trpc.categories.list.queryOptions(),
trpc.articles.list.infiniteQueryOptions({ limit: 12, sourceId: id }),
]);
apps/dashboard/src/components/articles-feed.tsx
+9
View File
@@ -9,6 +9,7 @@ import * as React from "react";
import { useTRPC } from "#dashboard/trpc/client";
import { ArticleCard, ArticleCardSkeleton } from "./article-card";
import { CategoriesCarousel } from "./categories-carousel";
type ArticlesTableProps = {
sourceId?: string;
@@ -18,10 +19,16 @@ const PLACEHOLDER_COUNT = 8;
export function ArticlesFeed({ sourceId }: ArticlesTableProps) {
const trpc = useTRPC();
const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
const handleCategorySelect = React.useCallback((categoryId: string | null) => {
setSelectedCategory((current) => (current === categoryId ? null : categoryId));
}, []);
const query = useInfiniteQuery(
trpc.articles.list.infiniteQueryOptions(
{
category: selectedCategory ?? undefined,
limit: 12,
sourceId,
},
@@ -41,6 +48,8 @@ export function ArticlesFeed({ sourceId }: ArticlesTableProps) {
return (
<div className="space-y-4">
<CategoriesCarousel onSelect={handleCategorySelect} selectedCategory={selectedCategory} />
{query.isError && (
<Alert variant="destructive">
<AlertTitle>Unable to load articles</AlertTitle>
apps/dashboard/src/components/categories-carousel.tsx
+93
View File
@@ -0,0 +1,93 @@
"use client";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@basango/ui/components/carousel";
import { Skeleton } from "@basango/ui/components/skeleton";
import { cn } from "@basango/ui/lib/utils";
import { useQuery } from "@tanstack/react-query";
import * as React from "react";
import { useTRPC } from "#dashboard/trpc/client";
type Props = {
onSelect: (categoryId: string | null) => void;
selectedCategory: string | null;
};
const PLACEHOLDER_COUNT = 10;
export function CategoriesCarousel({ onSelect, selectedCategory }: Props) {
const trpc = useTRPC();
const { data, isLoading } = useQuery(trpc.categories.list.queryOptions());
const categories = data ?? [];
const showSkeletons = isLoading && categories.length === 0;
return (
<div className="relative">
<Carousel
className="w-full"
opts={{
align: "start",
containScroll: "trimSnaps",
dragFree: true,
}}
>
<CarouselContent className="-ml-2">
<CarouselItem className="basis-auto pl-2">
<CategoryPill active={!selectedCategory} onClick={() => onSelect(null)}>
All
</CategoryPill>
</CarouselItem>
{showSkeletons
? Array.from({ length: PLACEHOLDER_COUNT }).map((_, index) => (
<CarouselItem className="basis-auto pl-2" key={`category-skeleton-${index}`}>
<Skeleton className="h-8 w-20 rounded-full bg-muted/70" />
</CarouselItem>
))
: categories.map((category) => (
<CarouselItem className="basis-auto pl-2" key={category.id}>
<CategoryPill
active={selectedCategory === category.id}
onClick={() => onSelect(category.id)}
>
{category.name}
</CategoryPill>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious className="hidden md:flex" size="icon" />
<CarouselNext className="hidden md:flex" size="icon" />
</Carousel>
</div>
);
}
type CategoryPillProps = {
active?: boolean;
children: React.ReactNode;
onClick: () => void;
};
function CategoryPill({ active, children, onClick }: CategoryPillProps) {
return (
<button
aria-pressed={active}
className={cn(
"shrink-0 rounded-full border px-3 py-1.5 text-sm font-medium transition",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
active
? "border-foreground bg-foreground text-background shadow-sm"
: "border-border bg-muted/60 text-foreground hover:border-foreground/60",
)}
onClick={onClick}
type="button"
>
{children}
</button>
);
}
bun.lock
+7
View File
@@ -221,6 +221,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"date-fns": "catalog:",
"embla-carousel-react": "^8.6.0",
"lucide-react": "^0.554.0",
"next-themes": "^0.4.6",
"react": "catalog:",
@@ -1430,6 +1431,12 @@
"electron-to-chromium": ["electron-to-chromium@1.5.249", "", {}, "sha512-5vcfL3BBe++qZ5kuFhD/p8WOM1N9m3nwvJPULJx+4xf2usSlZFJ0qoNYO2fOX4hi3ocuDcmDobtA+5SFr4OmBg=="],
"embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
"embla-carousel-react": ["embla-carousel-react@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA=="],
"embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
"emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
"encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
packages/db/src/queries/articles.ts
+2 -9
View File
@@ -11,7 +11,7 @@ import {
} from "@basango/domain/models";
import { md5 } from "@basango/encryption";
import type { SQL } from "drizzle-orm";
import { count, desc, eq, getTableColumns, or, sql } from "drizzle-orm";
import { count, desc, eq, getTableColumns, sql } from "drizzle-orm";
import * as uuid from "uuid";
import { Database } from "#db/client";
@@ -105,14 +105,7 @@ function buildFilters(params: GetArticlesParams, pagination: PaginationState) {
}
if (params.category) {
const categoryFilter = or(
eq(categories.slug, params.category),
eq(articles.categoryId, params.category),
);
if (categoryFilter) {
filters.push(categoryFilter);
}
filters.push(eq(articles.categoryId, params.category));
}
if (params.search?.trim()) {
packages/db/src/queries/categories.ts
+10
View File
@@ -0,0 +1,10 @@
import { asc, desc } from "drizzle-orm";
import { Database } from "#db/client";
import { categories } from "#db/schema";
export async function getCategories(db: Database) {
return db.query.categories.findMany({
orderBy: [desc(categories.weight), asc(categories.name)],
});
}
packages/db/src/queries/index.ts
+1
View File
@@ -1,4 +1,5 @@
export * from "./articles";
export * from "./categories";
export * from "./reports";
export * from "./sources";
export * from "./users";
packages/ui/package.json
+1
View File
@@ -22,6 +22,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"date-fns": "catalog:",
"embla-carousel-react": "^8.6.0",
"lucide-react": "^0.554.0",
"next-themes": "^0.4.6",
"react": "catalog:",
packages/ui/src/components/carousel.tsx
+229
View File
@@ -0,0 +1,229 @@
"use client";
import { Button } from "@basango/ui/components/button";
import { cn } from "@basango/ui/lib/utils";
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import * as React from "react";
type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps = {
opts?: CarouselOptions;
plugins?: CarouselPlugin;
orientation?: "horizontal" | "vertical";
setApi?: (api: CarouselApi) => void;
};
type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
api: ReturnType<typeof useEmblaCarousel>[1];
scrollPrev: () => void;
scrollNext: () => void;
canScrollPrev: boolean;
canScrollNext: boolean;
} & CarouselProps;
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
function useCarousel() {
const context = React.useContext(CarouselContext);
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />");
}
return context;
}
function Carousel({
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
}: React.ComponentProps<"div"> & CarouselProps) {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins,
);
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
const [canScrollNext, setCanScrollNext] = React.useState(false);
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) return;
setCanScrollPrev(api.canScrollPrev());
setCanScrollNext(api.canScrollNext());
}, []);
const scrollPrev = React.useCallback(() => {
api?.scrollPrev();
}, [api]);
const scrollNext = React.useCallback(() => {
api?.scrollNext();
}, [api]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault();
scrollPrev();
} else if (event.key === "ArrowRight") {
event.preventDefault();
scrollNext();
}
},
[scrollPrev, scrollNext],
);
React.useEffect(() => {
if (!api || !setApi) return;
setApi(api);
}, [api, setApi]);
React.useEffect(() => {
if (!api) return;
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
return () => {
api?.off("select", onSelect);
};
}, [api, onSelect]);
return (
<CarouselContext.Provider
value={{
api: api,
canScrollNext,
canScrollPrev,
carouselRef,
opts,
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollNext,
scrollPrev,
}}
>
<div
aria-roledescription="carousel"
className={cn("relative", className)}
data-slot="carousel"
onKeyDownCapture={handleKeyDown}
role="region"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
);
}
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
const { carouselRef, orientation } = useCarousel();
return (
<div className="overflow-hidden" data-slot="carousel-content" ref={carouselRef}>
<div
className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
{...props}
/>
</div>
);
}
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
const { orientation } = useCarousel();
return (
<div
aria-roledescription="slide"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className,
)}
data-slot="carousel-item"
role="group"
{...props}
/>
);
}
function CarouselPrevious({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
<Button
className={cn(
"absolute size-8 rounded-full",
orientation === "horizontal"
? "top-1/2 -left-12 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className,
)}
data-slot="carousel-previous"
disabled={!canScrollPrev}
onClick={scrollPrev}
size={size}
variant={variant}
{...props}
>
<ArrowLeft />
<span className="sr-only">Previous slide</span>
</Button>
);
}
function CarouselNext({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
<Button
className={cn(
"absolute size-8 rounded-full",
orientation === "horizontal"
? "top-1/2 -right-12 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className,
)}
data-slot="carousel-next"
disabled={!canScrollNext}
onClick={scrollNext}
size={size}
variant={variant}
{...props}
>
<ArrowRight />
<span className="sr-only">Next slide</span>
</Button>
);
}
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
};