feat: replace text buttons with icons in group tables and dialogs

src/features/groups-by-label/combined-groups-table.tsx

@@ -10,6 +10,7 @@ import {
   EyeOff,
   LoaderCircle,
   MessageCircleMore,
+  X,
 } from "lucide-react"
 import { useMemo, useState } from "react"
 import { toast } from "sonner"
@@ -155,22 +156,25 @@ export function CombinedGroupsTable({
         cell: ({ getValue }) => <GroupLabelBadges labels={getValue()} />,
       }),
       groupColumnHelper.accessor("link", {
-        header: "Invite",
+        header: "",
         cell: ({ getValue }) => {
           const link = getValue()
           return link ? (
             <a
-              className="rounded-md font-medium text-primary flex items-center gap-1 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
+              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
               href={link}
               target="_blank"
               rel="noreferrer"
               onClick={(event) => event.stopPropagation()}
             >
-              <ExternalLink className="size-3" />
-              Open invite link
+              <ExternalLink className="size-4" />
+              <span className="sr-only">Open invite link</span>
             </a>
           ) : (
-            <span className="text-xs italic text-muted-foreground">Not shared</span>
+            <span className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
           )
         },
       }),
@@ -195,19 +199,15 @@ export function CombinedGroupsTable({
             <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
               <Button
                 variant="outline"
-                size="sm"
-                className={cn(
-                  "gap-1 text-xs",
-                  visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground"
-                )}
+                size="icon-sm"
+                className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
                 disabled={pending}
                 aria-busy={pending}
                 aria-pressed={visible}
                 aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
                 onClick={() => void toggleVisibility(group)}
               >
                 {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-                {visible ? "Visible" : "Hidden"}
               </Button>
               <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
             </div>

src/features/telegram/groups-table.tsx

@@ -11,6 +11,7 @@ import {
   LoaderCircle,
   type LucideIcon,
   MessageCircleMore,
+  X,
 } from "lucide-react"
 import { useMemo, useState } from "react"
 import { toast } from "sonner"
@@ -147,64 +148,55 @@ export function GroupsTable({
         cell: ({ row }) => <GroupLabelBadges labels={labelsByGroupId.get(row.original.telegramId) ?? []} />,
       }),
       groupColumnHelper.display({
-        id: "visibility",
-        header: "Visibility",
+        id: "invite",
+        header: "",
+        cell: ({ row }) => {
+          const link = row.original.link
+          return link ? (
+            <a
+              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
+              href={link}
+              target="_blank"
+              rel="noreferrer"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <ExternalLink className="size-4" />
+              <span className="sr-only">Open invite link</span>
+            </a>
+          ) : (
+            <span className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
+          )
+        },
+      }),
+      groupColumnHelper.display({
+        id: "actions",
+        header: "",
         cell: ({ row }) => {
           const group = row.original
           const pending = updatingId === group.telegramId
           const visible = !group.hide
           return (
-            <div onClick={(event) => event.stopPropagation()}>
+            <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
               <Button
                 variant="outline"
-                size="sm"
-                className={cn(
-                  "gap-1 text-xs",
-                  visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground"
-                )}
+                size="icon-sm"
+                className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
                 disabled={pending}
                 aria-busy={pending}
                 aria-pressed={visible}
                 aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
                 onClick={() => void toggleVisibility(group)}
               >
                 {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-                {visible ? "Visible" : "Hidden"}
               </Button>
+              <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
             </div>
           )
         },
       }),
-      groupColumnHelper.display({
-        id: "invite",
-        header: "Invite",
-        cell: ({ row }) => {
-          const link = row.original.link
-          return link ? (
-            <a
-              className="rounded-md font-medium text-primary flex items-center gap-1 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
-              href={link}
-              target="_blank"
-              rel="noreferrer"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <ExternalLink className="size-3" />
-              Open invite link
-            </a>
-          ) : (
-            <span className="text-xs italic text-muted-foreground">Not shared</span>
-          )
-        },
-      }),
-      groupColumnHelper.display({
-        id: "leave",
-        header: "",
-        cell: ({ row }) => (
-          <div onClick={(event) => event.stopPropagation()}>
-            <LeaveGroupDialog chatId={row.original.telegramId} title={row.original.title} />
-          </div>
-        ),
-      }),
     ])
   }, [updatingId, labelsByGroupId])
 

src/features/telegram/leave-group-dialog.tsx

@@ -60,8 +60,9 @@ export function LeaveGroupDialog({ chatId, title }: { chatId: number; title: str
 
   return (
     <AlertDialog open={open} onOpenChange={(nextOpen) => !pending && setOpen(nextOpen)}>
-      <AlertDialogTrigger render={<Button variant="destructive" size="sm" />}>
-        <Trash2 data-icon="inline-start" /> Leave
+      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" />}>
+        <Trash2 />
+        <span className="sr-only">Leave {title}</span>
       </AlertDialogTrigger>
       <AlertDialogContent size="sm">
         <AlertDialogHeader>

src/features/whatsapp/whatsapp-groups-page.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "@tanstack/react-router"
 import type { Column } from "@tanstack/react-table"
-import { ArrowDown, ArrowUp, ChevronsUpDown, ExternalLink, MessageCircleMore, Tag } from "lucide-react"
+import { ArrowDown, ArrowUp, ChevronsUpDown, ExternalLink, MessageCircleMore, Tag, X } from "lucide-react"
 import { useMemo, useState } from "react"
 import { toast } from "sonner"
 
@@ -114,22 +114,25 @@ export function WhatsappGroupsPage({
       }),
       groupColumnHelper.display({
         id: "invite",
-        header: "Invite",
+        header: "",
         cell: ({ row }) => {
           const link = row.original.link
           return link ? (
             <a
-              className="rounded-md font-medium text-primary flex items-center gap-1 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
+              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
               href={link}
               target="_blank"
               rel="noreferrer"
               onClick={(event) => event.stopPropagation()}
             >
-              <ExternalLink className="size-3" />
-              Open invite link
+              <ExternalLink className="size-4" />
+              <span className="sr-only">Open invite link</span>
             </a>
           ) : (
-            <span className="text-xs italic text-muted-foreground">Not shared</span>
+            <span className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
           )
         },
       }),