feat: add infinite scroll & fix some ui

ui/src/hooks/useChats.ts

@@ -0,0 +1,22 @@
+import { useWAClient } from "@/app/context";
+import { getId } from "@/lib/utils";
+import type { WhatsAppClient } from "@client/whatsapp";
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+
+async function getChats(client: WhatsAppClient) {
+  return client
+    .listChats({ limit: 500 })
+    .then((res) => res.map((i) => ({ ...i, id: getId(i.id) })));
+}
+
+type Response = Awaited<ReturnType<typeof getChats>>;
+
+export function useChats(opt?: Partial<UseQueryOptions>) {
+  const { client, isReady } = useWAClient();
+  return useQuery<Response, Error>({
+    queryKey: ["chats"],
+    queryFn: () => getChats(client),
+    enabled: isReady,
+    ...((opt || {}) as any),
+  });
+}