hoerdle/.agent/plans/add_subtitles.md

description

description
Add subtitles to Genres and Specials

Implementation Plan - Add Subtitles to Genres and Specials

The goal is to add a subtitle field to both Genre and Special models, allowing administrators to provide descriptions. These subtitles will be displayed as tooltips on the homepage.

1. Database Schema Changes

• Modify prisma/schema.prisma:
  • Add subtitle String? to the Genre model.
  • Add subtitle String? to the Special model.
• Create a migration: npx prisma migrate dev --name add_subtitles

2. Backend API Updates

• Update app/api/genres/route.ts:
  • Update POST to accept subtitle.
  • Add PUT method to allow updating genre name and subtitle.
• Update app/api/specials/route.ts:
  • Update POST to accept subtitle.
  • Update PUT to accept subtitle.

3. Admin UI Updates

• Update app/admin/page.tsx:
  • Genres:
    • Update the "Add Genre" form to include an input for subtitle.
    • Add an "Edit" button for each genre.
    • Implement a form/modal to edit genre name and subtitle.
    • Display the subtitle in the list of genres.
  • Specials:
    • Update the "Create Special" form to include an input for subtitle.
    • Update the "Edit Special" form (in the conditional rendering) to include subtitle.
• Update app/admin/specials/[id]/page.tsx:
  • Update the display to show the subtitle under the title.

4. Frontend Updates

• Update app/page.tsx:
  • Fetch subtitle for genres and specials (already covered by findMany).
  • Add a tooltip to the links.
    • For Link components, we can use the title attribute for a native tooltip, or build a custom CSS tooltip. The user asked for "gut lesbarer Tooltip" (readable tooltip). Native title is often small and delayed. A custom CSS tooltip (using a group/hover pattern) would be better.
    • I will implement a simple CSS-based tooltip component or style.

5. Verification

• Verify database migration.
• Verify creating a genre with a subtitle.
• Verify creating/editing a special with a subtitle.
• Verify tooltips on the homepage.