feat: add Tooltip component and related hooks for improved UI interactions

- Implemented Tooltip component using Radix UI for better accessibility and customization. - Created TooltipProvider, TooltipTrigger, and TooltipContent for modular usage. - Added useIsMobile hook to detect mobile devices based on screen width. - Updated themes with new color variables for better design consistency across the application.
2025-07-03 15:34:53 +00:00
parent f25b4dcac1
commit 7b622cb1ec
44 changed files with 6021 additions and 472 deletions
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -21,14 +21,7 @@ import {
  FaListUl
 } from "react-icons/fa6";
 import { Heart } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";

 interface LyricLine {
  time: number;
@@ -294,10 +287,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
      
      {/* Overlay for better contrast */}
      <div className="absolute inset-0 bg-black/50" />
-        <div className="relative h-full w-full flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 lg:p-6 shrink-0">
-          <h2 className="text-lg lg:text-xl font-semibold text-white"></h2>
+        <div className="relative h-full w-full">
+        {/* Floating Header */}
+        <div className="absolute top-0 right-0 z-50 p-4 lg:p-6">
          <div className="flex items-center gap-2">
            {onOpenQueue && (
              <button 
@@ -319,7 +311,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
        </div>

        {/* Main Content */}
-        <div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 pt-0 overflow-hidden min-h-0">
+        <div className="h-full flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 overflow-hidden">
          {/* Left Side - Album Art and Controls */}
          <div className="flex flex-col items-center justify-center min-h-0 flex-1 min-w-0">
            {/* Album Art */}
@@ -453,7 +445,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
            <div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}>
              <div className="h-full flex flex-col">
                <ScrollArea className="flex-1 min-h-0">
-                  <div className="space-y-3 sm:space-y-4 pl-12 pr-4 py-4">
+                  <div className="space-y-2 sm:space-y-3 pl-4 pr-4 py-4">
                    {lyrics.map((line, index) => (
                      <div
                        key={index}
@@ -461,7 +453,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                        onClick={() => handleLyricClick(line.time)}
                        className={`text-sm sm:text-base lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground ${
                          index === currentLyricIndex
-                            ? 'text-foreground font-bold text-lg sm:text-xl lg:text-2xl'
+                            ? 'text-foreground font-bold text-2xl'
                            : index < currentLyricIndex
                            ? 'text-foreground/60'
                            : 'text-foreground/40'
@@ -470,8 +462,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                          wordWrap: 'break-word',
                          overflowWrap: 'break-word',
                          hyphens: 'auto',
-                          paddingBottom: '6px',
-                          paddingLeft: '16px'
+                          paddingBottom: '4px',
+                          paddingLeft: '8px'
                        }}
                        title={`Click to jump to ${formatTime(line.time)}`}
                      >
--- a/app/components/ThemeProvider.tsx
+++ b/app/components/ThemeProvider.tsx
@@ -2,12 +2,14 @@

 import React, { createContext, useContext, useEffect, useState } from 'react';

-
-type Theme = 'blue' | 'violet' | 'red' | 'rose' | 'orange' | 'green' | 'yellow';
+type Theme = 'default' | 'blue' | 'violet' | 'red' | 'rose' | 'orange' | 'green' | 'yellow';
+type Mode = 'light' | 'dark' | 'system';

 interface ThemeContextType {
  theme: Theme;
+  mode: Mode;
  setTheme: (theme: Theme) => void;
+  setMode: (mode: Mode) => void;
 }

 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -25,18 +27,25 @@ interface ThemeProviderProps {
 }

 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('blue');
+  const [theme, setTheme] = useState<Theme>('default');
+  const [mode, setMode] = useState<Mode>('system');
  const [mounted, setMounted] = useState(false);

  // Load theme settings from localStorage on component mount
  useEffect(() => {
    setMounted(true);
    const savedTheme = localStorage.getItem('theme');
-    const validThemes: Theme[] = ['blue', 'violet', 'red', 'rose', 'orange', 'green', 'yellow'];
+    const savedMode = localStorage.getItem('theme-mode');
+    const validThemes: Theme[] = ['default', 'blue', 'violet', 'red', 'rose', 'orange', 'green', 'yellow'];
+    const validModes: Mode[] = ['light', 'dark', 'system'];
    
    if (savedTheme && validThemes.includes(savedTheme as Theme)) {
      setTheme(savedTheme as Theme);
    }
+    
+    if (savedMode && validModes.includes(savedMode as Mode)) {
+      setMode(savedMode as Mode);
+    }
  }, []);

  // Apply theme changes
@@ -46,35 +55,54 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
    const root = document.documentElement;
    
    // Remove existing theme classes
-    root.classList.remove('theme-blue', 'theme-violet', 'theme-red', 'theme-rose', 'theme-orange', 'theme-green', 'theme-yellow', 'dark');
+    root.classList.remove('theme-default', 'theme-blue', 'theme-violet', 'theme-red', 'theme-rose', 'theme-orange', 'theme-green', 'theme-yellow', 'dark');
    
    // Add new theme class
    root.classList.add(`theme-${theme}`);
    
-    // Always follow system preference for dark mode
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const applySystemTheme = () => {
-      root.classList.toggle('dark', mediaQuery.matches);
+    // Apply dark/light mode
+    const applyMode = () => {
+      if (mode === 'dark') {
+        root.classList.add('dark');
+      } else if (mode === 'light') {
+        root.classList.remove('dark');
+      } else { // system
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        root.classList.toggle('dark', mediaQuery.matches);
+      }
    };
    
-    applySystemTheme();
-    mediaQuery.addEventListener('change', applySystemTheme);
+    applyMode();
    
-    // Save theme to localStorage
+    // Listen for system preference changes only if mode is 'system'
+    let mediaQuery: MediaQueryList | null = null;
+    if (mode === 'system') {
+      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.addEventListener('change', applyMode);
+    }
+    
+    // Save settings to localStorage
    localStorage.setItem('theme', theme);
+    localStorage.setItem('theme-mode', mode);
    
    // Cleanup listener
-    return () => mediaQuery.removeEventListener('change', applySystemTheme);
-  }, [theme, mounted]);
+    return () => {
+      if (mediaQuery) {
+        mediaQuery.removeEventListener('change', applyMode);
+      }
+    };
+  }, [theme, mode, mounted]);

  return (
    <ThemeContext.Provider
      value={{
        theme,
+        mode,
        setTheme,
+        setMode,
      }}
    >
-      <div className={`theme-${theme}`}>
+      <div>
        {children}
      </div>
    </ThemeContext.Provider>
--- a/app/components/album-artwork.tsx
+++ b/app/components/album-artwork.tsx
@@ -112,7 +112,7 @@ export function AlbumArtwork({
    <div className={cn("space-y-3", className)} {...props}>
      <ContextMenu>
        <ContextMenuTrigger>
-          <Card key={album.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
+          <Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
                              <div className="aspect-square relative group">
                                  {album.coverArt && api ? (
                                      <Image
--- a/app/components/artist-icon.tsx
+++ b/app/components/artist-icon.tsx
@@ -25,12 +25,14 @@ interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
  artist: Artist
  size?: number
  imageOnly?: boolean
+  responsive?: boolean
 }

 export function ArtistIcon({
  artist,
  size = 150,
  imageOnly = false,
+  responsive = false,
  className,
  ...props
 }: ArtistIconProps) {
@@ -54,9 +56,9 @@ export function ArtistIcon({
      starItem(artist.id, 'artist');
    }
  };
-  // Get cover art URL with proper fallback
+  // Get cover art URL with proper fallback - use higher resolution for better quality
  const artistImageUrl = artist.coverArt && api
-    ? api.getCoverArtUrl(artist.coverArt, 200)
+    ? api.getCoverArtUrl(artist.coverArt, 320)
    : '/default-user.jpg';

  // If imageOnly is true, return just the image without context menu or text
@@ -79,22 +81,33 @@ export function ArtistIcon({
    );
  }

+  // Determine if we should use responsive layout
+  const isResponsive = responsive;
+
  return (
    <div className={cn("space-y-3", className)} {...props}>
      <ContextMenu>
        <ContextMenuTrigger>
-          <Card key={artist.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
+          <Card key={artist.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
            <div
              className="aspect-square relative group"
-              style={{ width: size, height: size }}
+              style={!isResponsive ? { width: size, height: size } : undefined}
            >
              <div className="w-full h-full">
                <Image
-                  src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
+                  src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 600) : '/placeholder-artist.png'}
                  alt={artist.name}
-                  width={size}
-                  height={size}
-                  className="object-cover w-full h-full"
+                  {...(isResponsive 
+                    ? { 
+                        fill: true, 
+                        sizes: "(max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw" 
+                      }
+                    : { 
+                        width: size, 
+                        height: size 
+                      }
+                  )}
+                  className={isResponsive ? "object-cover" : "object-cover w-full h-full"}
                />
              </div>
            </div>
@@ -105,19 +118,6 @@ export function ArtistIcon({
              </p>
            </CardContent>
          </Card>
-          {/* <div 
-            className="overflow-hidden rounded-full cursor-pointer shrink-0" 
-            onClick={handleClick}
-            style={{ width: size, height: size }}
-          >
-            <Image
-              src={artistImageUrl}
-              alt={artist.name}
-              width={size}
-              height={size}
-              className="w-full h-full object-cover transition-all hover:scale-105"
-            />
-          </div> */}
        </ContextMenuTrigger>
        <ContextMenuContent className="w-40">
          <ContextMenuItem onClick={handleStar}>