From 28f74d475899091d69733aae71d41c80774142cb Mon Sep 17 00:00:00 2001
From: safina57 <med.amine.haouas@gmail.com>
Date: Wed, 11 Nov 2026 15:42:34 +0100
Subject: [PATCH] feat(frontend): green icon hover on action buttons and
 tooltips on icon-only buttons

---
 .../bookmarks/BookmarkRow/BookmarkRow.tsx     | 37 ++++++++-------
 .../BookmarksSheet/BookmarksSheet.tsx         | 15 +++---
 .../components/chat/ChatHeader/ChatHeader.tsx | 20 ++++----
 .../chat/MessageFeedback/MessageFeedback.tsx  | 23 +++++----
 .../chat/SelectedTrials/SelectedTrials.tsx    | 28 +++++++----
 .../chat/TrialCitation/TrialCitation.tsx      |  6 +--
 .../common/ActionTooltip/ActionTooltip.tsx    | 21 +++++++++
 .../components/layout/AppHeader/AppHeader.tsx | 10 ++--
 .../layout/LanguagePicker/LanguagePicker.tsx  |  2 +-
 .../TrialSummaryHeader/TrialSummaryHeader.tsx | 47 ++++++++-----------
 frontend/src/components/ui/button.tsx         |  2 +
 frontend/src/lib/utils.ts                     |  4 ++
 12 files changed, 125 insertions(+), 90 deletions(-)
 create mode 100644 frontend/src/components/common/ActionTooltip/ActionTooltip.tsx

diff --git a/frontend/src/components/bookmarks/BookmarkRow/BookmarkRow.tsx b/frontend/src/components/bookmarks/BookmarkRow/BookmarkRow.tsx
index 40505b4..38a4bf6 100644
--- a/frontend/src/components/bookmarks/BookmarkRow/BookmarkRow.tsx
+++ b/frontend/src/components/bookmarks/BookmarkRow/BookmarkRow.tsx
@@ -2,6 +2,7 @@ import { BookmarkX, FileDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Item, ItemActions, ItemContent } from '@/components/ui/item';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 import BookmarkRowSkeleton from '@/components/bookmarks/BookmarkRowSkeleton/BookmarkRowSkeleton';
 import TrialBadges from '@/components/bookmarks/TrialBadges/TrialBadges';
 import { publicTrialId, trialTitle } from '@/lib/trial';
@@ -58,27 +59,29 @@ function BookmarkRow({
 
       <ItemActions className="gap-0.5">
         {onExport && (
+          <ActionTooltip label={t('bookmarks.exportOne')}>
+            <Button
+              variant="action"
+              size="icon"
+              disabled={!trial || isExporting}
+              aria-label={`${t('bookmarks.exportOne')} (${title})`}
+              onClick={() => trial && onExport(trial)}
+            >
+              <FileDown />
+            </Button>
+          </ActionTooltip>
+        )}
+        <ActionTooltip label={t('bookmarks.remove')}>
           <Button
-            variant="ghost"
+            variant="action"
             size="icon"
-            disabled={!trial || isExporting}
-            aria-label={`${t('bookmarks.exportOne')} (${title})`}
-            title={t('bookmarks.exportOne')}
-            onClick={() => trial && onExport(trial)}
+            disabled={isPending}
+            aria-label={`${t('bookmarks.remove')} (${title})`}
+            onClick={() => onRemove(trialRef)}
           >
-            <FileDown />
+            <BookmarkX />
           </Button>
-        )}
-        <Button
-          variant="ghost"
-          size="icon"
-          disabled={isPending}
-          aria-label={`${t('bookmarks.remove')} (${title})`}
-          title={t('bookmarks.remove')}
-          onClick={() => onRemove(trialRef)}
-        >
-          <BookmarkX />
-        </Button>
+        </ActionTooltip>
       </ItemActions>
     </Item>
   );
diff --git a/frontend/src/components/bookmarks/BookmarksSheet/BookmarksSheet.tsx b/frontend/src/components/bookmarks/BookmarksSheet/BookmarksSheet.tsx
index 5417fec..b69f6c3 100644
--- a/frontend/src/components/bookmarks/BookmarksSheet/BookmarksSheet.tsx
+++ b/frontend/src/components/bookmarks/BookmarksSheet/BookmarksSheet.tsx
@@ -14,6 +14,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import BookmarkRow from '@/components/bookmarks/BookmarkRow/BookmarkRow';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 import { useCachedTrialTranslations } from '@/hooks/useTrialTranslation';
 import { useTrialPdfExport } from '@/hooks/useTrialPdfExport';
 import { trialQuery } from '@/services/trials';
