From 498f3b181872cf6e43d19958db294b3016f3024b Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 10 Jul 2026 17:46:56 +0200
Subject: [PATCH] edit sheet delete btn, fix medium icons, 44px touch targets,
 fix drag leak on drawer close

---
 spa/src/components/review-sheet.tsx        | 32 +++++++++++++++++++++-
 spa/src/components/star-rating.tsx         | 12 +++++---
 spa/src/components/swipe-to-delete.tsx     |  2 +-
 spa/src/components/watch-medium-picker.tsx |  6 ++--
 spa/src/lib/watch-mediums.ts               | 10 +++----
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/spa/src/components/review-sheet.tsx b/spa/src/components/review-sheet.tsx
index 2d13412..6e7c358 100644
--- a/spa/src/components/review-sheet.tsx
+++ b/spa/src/components/review-sheet.tsx
@@ -6,7 +6,9 @@ import { Button } from "@/components/ui/button"
 import { ReviewFormFields } from "@/components/review-form-fields"
 import { SearchOverlay } from "@/components/search-overlay"
 import type { MovieSelection } from "@/components/search-overlay"
-import { useLogReview, useEditReview } from "@/features/diary"
+import { useLogReview, useEditReview, useDeleteReview } from "@/features/diary"
+import { ConfirmDialog } from "@/components/confirm-dialog"
+import { Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { posterUrl } from "@/lib/api/client"
 import { hapticMedium } from "@/lib/haptics"
@@ -146,7 +148,9 @@ function EditMode({
   const [watchedAt, setWatchedAt] = useState<Date>(() => parseLocalDate(review.watched_at))
   const [dateChanged, setDateChanged] = useState(false)
   const [watchMedium, setWatchMedium] = useState<string | undefined>(review.watch_medium)
+  const [confirmDelete, setConfirmDelete] = useState(false)
   const editMutation = useEditReview()
+  const deleteMutation = useDeleteReview()
 
   function handleDateChange(d: Date) {
     setWatchedAt(d)
@@ -207,6 +211,32 @@ function EditMode({
           <Button onClick={handleSubmit} disabled={!rating || editMutation.isPending} className="w-full" size="lg">
             {editMutation.isPending ? t("editReview.saving") : t("editReview.save")}
           </Button>
+
+          <Button
+            variant="ghost"
+            className="mt-2 w-full text-destructive hover:text-destructive"
+            onClick={() => setConfirmDelete(true)}
+            disabled={deleteMutation.isPending}
+          >
+            <Trash2 className="mr-1.5 size-4" />
+            {t("editReview.delete", { defaultValue: "Delete review" })}
+          </Button>
+
+          <ConfirmDialog
+            open={confirmDelete}
+            onOpenChange={setConfirmDelete}
+            title={t("diary.deleteReview", { defaultValue: "Delete review?" })}
+            description={`${movie.title} — ${review.watched_at.slice(0, 10)}`}
+            onConfirm={() =>
+              deleteMutation.mutate(review.id, {
+                onSuccess: () => {
+                  hapticMedium()
+                  toast.success(t("editReview.deleted", { defaultValue: "Review deleted", title: movie.title }))
+                  onOpenChange(false)
+                },
+              })
+            }
+          />
         </div>
       </DrawerContent>
     </Drawer>
diff --git a/spa/src/components/star-rating.tsx b/spa/src/components/star-rating.tsx
index 78439de..81790b5 100644
--- a/spa/src/components/star-rating.tsx
+++ b/spa/src/components/star-rating.tsx
@@ -8,21 +8,25 @@ type StarRatingProps = {
   size?: "sm" | "md" | "lg"
 }
 
-const sizes = { sm: "size-5", md: "size-8", lg: "size-10" }
+const iconSizes = { sm: "size-5", md: "size-7", lg: "size-9" }
+const buttonSizes = { sm: "size-8", md: "size-10", lg: "size-11" }
 
 export function StarRating({ value, onChange, size = "lg" }: StarRatingProps) {
   return (
-    <div className="flex gap-1">
+    <div className="flex gap-0.5">
       {[1, 2, 3, 4, 5].map((star) => (
         <button
           key={star}
           type="button"
           onClick={() => { hapticLight(); onChange(star) }}
-          className="transition-transform active:scale-90"
+          className={cn(
+            "flex items-center justify-center rounded-md transition-transform active:scale-90",
+            buttonSizes[size],
+          )}
         >
           <Star
             className={cn(
-              sizes[size],
+              iconSizes[size],
               star <= value
                 ? "fill-amber-500 text-amber-500 aero-star-filled"
                 : "text-muted-foreground/30",
diff --git a/spa/src/components/swipe-to-delete.tsx b/spa/src/components/swipe-to-delete.tsx
index dfa70c9..24ed29d 100644
--- a/spa/src/components/swipe-to-delete.tsx
+++ b/spa/src/components/swipe-to-delete.tsx
@@ -41,7 +41,7 @@ export function SwipeToDelete({
         }
       }
     },
-    { axis: "x", filterTaps: true, pointer: { capture: true } },
+    { axis: "x", filterTaps: true },
   )
 
   function handleDeleteTap() {
diff --git a/spa/src/components/watch-medium-picker.tsx b/spa/src/components/watch-medium-picker.tsx
index 36575b9..0f706a9 100644
--- a/spa/src/components/watch-medium-picker.tsx
+++ b/spa/src/components/watch-medium-picker.tsx
@@ -17,7 +17,7 @@ export function WatchMediumPicker({ value, onChange }: WatchMediumPickerProps) {
       <p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">
         {t("watchMedium.label")}
       </p>
-      <div className="flex flex-wrap gap-1.5">
+      <div className="flex flex-wrap gap-2">
         {WATCH_MEDIUMS.map(({ value: val, icon: Icon, labelKey }) => {
           const selected = value === val
           return (
@@ -28,14 +28,14 @@ export function WatchMediumPicker({ value, onChange }: WatchMediumPickerProps) {
                   variant="outline"
                   size="icon"
                   className={cn(
-                    "size-8",
+                    "size-11",
                     selected && "border-[var(--aero-primary)] bg-[var(--aero-primary)] text-white shadow-[0_0_8px_var(--aero-primary-glow)]",
                   )}
                   aria-label={t(labelKey)}
                   aria-pressed={selected}
                   onClick={() => onChange(selected ? undefined : val)}
                 >
-                  <Icon className="size-4" />
+                  <Icon className="size-5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent sideOffset={4}>{t(labelKey)}</TooltipContent>
diff --git a/spa/src/lib/watch-mediums.ts b/spa/src/lib/watch-mediums.ts
index c725d2d..a6448b6 100644
--- a/spa/src/lib/watch-mediums.ts
+++ b/spa/src/lib/watch-mediums.ts
@@ -1,12 +1,12 @@
 import type { LucideIcon } from "lucide-react"
 import {
+  Cast,
   Clapperboard,
-  Tv,
-  Radio,
   Disc3,
   Download,
-  Server,
   Ellipsis,
+  Server,
+  Tv,
 } from "lucide-react"
 
 export type WatchMediumDef = {
@@ -17,8 +17,8 @@ export type WatchMediumDef = {
 
 export const WATCH_MEDIUMS: WatchMediumDef[] = [
   { value: "cinema", icon: Clapperboard, labelKey: "watchMedium.cinema" },
-  { value: "streaming", icon: Tv, labelKey: "watchMedium.streaming" },
-  { value: "tv", icon: Radio, labelKey: "watchMedium.tv" },
+  { value: "streaming", icon: Cast, labelKey: "watchMedium.streaming" },
+  { value: "tv", icon: Tv, labelKey: "watchMedium.tv" },
   { value: "physical_media", icon: Disc3, labelKey: "watchMedium.physicalMedia" },
   { value: "download", icon: Download, labelKey: "watchMedium.download" },
   { value: "media_server", icon: Server, labelKey: "watchMedium.mediaServer" },