fix: disable vaul repositionInputs to fix iOS keyboard in drawers

spa/src/components/back-button.tsx

@@ -0,0 +1,17 @@
+import { useRouter } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import { ArrowLeft } from "lucide-react"
+
+export function BackButton() {
+  const { t } = useTranslation()
+  const router = useRouter()
+
+  return (
+    <button
+      onClick={() => router.history.back()}
+      className="inline-flex items-center gap-1 text-sm text-muted-foreground"
+    >
+      <ArrowLeft className="size-4" /> {t("common.back")}
+    </button>
+  )
+}

spa/src/components/log-sheet.tsx

@@ -10,6 +10,7 @@ import type { MovieSelection } from "@/components/search-overlay"
 import { useLogReview } from "@/hooks/use-diary"
 import { toast } from "sonner"
 import { posterUrl } from "@/lib/api/client"
+import { hapticMedium } from "@/lib/haptics"
 
 type LogSheetProps = {
   open: boolean
@@ -48,6 +49,7 @@ export function LogSheet({ open, onOpenChange }: LogSheetProps) {
       },
       {
         onSuccess: () => {
+          hapticMedium()
           toast.success(t("logReview.logged", { title: movie.title }))
           handleClose()
         },

spa/src/components/movie-card.tsx

@@ -10,9 +10,10 @@ type MovieCardProps = {
   comment?: string
   subtitle?: string
   variant?: "compact" | "full"
+  action?: React.ReactNode
 }
 
-export function MovieCard({ movie, rating, comment, subtitle, variant = "full" }: MovieCardProps) {
+export function MovieCard({ movie, rating, comment, subtitle, variant = "full", action }: MovieCardProps) {
   if (variant === "compact") {
     return (
       <Link to="/movies/$id" params={{ id: movie.id }} className="glass flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors active:bg-muted/50">
@@ -41,6 +42,7 @@ export function MovieCard({ movie, rating, comment, subtitle, variant = "full" }
             {rating != null && <div className="mt-1"><StarDisplay rating={rating} /></div>}
             {comment && <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{comment}</p>}
           </div>
+          {action && <div className="flex items-center" onClick={(e) => e.preventDefault()}>{action}</div>}
         </CardContent>
       </Card>
     </Link>

spa/src/components/review-card.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router"
 import { Globe } from "lucide-react"
+import { timeAgo } from "@/lib/date"
 import { StarDisplay } from "@/components/star-display"
 import { Card, CardContent } from "@/components/ui/card"
 import { posterUrl } from "@/lib/api/client"
@@ -32,7 +33,7 @@ export function ReviewCard({ movie, review, userName, userId, isFederated }: Rev
               )}
               {isFederated && <Globe className="size-3 text-muted-foreground/60" />}
               <span>·</span>
-              <span>{review.watched_at.slice(0, 10)}</span>
+              <span>{timeAgo(review.watched_at)}</span>
             </div>
           )}
           <Link to="/movies/$id" params={{ id: movie.id }} className="font-semibold hover:underline">

spa/src/components/star-rating.tsx

@@ -1,5 +1,6 @@
 import { Star } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { hapticLight } from "@/lib/haptics"
 
 type StarRatingProps = {
   value: number
@@ -16,7 +17,7 @@ export function StarRating({ value, onChange, size = "lg" }: StarRatingProps) {
         <button
           key={star}
           type="button"
-          onClick={() => onChange(star)}
+          onClick={() => { hapticLight(); onChange(star) }}
           className="transition-transform active:scale-90"
         >
           <Star

spa/src/components/swipe-to-delete.tsx

@@ -4,6 +4,7 @@ import { useDrag } from "@use-gesture/react"
 import { Trash2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ConfirmDialog } from "@/components/confirm-dialog"
+import { hapticMedium } from "@/lib/haptics"
 
 type SwipeToDeleteProps = {
   onDelete: () => void
@@ -31,6 +32,7 @@ export function SwipeToDelete({
         setOffsetX(Math.min(0, Math.max(mx, -100)))
       } else {
         if (mx < -60) {
+          hapticMedium()
           setRevealed(true)
           setOffsetX(-80)
         } else {

spa/src/components/ui/drawer.tsx

@@ -4,9 +4,10 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { cn } from "@/lib/utils"
 
 function Drawer({
+  repositionInputs = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  return <DrawerPrimitive.Root data-slot="drawer" repositionInputs={repositionInputs} {...props} />
 }
 
 function DrawerTrigger({