📝 Add docstrings to 09-Continue-with-Data-Fetching-and-Mutation-Logic

app/(dashboard)/workspace/[workspaceId]/_components/ChannelList.tsx

@@ -7,6 +7,11 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { Hash } from "lucide-react"
 import Link from "next/link"
 
+/**
+ * Render a vertical list of channel links populated from the channel API.
+ *
+ * @returns A React element containing a stacked list of links, one per channel.
+ */
 export function ChannelList() {
     const { data: { channels } } = useSuspenseQuery(orpc.channel.list.queryOptions())
 

app/(dashboard)/workspace/[workspaceId]/_components/CreateNewChannel.tsx

@@ -15,6 +15,13 @@ import { toast } from "sonner";
 import { isDefinedError } from "@orpc/client";
 import { ChannelSchemaNameType } from "@/app/router/channel";
 
+/**
+ * Renders a dialog UI that lets the user create a new channel.
+ *
+ * The component manages form state and validation for the channel name, displays a transformed-name preview when applicable, and invokes the create-channel mutation. On successful creation it shows a success toast, invalidates the channel list query, resets the form, and closes the dialog; on error it shows an error toast.
+ *
+ * @returns The dialog's JSX element.
+ */
 export function CreateNewChannel() {
     const [open, setOpen] = useState(false)
 

app/(dashboard)/workspace/[workspaceId]/_components/WorkspaceHeader.tsx

@@ -3,6 +3,11 @@
 import { orpc } from "@/lib/orpc";
 import { useSuspenseQuery } from "@tanstack/react-query";
 
+/**
+ * Displays the current workspace's organization name as a heading.
+ *
+ * @returns A JSX heading element containing the current workspace's `orgName`.
+ */
 export function WorkspaceHeader() {
     const { data: { currentWorkspace } } = useSuspenseQuery(orpc.channel.list.queryOptions())
 

app/(dashboard)/workspace/[workspaceId]/_components/WorkspaceMemberList.tsx

@@ -6,6 +6,13 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { orpc } from "@/lib/orpc";
 import { getAvatar } from "@/lib/get-avatar";
 
+/**
+ * Renders a list of workspace members with avatars and contact information.
+ *
+ * The component displays each member's avatar (or initial fallback), full name, and email in a vertically stacked list.
+ *
+ * @returns A React element containing the members list with avatars, names, and emails.
+ */
 export function WorkspaceMemberList() {
     const { data: { members } } = useSuspenseQuery(orpc.channel.list.queryOptions())
 

app/(dashboard)/workspace/_components/UserNav.tsx

@@ -10,6 +10,13 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { orpc } from "@/lib/orpc";
 import { getAvatar } from "@/lib/get-avatar";
 
+/**
+ * Render a user navigation dropdown with an avatar trigger and account actions.
+ *
+ * Displays the current user's avatar in a button trigger. The dropdown content shows the user's name and a static email, and exposes actions for account, payment, and logout.
+ *
+ * @returns A dropdown menu element presenting the user's avatar trigger and account-related menu items.
+ */
 export function UserNav() {
     const { data: { user } } = useSuspenseQuery(orpc.workspace.list.queryOptions());