From f198e3c6756b78437bec37426674db319be7f69b Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Thu, 9 Oct 2025 15:39:01 +0100
Subject: [PATCH] fix stars

---
 .../tools/fullscreen/CompactToolItem.tsx      | 23 +++++++------------
 .../tools/fullscreen/DetailedToolItem.tsx     | 23 +++++++------------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/tools/fullscreen/CompactToolItem.tsx b/frontend/src/components/tools/fullscreen/CompactToolItem.tsx
index a49900099..f0e0981b6 100644
--- a/frontend/src/components/tools/fullscreen/CompactToolItem.tsx
+++ b/frontend/src/components/tools/fullscreen/CompactToolItem.tsx
@@ -3,6 +3,7 @@ import { ActionIcon, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from '../../shared/Tooltip';
 import HotkeyDisplay from '../../hotkeys/HotkeyDisplay';
+import FavoriteStar from '../toolPicker/FavoriteStar';
 import { ToolRegistryEntry, getSubcategoryColor } from '../../../data/toolsTaxonomy';
 import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from './shared';
 
@@ -60,21 +61,13 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
         </Text>
       </span>
       {!disabled && (
-        <ActionIcon
-          variant="subtle"
-          radius="xl"
-          size="xs"
-          onClick={(e: React.MouseEvent) => { e.stopPropagation(); toggleFavorite(); }}
-          className="tool-panel__fullscreen-star-compact"
-          aria-label={isFav ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
-        >
-          {/* Star icons kept inline to avoid new dependency here */}
-          {isFav ? (
-            <span className="material-icons" style={{ color: 'var(--special-color-favorites)', fontSize: '16px' }}>star</span>
-          ) : (
-            <span className="material-icons" style={{ fontSize: '16px' }}>star_border</span>
-          )}
-        </ActionIcon>
+        <div className="tool-panel__fullscreen-star-compact">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="xs"
+          />
+        </div>
       )}
     </button>
   );
diff --git a/frontend/src/components/tools/fullscreen/DetailedToolItem.tsx b/frontend/src/components/tools/fullscreen/DetailedToolItem.tsx
index ea1e766b4..9065c3d7f 100644
--- a/frontend/src/components/tools/fullscreen/DetailedToolItem.tsx
+++ b/frontend/src/components/tools/fullscreen/DetailedToolItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ActionIcon, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import HotkeyDisplay from '../../hotkeys/HotkeyDisplay';
+import FavoriteStar from '../toolPicker/FavoriteStar';
 import { ToolRegistryEntry, getSubcategoryColor } from '../../../data/toolsTaxonomy';
 import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from './shared';
 
@@ -70,21 +71,13 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
         )}
       </span>
       {!disabled && (
-        <ActionIcon
-          variant="subtle"
-          radius="xl"
-          size="sm"
-          onClick={(e: React.MouseEvent) => { e.stopPropagation(); toggleFavorite(); }}
-          className="tool-panel__fullscreen-star"
-          aria-label={isFav ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
-        >
-          {/* Star icons kept inline to avoid new dependency here */}
-          {isFav ? (
-            <span className="material-icons" style={{ color: 'var(--special-color-favorites)', fontSize: '20px' }}>star</span>
-          ) : (
-            <span className="material-icons" style={{ fontSize: '20px' }}>star_border</span>
-          )}
-        </ActionIcon>
+        <div className="tool-panel__fullscreen-star">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="sm"
+          />
+        </div>
       )}
     </button>
   );