📝 Add docstrings to 20-Adding-Optimistic-Updates

app/(dashboard)/workspace/[workspaceId]/channel/[channelId]/_components/ChannelHeader.tsx

@@ -4,6 +4,12 @@ interface ChannelHeaderProps {
     channelName: string | undefined;
 }
 
+/**
+ * Renders a channel header displaying the channel name with a theme toggle control.
+ *
+ * @param channelName - The channel name to display; when `undefined` the literal `undefined` will be rendered.
+ * @returns A header element containing the channel title prefixed with `#` and a ThemeToggle control.
+ */
 export function ChannelHeader({ channelName }: ChannelHeaderProps) {
 
     return (

app/(dashboard)/workspace/[workspaceId]/channel/[channelId]/_components/MessageList.tsx

@@ -9,6 +9,13 @@ import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/general/EmtyState";
 import { ChevronDown, Loader2 } from "lucide-react";
 
+/**
+ * Render an infinite, scrollable message list for the current channel with automatic bottom pinning, pagination, and a new-message indicator.
+ *
+ * The component loads messages for the channel from route params, fetches earlier pages when scrolled to the top, keeps the view pinned to the bottom when appropriate (including when late-loading content appears), and exposes a control to jump to the latest message when the view is not at the bottom.
+ *
+ * @returns The React element representing the channel message list UI.
+ */
 export function MessageList() {
     const { channelId } = useParams<{ channelId: string }>();
     const [hasInitialScrolled, setHasInitialScrolled] = useState(false);

app/(dashboard)/workspace/[workspaceId]/channel/[channelId]/_components/message/MessageInputForm.tsx

@@ -23,6 +23,15 @@ type MessagePage = { items: Message[]; nextCursor?: string; };
 
 type InfiniteMessages = InfiniteData<MessagePage>;
 
+/**
+ * Render a message composition form that supports optimistic message creation, attachment uploads, and validation.
+ *
+ * This component wires form state, attachment upload handling, and a create-message mutation to provide an inline composer with optimistic UI updates and error handling for a specific channel.
+ *
+ * @param channelId - Identifier of the channel where the message will be posted.
+ * @param user - The current authenticated user; used as author metadata for optimistic messages.
+ * @returns A React element containing the message input form bound to validation, upload, and the create-message mutation.
+ */
 export function MessageInputForm({ channelId, user }: iAppProps) {
     const queryClient = useQueryClient();