Refactor and enhance UI components across multiple pages

- Improved import organization and formatting in PlaylistsPage, RegisterPage, SoundsPage, SettingsPage, and UsersPage for better readability. - Added error handling and user feedback with toast notifications in SoundsPage and SettingsPage. - Enhanced user experience by implementing debounced search functionality in PlaylistsPage and SoundsPage. - Updated the layout and structure of forms in SettingsPage and UsersPage for better usability. - Improved accessibility and semantics by ensuring proper labeling and descriptions in forms. - Fixed minor bugs related to state management and API calls in various components.
2025-08-14 23:51:47 +02:00
parent 8358aa16aa
commit 4e50e7e79d
53 changed files with 2477 additions and 1520 deletions
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -1,37 +1,47 @@
-import { useState, useEffect, useCallback } from 'react'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Slider } from '@/components/ui/slider'
-import { Progress } from '@/components/ui/progress'
 import { Badge } from '@/components/ui/badge'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { 
-  Play, 
-  Pause, 
-  Square, 
-  SkipBack, 
-  SkipForward, 
-  Volume2, 
-  VolumeX,
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Progress } from '@/components/ui/progress'
+import { Slider } from '@/components/ui/slider'
+import { filesService } from '@/lib/api/services/files'
+import {
+  type MessageResponse,
+  type PlayerMode,
+  type PlayerState,
+  playerService,
+} from '@/lib/api/services/player'
+import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
+import { cn } from '@/lib/utils'
+import { formatDuration } from '@/utils/format-duration'
+import {
+  ArrowRight,
+  ArrowRightToLine,
+  Download,
+  ExternalLink,
+  List,
+  Maximize2,
+  Minimize2,
+  MoreVertical,
+  Music,
+  Pause,
+  Play,
  Repeat,
  Repeat1,
  Shuffle,
-  List,
-  Minimize2,
-  Maximize2,
-  Music,
-  ExternalLink,
-  Download,
-  MoreVertical,
-  ArrowRight,
-  ArrowRightToLine
+  SkipBack,
+  SkipForward,
+  Square,
+  Volume2,
+  VolumeX,
 } from 'lucide-react'
-import { playerService, type PlayerState, type PlayerMode, type MessageResponse } from '@/lib/api/services/player'
-import { filesService } from '@/lib/api/services/files'
-import { playerEvents, PLAYER_EVENTS } from '@/lib/events'
+import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
-import { cn } from '@/lib/utils'
-import { formatDuration } from '@/utils/format-duration'
 import { Playlist } from './Playlist'

 export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
@@ -47,17 +57,22 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
    mode: 'continuous',
    volume: 80,
    previous_volume: 80,
-    position: 0
+    position: 0,
  })
  const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>(() => {
    // Initialize from localStorage or default to 'normal'
    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('playerDisplayMode') as PlayerDisplayMode
-      return saved && ['normal', 'minimized', 'maximized', 'sidebar'].includes(saved) ? saved : 'normal'
+      const saved = localStorage.getItem(
+        'playerDisplayMode',
+      ) as PlayerDisplayMode
+      return saved &&
+        ['normal', 'minimized', 'maximized', 'sidebar'].includes(saved)
+        ? saved
+        : 'normal'
    }
    return 'normal'
  })
-  
+
  // Notify parent when display mode changes and save to localStorage
  useEffect(() => {
    onPlayerModeChange?.(displayMode)
@@ -111,17 +126,23 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
    }
  }, [displayMode])

