feat: categories carousel

apps/api/src/trpc/routers/_app.ts

@@ -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

@@ -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

@@ -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

@@ -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,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

@@ -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

@@ -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

@@ -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(
+    filters.push(eq(articles.categoryId, params.category));
-      eq(categories.slug, params.category),
-      eq(articles.categoryId, params.category),
-    );
-
-    if (categoryFilter) {
-      filters.push(categoryFilter);
-    }
   }
 
   if (params.search?.trim()) {

packages/db/src/queries/categories.ts

@@ -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,4 +1,5 @@
 export * from "./articles";
+export * from "./categories";
 export * from "./reports";
 export * from "./sources";
 export * from "./users";

packages/ui/package.json

@@ -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

@@ -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,
+};