feat(person): display if movie has been seen or not

db/queries.sql

@@ -297,3 +297,14 @@ GROUP BY
 ORDER BY
     label DESC;
 
+-- name: person-seen-movie-by-id
+SELECT
+    EXISTS (
+        SELECT
+            id
+        FROM
+            seen
+        WHERE
+            user_id = $1
+            AND movie_id = $2);
+

handlers/person.go

@@ -13,7 +13,9 @@ import (
 func HandleGetPersonByID(c *fiber.Ctx) error {
 	var person types.Person
 
-	err := db.Dot.Get(db.Client, &person, "person-by-id", c.Params("id"))
+	id := c.Params("id")
+
+	err := db.Dot.Get(db.Client, &person, "person-by-id", id)
 
 	if err != nil {
 		// TODO: Display 404 page
@@ -37,5 +39,17 @@ func HandleGetPersonByID(c *fiber.Ctx) error {
 		totalCredits += field
 	}
 
-	return utils.TemplRender(c, views.Person(person, totalCredits))
+	return utils.TemplRender(c, views.Person(person, totalCredits, id))
+}
+
+func HandleSeenMovieByID(c *fiber.Ctx) error {
+	var seen bool
+
+	err := db.Dot.Get(db.Client, &seen, "person-seen-movie-by-id", c.Locals("UserId"), c.Params("movieId"))
+
+	if err != nil {
+		return err
+	}
+
+	return utils.TemplRender(c, views.Seen(seen))
 }

router/router.go

@@ -37,6 +37,7 @@ func SetupRoutes(app *fiber.App) {
 
 	personGroup.Get("/", redirectToHome)
 	personGroup.Get("/:id", handlers.HandleGetPersonByID)
+	personGroup.Get("/:id/:movieId", handlers.HandleSeenMovieByID)
 
 	// Search
 	// --------------------------

views/person.templ

@@ -7,7 +7,7 @@ import (
 	"strconv"
 )
 
-templ Credit(title string, data types.Movies) {
+templ Credit(title string, data types.Movies, id string) {
 	if len(data) > 0 {
 		@components.Section(title, len(data)) {
 			<ol class="flex flex-col gap-2">
@@ -19,8 +19,17 @@ templ Credit(title string, data types.Movies) {
 						<hr
 							class="m-0 flex-1 border-dashed border-neutral-300 dark:border-neutral-700"
 						/>
-						<span class="text-sm tabular-nums text-neutral-500 dark:text-neutral-400">
-							{ movie.ReleaseDate.Format("2006") }
+						<span class="flex items-center gap-2">
+							<span class="text-sm tabular-nums text-neutral-500 dark:text-neutral-400">
+								{ movie.ReleaseDate.Format("2006") }
+							</span>
+							<span hx-get={ fmt.Sprintf("/person/%s/%d", id, movie.ID) } hx-trigger="load">
+								<span class="text-neutral-300 dark:text-neutral-700">
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
+										<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd"></path>
+									</svg>
+								</span>
+							</span>
 						</span>
 					</li>
 				}
@@ -29,7 +38,7 @@ templ Credit(title string, data types.Movies) {
 	}
 }
 
-templ Person(person types.Person, totalCredits int) {
+templ Person(person types.Person, totalCredits int, id string) {
 	@Layout(person.Name, "") {
 		<div
 			class="mx-auto flex max-w-xl flex-col gap-8 px-5 py-8"
@@ -38,11 +47,11 @@ templ Person(person types.Person, totalCredits int) {
 			<div>
 				{ strconv.Itoa(totalCredits) } credits
 			</div>
-			@Credit("Cast", person.Cast)
-			@Credit("Director", person.Director)
-			@Credit("Writer", person.Writer)
-			@Credit("Producer", person.Producer)
-			@Credit("Composer", person.Composer)
+			@Credit("Cast", person.Cast, id)
+			@Credit("Director", person.Director, id)
+			@Credit("Writer", person.Writer, id)
+			@Credit("Producer", person.Producer, id)
+			@Credit("Composer", person.Composer, id)
 		</div>
 	}
 }

views/seen_movie.templ

@@ -0,0 +1,19 @@
+package views
+
+// TODO: Add anchored popover once API stabilizes
+// Chrome 125
+templ Seen(seen bool) {
+	if seen {
+		<span class="text-neutral-300 dark:text-neutral-700">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
+				<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd"></path>
+			</svg>
+		</span>
+	} else {
+		<span class="text-neutral-700 dark:text-neutral-300 relative">
+			<svg popovertarget="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
+				<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd"></path>
+			</svg>
+		</span>
+	}
+}