fix: disable vaul repositionInputs to fix iOS keyboard in drawers

spa/src/routes/_app/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Clapperboard, Film, Inbox, Plus } from "lucide-react"
+import { Clapperboard, Film, Inbox, Plus, RefreshCw } from "lucide-react"
 import { ReviewCard } from "@/components/review-card"
 import { MovieCard } from "@/components/movie-card"
 import { EmptyState } from "@/components/empty-state"
@@ -13,6 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Skeleton } from "@/components/ui/skeleton"
 import { StarRating } from "@/components/star-rating"
 import { useAuth } from "@/components/auth-provider"
+import { useQueryClient } from "@tanstack/react-query"
 import { useInfiniteActivityFeed, useDeleteReview } from "@/hooks/use-diary"
 import { SearchOverlay } from "@/components/search-overlay"
 import type { MovieSelection } from "@/components/search-overlay"
@@ -52,6 +53,8 @@ function HomePage() {
 function FeedTab() {
   const { t } = useTranslation()
   const { auth } = useAuth()
+  const qc = useQueryClient()
+  const [refreshing, setRefreshing] = useState(false)
   const [sortBy, setSortBy] = useState("date")
   const feedSortOptions = [
     { value: "date", label: t("feed.sortLatest") },
@@ -67,7 +70,19 @@ function FeedTab() {
 
   return (
     <div className="space-y-2">
-      <div className="flex justify-end">
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={async () => {
+            setRefreshing(true)
+            await qc.refetchQueries({ queryKey: ["activity-feed"] })
+            setRefreshing(false)
+          }}
+        >
+          <RefreshCw className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+        </Button>
         <Select value={sortBy} onValueChange={setSortBy}>
           <SelectTrigger className="w-36">
             <SelectValue />

spa/src/routes/_app/movies.$id.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
-import { ArrowLeft, Bookmark, BookmarkCheck, Globe, Star, TrendingUp, User, Users } from "lucide-react"
+import { Bookmark, BookmarkCheck, Globe, Star, TrendingUp, User, Users } from "lucide-react"
+import { BackButton } from "@/components/back-button"
 import { StarDisplay } from "@/components/star-display"
 import { RatingHistogram } from "@/components/rating-histogram"
 import { EmptyState } from "@/components/empty-state"
@@ -9,6 +10,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
+import { timeAgo, shortDate } from "@/lib/date"
 import { useMovie, useMovieHistory, useMovieProfile } from "@/hooks/use-movies"
 import {
   useWatchlistStatus,
@@ -36,9 +38,7 @@ function MovieDetailPage() {
 
   return (
     <div className="space-y-5 p-4">
-      <Link to="/" className="inline-flex items-center gap-1 text-sm text-muted-foreground">
-        <ArrowLeft className="size-4" /> {t("common.back")}
-      </Link>
+      <BackButton />
 
       <HeroSection movie={movie} stats={stats} movieId={id} tagline={profile?.tagline} />
 
@@ -116,7 +116,7 @@ function MovieDetailPage() {
                         {r.user_display}
                         {r.is_federated && <Globe className="size-3 text-muted-foreground/60" />}
                       </CardTitle>
-                      <CardDescription className="text-[10px]">{r.watched_at.slice(0, 10)}</CardDescription>
+                      <CardDescription className="text-[10px]">{timeAgo(r.watched_at)}</CardDescription>
                     </div>
                     <StarDisplay rating={r.rating} size="xs" />
                   </div>
@@ -145,7 +145,7 @@ function MovieDetailPage() {
             {history.viewings.map((v) => (
               <div key={v.id} className="flex items-center justify-between rounded-xl bg-card p-3">
                 <div>
-                  <p className="text-sm font-medium">{v.watched_at}</p>
+                  <p className="text-sm font-medium">{shortDate(v.watched_at)}</p>
                   {v.comment && (
                     <p className="mt-0.5 text-xs text-muted-foreground line-clamp-1">{v.comment}</p>
                   )}

spa/src/routes/_app/people.$id.tsx

@@ -1,6 +1,7 @@
-import { createFileRoute, Link } from "@tanstack/react-router"
+import { createFileRoute } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
-import { ArrowLeft, Film, User } from "lucide-react"
+import { Film, User } from "lucide-react"
+import { BackButton } from "@/components/back-button"
 import { MovieCard } from "@/components/movie-card"
 import { EmptyState } from "@/components/empty-state"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -23,9 +24,7 @@ function PersonDetailPage() {
 
   return (
     <div className="space-y-4 p-4">
-      <Link to="/" className="inline-flex items-center gap-1 text-sm text-muted-foreground">
-        <ArrowLeft className="size-4" /> {t("common.back")}
-      </Link>
+      <BackButton />
 
       <div className="flex items-center gap-4">
         <div className="size-16 flex-shrink-0 overflow-hidden rounded-full bg-muted">

spa/src/routes/_app/search.tsx

@@ -1,7 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Search as SearchIcon, Film, Users } from "lucide-react"
+import { Bookmark, Search as SearchIcon, Film, Users } from "lucide-react"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { MovieCard } from "@/components/movie-card"
 import { PersonRow } from "@/components/person-row"
@@ -10,6 +11,8 @@ import { InfiniteScroll } from "@/components/infinite-scroll"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useInfiniteSearch } from "@/hooks/use-search"
 import { useDebounce } from "@/hooks/use-debounce"
+import { useAddToWatchlist } from "@/hooks/use-watchlist"
+import { toast } from "sonner"
 
 export const Route = createFileRoute("/_app/search")({
   component: SearchPage,
@@ -17,6 +20,7 @@ export const Route = createFileRoute("/_app/search")({
 
 function SearchPage() {
   const { t } = useTranslation()
+  const addToWatchlist = useAddToWatchlist()
   const [query, setQuery] = useState("")
   const debouncedQuery = useDebounce(query, 300)
   const {
@@ -87,6 +91,21 @@ function SearchPage() {
                       genres: hit.genres,
                     }}
                     variant="full"
+                    action={
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-muted-foreground"
+                        onClick={() => {
+                          addToWatchlist.mutate(
+                            { movie_id: hit.movie_id },
+                            { onSuccess: () => toast.success(t("feed.addedToWatchlist")) },
+                          )
+                        }}
+                      >
+                        <Bookmark className="size-4" />
+                      </Button>
+                    }
                   />
                 ))}
               </div>

spa/src/routes/_app/users.$id.tsx

@@ -1,6 +1,7 @@
-import { createFileRoute, Link } from "@tanstack/react-router"
+import { createFileRoute } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
-import { ArrowLeft, UserCheck, UserPlus } from "lucide-react"
+import { UserCheck, UserPlus } from "lucide-react"
+import { BackButton } from "@/components/back-button"
 import { Button } from "@/components/ui/button"
 import { ProfileView, ProfileSkeleton } from "@/components/profile-view"
 import { useAuth } from "@/components/auth-provider"
@@ -28,9 +29,7 @@ function UserProfilePage() {
 
   return (
     <div className="p-4">
-      <Link to="/" className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground">
-        <ArrowLeft className="size-4" /> {t("common.back")}
-      </Link>
+      <div className="mb-4"><BackButton /></div>
 
       <ProfileView
         data={data}

spa/src/routes/_app/wrapup.$id.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
-import { ArrowLeft, Star, Users } from "lucide-react"
+import { Star, Users } from "lucide-react"
+import { BackButton } from "@/components/back-button"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -26,9 +27,7 @@ function WrapUpReportPage() {
 
   return (
     <div className="space-y-4 p-4">
-      <Link to="/profile" className="inline-flex items-center gap-1 text-sm text-muted-foreground">
-        <ArrowLeft className="size-4" /> {t("profile.title")}
-      </Link>
+      <BackButton />
 
       {/* Hero */}
       <Card>