fix(comments) : show formatted Thai dates in tooltips

components/comments/comment-card.tsx

@@ -13,6 +13,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
+import { SimpleTooltip } from "@/components/tooltip";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { CommentSkeleton } from "./comment-skeleton";
 import { Separator } from "@/components/ui/separator";
@@ -41,6 +42,10 @@ function subscribeClock(listener: () => void) {
 }
 const clockSnapshot = () => clockTime;
 const serverClockSnapshot = () => 0;
+const timestampFormatter = new Intl.DateTimeFormat("th-TH", {
+  calendar: "gregory", timeZone: "Asia/Bangkok", day: "numeric", month: "short", year: "numeric",
+  hour: "2-digit", minute: "2-digit", hourCycle: "h23",
+});
 function CommentTimestamp({ value }: { value: string }) {
   const now = useSyncExternalStore(subscribeClock, clockSnapshot, serverClockSnapshot);
   function relativeTime() {
@@ -52,9 +57,9 @@ function CommentTimestamp({ value }: { value: string }) {
     const [size, unit] = units.find(([size]) => absolute >= size)!;
     return formatter.format(Math.round(seconds / size), unit);
   }
-  return <time dateTime={value} title={value} className="text-xs text-muted-foreground">{now > 0
+  return <SimpleTooltip text={timestampFormatter.format(new Date(value))}><time dateTime={value} tabIndex={0} className="cursor-default text-xs text-muted-foreground hover:underline">{now > 0
     ? relativeTime()
-    : `${value.slice(0, 16).replace("T")}`}</time>;
+    : `${value.slice(0, 16).replace("T", " ")}`}</time></SimpleTooltip>;
 }
 
 export function CommentImages({ images }: { images: CommentImage[] }) {