feat: improve column carousel

src/system/index.ts

@@ -1,4 +1,5 @@
 export * from "./event";
 export * from "./window";
-export * from "./hooks/useEvent";
-export * from "./hooks/useProfile";
+export * from "./useEvent";
+export * from "./useProfile";
+export * from "./useRect";

src/system/useEvent.ts

@@ -2,7 +2,7 @@ import { type Result, type RichEvent, commands } from "@/commands.gen";
 import type { NostrEvent } from "@/types";
 import { useQuery } from "@tanstack/react-query";
 import { nip19 } from "nostr-tools";
-import { LumeEvent } from "../event";
+import { LumeEvent } from "./event";
 
 export function useEvent(id: string, repost?: string) {
 	const { isLoading, isError, error, data } = useQuery({

src/system/useRect.ts

@@ -0,0 +1,53 @@
+import { listen } from "@tauri-apps/api/event";
+import { useEffect, useRef, useState } from "react";
+
+type MutableRefObject<T> = {
+	current: T;
+};
+
+const useEffectInEvent = <K extends keyof WindowEventMap>(
+	event: K,
+	set: () => void,
+	useCapture?: boolean,
+) => {
+	useEffect(() => {
+		if (set) {
+			set();
+			window.addEventListener(event, set, useCapture);
+
+			return () => window.removeEventListener(event, set, useCapture);
+		}
+	}, []);
+};
+
+const useTauriInEvent = (set: () => void) => {
+	useEffect(() => {
+		if (set) {
+			const unlisten = listen("column_scroll", () => {
+				set();
+			});
+
+			return () => {
+				unlisten.then((f) => f());
+			};
+		}
+	}, []);
+};
+
+export const useRect = <T extends HTMLDivElement | null>(): [
+	DOMRect | undefined,
+	MutableRefObject<T | null>,
+] => {
+	const ref = useRef<T>(null);
+	const [rect, setRect] = useState<DOMRect>();
+
+	const set = (): void => {
+		setRect(ref.current?.getBoundingClientRect());
+	};
+
+	useTauriInEvent(set);
+	useEffectInEvent("resize", set);
+	useEffectInEvent("scroll", set, true);
+
+	return [rect, ref];
+};