From 928906d9b482d4ebe73b24b961e3526c0659a0f6 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Sun, 6 Sep 2026 22:24:06 +0200
Subject: [PATCH 1/2] feat: Improve UI accessibility and consistency in group
 tables and dialogs

---
 .../groups-by-label/combined-groups-table.tsx | 22 ++++++++++---------
 src/features/telegram/groups-table.tsx        | 22 ++++++++++---------
 src/features/telegram/leave-group-dialog.tsx  |  5 +++--
 src/features/whatsapp/delete-group-dialog.tsx |  2 +-
 .../whatsapp/whatsapp-groups-page.tsx         | 14 +++++++-----
 5 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/features/groups-by-label/combined-groups-table.tsx b/src/features/groups-by-label/combined-groups-table.tsx
index c41e311..eff1669 100644
--- a/src/features/groups-by-label/combined-groups-table.tsx
+++ b/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"
@@ -160,17 +161,21 @@ export function CombinedGroupsTable({
           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"
+              title="Open invite link"
               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 title="Not shared" className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
           )
         },
       }),
@@ -195,19 +200,16 @@ 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}
+                title={visible ? "Visible" : "Hidden"}
                 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>
diff --git a/src/features/telegram/groups-table.tsx b/src/features/telegram/groups-table.tsx
index 4e0b126..d343ca8 100644
--- a/src/features/telegram/groups-table.tsx
+++ b/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"
@@ -157,19 +158,16 @@ export function GroupsTable({
             <div onClick={(event) => event.stopPropagation()}>
               <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}
+                title={visible ? "Visible" : "Hidden"}
                 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>
             </div>
           )
@@ -182,17 +180,21 @@ export function GroupsTable({
           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"
+              title="Open invite link"
               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 title="Not shared" className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
           )
         },
       }),
diff --git a/src/features/telegram/leave-group-dialog.tsx b/src/features/telegram/leave-group-dialog.tsx
index 1aa9477..b545eb5 100644
--- a/src/features/telegram/leave-group-dialog.tsx
+++ b/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" title="Leave" />}>
+        <Trash2 />
+        <span className="sr-only">Leave {title}</span>
       </AlertDialogTrigger>
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
diff --git a/src/features/whatsapp/delete-group-dialog.tsx b/src/features/whatsapp/delete-group-dialog.tsx
index 392595c..3db1061 100644
--- a/src/features/whatsapp/delete-group-dialog.tsx
+++ b/src/features/whatsapp/delete-group-dialog.tsx
@@ -51,7 +51,7 @@ export function DeleteGroupDialog({ id, title }: { id: number; title: string })
         if (!nextOpen) setError("")
       }}
     >
-      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" />}>
+      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" title="Delete" />}>
         <Trash2 />
         <span className="sr-only">Delete {title}</span>
       </AlertDialogTrigger>
diff --git a/src/features/whatsapp/whatsapp-groups-page.tsx b/src/features/whatsapp/whatsapp-groups-page.tsx
index 67deda4..a394d8c 100644
--- a/src/features/whatsapp/whatsapp-groups-page.tsx
+++ b/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"
 
@@ -119,17 +119,21 @@ export function WhatsappGroupsPage({
           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"
+              title="Open invite link"
               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 title="Not shared" className="inline-flex text-muted-foreground">
+              <X className="size-4" />
+              <span className="sr-only">Not shared</span>
+            </span>
           )
         },
       }),

From cc81e8da35d571b2cc94cd49b4c943139cb4f069 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Sun, 6 Sep 2026 22:38:54 +0200
Subject: [PATCH 2/2] refactor: Remove titles from invite links and visibility
 buttons for cleaner UI

---
 .../groups-by-label/combined-groups-table.tsx |  6 +-
 src/features/telegram/groups-table.tsx        | 60 ++++++++-----------
 src/features/telegram/leave-group-dialog.tsx  |  2 +-
 src/features/whatsapp/delete-group-dialog.tsx |  2 +-
 .../whatsapp/whatsapp-groups-page.tsx         |  5 +-
 5 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/features/groups-by-label/combined-groups-table.tsx b/src/features/groups-by-label/combined-groups-table.tsx
