From 1692b8da46bcb002b661d4c6fbed70537e6aabd8 Mon Sep 17 00:00:00 2001
From: Matyas Mihalka <matyas.mihalka@applifting.cz>
Date: Tue, 6 Oct 2026 16:56:53 +0200
Subject: [PATCH 1/3] Add optional mood to quacks

Quacks can carry a mood (happy, sad, angry, silly), chosen in the new-quack
form and shown in the feed. Adds the Mood enum and migration, API support,
and the shadcn select component.
---
 .../migration.sql                             |   5 +
 apps/backend/prisma/schema.prisma             |  10 +
 .../quack/controllers/dto/create-quack.dto.ts |  18 +-
 .../controllers/dto/quack.response.dto.ts     |   6 +-
 .../quack/controllers/quacks.controller.ts    |   1 +
 .../backend/src/modules/quack/domain/quack.ts |   4 +
 .../quack/repositories/quack.repository.ts    |   5 +-
 .../quack/services/quacks.service.spec.ts     |  17 ++
 .../modules/quack/services/quacks.service.ts  |   5 +-
 apps/frontend/package.json                    |   1 +
 apps/frontend/src/components/ui/select.tsx    | 187 ++++++++++++++++++
 .../src/features/quack/api/addQuack.ts        |   4 +-
 .../src/features/quack/api/quackSchemas.ts    |   4 +
 .../features/quack/components/QuackForm.tsx   |  92 +++++++--
 .../features/quack/components/QuackItem.tsx   |   6 +
 .../quack/components/QuackList.test.tsx       |  15 ++
 apps/frontend/src/routes/index.tsx            |   2 +
 pnpm-lock.yaml                                |  10 +
 18 files changed, 366 insertions(+), 26 deletions(-)
 create mode 100644 apps/backend/prisma/migrations/20261006144241_add_quack_mood/migration.sql
 create mode 100644 apps/frontend/src/components/ui/select.tsx

diff --git a/apps/backend/prisma/migrations/20261006144241_add_quack_mood/migration.sql b/apps/backend/prisma/migrations/20261006144241_add_quack_mood/migration.sql
new file mode 100644
index 0000000..3927547
--- /dev/null
+++ b/apps/backend/prisma/migrations/20261006144241_add_quack_mood/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "mood" AS ENUM ('happy', 'sad', 'angry', 'silly');
+
+-- AlterTable
+ALTER TABLE "quack" ADD COLUMN     "mood" "mood";
diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index 70d0525..842c055 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -22,9 +22,19 @@ enum UserRole {
   @@map("user_role")
 }
 
