feat(desktop): add tooltips to channel header actions (#2115)

Signed-off-by: Pavlenex <36959754+pavlenex@users.noreply.github.com>

desktop/src/features/channels/ui/ChannelMembersBar.tsx

@@ -15,6 +15,7 @@ import { canStartHuddleInChannel } from "@/features/channels/lib/huddleAvailabil
 import type { Channel } from "@/shared/api/types";
 import { normalizePubkey } from "@/shared/lib/pubkey";
 import { Button } from "@/shared/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -170,32 +171,42 @@ export function ChannelMembersBar({
       </DropdownMenu>
     ) : (
       <div className="flex items-center gap-[6px]">
-        <Button
-          aria-label={`View channel members (${memberCount})`}
-          className="h-8 px-2.5"
-          data-testid="channel-members-trigger"
-          onClick={onToggleMembers}
-          type="button"
-          variant="outline"
-        >
-          <Users />
-          <span className="min-w-[1ch] text-sm font-medium tabular-nums">
-            {memberCount}
-          </span>
-        </Button>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger asChild>
+            <Button
+              aria-label={`View channel members (${memberCount})`}
+              className="h-8 px-2.5"
+              data-testid="channel-members-trigger"
+              onClick={onToggleMembers}
+              type="button"
+              variant="outline"
+            >
+              <Users />
+              <span className="min-w-[1ch] text-sm font-medium tabular-nums">
+                {memberCount}
+              </span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Channel members</TooltipContent>
+        </Tooltip>
 
         {huddleIndicator}
 
-        <Button
-          aria-label="Manage channel"
-          data-testid="channel-management-trigger"
-          onClick={onManageChannel}
-          size="icon"
-          type="button"
-          variant="outline"
-        >
-          <Settings2 />
-        </Button>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger asChild>
+            <Button
+              aria-label="Manage channel"
+              data-testid="channel-management-trigger"
+              onClick={onManageChannel}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <Settings2 />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Channel settings</TooltipContent>
+        </Tooltip>
       </div>
     );
 

desktop/src/features/huddle/components/HuddleIndicator.tsx

@@ -224,18 +224,28 @@ export function HuddleIndicator({
     }
 
     return (
-      <Button
-        aria-label="Start huddle"
-        className={className}
-        data-testid="channel-start-huddle-trigger"
-        disabled={startDisabled || isStarting}
-        onClick={() => onStart()}
-        size="icon"
-        type="button"
-        variant="outline"
-      >
-        <Headphones />
-      </Button>
+      <Tooltip disableHoverableContent>
+        <TooltipTrigger asChild>
+          <span
+            className="inline-flex"
+            data-testid="channel-huddle-tooltip-trigger"
+          >
+            <Button
+              aria-label="Start huddle"
+              className={className}
+              data-testid="channel-start-huddle-trigger"
+              disabled={startDisabled || isStarting}
+              onClick={() => onStart()}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <Headphones />
+            </Button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>Huddle</TooltipContent>
+      </Tooltip>
     );
   }
 

desktop/tests/e2e/channels.spec.ts

@@ -2773,6 +2773,21 @@ test("channel header omits the add agent action", async ({ page }) => {
   await expect(page.getByTestId("channel-management-trigger")).toBeVisible();
 });
 
+test("channel header actions show tooltips", async ({ page }) => {
+  await page.goto("/");
+  await page.getByTestId("channel-random").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("random");
+
+  for (const [testId, label] of [
+    ["channel-members-trigger", "Channel members"],
+    ["channel-huddle-tooltip-trigger", "Huddle"],
+    ["channel-management-trigger", "Channel settings"],
+  ] as const) {
+    await page.getByTestId(testId).hover();
+    await expect(page.getByRole("tooltip", { name: label })).toBeVisible();
+  }
+});
+
 test("members sidebar collapses same-persona managed agents", async ({
   page,
 }) => {