index eff1669..99553f6 100644
--- a/src/features/groups-by-label/combined-groups-table.tsx
+++ b/src/features/groups-by-label/combined-groups-table.tsx
@@ -156,7 +156,7 @@ export function CombinedGroupsTable({
         cell: ({ getValue }) => <GroupLabelBadges labels={getValue()} />,
       }),
       groupColumnHelper.accessor("link", {
-        header: "Invite",
+        header: "",
         cell: ({ getValue }) => {
           const link = getValue()
           return link ? (
@@ -165,14 +165,13 @@ export function CombinedGroupsTable({
               href={link}
               target="_blank"
               rel="noreferrer"
-              title="Open invite link"
               onClick={(event) => event.stopPropagation()}
             >
               <ExternalLink className="size-4" />
               <span className="sr-only">Open invite link</span>
             </a>
           ) : (
-            <span title="Not shared" className="inline-flex text-muted-foreground">
+            <span className="inline-flex text-muted-foreground">
               <X className="size-4" />
               <span className="sr-only">Not shared</span>
             </span>
@@ -205,7 +204,6 @@ export function CombinedGroupsTable({
                 disabled={pending}
                 aria-busy={pending}
                 aria-pressed={visible}
-                title={visible ? "Visible" : "Hidden"}
                 aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
                 onClick={() => void toggleVisibility(group)}
               >
diff --git a/src/features/telegram/groups-table.tsx b/src/features/telegram/groups-table.tsx
index d343ca8..a78ba00 100644
--- a/src/features/telegram/groups-table.tsx
+++ b/src/features/telegram/groups-table.tsx
@@ -147,35 +147,9 @@ export function GroupsTable({
         header: "Labels",
         cell: ({ row }) => <GroupLabelBadges labels={labelsByGroupId.get(row.original.telegramId) ?? []} />,
       }),
-      groupColumnHelper.display({
-        id: "visibility",
-        header: "Visibility",
-        cell: ({ row }) => {
-          const group = row.original
-          const pending = updatingId === group.telegramId
-          const visible = !group.hide
-          return (
-            <div onClick={(event) => event.stopPropagation()}>
-              <Button
-                variant="outline"
-                size="icon-sm"
-                className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
-                disabled={pending}
-                aria-busy={pending}
-                aria-pressed={visible}
-                title={visible ? "Visible" : "Hidden"}
-                aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
-                onClick={() => void toggleVisibility(group)}
-              >
-                {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-              </Button>
-            </div>
-          )
-        },
-      }),
       groupColumnHelper.display({
         id: "invite",
-        header: "Invite",
+        header: "",
         cell: ({ row }) => {
           const link = row.original.link
           return link ? (
@@ -184,14 +158,13 @@ export function GroupsTable({
               href={link}
               target="_blank"
               rel="noreferrer"
-              title="Open invite link"
               onClick={(event) => event.stopPropagation()}
             >
               <ExternalLink className="size-4" />
               <span className="sr-only">Open invite link</span>
             </a>
           ) : (
-            <span title="Not shared" className="inline-flex text-muted-foreground">
+            <span className="inline-flex text-muted-foreground">
               <X className="size-4" />
               <span className="sr-only">Not shared</span>
             </span>
@@ -199,13 +172,30 @@ export function GroupsTable({
         },
       }),
       groupColumnHelper.display({
-        id: "leave",
+        id: "actions",
         header: "",
-        cell: ({ row }) => (
-          <div onClick={(event) => event.stopPropagation()}>
-            <LeaveGroupDialog chatId={row.original.telegramId} title={row.original.title} />
-          </div>
-        ),
+        cell: ({ row }) => {
+          const group = row.original
+          const pending = updatingId === group.telegramId
+          const visible = !group.hide
+          return (
+            <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
+              <Button
+                variant="outline"
+                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 />}
+              </Button>
+              <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
+            </div>
+          )
+        },
       }),
     ])
   }, [updatingId, labelsByGroupId])
diff --git a/src/features/telegram/leave-group-dialog.tsx b/src/features/telegram/leave-group-dialog.tsx
index b545eb5..6e0fabc 100644
--- a/src/features/telegram/leave-group-dialog.tsx
+++ b/src/features/telegram/leave-group-dialog.tsx
@@ -60,7 +60,7 @@ export function LeaveGroupDialog({ chatId, title }: { chatId: number; title: str
 
   return (
     <AlertDialog open={open} onOpenChange={(nextOpen) => !pending && setOpen(nextOpen)}>
-      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" title="Leave" />}>
+      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" />}>
         <Trash2 />
         <span className="sr-only">Leave {title}</span>
       </AlertDialogTrigger>
diff --git a/src/features/whatsapp/delete-group-dialog.tsx b/src/features/whatsapp/delete-group-dialog.tsx
index 3db1061..392595c 100644
--- a/src/features/whatsapp/delete-group-dialog.tsx
+++ b/src/features/whatsapp/delete-group-dialog.tsx
@@ -51,7 +51,7 @@ export function DeleteGroupDialog({ id, title }: { id: number; title: string })
         if (!nextOpen) setError("")
       }}
     >
-      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" title="Delete" />}>
+      <AlertDialogTrigger render={<Button variant="destructive" size="icon-sm" />}>
         <Trash2 />
         <span className="sr-only">Delete {title}</span>
       </AlertDialogTrigger>
diff --git a/src/features/whatsapp/whatsapp-groups-page.tsx b/src/features/whatsapp/whatsapp-groups-page.tsx
index a394d8c..2cde4e1 100644
--- a/src/features/whatsapp/whatsapp-groups-page.tsx
+++ b/src/features/whatsapp/whatsapp-groups-page.tsx
@@ -114,7 +114,7 @@ export function WhatsappGroupsPage({
       }),
       groupColumnHelper.display({
         id: "invite",
-        header: "Invite",
+        header: "",
         cell: ({ row }) => {
           const link = row.original.link
           return link ? (
@@ -123,14 +123,13 @@ export function WhatsappGroupsPage({
               href={link}
               target="_blank"
               rel="noreferrer"
-              title="Open invite link"
               onClick={(event) => event.stopPropagation()}
             >
               <ExternalLink className="size-4" />
               <span className="sr-only">Open invite link</span>
             </a>
           ) : (
-            <span title="Not shared" className="inline-flex text-muted-foreground">
+            <span className="inline-flex text-muted-foreground">
               <X className="size-4" />
               <span className="sr-only">Not shared</span>
             </span>