-  const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
-    setIsLoading(true)
-    try {
-      await action()
-    } catch (error) {
-      console.error(`Failed to ${actionName}:`, error)
-      toast.error(`Failed to ${actionName}`)
-    } finally {
-      setIsLoading(false)
-    }
-  }, [])
+  const executeAction = useCallback(
+    async (
+      action: () => Promise<void | MessageResponse>,
+      actionName: string,
+    ) => {
+      setIsLoading(true)
+      try {
+        await action()
+      } catch (error) {
+        console.error(`Failed to ${actionName}:`, error)
+        toast.error(`Failed to ${actionName}`)
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [],
+  )

  const handlePlayPause = useCallback(() => {
    if (state.status === 'playing') {
@@ -143,15 +164,21 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
    executeAction(playerService.next, 'go to next track')
  }, [executeAction])

-  const handleSeek = useCallback((position: number[]) => {
-    const newPosition = position[0]
-    executeAction(() => playerService.seek(newPosition), 'seek')
-  }, [executeAction])
+  const handleSeek = useCallback(
+    (position: number[]) => {
+      const newPosition = position[0]
+      executeAction(() => playerService.seek(newPosition), 'seek')
+    },
+    [executeAction],
+  )

-  const handleVolumeChange = useCallback((volume: number[]) => {
-    const newVolume = volume[0]
-    executeAction(() => playerService.setVolume(newVolume), 'change volume')
-  }, [executeAction])
+  const handleVolumeChange = useCallback(
+    (volume: number[]) => {
+      const newVolume = volume[0]
+      executeAction(() => playerService.setVolume(newVolume), 'change volume')
+    },
+    [executeAction],
+  )

  const handleMute = useCallback(() => {
    if (state.volume === 0) {
@@ -164,7 +191,13 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
  }, [state.volume, executeAction])

  const handleModeChange = useCallback(() => {
-    const modes: PlayerMode[] = ['continuous', 'loop', 'loop_one', 'random', 'single']
+    const modes: PlayerMode[] = [
+      'continuous',
+      'loop',
+      'loop_one',
+      'random',
+      'single',
+    ]
    const currentIndex = modes.indexOf(state.mode)
    const nextMode = modes[(currentIndex + 1) % modes.length]
    executeAction(() => playerService.setMode(nextMode), 'change mode')
@@ -172,7 +205,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {

  const handleDownloadSound = useCallback(async () => {
    if (!state.current_sound) return
-    
+
    try {
      await filesService.downloadSound(state.current_sound.id)
      toast.success('Download started')
@@ -185,7 +218,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
  const getModeIcon = () => {
    switch (state.mode) {
      case 'continuous':
-        return <ArrowRight className='h-4 w-4' />
+        return <ArrowRight className="h-4 w-4" />
      case 'loop':
        return <Repeat className="h-4 w-4" />
      case 'loop_one':
@@ -300,11 +333,11 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
        <div className="mb-4">
          {state.current_sound?.thumbnail ? (
            <div className="w-full aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden">
-              <img 
-                src={filesService.getThumbnailUrl(state.current_sound.id)} 
+              <img
+                src={filesService.getThumbnailUrl(state.current_sound.id)}
                alt={state.current_sound.name}
                className="w-full h-full object-cover"
-                onError={(e) => {
+                onError={e => {
                  // Hide image and show music icon if thumbnail fails to load
                  const target = e.target as HTMLImageElement
                  target.style.display = 'none'
@@ -312,11 +345,11 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
                  if (musicIcon) musicIcon.style.display = 'block'
                }}
              />
-              <Music 
+              <Music
                className={cn(
-                  "h-8 w-8 text-muted-foreground",
-                  state.current_sound?.thumbnail ? "hidden" : "block"
-                )} 
+                  'h-8 w-8 text-muted-foreground',
+                  state.current_sound?.thumbnail ? 'hidden' : 'block',
+                )}
              />
            </div>
          ) : null}
@@ -328,38 +361,38 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
            <h3 className="font-medium text-sm truncate">
              {state.current_sound?.name || 'No track selected'}
            </h3>
-            {state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-4 w-4 p-0"
-                  >
-                    <MoreVertical className="h-3 w-3" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  {state.current_sound.extract_url && (
-                    <DropdownMenuItem asChild>
-                      <a 
-                        href={state.current_sound.extract_url} 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-2"
-                      >
-                        <ExternalLink className="h-4 w-4" />
-                        Source
-                      </a>
+            {state.current_sound &&
+              (state.current_sound.extract_url || state.current_sound.id) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-4 w-4 p-0">
+                      <MoreVertical className="h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {state.current_sound.extract_url && (
+                      <DropdownMenuItem asChild>
+                        <a
+                          href={state.current_sound.extract_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-2"
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                          Source
+                        </a>
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem
+                      onClick={handleDownloadSound}
+                      className="flex items-center gap-2"
+                    >
+                      <Download className="h-4 w-4" />
+                      File
                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem onClick={handleDownloadSound} className="flex items-center gap-2">
-                    <Download className="h-4 w-4" />
-                    File
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
          </div>
        </div>

@@ -368,7 +401,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
          <Progress
            value={(state.position / (state.duration || 1)) * 100}
            className="w-full h-2 cursor-pointer"
-            onClick={(e) => {
+            onClick={e => {
              const rect = e.currentTarget.getBoundingClientRect()
              const clickX = e.clientX - rect.left
              const percentage = clickX / rect.width
@@ -474,10 +507,15 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
        {/* Playlist */}
        {showPlaylist && state.playlist && (
          <div className="mt-4 pt-4 border-t">
-            <Playlist 
+            <Playlist
              playlist={state.playlist}
              currentIndex={state.index}
-              onTrackSelect={(index) => executeAction(() => playerService.playAtIndex(index), 'play track')}
+              onTrackSelect={index =>
+                executeAction(
+                  () => playerService.playAtIndex(index),
+                  'play track',
+                )
+              }
            />
          </div>
        )}
@@ -506,11 +544,11 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
          {/* Large Album Art */}
          <div className="max-w-300 max-h-200 aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden mb-8">
            {state.current_sound?.thumbnail ? (
-              <img 
-                src={filesService.getThumbnailUrl(state.current_sound.id)} 
+              <img
+                src={filesService.getThumbnailUrl(state.current_sound.id)}
                alt={state.current_sound.name}
                className="w-full h-full object-cover"
-                onError={(e) => {
+                onError={e => {
                  // Hide image and show music icon if thumbnail fails to load
                  const target = e.target as HTMLImageElement
                  target.style.display = 'none'
@@ -519,11 +557,11 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
                }}
              />
            ) : null}
-            <Music 
+            <Music
              className={cn(
-                "h-32 w-32 text-muted-foreground",
-                state.current_sound?.thumbnail ? "hidden" : "block"
-              )} 
+                'h-32 w-32 text-muted-foreground',
+                state.current_sound?.thumbnail ? 'hidden' : 'block',
+              )}
            />
          </div>

@@ -533,38 +571,38 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
              <h1 className="text-2xl font-bold">
                {state.current_sound?.name || 'No track selected'}
              </h1>
-              {state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-6 w-6 p-0"
-                    >
-                      <MoreVertical className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                    {state.current_sound.extract_url && (
-                      <DropdownMenuItem asChild>
-                        <a 
-                          href={state.current_sound.extract_url} 
-                          target="_blank" 
-                          rel="noopener noreferrer"
-                          className="flex items-center gap-2"
-                        >
-                          <ExternalLink className="h-4 w-4" />
-                          Source
-                        </a>
+              {state.current_sound &&
+                (state.current_sound.extract_url || state.current_sound.id) && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      {state.current_sound.extract_url && (
+                        <DropdownMenuItem asChild>
+                          <a
+                            href={state.current_sound.extract_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2"
+                          >
+                            <ExternalLink className="h-4 w-4" />
+                            Source
+                          </a>
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuItem
+                        onClick={handleDownloadSound}
+                        className="flex items-center gap-2"
+                      >
+                        <Download className="h-4 w-4" />
+                        File
                      </DropdownMenuItem>
-                    )}
-                    <DropdownMenuItem onClick={handleDownloadSound} className="flex items-center gap-2">
-                      <Download className="h-4 w-4" />
-                      File
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
            </div>
          </div>

@@ -573,11 +611,13 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
            <Progress
              value={(state.position / (state.duration || 1)) * 100}
              className="w-full h-3 cursor-pointer"
-              onClick={(e) => {
+              onClick={e => {
                const rect = e.currentTarget.getBoundingClientRect()
                const clickX = e.clientX - rect.left
                const percentage = clickX / rect.width
-                const newPosition = Math.round(percentage * (state.duration || 0))
+                const newPosition = Math.round(
+                  percentage * (state.duration || 0),
+                )
                handleSeek([newPosition])
              }}
            />
@@ -630,24 +670,14 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
          {/* Secondary Controls */}
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2">
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={handleModeChange}
-              >
+              <Button size="sm" variant="ghost" onClick={handleModeChange}>
                {getModeIcon()}
              </Button>
-              <Badge variant="secondary">
-                {state.mode.replace('_', ' ')}
-              </Badge>
+              <Badge variant="secondary">{state.mode.replace('_', ' ')}</Badge>
            </div>

            <div className="flex items-center gap-2">
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={handleMute}
-              >
+              <Button size="sm" variant="ghost" onClick={handleMute}>
                {state.volume === 0 ? (
                  <VolumeX className="h-4 w-4" />
                ) : (
@@ -680,10 +710,15 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
              </p>
            </div>
            <div className="p-4">
-              <Playlist 
+              <Playlist
                playlist={state.playlist}
                currentIndex={state.index}
-                onTrackSelect={(index) => executeAction(() => playerService.playAtIndex(index), 'play track')}
+                onTrackSelect={index =>
+                  executeAction(
+                    () => playerService.playAtIndex(index),
+                    'play track',
+                  )
+                }
                variant="maximized"
              />
            </div>
@@ -696,7 +731,9 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
  // Expose expand function for external use
  useEffect(() => {
    // Store expand function globally so sidebar can access it
-    const windowWithExpand = window as unknown as { __expandPlayerFromSidebar?: () => void }
+    const windowWithExpand = window as unknown as {
+      __expandPlayerFromSidebar?: () => void
+    }
    windowWithExpand.__expandPlayerFromSidebar = expandFromSidebar
    return () => {
      delete windowWithExpand.__expandPlayerFromSidebar
@@ -712,4 +749,4 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
      {displayMode === 'maximized' && renderMaximizedPlayer()}
    </div>
  )
-}
+}