Big Updated, added some tests, added comments for all functions, I forgot the rest

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

@@ -16,6 +16,11 @@ const ConversationContext = React.createContext<contextValue | undefined>(
   undefined,
 );
 
+/**
+ * Executes ConversationProvider.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
 export default function ConversationProvider(props: {
   children: React.ReactNode;
 }) {
@@ -64,6 +69,11 @@ export default function ConversationProvider(props: {
   );
 }
 
+/**
+ * Executes useConversation.
+ * @param none This function has no parameters.
+ * @returns contextValue.
+ */
 export function useConversation(): contextValue {
   const context = React.useContext(ConversationContext);
   if (!context) {

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

@@ -6,6 +6,11 @@ import Switch from "./switch";
 import ConversationModal from "../modal/conversation";
 import CommunityModal from "../modal/community";
 
+/**
+ * Executes List.
+ * @param none This function has no parameters.
+ * @returns unknown.
+ */
 export default function List() {
   const [category, setCategory] = React.useState<
     "conversations" | "communities"

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

@@ -2,6 +2,11 @@ import * as React from "react";
 
 type Category = "conversations" | "communities";
 
+/**
+ * Executes Switch.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
 export default function Switch(props: {
   category: Category;
   setCategory: (category: Category) => void;
@@ -28,6 +33,11 @@ export default function Switch(props: {
     updateIndicator();
   }, [updateIndicator]);
 
+  /**
+   * Executes toggleCategory.
+   * @param none This function has no parameters.
+   * @returns unknown.
+   */
   function toggleCategory() {
     props.setCategory(
       props.category === "conversations" ? "communities" : "conversations",

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

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

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

@@ -1,4 +1,4 @@
-import Basic from "@/components/modals/basic";
+import { Basic, Loading } from "@/components/modals/basic";
 import Wrapper from "@tensamin/user/wrapper";
 import {
   ContextMenu,
@@ -8,22 +8,52 @@ 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 }) {
   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={() => {
-            void navigate({ to: "/chat", search: { id: props.userId } });
-          }}
+          onClick={onConversationClick}
         >
           <Wrapper
+            loading={renderConversationUserLoading()}
             userId={props.userId}
-            component={(user) => <Basic user={user} />}
+            component={renderConversationUser}
           />
         </div>
       </ContextMenuTrigger>