@@ -52,12 +53,14 @@ function BookmarksSheet({ open, onOpenChange }: BookmarksSheetProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent side="right" showCloseButton={false} className="w-full gap-0 p-0 sm:max-w-md">
-        <SheetClose
-          aria-label={t('bookmarks.close')}
-          className="border-border bg-popover text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 -left-4 flex h-16 w-4 -translate-y-1/2 cursor-pointer items-center justify-center rounded-l-full border border-r-0 shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <ChevronRight className="size-3" />
-        </SheetClose>
+        <ActionTooltip label={t('bookmarks.close')}>
+          <SheetClose
+            aria-label={t('bookmarks.close')}
+            className="border-border bg-popover text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 -left-4 flex h-16 w-4 -translate-y-1/2 cursor-pointer items-center justify-center rounded-l-full border border-r-0 shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <ChevronRight className="size-3" />
+          </SheetClose>
+        </ActionTooltip>
 
         <SheetHeader className="border-border border-b">
           <SheetTitle>
diff --git a/frontend/src/components/chat/ChatHeader/ChatHeader.tsx b/frontend/src/components/chat/ChatHeader/ChatHeader.tsx
index d4a6c4d..e7823a9 100644
--- a/frontend/src/components/chat/ChatHeader/ChatHeader.tsx
+++ b/frontend/src/components/chat/ChatHeader/ChatHeader.tsx
@@ -1,6 +1,7 @@
 import { SquarePen } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 
 interface ChatHeaderProps {
   onNewConversation: () => void;
@@ -11,15 +12,16 @@ function ChatHeader({ onNewConversation }: ChatHeaderProps) {
 
   return (
     <header className="border-border flex items-center justify-end border-b px-2 py-1">
-      <Button
-        variant="ghost"
-        size="icon"
-        aria-label={t('chat.newConversation')}
-        title={t('chat.newConversation')}
-        onClick={onNewConversation}
-      >
-        <SquarePen />
-      </Button>
+      <ActionTooltip label={t('chat.newConversation')}>
+        <Button
+          variant="action"
+          size="icon"
+          aria-label={t('chat.newConversation')}
+          onClick={onNewConversation}
+        >
+          <SquarePen />
+        </Button>
+      </ActionTooltip>
     </header>
   );
 }
diff --git a/frontend/src/components/chat/MessageFeedback/MessageFeedback.tsx b/frontend/src/components/chat/MessageFeedback/MessageFeedback.tsx
index b6c4972..2ef7725 100644
--- a/frontend/src/components/chat/MessageFeedback/MessageFeedback.tsx
+++ b/frontend/src/components/chat/MessageFeedback/MessageFeedback.tsx
@@ -5,6 +5,7 @@ import { toast } from 'sonner';
 import { MessageAction, MessageActions } from '@/components/ai-elements/message';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -138,16 +139,18 @@ function MessageFeedback({ sessionId, observationId }: MessageFeedbackProps) {
                       className="gap-1 py-0.5 pr-1 pl-2 font-mono"
                     >
                       <span>{nct}</span>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        aria-label={t('feedback.removeNct', { nct })}
-                        onClick={() => removeNct(nct)}
-                        className="size-4 rounded-full hover:bg-transparent"
-                      >
-                        <X className="size-3" />
-                      </Button>
+                      <ActionTooltip label={t('feedback.removeNct', { nct })}>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          aria-label={t('feedback.removeNct', { nct })}
+                          onClick={() => removeNct(nct)}
+                          className="size-4 rounded-full hover:bg-transparent"
+                        >
+                          <X className="size-3" />
+                        </Button>
+                      </ActionTooltip>
                     </Badge>
                   ))}
                 </div>
diff --git a/frontend/src/components/chat/SelectedTrials/SelectedTrials.tsx b/frontend/src/components/chat/SelectedTrials/SelectedTrials.tsx
index 748dc61..fdd2b47 100644
--- a/frontend/src/components/chat/SelectedTrials/SelectedTrials.tsx
+++ b/frontend/src/components/chat/SelectedTrials/SelectedTrials.tsx
@@ -2,9 +2,13 @@ import { MapPin, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 import { trialTitle } from '@/lib/trial';
+import { truncate } from '@/lib/utils';
 import type { Trial } from '@/types/trial';
 
+const TOOLTIP_TITLE_MAX_LENGTH = 40;
+
 interface SelectedTrialsProps {
   trials: Trial[];
   onRemove: (trialRef: string) => void;
@@ -25,16 +29,22 @@ function SelectedTrials({ trials, onRemove }: SelectedTrialsProps) {
           <Badge key={trial.trialRef} variant="secondary" className="gap-1.5 py-1 pr-1 pl-2">
             <MapPin className="size-3 shrink-0" />
             <span className="max-w-[12rem] truncate">{label}</span>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              aria-label={t('chat.removeFromContext', { trialRef: label })}
-              onClick={() => onRemove(trial.trialRef)}
-              className="size-4 rounded-full hover:bg-transparent"
+            <ActionTooltip
+              label={t('chat.removeFromContext', {
+                trialRef: truncate(label, TOOLTIP_TITLE_MAX_LENGTH),
+              })}
             >
-              <X className="size-3" />
-            </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={t('chat.removeFromContext', { trialRef: label })}
+                onClick={() => onRemove(trial.trialRef)}
+                className="size-4 rounded-full hover:bg-transparent"
+              >
+                <X className="size-3" />
+              </Button>
+            </ActionTooltip>
           </Badge>
         );
       })}
