From 6ec795ed01409d865d5c77e86a112c5bdafb177f Mon Sep 17 00:00:00 2001 From: kuekhaoyang Date: Mon, 24 Nov 2025 18:23:19 +0800 Subject: [PATCH] feat: Add cursor-pointer to interactive elements for improved user experience. --- components/ThemeSwitcher.tsx | 15 ++++++++------ components/history/HistoryHeader.tsx | 2 +- components/history/HistoryItem.tsx | 2 +- components/history/WatchHistorySidebar.tsx | 2 +- components/home/TagManager.tsx | 10 +++++----- components/layout/Navbar.tsx | 2 +- components/player/EpisodeList.tsx | 10 +++++----- components/player/PlayerNavbar.tsx | 4 ++-- components/player/desktop/DesktopOverlay.tsx | 2 +- components/player/mobile/MobileMoreMenu.tsx | 8 ++++---- components/player/mobile/MobileSpeedMenu.tsx | 6 +++--- components/player/mobile/MobileVolumeMenu.tsx | 2 +- components/search/SearchBox.tsx | 2 +- components/search/SearchHistoryHeader.tsx | 2 +- components/search/SourceBadgeItem.tsx | 20 +++++++++---------- components/search/SourceBadgeList.tsx | 2 +- components/search/TypeBadgeItem.tsx | 20 +++++++++---------- components/search/TypeBadgeList.tsx | 2 +- components/settings/DataSettings.tsx | 6 +++--- components/settings/SettingsHeader.tsx | 2 +- components/settings/SortSettings.tsx | 2 +- components/settings/SourceManager.tsx | 8 ++++---- components/settings/SourceSettings.tsx | 6 +++--- components/ui/Button.tsx | 16 +++++++-------- components/ui/ModalHeader.tsx | 2 +- 25 files changed, 79 insertions(+), 76 deletions(-) diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx index ef5d6da..e41fd62 100644 --- a/components/ThemeSwitcher.tsx +++ b/components/ThemeSwitcher.tsx @@ -14,8 +14,9 @@ export function ThemeSwitcher() { w-9 h-9 rounded-[var(--radius-full)] transition-all duration-200 - ${theme === 'light' - ? 'bg-[var(--accent-color)] text-white scale-105' + cursor-pointer + ${theme === 'light' + ? 'bg-[var(--accent-color)] text-white scale-105' : 'text-[var(--text-color-secondary)] hover:bg-[color-mix(in_srgb,var(--text-color)_10%,transparent)]' } `} @@ -40,8 +41,9 @@ export function ThemeSwitcher() { w-9 h-9 rounded-[var(--radius-full)] transition-all duration-200 - ${theme === 'dark' - ? 'bg-[var(--accent-color)] text-white scale-105' + cursor-pointer + ${theme === 'dark' + ? 'bg-[var(--accent-color)] text-white scale-105' : 'text-[var(--text-color-secondary)] hover:bg-[color-mix(in_srgb,var(--text-color)_10%,transparent)]' } `} @@ -58,8 +60,9 @@ export function ThemeSwitcher() { w-9 h-9 rounded-[var(--radius-full)] transition-all duration-200 - ${theme === 'system' - ? 'bg-[var(--accent-color)] text-white scale-105' + cursor-pointer + ${theme === 'system' + ? 'bg-[var(--accent-color)] text-white scale-105' : 'text-[var(--text-color-secondary)] hover:bg-[color-mix(in_srgb,var(--text-color)_10%,transparent)]' } `} diff --git a/components/history/HistoryHeader.tsx b/components/history/HistoryHeader.tsx index 1fb25aa..844e28e 100644 --- a/components/history/HistoryHeader.tsx +++ b/components/history/HistoryHeader.tsx @@ -18,7 +18,7 @@ export function HistoryHeader({ onClose }: HistoryHeaderProps) { @@ -89,7 +89,7 @@ export function TagManager({ diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx index 799bf27..ceffaee 100644 --- a/components/layout/Navbar.tsx +++ b/components/layout/Navbar.tsx @@ -40,7 +40,7 @@ export function Navbar({ onReset }: NavbarProps) {
diff --git a/components/player/EpisodeList.tsx b/components/player/EpisodeList.tsx index 724c206..82d04eb 100644 --- a/components/player/EpisodeList.tsx +++ b/components/player/EpisodeList.tsx @@ -30,9 +30,9 @@ export function EpisodeList({ episodes, currentEpisode, onEpisodeClick }: Episod orientation: 'vertical', onNavigate: useCallback((index: number) => { buttonRefs.current[index]?.focus(); - buttonRefs.current[index]?.scrollIntoView({ - behavior: 'smooth', - block: 'nearest' + buttonRefs.current[index]?.scrollIntoView({ + behavior: 'smooth', + block: 'nearest' }); }, []), onSelect: useCallback((index: number) => { @@ -52,7 +52,7 @@ export function EpisodeList({ episodes, currentEpisode, onEpisodeClick }: Episod )} -
@@ -59,7 +59,7 @@ export function MobileSpeedMenu({ e.stopPropagation(); onSpeedChange(speed); }} - className={`px-3 py-1.5 rounded-[var(--radius-full)] text-xs font-medium transition-colors whitespace-nowrap ${playbackRate === speed + className={`px-3 py-1.5 rounded-[var(--radius-full)] text-xs font-medium transition-colors whitespace-nowrap cursor-pointer ${playbackRate === speed ? 'bg-[var(--accent-color)] text-white' : 'bg-white/20 text-white hover:bg-white/30' }`} diff --git a/components/player/mobile/MobileVolumeMenu.tsx b/components/player/mobile/MobileVolumeMenu.tsx index 3d38609..cff7648 100644 --- a/components/player/mobile/MobileVolumeMenu.tsx +++ b/components/player/mobile/MobileVolumeMenu.tsx @@ -44,7 +44,7 @@ export function MobileVolumeMenu({ diff --git a/components/search/SearchBox.tsx b/components/search/SearchBox.tsx index 89e898a..87d6b1e 100644 --- a/components/search/SearchBox.tsx +++ b/components/search/SearchBox.tsx @@ -87,7 +87,7 @@ export function SearchBox({ onSearch, onClear, initialQuery = '' }: SearchBoxPro @@ -110,7 +110,7 @@ export function SourceSettings({ {!searchQuery && sources.length > 10 && ( diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx index 98b0d5f..2ea7875 100644 --- a/components/ui/Button.tsx +++ b/components/ui/Button.tsx @@ -5,14 +5,14 @@ interface ButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; } -export const Button = forwardRef(({ - variant = 'primary', - children, - className = '', - ...props +export const Button = forwardRef(({ + variant = 'primary', + children, + className = '', + ...props }, ref) => { - const baseStyles = "inline-flex items-center justify-center px-4 py-2.5 md:px-6 md:py-3 font-semibold text-sm md:text-base transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-h-[44px] touch-manipulation"; - + const baseStyles = "inline-flex items-center justify-center px-4 py-2.5 md:px-6 md:py-3 font-semibold text-sm md:text-base transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-h-[44px] touch-manipulation cursor-pointer"; + const variants = { primary: ` bg-[var(--accent-color)] @@ -42,7 +42,7 @@ export const Button = forwardRef(({ }; return ( -