feat: tooltip with concrete date on relative timestamps in SPA

spa/src/components/movie-card.tsx

@@ -8,7 +8,7 @@ type MovieCardProps = {
   movie: MovieDto
   rating?: number
   comment?: string
-  subtitle?: string
+  subtitle?: React.ReactNode
   variant?: "compact" | "full"
   action?: React.ReactNode
 }

spa/src/components/profile-view.tsx

@@ -13,7 +13,7 @@ import { EmptyState } from "@/components/empty-state"
 import { SwipeTabs } from "@/components/swipe-tabs"
 import { VirtualList } from "@/components/virtual-list"
 import { useInfiniteDiary } from "@/hooks/use-diary"
-import { timeAgo } from "@/lib/date"
+import { TimeAgo } from "@/components/time-ago"
 import type { UserProfileResponse } from "@/lib/api/users"
 
 type ProfileViewProps = {
@@ -168,7 +168,7 @@ function DiaryTab({ sortBy, userId, search }: { sortBy: string; userId?: string;
           movie={e.movie}
           rating={e.review.rating}
           comment={e.review.comment}
-          subtitle={t("profile.watchedAgo", { when: timeAgo(e.review.watched_at) })}
+          subtitle={<><TimeAgo date={e.review.watched_at} /></>}
           variant="compact"
         />
       )}

spa/src/components/review-card.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router"
 import { Globe, Pencil } from "lucide-react"
-import { timeAgo } from "@/lib/date"
+import { TimeAgo } from "@/components/time-ago"
 import { StarDisplay } from "@/components/star-display"
 import { WatchMediumBadge } from "@/components/watch-medium-badge"
 import { EditableContextMenu } from "@/components/editable-context-menu"
@@ -42,7 +42,7 @@ export function ReviewCard({ movie, review, userName, userId, isFederated, actor
               )}
               {isFederated && <Globe className="size-3 text-muted-foreground/60" />}
               <span>·</span>
-              <span>{timeAgo(review.watched_at)}</span>
+              <TimeAgo date={review.watched_at} />
             </div>
           )}
           <div className="flex items-center justify-between">

spa/src/components/time-ago.tsx

@@ -0,0 +1,20 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { timeAgo, shortDate } from "@/lib/date"
+
+type TimeAgoProps = {
+  date: string
+  className?: string
+}
+
+export function TimeAgo({ date, className }: TimeAgoProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <time dateTime={date} className={className}>{timeAgo(date)}</time>
+        </TooltipTrigger>
+        <TooltipContent>{shortDate(date)}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}