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>

apps/web/src/features/legal/screen.tsx

@@ -11,6 +11,60 @@ import { log } from "@tensamin/shared/log";
 import Link from "@tensamin/ui/link";
 import { Label } from "@tensamin/ui/cmp/label";
 
+type SaveFn = ReturnType<typeof useStorage>["save"];
+
+/**
+ * Persists accepted legal documents and marks the first onboarding step complete.
+ * @param save Storage save function.
+ * @param currentDocs Current legal documents fetched from the server.
+ * @param setPPandToSDone State setter for legal acceptance completion.
+ * @returns Promise that resolves when persistence is complete.
+ */
+async function persistAcceptedDocs(
+  save: SaveFn,
+  currentDocs: z.infer<typeof legalDocsSchema>,
+  setPPandToSDone: React.Dispatch<React.SetStateAction<boolean>>,
+): Promise<void> {
+  await save("accepted_privacy_policy", true);
+  await save("accepted_terms_of_service", true);
+  await save("ppandtos_done", true);
+  await save("legal_docs", currentDocs);
+  setPPandToSDone(true);
+}
+
+/**
+ * Persists analytics preference toggles and marks analytics onboarding complete.
+ * @param save Storage save function.
+ * @param crashReports Whether crash reports are enabled.
+ * @param usageData Whether usage data is enabled.
+ * @param setCrashReports State setter for crash reports.
+ * @param setUsageData State setter for usage data.
+ * @param setDoneWithAnalytics State setter for analytics completion.
+ * @returns Promise that resolves when persistence is complete.
+ */
+async function persistAnalyticsPreferences(
+  save: SaveFn,
+  crashReports: boolean,
+  usageData: boolean,
+  setCrashReports: React.Dispatch<React.SetStateAction<boolean>>,
+  setUsageData: React.Dispatch<React.SetStateAction<boolean>>,
+  setDoneWithAnalytics: React.Dispatch<React.SetStateAction<boolean>>,
+): Promise<void> {
+  await save("analytics_crash_reports", crashReports);
+  setCrashReports(crashReports);
+
+  await save("analytics_usage_data", usageData);
+  setUsageData(usageData);
+
+  await save("analytics_done", true);
+  setDoneWithAnalytics(true);
+}
+
+/**
+ * Gates the application behind legal and analytics consent checks.
+ * @param props Component props containing children to render after consent.
+ * @returns Legal onboarding or wrapped children JSX.
+ */
 export default function Screen(props: { children: React.ReactNode }) {
   const { load, save } = useStorage();
 
@@ -31,6 +85,37 @@ export default function Screen(props: { children: React.ReactNode }) {
   const [crashReports, setCrashReports] = React.useState(false);
   const [usageData, setUsageData] = React.useState(false);
 
+  /**
+   * Handles continue action for privacy policy and terms acceptance.
+   * @returns Void.
+   */
+  const handleContinueLegal = React.useCallback((): void => {
+    const currentDocs = remoteDocs;
+    if (!currentDocs) {
+      return;
+    }
+
+    void persistAcceptedDocs(save, currentDocs, setPPandToSDone);
+  }, [remoteDocs, save]);
+
+  /**
+   * Handles continue action for analytics preferences.
+   * @returns Void.
+   */
+  const handleContinueAnalytics = React.useCallback((): void => {
+    const currentCrashReports = crashReports;
+    const currentUsageData = usageData;
+
+    void persistAnalyticsPreferences(
+      save,
+      currentCrashReports,
+      currentUsageData,
+      setCrashReports,
+      setUsageData,
+      setDoneWithAnalytics,
+    );
+  }, [crashReports, save, usageData]);
+
   React.useEffect(() => {
     let active = true;
 
@@ -178,20 +263,7 @@ export default function Screen(props: { children: React.ReactNode }) {
             </div>
             <ContinueButton
               disabled={!acceptedPP || !acceptedTOS}
-              onClick={() => {
-                const currentDocs = remoteDocs;
-                if (!currentDocs) {
-                  return;
-                }
-
-                void (async () => {
-                  await save("accepted_privacy_policy", true);
-                  await save("accepted_terms_of_service", true);
-                  await save("ppandtos_done", true);
-                  await save("legal_docs", currentDocs);
-                  setPPandToSDone(true);
-                })();
-              }}
+              onClick={handleContinueLegal}
             />
           </>
         ) : (
@@ -211,24 +283,7 @@ export default function Screen(props: { children: React.ReactNode }) {
                 />
               </div>
             </div>
-            <ContinueButton
-              onClick={() => {
-                const currentCrashReports = crashReports;
-                const currentUsageData = usageData;
-
-                void save("analytics_crash_reports", currentCrashReports).then(
-                  () => {
-                    setCrashReports(currentCrashReports);
-                  },
-                );
-                void save("analytics_usage_data", currentUsageData).then(() => {
-                  setUsageData(currentUsageData);
-                });
-                void save("analytics_done", true).then(() => {
-                  setDoneWithAnalytics(true);
-                });
-              }}
-            />
+            <ContinueButton onClick={handleContinueAnalytics} />
           </>
         )}
       </div>
@@ -236,6 +291,11 @@ export default function Screen(props: { children: React.ReactNode }) {
   );
 }
 
+/**
+ * Renders a large continue button used by legal and analytics steps.
+ * @param props Button props with click callback and disabled state.
+ * @returns Continue button JSX.
+ */
 function ContinueButton(props: { onClick: () => void; disabled?: boolean }) {
   return (
     <div className="w-full flex justify-end">
@@ -251,6 +311,11 @@ function ContinueButton(props: { onClick: () => void; disabled?: boolean }) {
   );
 }
 
+/**
+ * Renders a larger checkbox row for onboarding preferences.
+ * @param props Checkbox label, current value, and change callback.
+ * @returns Checkbox row JSX.
+ */
 export function BigCheckbox(props: {
   label: string;
   checked: boolean;