Big restructure

apps/web/src/features/conversation/context.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { useSocket } from "@tensamin/ttp/context";
+
+import { toast } from "@tensamin/shared/log";
+import type {
+  Community,
+  Conversation,
+} from "@tensamin/shared/features/conversation/schema";
+
+interface contextValue {
+  conversations: Conversation[];
+  communities: Community[];
+}
+
+const ConversationContext = React.createContext<contextValue | undefined>(
+  undefined,
+);
+
+export default function ConversationProvider(props: {
+  children: React.ReactNode;
+}) {
+  const [conversations, setConversations] = React.useState<Conversation[]>([]);
+  const [communities, setCommunities] = React.useState<Community[]>([]);
+
+  const { send } = useSocket();
+
+  React.useEffect(() => {
+    let active = true;
+
+    send("get_chats", {})
+      .then((data) => {
+        if (active) {
+          setConversations(data.data.user_ids);
+        }
+      })
+      .catch(() => {
+        toast("error", "Failed to load conversations");
+      });
+
+    send("get_communities", {})
+      .then((data) => {
+        if (active) {
+          setCommunities(data.data.communities);
+        }
+      })
+      .catch(() => {
+        toast("error", "Failed to load communities");
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [send]);
+
+  const value = React.useMemo(
+    () => ({ conversations, communities }),
+    [communities, conversations],
+  );
+
+  return (
+    <ConversationContext.Provider value={value}>
+      {props.children}
+    </ConversationContext.Provider>
+  );
+}
+
+export function useConversation(): contextValue {
+  const context = React.useContext(ConversationContext);
+  if (!context) {
+    throw new Error(
+      "useConversation must be used within a ConversationProvider",
+    );
+  }
+  return context;
+}

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>
+  );
+}

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+type Category = "conversations" | "communities";
+
+export default function Switch(props: {
+  category: Category;
+  setCategory: (category: Category) => void;
+}) {
+  const conversationsRef = React.useRef<HTMLButtonElement | null>(null);
+  const communitiesRef = React.useRef<HTMLButtonElement | null>(null);
+
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 });
+
+  const updateIndicator = React.useCallback(() => {
+    const active =
+      props.category === "conversations"
+        ? conversationsRef.current
+        : communitiesRef.current;
+    if (!active) return;
+
+    setIndicator({
+      left: active.offsetLeft,
+      width: active.offsetWidth,
+    });
+  }, [props.category]);
+
+  React.useLayoutEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+
+  function toggleCategory() {
+    props.setCategory(
+      props.category === "conversations" ? "communities" : "conversations",
+    );
+  }
+
+  return (
+    <div
+      role="tablist"
+      className="border relative inline-flex rounded-full bg-card p-1 select-none"
+    >
+      <div
+        className="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
+        style={{
+          left: `${indicator.left}px`,
+          width: `${indicator.width}px`,
+        }}
+      />
+      <button
+        ref={conversationsRef}
+        role="tab"
+        aria-selected={props.category === "conversations"}
+        className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
+          props.category === "conversations"
+            ? "text-foreground"
+            : "text-ring/50 hover:text-ring"
+        }`}
+        onClick={toggleCategory}
+      >
+        Conversations
+      </button>
+      <button
+        ref={communitiesRef}
+        role="tab"
+        aria-selected={props.category === "communities"}
+        className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
+          props.category === "communities"
+            ? "text-foreground"
+            : "text-ring/50 hover:text-ring"
+        }`}
+        onClick={toggleCategory}
+      >
+        Communities
+      </button>
+    </div>
+  );
+}

apps/web/src/features/conversation/modal/community.tsx

@@ -0,0 +1,5 @@
+import type { Community } from "@tensamin/shared/features/conversation/schema";
+
+export default function CommunityModal(props: { community: Community }) {
+  return <div>{props.community.community_title}</div>;
+}

apps/web/src/features/conversation/modal/conversation.tsx

@@ -0,0 +1,37 @@
+import Basic from "@/components/modals/basic";
+import Wrapper from "@tensamin/user/wrapper";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@tensamin/ui/context-menu";
+import { useNavigate } from "@tanstack/react-router";
+
+export default function ConversationModal(props: { userId: number }) {
+  const navigate = useNavigate();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          className="select-none cursor-pointer"
+          onClick={() => {
+            void navigate({ to: "/chat", search: { id: props.userId } });
+          }}
+        >
+          <Wrapper
+            userId={props.userId}
+            component={(user) => <Basic user={user} />}
+          />
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>Test</ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}