+enum Mood {
+  happy
+  sad
+  angry
+  silly
+
+  @@map("mood")
+}
+
 model Quack {
   id        String   @id @default(cuid())
   text      String   @db.Text
+  mood      Mood?
   user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
   userId    String
   createdAt DateTime @default(now())
diff --git a/apps/backend/src/modules/quack/controllers/dto/create-quack.dto.ts b/apps/backend/src/modules/quack/controllers/dto/create-quack.dto.ts
index fa110aa..36e2970 100644
--- a/apps/backend/src/modules/quack/controllers/dto/create-quack.dto.ts
+++ b/apps/backend/src/modules/quack/controllers/dto/create-quack.dto.ts
@@ -1,5 +1,12 @@
+import { QUACK_MOODS, QuackMood } from '@/modules/quack/domain/quack';
 import { ApiProperty } from '@nestjs/swagger';
-import { IsNotEmpty, IsString, MaxLength } from 'class-validator';
+import {
+  IsIn,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  MaxLength,
+} from 'class-validator';
 
 export class CreateQuackDto {
   @ApiProperty({
@@ -11,4 +18,13 @@ export class CreateQuackDto {
   @IsNotEmpty()
   @MaxLength(280)
   text!: string;
+
+  @ApiProperty({
+    description: 'How the quack feels. Optional.',
+    enum: QUACK_MOODS,
+    required: false,
+  })
+  @IsOptional()
+  @IsIn(QUACK_MOODS)
+  mood?: QuackMood;
 }
diff --git a/apps/backend/src/modules/quack/controllers/dto/quack.response.dto.ts b/apps/backend/src/modules/quack/controllers/dto/quack.response.dto.ts
index 8ad9aa9..2e11482 100644
--- a/apps/backend/src/modules/quack/controllers/dto/quack.response.dto.ts
+++ b/apps/backend/src/modules/quack/controllers/dto/quack.response.dto.ts
@@ -1,4 +1,4 @@
-import { Quack } from '@/modules/quack/domain/quack';
+import { Quack, QUACK_MOODS, QuackMood } from '@/modules/quack/domain/quack';
 import { ApiProperty } from '@nestjs/swagger';
 
 class QuackUserDto {
@@ -19,6 +19,9 @@ export class QuackResponseDto {
   @ApiProperty()
   text!: string;
 
+  @ApiProperty({ enum: QUACK_MOODS, nullable: true })
+  mood!: QuackMood | null;
+
   @ApiProperty()
   userId!: string;
 
@@ -37,6 +40,7 @@ export class QuackResponseDto {
     return {
       id: quack.id,
       text: quack.text,
+      mood: quack.mood,
       userId: quack.userId,
       createdAt: quack.createdAt,
       user: {
diff --git a/apps/backend/src/modules/quack/controllers/quacks.controller.ts b/apps/backend/src/modules/quack/controllers/quacks.controller.ts
index d38415f..20c7604 100644
--- a/apps/backend/src/modules/quack/controllers/quacks.controller.ts
+++ b/apps/backend/src/modules/quack/controllers/quacks.controller.ts
@@ -56,6 +56,7 @@ export class QuacksController {
   ): Promise<QuackResponseDto> {
     const quack = await this.quacksService.createQuack(user, {
       text: body.text,
+      mood: body.mood,
     });
     return QuackResponseDto.fromDomain(quack);
   }
diff --git a/apps/backend/src/modules/quack/domain/quack.ts b/apps/backend/src/modules/quack/domain/quack.ts
index a7ae02f..062c4d1 100644
--- a/apps/backend/src/modules/quack/domain/quack.ts
+++ b/apps/backend/src/modules/quack/domain/quack.ts
@@ -1,3 +1,6 @@
+export const QUACK_MOODS = ['happy', 'sad', 'angry', 'silly'] as const;
+export type QuackMood = (typeof QUACK_MOODS)[number];
+
 export type QuackAuthor = {
   id: string;
   name: string;
@@ -7,6 +10,7 @@ export type QuackAuthor = {
 export type Quack = {
   id: string;
   text: string;
+  mood: QuackMood | null;
   userId: string;
   createdAt: Date;
   updatedAt: Date;
diff --git a/apps/backend/src/modules/quack/repositories/quack.repository.ts b/apps/backend/src/modules/quack/repositories/quack.repository.ts
index 67abf82..3d12d0b 100644
--- a/apps/backend/src/modules/quack/repositories/quack.repository.ts
+++ b/apps/backend/src/modules/quack/repositories/quack.repository.ts
@@ -3,7 +3,7 @@ import {
   Quack as PrismaQuack,
   User as PrismaUser,
 } from '@/generated/prisma/client';
-import { Quack } from '@/modules/quack/domain/quack';
+import { Quack, QuackMood } from '@/modules/quack/domain/quack';
 import { Injectable } from '@nestjs/common';
 
 const mapPrismaQuackToDomain = (
@@ -11,6 +11,7 @@ const mapPrismaQuackToDomain = (
 ): Quack => ({
   id: quack.id,
   text: quack.text,
+  mood: quack.mood,
   userId: quack.userId,
   createdAt: quack.createdAt,
   updatedAt: quack.updatedAt,
@@ -41,11 +42,13 @@ export class QuackRepository {
 
   async createQuack(createQuackData: {
     text: string;
+    mood?: QuackMood;
     userId: string;
   }): Promise<Quack> {
     const quack = await this.prisma.quack.create({
       data: {
         text: createQuackData.text,
+        mood: createQuackData.mood,
         user: { connect: { id: createQuackData.userId } },
       },
       include: { user: true },
diff --git a/apps/backend/src/modules/quack/services/quacks.service.spec.ts b/apps/backend/src/modules/quack/services/quacks.service.spec.ts
index 640106f..64bd14a 100644
--- a/apps/backend/src/modules/quack/services/quacks.service.spec.ts
+++ b/apps/backend/src/modules/quack/services/quacks.service.spec.ts
@@ -9,6 +9,7 @@ import { QuacksService } from './quacks.service';
 const aQuack = (overrides: Partial<Quack> = {}): Quack => ({
   id: 'q1',
   text: 'quack quack',
+  mood: null,
   userId: 'u1',
   createdAt: new Date('2026-01-01T12:00:00Z'),
   updatedAt: new Date('2026-01-01T12:00:00Z'),
@@ -45,4 +46,20 @@ describe('QuacksService', () => {
       userId: 'u1',
     });
   });
+
+  it('passes the mood through when one is given', async () => {
+    const repository = mock<QuackRepository>();
+    repository.createQuack.mockResolvedValue(aQuack({ mood: 'silly' }));
+
+    const service = new QuacksService(repository);
+    const user = { id: 'u1' } as Identity;
+
+    await service.createQuack(user, { text: 'hello', mood: 'silly' });
+
+    expect(repository.createQuack).toHaveBeenCalledWith({
+      text: 'hello',
+      mood: 'silly',
+      userId: 'u1',
+    });
+  });
 });
diff --git a/apps/backend/src/modules/quack/services/quacks.service.ts b/apps/backend/src/modules/quack/services/quacks.service.ts
index 633772f..dfe9769 100644
--- a/apps/backend/src/modules/quack/services/quacks.service.ts
+++ b/apps/backend/src/modules/quack/services/quacks.service.ts
@@ -1,4 +1,4 @@
-import { Quack } from '@/modules/quack/domain/quack';
+import { Quack, QuackMood } from '@/modules/quack/domain/quack';
 import { QuackRepository } from '@/modules/quack/repositories/quack.repository';
 import { Identity } from '@/shared/auth/domain/identity';
 import { Injectable } from '@nestjs/common';
@@ -13,10 +13,11 @@ export class QuacksService {
 
   async createQuack(
     user: Identity,
-    quackData: { text: string },
+    quackData: { text: string; mood?: QuackMood },
   ): Promise<Quack> {
     return this.quackRepository.createQuack({
       text: quackData.text,
+      mood: quackData.mood,
       // the author is taken from the session, never from the request body
       userId: user.id,
     });
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 00bbad9..d79379b 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -24,6 +24,7 @@
     "better-auth": "^1.7.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.4.0",
     "date-fns": "^4.4.0",
     "ky": "^2.0.2",
     "lucide-react": "^1.33.0",
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..0bca5eb
--- /dev/null
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -0,0 +1,187 @@
+import * as React from "react"
+import { cn } from "cn"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return (
+    <SelectPrimitive.Root
+      data-slot="select"
+      {...props}
+    />
+  )
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/frontend/src/features/quack/api/addQuack.ts b/apps/frontend/src/features/quack/api/addQuack.ts
index 5af3359..2bf61eb 100644
--- a/apps/frontend/src/features/quack/api/addQuack.ts
+++ b/apps/frontend/src/features/quack/api/addQuack.ts
@@ -1,8 +1,8 @@
 import { api } from "@/lib/api-client"
 
-import { quackSchema, type Quack } from "@/features/quack/api/quackSchemas"
+import { quackSchema, type Quack, type QuackMood } from "@/features/quack/api/quackSchemas"
 
-export async function addQuack(input: { text: string }): Promise<Quack> {
+export async function addQuack(input: { text: string; mood?: QuackMood }): Promise<Quack> {
   const json = await api.post("quacks", { json: input }).json()
   return quackSchema.parse(json)
 }
diff --git a/apps/frontend/src/features/quack/api/quackSchemas.ts b/apps/frontend/src/features/quack/api/quackSchemas.ts
index 2035bd5..6f15041 100644
--- a/apps/frontend/src/features/quack/api/quackSchemas.ts
+++ b/apps/frontend/src/features/quack/api/quackSchemas.ts
@@ -8,9 +8,13 @@ export const quackUserSchema = z.object({
   username: z.string(),
 })
 
+export const quackMoods = ["happy", "sad", "angry", "silly"] as const
+export type QuackMood = (typeof quackMoods)[number]
+
 export const quackSchema = z.object({
   id: z.string(),
   text: z.string(),
+  mood: z.enum(quackMoods).nullable(),
   userId: z.string(),
   createdAt: z.coerce.date(),
   user: quackUserSchema,
diff --git a/apps/frontend/src/features/quack/components/QuackForm.tsx b/apps/frontend/src/features/quack/components/QuackForm.tsx
index 091e363..dd4c37d 100644
--- a/apps/frontend/src/features/quack/components/QuackForm.tsx
+++ b/apps/frontend/src/features/quack/components/QuackForm.tsx
@@ -13,21 +13,34 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 
+import { quackMoods } from "@/features/quack/api/quackSchemas"
 import { useAddQuack } from "@/features/quack/hooks/useAddQuack"
 
 // Mirrors the server-side DTO (MaxLength(280)) so the user is told before
 // the request is made — the server still validates independently.
 const MAX_LENGTH = 280
 
+// Radix Select can't use "" as an item value, so "no mood" gets a sentinel
+// that is mapped to an omitted field on submit.
+const NO_MOOD = "none"
+
 const schema = z.object({
   text: z
     .string()
     .trim()
     .min(1, "Write something first")
     .max(MAX_LENGTH, `Keep it under ${MAX_LENGTH} characters`),
+  mood: z.enum([NO_MOOD, ...quackMoods]),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -38,14 +51,20 @@ export function QuackForm({ className }: QuackFormProps) {
   const addQuack = useAddQuack()
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { text: "" },
+    defaultValues: { text: "", mood: NO_MOOD },
   })
 
   const text = useWatch({ control: form.control, name: "text" })
   const length = text?.length ?? 0
 
   const handleSubmit = (values: FormValues) => {
-    addQuack.mutate({ text: values.text }, { onSuccess: () => form.reset() })
+    addQuack.mutate(
+      {
+        text: values.text,
+        mood: values.mood === NO_MOOD ? undefined : values.mood,
+      },
+      { onSuccess: () => form.reset() },
+    )
   }
 
   return (
@@ -61,24 +80,59 @@ export function QuackForm({ className }: QuackFormProps) {
           </Alert>
         ) : null}
 
-        <FormField
-          control={form.control}
-          name="text"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>New quack</FormLabel>
-              <FormControl>
-                <Textarea
-                  rows={3}
-                  placeholder="Quack something..."
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <FormField
+            control={form.control}
+            name="text"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>New quack</FormLabel>
+                <FormControl>
+                  <Textarea
+                    rows={3}
+                    placeholder="Quack something..."
+                    disabled={addQuack.isPending}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="mood"
+            render={({ field }) => (
+              <FormItem className="sm:w-36">
+                <FormLabel>Mood</FormLabel>
+                <Select
+                  value={field.value}
+                  onValueChange={field.onChange}
                   disabled={addQuack.isPending}
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+                >
+                  <FormControl>
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={NO_MOOD}>No mood</SelectItem>
+                    {quackMoods.map((mood) => (
+                      <SelectItem
+                        key={mood}
+                        value={mood}
+                      >
+                        <span className="capitalize">{mood}</span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <div className="flex items-center justify-end gap-3">
           <span
diff --git a/apps/frontend/src/features/quack/components/QuackItem.tsx b/apps/frontend/src/features/quack/components/QuackItem.tsx
index 4af9400..f1b29ca 100644
--- a/apps/frontend/src/features/quack/components/QuackItem.tsx
+++ b/apps/frontend/src/features/quack/components/QuackItem.tsx
@@ -30,6 +30,12 @@ export function QuackItem({ quack }: QuackItemProps) {
           </span>
           <span className="text-xs text-muted-foreground">·</span>
           <time className="text-xs text-muted-foreground">{formatDate(quack.createdAt)}</time>
+          {quack.mood ? (
+            <>
+              <span className="text-xs text-muted-foreground">·</span>
+              <span className="text-xs text-muted-foreground">{quack.mood}</span>
+            </>
+          ) : null}
         </div>
         <p className="text-sm break-words whitespace-pre-line">{quack.text}</p>
       </div>
diff --git a/apps/frontend/src/features/quack/components/QuackList.test.tsx b/apps/frontend/src/features/quack/components/QuackList.test.tsx
index 8a08682..68404b8 100644
--- a/apps/frontend/src/features/quack/components/QuackList.test.tsx
+++ b/apps/frontend/src/features/quack/components/QuackList.test.tsx
@@ -9,6 +9,7 @@ import { QuackList } from "@/features/quack/components/QuackList"
 const quack = (overrides: Partial<Quack> = {}): Quack => ({
   id: "q1",
   text: "quack quack",
+  mood: null,
   userId: "u1",
   createdAt: new Date("2026-01-01T12:00:00Z"),
   user: { id: "u1", name: "Caffeinated Duck", username: "CaffeinatedDuck" },
@@ -24,6 +25,20 @@ describe("QuackList", () => {
     expect(screen.getByText("@CaffeinatedDuck")).toBeInTheDocument()
   })
 
+  it("shows the mood only when a quack has one", () => {
+    render(
+      <QuackList
+        quacks={[
+          quack({ id: "q1", text: "no mood here" }),
+          quack({ id: "q2", text: "so silly", mood: "silly" }),
+        ]}
+      />,
+    )
+
+    expect(screen.getAllByText(/^(happy|sad|angry|silly)$/i)).toHaveLength(1)
+    expect(screen.getByText("silly")).toBeInTheDocument()
+  })
+
   it("shows an error with a working reload button", async () => {
     const onReload = vi.fn()
     render(
diff --git a/apps/frontend/src/routes/index.tsx b/apps/frontend/src/routes/index.tsx
index e886a74..513ef51 100644
--- a/apps/frontend/src/routes/index.tsx
+++ b/apps/frontend/src/routes/index.tsx
@@ -20,6 +20,7 @@ const SAMPLE_QUACKS: Quack[] = [
   {
     id: "sample-1",
     text: "me: throws one crumb into the pond\nducks: assemble like the Avengers\ni fear i may have started something",
+    mood: null,
     userId: "sample-user-1",
     createdAt: new Date("2026-09-22T09:12:00"),
     user: { id: "sample-user-1", name: "Caffeinated Duck", username: "CaffeinatedDuck" },
@@ -27,6 +28,7 @@ const SAMPLE_QUACKS: Quack[] = [
   {
     id: "sample-2",
     text: "If ducks wore pants, would they wear them on their legs or over their whole lower half like a cape?\nAsking for a friend. A feathery friend.",
+    mood: null,
     userId: "sample-user-2",
     createdAt: new Date("2026-09-22T08:40:00"),
     user: { id: "sample-user-2", name: "Deep Duck Thoughts", username: "DeepDuckThoughts" },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8f0b71..2a868a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,6 +263,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cn:
+        specifier: ^0.4.0
+        version: 0.4.0
       date-fns:
         specifier: ^4.4.0
         version: 4.4.0
@@ -4112,6 +4115,11 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cn@0.4.0:
+    resolution: {integrity: sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -11345,6 +11353,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cn@0.4.0: {}
+
   co@4.6.0: {}
 
   collect-v8-coverage@1.0.3: {}

From ccfab46d77fb64e79ed2bd45330f68af8102806a Mon Sep 17 00:00:00 2001
From: Matyas Mihalka <matyas.mihalka@applifting.cz>
Date: Tue, 6 Oct 2026 17:02:20 +0200
Subject: [PATCH 2/3] Replace mood select with icon toggle group

The mood is now picked from four lucide icon buttons below the textbox.
Swaps the shadcn select component for toggle-group.
---
 apps/frontend/src/components/ui/select.tsx    | 187 ------------------
 .../src/components/ui/toggle-group.tsx        |  82 ++++++++
 apps/frontend/src/components/ui/toggle.tsx    |  42 ++++
 .../features/quack/components/QuackForm.tsx   | 135 ++++++-------
 4 files changed, 186 insertions(+), 260 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/select.tsx
 create mode 100644 apps/frontend/src/components/ui/toggle-group.tsx
 create mode 100644 apps/frontend/src/components/ui/toggle.tsx

diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
deleted file mode 100644
index 0bca5eb..0000000
--- a/apps/frontend/src/components/ui/select.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-import { Select as SelectPrimitive } from "radix-ui"
-
-function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return (
-    <SelectPrimitive.Root
-      data-slot="select"
-      {...props}
-    />
-  )
-}
-
-function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      {...props}
-    />
-  )
-}
-
-function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return (
-    <SelectPrimitive.Value
-      data-slot="select-value"
-      {...props}
-    />
-  )
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
diff --git a/apps/frontend/src/components/ui/toggle-group.tsx b/apps/frontend/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..c36da54
--- /dev/null
+++ b/apps/frontend/src/components/ui/toggle-group.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/frontend/src/components/ui/toggle.tsx b/apps/frontend/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..b651cf4
--- /dev/null
+++ b/apps/frontend/src/components/ui/toggle.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/frontend/src/features/quack/components/QuackForm.tsx b/apps/frontend/src/features/quack/components/QuackForm.tsx
index dd4c37d..b657c95 100644
--- a/apps/frontend/src/features/quack/components/QuackForm.tsx
+++ b/apps/frontend/src/features/quack/components/QuackForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Loader2 } from "lucide-react"
+import { Angry, Frown, Laugh, Loader2, Smile, type LucideIcon } from "lucide-react"
 import { useForm, useWatch } from "react-hook-form"
 import { z } from "zod"
 
@@ -13,26 +13,23 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { cn } from "@/lib/utils"
 
-import { quackMoods } from "@/features/quack/api/quackSchemas"
+import { quackMoods, type QuackMood } from "@/features/quack/api/quackSchemas"
 import { useAddQuack } from "@/features/quack/hooks/useAddQuack"
 
 // Mirrors the server-side DTO (MaxLength(280)) so the user is told before
 // the request is made — the server still validates independently.
 const MAX_LENGTH = 280
 
-// Radix Select can't use "" as an item value, so "no mood" gets a sentinel
-// that is mapped to an omitted field on submit.
-const NO_MOOD = "none"
+const MOOD_ICON: Record<QuackMood, LucideIcon> = {
+  happy: Smile,
+  sad: Frown,
+  angry: Angry,
+  silly: Laugh,
+}
 
 const schema = z.object({
   text: z
@@ -40,7 +37,7 @@ const schema = z.object({
     .trim()
     .min(1, "Write something first")
     .max(MAX_LENGTH, `Keep it under ${MAX_LENGTH} characters`),
-  mood: z.enum([NO_MOOD, ...quackMoods]),
+  mood: z.enum(quackMoods).optional(),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -51,20 +48,14 @@ export function QuackForm({ className }: QuackFormProps) {
   const addQuack = useAddQuack()
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { text: "", mood: NO_MOOD },
+    defaultValues: { text: "", mood: undefined },
   })
 
   const text = useWatch({ control: form.control, name: "text" })
   const length = text?.length ?? 0
 
   const handleSubmit = (values: FormValues) => {
-    addQuack.mutate(
-      {
-        text: values.text,
-        mood: values.mood === NO_MOOD ? undefined : values.mood,
-      },
-      { onSuccess: () => form.reset() },
-    )
+    addQuack.mutate({ text: values.text, mood: values.mood }, { onSuccess: () => form.reset() })
   }
 
   return (
@@ -80,59 +71,57 @@ export function QuackForm({ className }: QuackFormProps) {
           </Alert>
         ) : null}
 
-        <div className="flex flex-col gap-3 sm:flex-row">
-          <FormField
-            control={form.control}
-            name="text"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>New quack</FormLabel>
-                <FormControl>
-                  <Textarea
-                    rows={3}
-                    placeholder="Quack something..."
-                    disabled={addQuack.isPending}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="mood"
-            render={({ field }) => (
-              <FormItem className="sm:w-36">
-                <FormLabel>Mood</FormLabel>
-                <Select
-                  value={field.value}
-                  onValueChange={field.onChange}
+        <FormField
+          control={form.control}
+          name="text"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>New quack</FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={3}
+                  placeholder="Quack something..."
                   disabled={addQuack.isPending}
-                >
-                  <FormControl>
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    <SelectItem value={NO_MOOD}>No mood</SelectItem>
-                    {quackMoods.map((mood) => (
-                      <SelectItem
-                        key={mood}
-                        value={mood}
-                      >
-                        <span className="capitalize">{mood}</span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="mood"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel id="mood-label">Mood (optional)</FormLabel>
+              <ToggleGroup
+                type="single"
+                aria-labelledby="mood-label"
+                value={field.value ?? ""}
+                onValueChange={(value) => field.onChange(value || undefined)}
+                disabled={addQuack.isPending}
+                spacing={2}
+                className="flex-wrap"
+              >
+                {quackMoods.map((mood) => {
+                  const Icon = MOOD_ICON[mood]
+                  return (
+                    <ToggleGroupItem
+                      key={mood}
+                      value={mood}
+                      aria-label={mood}
+                    >
+                      <Icon aria-hidden />
+                    </ToggleGroupItem>
+                  )
+                })}
+              </ToggleGroup>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
         <div className="flex items-center justify-end gap-3">
           <span

From dd1ebf33591c9a62d913340dc1b1d4f545c5e5ab Mon Sep 17 00:00:00 2001
From: Matyas Mihalka <matyas.mihalka@applifting.cz>
Date: Tue, 6 Oct 2026 17:03:39 +0200
Subject: [PATCH 3/3] Document lucide-react as the icon library in CLAUDE.md

---
 CLAUDE.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 62479e7..0cc3b24 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -26,6 +26,10 @@ Need a control that isn't in `src/components/ui/`? Add it with `pnpm dlx shadcn@
 
 The CLI puts `shadow-xs`/`shadow-sm` on inputs, textareas and cards. [`DESIGN.md`](DESIGN.md) keeps shadows for things that genuinely float — dialogs, dropdowns, toasts. Strip them.
 
+### Icons come from lucide-react
+
+Whenever you need an icon, use `lucide-react` (already installed, and the `iconLibrary` in `components.json`). No emoji as icons, no other icon packages, no hand-written SVGs. Icon-only controls still need an `aria-label` per [`DESIGN.md`](DESIGN.md).
+
 ### The app is already running
 
 Assume the dev servers are up. If something is listening on the app's ports, that is this application: use it. Don't start a second instance, don't restart it, don't run `pnpm dev`.