feat: enhance comments (#1980)

* feat: non-inline comments support

* enhance comments

* fix types

apps/client/src/hooks/use-time-ago.tsx

@@ -1,16 +1,32 @@
 import { timeAgo } from "@/lib/time.ts";
-import { useEffect, useState } from "react";
+import { useMemo, useSyncExternalStore } from "react";
+
+let tick = 0;
+let intervalId: ReturnType<typeof setInterval> | null = null;
+const listeners = new Set<() => void>();
+
+function subscribe(callback: () => void) {
+  listeners.add(callback);
+  if (listeners.size === 1) {
+    intervalId = setInterval(() => {
+      tick++;
+      listeners.forEach((cb) => cb());
+    }, 60_000);
+  }
+  return () => {
+    listeners.delete(callback);
+    if (listeners.size === 0 && intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+}
+
+function getSnapshot() {
+  return tick;
+}
 
 export function useTimeAgo(date: Date | string) {
-  const [value, setValue] = useState(() => timeAgo(new Date(date)));
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setValue(timeAgo(new Date(date)));
-    }, 5 * 1000);
-
-    return () => clearInterval(interval);
-  }, [date]);
-
-  return value;
+  const currentTick = useSyncExternalStore(subscribe, getSnapshot);
+  return useMemo(() => timeAgo(new Date(date)), [date, currentTick]);
 }