Updated conversations/communities list ui

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

@@ -23,20 +23,20 @@ export default function List() {
   const virtualizer = useVirtualizer({
     count:
       category === "conversations" ? conversations.length : communities.length,
-    estimateSize: () => 80,
+    estimateSize: () => 60,
     getScrollElement: () => scrollRef.current,
   });
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3 h-full">
       <Switch category={category} setCategory={setCategory} />
       <div
         ref={scrollRef}
         id="conversation-list"
-        className="overflow-y-auto flex-1"
+        className="overflow-y-auto flex-1 h-full"
       >
         <div
-          className="relative w-full flex flex-col gap-2"
+          className="relative w-full flex flex-col"
           style={{
             height: `${virtualizer.getTotalSize()}px`,
           }}

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

@@ -8,55 +8,26 @@ import {
   ContextMenuTrigger,
 } from "@tensamin/ui/cmp/context-menu";
 import { useNavigate } from "@tanstack/react-router";
-import { type User } from "@tensamin/user/context";
 
-/**
- * Renders the conversation modal user preview card.
- * @param user Loaded user data.
- * @returns Conversation preview card JSX.
- */
-function renderConversationUser(user: User) {
-  return <Basic user={user} />;
-}
-
-/**
- * Renders the conversation modal user preview card skeleton while loading user data.
- * @returns Conversation preview card skeleton JSX.
- */
-function renderConversationUserLoading() {
-  return <Loading />;
-}
-
-/**
- * Renders a conversation context-menu entry for a specific user.
- * @param props Component props with selected user id.
- * @returns Conversation modal trigger and menu JSX.
- */
-export default function ConversationModal(props: { userId: number }) {
+export default function ConversationModal({ userId }: { userId: number }) {
   const navigate = useNavigate();
 
-  /**
-   * Navigates to the selected conversation in chat view.
-   * @returns Void.
-   */
-  const onConversationClick = () => {
-    void navigate({ to: "/chat", search: { id: props.userId } });
-  };
-
   return (
     <ContextMenu>
-      <ContextMenuTrigger>
-        <div
-          className="select-none cursor-pointer"
-          onClick={onConversationClick}
-        >
-          <Wrapper
-            loading={renderConversationUserLoading()}
-            userId={props.userId}
-            component={renderConversationUser}
-          />
-        </div>
-      </ContextMenuTrigger>
+      <ContextMenuTrigger
+        render={
+          <div
+            className="select-none cursor-pointer"
+            onClick={() => navigate({ to: "/chat", search: { id: userId } })}
+          >
+            <Wrapper
+              loading={<Loading />}
+              userId={userId}
+              component={(user) => <Basic user={user} />}
+            />
+          </div>
+        }
+      ></ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuGroup>
           <ContextMenuItem>Test</ContextMenuItem>