Big restructure

apps/web/src/features/conversation/list/body.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useConversation } from "../context";
+
+import Switch from "./switch";
+import ConversationModal from "../modal/conversation";
+import CommunityModal from "../modal/community";
+
+export default function List() {
+  const [category, setCategory] = React.useState<
+    "conversations" | "communities"
+  >("conversations");
+
+  const { conversations, communities } = useConversation();
+
+  const scrollRef = React.useRef<HTMLDivElement | null>(null);
+
+  const virtualizer = useVirtualizer({
+    count: category === "conversations" ? conversations.length : communities.length,
+    estimateSize: () => 80,
+    getScrollElement: () => scrollRef.current,
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Switch category={category} setCategory={setCategory} />
+      <div ref={scrollRef} id="conversation-list" className="overflow-y-auto flex-1">
+        <div
+          className="relative w-full flex flex-col gap-2"
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualItem) => {
+            const itemKey = `${category}-${virtualItem.index}`;
+
+            return (
+              <div
+                key={itemKey}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualItem.start}px)`,
+                }}
+              >
+                {category === "conversations" ? (
+                  conversations[virtualItem.index] ? (
+                    <ConversationModal
+                      userId={conversations[virtualItem.index].user_id}
+                    />
+                  ) : null
+                ) : communities[virtualItem.index] ? (
+                  <CommunityModal community={communities[virtualItem.index]} />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}