Final UX improvements - show full 'Favorites' text on mobile and add refresh callback when deleting favorites from menu

This commit is contained in:
Ryderjj89
2025-09-14 13:04:32 -04:00
parent df65718afd
commit 05c9a678af
2 changed files with 5 additions and 3 deletions

View File

@@ -433,6 +433,7 @@ function App() {
user={user}
formatBookName={formatBookName}
getBookUrlName={getBookUrlName}
onFavoriteChange={() => setUser((prev: any) => ({ ...prev }))}
/>
</div>
</div>

View File

@@ -16,9 +16,10 @@ interface FavoritesMenuProps {
user: any;
formatBookName: (bookName: string) => string;
getBookUrlName: (bookName: string) => string;
onFavoriteChange?: () => void;
}
const FavoritesMenu: React.FC<FavoritesMenuProps> = ({ user, formatBookName, getBookUrlName }) => {
const FavoritesMenu: React.FC<FavoritesMenuProps> = ({ user, formatBookName, getBookUrlName, onFavoriteChange }) => {
const [isOpen, setIsOpen] = useState(false);
const [favorites, setFavorites] = useState<Favorite[]>([]);
const [loading, setLoading] = useState(false);
@@ -60,6 +61,7 @@ const FavoritesMenu: React.FC<FavoritesMenuProps> = ({ user, formatBookName, get
if (response.ok) {
setFavorites(favorites.filter(f => f.id !== favoriteId));
onFavoriteChange?.(); // Notify parent to refresh other components
}
} catch (error) {
console.error('Failed to remove favorite:', error);
@@ -158,8 +160,7 @@ const FavoritesMenu: React.FC<FavoritesMenuProps> = ({ user, formatBookName, get
className="flex items-center space-x-1 px-3 py-1 text-sm bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors"
>
<Star className="h-4 w-4" />
<span className="hidden sm:inline">Favorites</span>
<span className="sm:hidden"></span>
<span>Favorites</span>
{favorites.length > 0 && (
<span className="bg-yellow-600 text-white text-xs rounded-full px-1.5 py-0.5 min-w-[1.25rem] text-center">
{favorites.length}