Add content_type support for fiction vs cartoon storylines

lib/content-type.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { CONTENT_TYPES } from "./genres";
+
+describe("CONTENT_TYPES", () => {
+  it("includes fiction and cartoon", () => {
+    expect(CONTENT_TYPES).toContain("fiction");
+    expect(CONTENT_TYPES).toContain("cartoon");
+  });
+
+  it("defaults to fiction (first entry)", () => {
+    expect(CONTENT_TYPES[0]).toBe("fiction");
+  });
+
+  it("rejects invalid content types", () => {
+    const invalid = "manga";
+    expect((CONTENT_TYPES as readonly string[]).includes(invalid)).toBe(false);
+  });
+
+  it("accepts valid cartoon content type", () => {
+    expect((CONTENT_TYPES as readonly string[]).includes("cartoon")).toBe(true);
+  });
+});

lib/genres.ts

@@ -36,5 +36,8 @@ export const LANGUAGES = [
   "Others",
 ] as const;
 
+export const CONTENT_TYPES = ["fiction", "cartoon"] as const;
+
 export type Genre = (typeof GENRES)[number];
 export type Language = (typeof LANGUAGES)[number];
+export type ContentType = (typeof CONTENT_TYPES)[number];

lib/supabase.ts

@@ -66,6 +66,7 @@ export interface Database {
           language: string;
           cover_cid: string | null;
           is_nsfw: boolean;
+          content_type: string;
         };
         Insert: {
           id?: never;
@@ -89,6 +90,7 @@ export interface Database {
           language?: string;
           cover_cid?: string | null;
           is_nsfw?: boolean;
+          content_type?: string;
         };
         Update: {
           id?: never;
@@ -112,6 +114,7 @@ export interface Database {
           language?: string;
           cover_cid?: string | null;
           is_nsfw?: boolean;
+          content_type?: string;
         };
         Relationships: [];
       };

src/app/api/index/storyline/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { type Hex, decodeEventLog, encodeEventTopics } from "viem";
 import { publicClient, getReceiptWithRetry } from "../../../../../lib/rpc";
 import { createServerClient } from "../../../../../lib/supabase";
 import { validateRecentTx } from "../../../../../lib/index-auth";
 import {
@@ -10,7 +10,7 @@
 import { STORY_FACTORY } from "../../../../../lib/contracts/constants";
 import { detectWriterType } from "../../../../../lib/contracts/erc8004";
 import { hashContent } from "../../../../../lib/content";
-import { GENRES, LANGUAGES } from "../../../../../lib/genres";
+import { GENRES, LANGUAGES, CONTENT_TYPES } from "../../../../../lib/genres";
 import type { Database } from "../../../../../lib/supabase";
 import { reconcileStorylinePlotCount } from "../../../../../lib/reconcile";
 import { awardWritePoints } from "../../../../../lib/airdrop/award";
@@ -40,11 +40,19 @@
   const rawLanguage = body.language as string | undefined;
   const rawCoverCid = body.coverCid as string | undefined;
   const rawIsNsfw = body.isNsfw as string | undefined;
+  const rawContentType = body.contentType as string | undefined;
   const genre = rawGenre && (GENRES as readonly string[]).includes(rawGenre) ? rawGenre : null;
   const language = rawLanguage && (LANGUAGES as readonly string[]).includes(rawLanguage) ? rawLanguage : "English";
   const coverCid = rawCoverCid && /^[a-zA-Z0-9]{46,64}$/.test(rawCoverCid) ? rawCoverCid : null;
   const isNsfw = rawIsNsfw === "true";
 
+  if ("contentType" in body) {
+    if (typeof rawContentType !== "string" || !(CONTENT_TYPES as readonly string[]).includes(rawContentType)) {
+      return error("Invalid contentType; allowed values: fiction, cartoon");
+    }
+  }
+  const contentType = rawContentType && (CONTENT_TYPES as readonly string[]).includes(rawContentType) ? rawContentType : "fiction";
+
   if (!txHash || !/^0x[0-9a-fA-F]{64}$/.test(txHash)) {
     return error("Missing or invalid txHash");
   }
@@ -178,6 +186,7 @@
     language,
     cover_cid: coverCid,
     is_nsfw: isNsfw,
+    content_type: contentType,
   };
 
   const { error: dbError } = await supabase.from("storylines").upsert(

src/app/api/storyline/update/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { recoverMessageAddress } from "viem";
 import { createServerClient } from "../../../../../lib/supabase";
 import { STORY_FACTORY } from "../../../../../lib/contracts/constants";
-import { GENRES, LANGUAGES } from "../../../../../lib/genres";
+import { GENRES, LANGUAGES, CONTENT_TYPES } from "../../../../../lib/genres";
 import type { Database } from "../../../../../lib/supabase";
 
 const MAX_TIMESTAMP_AGE_MS = 5 * 60 * 1000;
@@ -122,6 +122,17 @@ export async function POST(req: Request) {
     updates.is_nsfw = Boolean(body.isNsfw);
   }
 
+  if ("contentType" in body) {
+    if (!isAdmin) {
+      return error("Only admin can update the contentType field", 403);
+    }
+    const ct = body.contentType as string;
+    if (!(CONTENT_TYPES as readonly string[]).includes(ct)) {
+      return error("Invalid contentType; allowed values: fiction, cartoon");
+    }
+    updates.content_type = ct;
+  }
+
   if ("hidden" in body) {
     if (!isAdmin) {
       return error("Only admin can update the hidden field", 403);

src/app/story/[storylineId]/page.tsx

@@ -395,6 +395,11 @@ function StoryHeader({
           <span className="rounded-[3px] border border-border bg-surface px-2 py-[3px] text-[10px] font-semibold uppercase tracking-[0.03em] text-foreground/80">
             {storyline.genre || "Uncategorized"}
           </span>
+          {storyline.content_type === "cartoon" && (
+            <span className="rounded-[3px] border border-[oklch(55%_0.15_60_/_0.3)] bg-[oklch(55%_0.15_60_/_0.15)] px-2 py-[3px] text-[10px] font-semibold uppercase tracking-[0.03em] text-[oklch(72%_0.12_60)]">
+              Cartoon
+            </span>
+          )}
           {storyline.writer_type === 1 && (
             <span className="rounded-[3px] border border-[oklch(55%_0.18_280_/_0.25)] bg-[oklch(55%_0.18_280_/_0.15)] px-2 py-[3px] text-[10px] font-semibold uppercase tracking-[0.03em] text-[oklch(72%_0.12_280)]">
               AI Writer

src/components/StoryCard.tsx

@@ -19,7 +19,7 @@ export const FALLBACK_STYLES: Record<FallbackVariant, React.CSSProperties> = {
   D: { background: "linear-gradient(175deg, oklch(94% 0.015 50) 0%, oklch(90% 0.02 40) 100%)" },
 };
 
-function Badges({ genre, writerType, status, isNsfw }: { genre?: string | null; writerType: number | null; status: string; isNsfw?: boolean }) {
+function Badges({ genre, writerType, status, isNsfw, contentType }: { genre?: string | null; writerType: number | null; status: string; isNsfw?: boolean; contentType?: string }) {
   const isActive = status === "active";
   return (
     <div className="absolute top-2 left-2 z-[2] flex flex-wrap items-center gap-1">
@@ -43,6 +43,11 @@ function Badges({ genre, writerType, status, isNsfw }: { genre?: string | null;
           Ongoing
         </span>
       )}
+      {contentType === "cartoon" && (
+        <span className="rounded-[3px] bg-[oklch(50%_0.15_60_/_0.65)] px-[7px] py-[2px] text-[10px] font-medium uppercase tracking-wider leading-[1.4] text-white/90 backdrop-blur-[2px]">
+          Cartoon
+        </span>
+      )}
       {isNsfw && (
         <span className="rounded-[3px] bg-[oklch(45%_0.18_25_/_0.7)] px-[7px] py-[2px] text-[10px] font-medium uppercase tracking-wider leading-[1.4] text-white/90 backdrop-blur-[2px]">
           18+
@@ -77,7 +82,7 @@ export function StoryCard({
         />
         <div className="absolute inset-0 bg-[linear-gradient(to_bottom,transparent_40%,oklch(0%_0_0_/_0.15)_60%,oklch(0%_0_0_/_0.55)_80%,oklch(0%_0_0_/_0.78)_100%)]" />
 
-        <Badges genre={displayGenre} writerType={storyline.writer_type} status={status} isNsfw={storyline.is_nsfw} />
+        <Badges genre={displayGenre} writerType={storyline.writer_type} status={status} isNsfw={storyline.is_nsfw} contentType={storyline.content_type} />
 
         <div className="absolute right-0 bottom-0 left-0 z-[2] px-2.5 pt-3 pb-2.5">
           <h3 className="font-heading text-[13px] font-semibold leading-[1.25] text-white drop-shadow-[0_1px_2px_oklch(0%_0_0_/_0.6)] line-clamp-2 sm:text-[15px]">
@@ -102,7 +107,7 @@ export function StoryCard({
     <Link href={`/story/${storyline.storyline_id}`} className={cardClass}>
       <div className="absolute inset-0" style={FALLBACK_STYLES[variant]} />
 
-      <Badges genre={displayGenre} writerType={storyline.writer_type} status={status} isNsfw={storyline.is_nsfw} />
+      <Badges genre={displayGenre} writerType={storyline.writer_type} status={status} isNsfw={storyline.is_nsfw} contentType={storyline.content_type} />
 
       {/* Centered title with accent line */}
       <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center px-4 text-center">

src/components/__tests__/StoryCard.test.tsx

@@ -90,4 +90,14 @@ describe("StoryCard", () => {
     render(<StoryCard storyline={makeStoryline({ writer_type: 1 })} />);
     expect(screen.getByText("AI Writer")).toBeInTheDocument();
   });
+
+  it("shows Cartoon badge when content_type is cartoon", () => {
+    render(<StoryCard storyline={makeStoryline({ content_type: "cartoon" })} />);
+    expect(screen.getAllByText("Cartoon").length).toBeGreaterThan(0);
+  });
+
+  it("does not show Cartoon badge for fiction stories", () => {
+    render(<StoryCard storyline={makeStoryline({ content_type: "fiction" })} />);
+    expect(screen.queryByText("Cartoon")).not.toBeInTheDocument();
+  });
 });

supabase/migrations/00039_add_content_type.sql

@@ -0,0 +1,6 @@
+-- Add content_type column to storylines (fiction | cartoon)
+ALTER TABLE storylines
+  ADD COLUMN content_type text NOT NULL DEFAULT 'fiction';
+
+ALTER TABLE storylines
+  ADD CONSTRAINT storylines_content_type_check CHECK (content_type IN ('fiction', 'cartoon'));