fix stars

This commit is contained in:
EthanHealy01 2025-10-09 15:39:01 +01:00
parent 3d85fce775
commit f198e3c675
2 changed files with 16 additions and 30 deletions

View File

@ -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>
);

View File

@ -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>
);