Updated conversations/communities list ui

apps/web/src/components/modals/basic.tsx

@@ -4,14 +4,9 @@ import { reduceDisplay } from "./utils";
 import { Card, CardHeader } from "@tensamin/ui/cmp/card";
 import { Skeleton } from "@tensamin/ui/cmp/skeleton";
 
-/**
- * Executes Basic.
- * @param props Parameter props.
- * @returns unknown.
- */
 export function Basic(props: { user: User }) {
   return (
-    <Card className="animate-in fade-in duration-300 rounded-2xl py-0">
+    <Card className="animate-in fade-in duration-300 rounded-xl py-0 m-px">
       <CardHeader className="flex flex-row gap-2.5 items-center justify-start p-2">
         <Avatar>
           <AvatarImage src={props.user.avatar} />
@@ -25,10 +20,6 @@ export function Basic(props: { user: User }) {
   );
 }
 
-/**
- * Executes Loading.
- * @returns unknown.
- */
 export function Loading() {
-  return <Skeleton className="h-12 rounded-xl" />;
+  return <Skeleton className="h-12.5 rounded-xl" />;
 }

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>
+      <ContextMenuTrigger
+        render={
           <div
             className="select-none cursor-pointer"
-          onClick={onConversationClick}
+            onClick={() => navigate({ to: "/chat", search: { id: userId } })}
           >
             <Wrapper
-            loading={renderConversationUserLoading()}
-            userId={props.userId}
-            component={renderConversationUser}
+              loading={<Loading />}
+              userId={userId}
+              component={(user) => <Basic user={user} />}
             />
           </div>
-      </ContextMenuTrigger>
+        }
+      ></ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuGroup>
           <ContextMenuItem>Test</ContextMenuItem>