diff --git a/frontend/src/components/chat/TrialCitation/TrialCitation.tsx b/frontend/src/components/chat/TrialCitation/TrialCitation.tsx
index 604a0d5..3332631 100644
--- a/frontend/src/components/chat/TrialCitation/TrialCitation.tsx
+++ b/frontend/src/components/chat/TrialCitation/TrialCitation.tsx
@@ -11,17 +11,13 @@ import {
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useCachedTrialTranslations } from '@/hooks/useTrialTranslation';
 import { trialTitle } from '@/lib/trial';
-import { cn } from '@/lib/utils';
+import { cn, truncate } from '@/lib/utils';
 import { trialQuery } from '@/services/trials';
 
 const CITATION_TITLE_MAX_LENGTH = 50;
 const COMPACT_TITLE_MAX_LENGTH = 28;
 const CITATION_DESCRIPTION_MAX_LENGTH = 200;
 
-function truncate(text: string, max: number): string {
-  return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;
-}
-
 interface TrialCitationProps {
   trialRef: string;
   onSelect: (trialRef: string) => void;
diff --git a/frontend/src/components/common/ActionTooltip/ActionTooltip.tsx b/frontend/src/components/common/ActionTooltip/ActionTooltip.tsx
new file mode 100644
index 0000000..6b45281
--- /dev/null
+++ b/frontend/src/components/common/ActionTooltip/ActionTooltip.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface ActionTooltipProps {
+  label: string;
+  children: ReactNode;
+}
+
+/** Hover tooltip for a single action button, which must forward refs and props. */
+function ActionTooltip({ label, children }: ActionTooltipProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export default ActionTooltip;
diff --git a/frontend/src/components/layout/AppHeader/AppHeader.tsx b/frontend/src/components/layout/AppHeader/AppHeader.tsx
index 47f11e9..e9bed64 100644
--- a/frontend/src/components/layout/AppHeader/AppHeader.tsx
+++ b/frontend/src/components/layout/AppHeader/AppHeader.tsx
@@ -44,14 +44,14 @@ function AppHeader({ onOpenBookmarks, onStartTour }: AppHeaderProps) {
             <button
               type="button"
               aria-label={notice}
-              className="text-header-foreground/80 hover:text-header-foreground flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors"
+              className="group/updated text-header-foreground/80 hover:text-header-foreground flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors"
             >
               {lastUpdated && (
                 <span className="text-eyebrow text-[0.65rem] font-bold">{lastUpdated}</span>
               )}
               <span
                 aria-hidden
-                className="border-header-foreground/40 flex size-3 items-center justify-center rounded-full border text-[0.55rem] leading-none font-bold"
+                className="border-header-foreground/40 group-hover/updated:border-highlight group-hover/updated:text-highlight flex size-3 items-center justify-center rounded-full border text-[0.55rem] leading-none font-bold transition-colors"
               >
                 ?
               </span>
@@ -79,7 +79,7 @@ function AppHeader({ onOpenBookmarks, onStartTour }: AppHeaderProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
+                variant="action"
                 size="icon"
                 data-tour="bookmarks"
                 onClick={onOpenBookmarks}
@@ -100,7 +100,7 @@ function AppHeader({ onOpenBookmarks, onStartTour }: AppHeaderProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
+                variant="action"
                 size="icon"
                 onClick={onStartTour}
                 aria-label={t('header.takeTour')}
@@ -114,7 +114,7 @@ function AppHeader({ onOpenBookmarks, onStartTour }: AppHeaderProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
-                variant="ghost"
+                variant="action"
                 size="icon"
                 onClick={toggleTheme}
                 aria-label={dark ? t('header.switchToLight') : t('header.switchToDark')}
diff --git a/frontend/src/components/layout/LanguagePicker/LanguagePicker.tsx b/frontend/src/components/layout/LanguagePicker/LanguagePicker.tsx
index e443ead..e944662 100644
--- a/frontend/src/components/layout/LanguagePicker/LanguagePicker.tsx
+++ b/frontend/src/components/layout/LanguagePicker/LanguagePicker.tsx
@@ -21,7 +21,7 @@ function LanguagePicker() {
           <TooltipTrigger asChild>
             <PopoverTrigger asChild>
               <Button
-                variant="ghost"
+                variant="action"
                 size="icon"
                 data-tour="language"
                 aria-label={t('header.language')}
diff --git a/frontend/src/components/summary/TrialSummaryHeader/TrialSummaryHeader.tsx b/frontend/src/components/summary/TrialSummaryHeader/TrialSummaryHeader.tsx
index 0505136..3d0b6e8 100644
--- a/frontend/src/components/summary/TrialSummaryHeader/TrialSummaryHeader.tsx
+++ b/frontend/src/components/summary/TrialSummaryHeader/TrialSummaryHeader.tsx
@@ -1,8 +1,8 @@
-import { useState, type ReactNode } from 'react';
+import { useState } from 'react';
 import { Bookmark, BookmarkCheck, Check, ExternalLink, Mail, Sparkles, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import ActionTooltip from '@/components/common/ActionTooltip/ActionTooltip';
 import ContactDialog from '@/components/contact/ContactDialog/ContactDialog';
 import TrialTitle from '@/components/summary/TrialTitle/TrialTitle';
 import { TRIAL_SOURCE_CODES, TRIAL_SOURCES } from '@/constants/trialSources';
@@ -26,17 +26,6 @@ interface TrialSummaryHeaderProps extends Omit<TrialSummaryActionsProps, 'labell
   hideActions?: boolean;
 }
 
-function Action({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent>{label}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
-
 export function TrialSummaryActions({
   trial,
   onAddedToContext,
@@ -64,9 +53,9 @@ export function TrialSummaryActions({
 
   return (
     <>
-      <Action label={isInContext ? t('summary.addedToChatHint') : t('summary.askAbout')}>
+      <ActionTooltip label={isInContext ? t('summary.addedToChatHint') : t('summary.askAbout')}>
         <Button
-          variant="ghost"
+          variant="action"
           size="icon"
           data-tour="add-context"
           className={buttonClass}
@@ -77,10 +66,10 @@ export function TrialSummaryActions({
           {isInContext ? <Check className="text-recruiting" /> : <Sparkles />}
           {caption(t('mobile.ask'))}
         </Button>
-      </Action>
-      <Action label={isBookmarked ? t('bookmarks.added') : t('bookmarks.add')}>
+      </ActionTooltip>
+      <ActionTooltip label={isBookmarked ? t('bookmarks.added') : t('bookmarks.add')}>
         <Button
-          variant="ghost"
+          variant="action"
           size="icon"
           data-tour="bookmark"
           className={buttonClass}
@@ -90,10 +79,10 @@ export function TrialSummaryActions({
           {isBookmarked ? <BookmarkCheck className="text-primary" /> : <Bookmark />}
           {caption(isBookmarked ? t('bookmarks.added') : t('mobile.save'))}
         </Button>
-      </Action>
-      <Action label={t('contact.cta')}>
+      </ActionTooltip>
+      <ActionTooltip label={t('contact.cta')}>
         <Button
-          variant="ghost"
+          variant="action"
           size="icon"
           className={buttonClass}
           aria-label={t('contact.cta')}
@@ -102,14 +91,14 @@ export function TrialSummaryActions({
           <Mail />
           {caption(t('mobile.contact'))}
         </Button>
-      </Action>
+      </ActionTooltip>
       {registryLinks.map(({ source, href }, index) => {
         const label = t('summary.viewOn', { registry: TRIAL_SOURCES[source].registry });
         return (
-          <Action key={source} label={label}>
+          <ActionTooltip key={source} label={label}>
             <Button
               asChild
-              variant="ghost"
+              variant="action"
               size="icon"
               className={buttonClass}
               data-tour={index === 0 ? 'trial-link' : undefined}
@@ -122,7 +111,7 @@ export function TrialSummaryActions({
                 )}
               </a>
             </Button>
-          </Action>
+          </ActionTooltip>
         );
       })}
       <ContactDialog
@@ -151,9 +140,11 @@ function TrialSummaryHeader({ onClose, hideActions, ...actions }: TrialSummaryHe
       </div>
       <div className="flex shrink-0 items-center gap-1">
         {!hideActions && <TrialSummaryActions {...actions} />}
-        <Button variant="ghost" size="icon" aria-label={t('summary.close')} onClick={onClose}>
-          <X />
-        </Button>
+        <ActionTooltip label={t('summary.close')}>
+          <Button variant="action" size="icon" aria-label={t('summary.close')} onClick={onClose}>
+            <X />
+          </Button>
+        </ActionTooltip>
       </div>
     </div>
   );
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 75b8c3d..7e2781f 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -19,6 +19,8 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
+        action:
+          "hover:text-foreground aria-expanded:text-foreground [&_svg]:transition-colors hover:[&_svg]:text-highlight focus-visible:[&_svg]:text-highlight aria-expanded:[&_svg]:text-highlight",
       },
       size: {
         default:
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 2819a83..67248cc 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -4,3 +4,7 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;
+}