Refactor UI components for improved spacing; add UserProfile component for user info display

2025-07-25 17:35:07 +00:00
parent 74b9648eef
commit 25e9bd6912
11 changed files with 309 additions and 87 deletions
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=86e198a
+NEXT_PUBLIC_COMMIT_SHA=74b9648
--- a/app/components/CacheManagement.tsx
+++ b/app/components/CacheManagement.tsx
@@ -143,7 +143,7 @@ export function CacheManagement() {
  };

  return (
-    <Card className="break-inside-avoid">
+    <Card className="break-inside-avoid py-5">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Database className="h-5 w-5" />
--- a/app/components/SettingsManagement.tsx
+++ b/app/components/SettingsManagement.tsx
@@ -38,7 +38,7 @@ export function SettingsManagement() {
  };

  return (
-    <Card>
+    <Card className="py-5">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Settings className="h-5 w-5" />
--- a/app/components/SidebarCustomization.tsx
+++ b/app/components/SidebarCustomization.tsx
@@ -153,7 +153,7 @@ export function SidebarCustomization() {


  return (
-    <Card>
+    <Card className="py-5">
      <CardHeader>
        <CardTitle>Sidebar Customization</CardTitle>
        <CardDescription>
--- a/app/components/SongRecommendations.tsx
+++ b/app/components/SongRecommendations.tsx
@@ -10,6 +10,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Play, Heart, Music, Shuffle } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { UserProfile } from './UserProfile';

 interface SongRecommendationsProps {
  userName?: string;
@@ -196,6 +197,11 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
            {isMobile ? 'Here are some albums you might enjoy' : 'Here are some songs you might enjoy'}
          </p>
        </div>
+        <div className="flex items-center gap-3">
+          {/* Mobile User Profile */}
+          {isMobile && <UserProfile variant="mobile" />}
+          
+          {/* Shuffle All Button (Desktop only) */}
          {(isMobile ? recommendedAlbums.length > 0 : recommendedSongs.length > 0) && !isMobile && (
            <Button onClick={handleShuffleAll} variant="outline" size="sm">
              <Shuffle className="w-4 h-4 mr-2" />
@@ -203,6 +209,7 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
            </Button>
          )}
        </div>
+      </div>
      
      {isMobile ? (
        /* Mobile: Show albums in 3x2 grid */
--- a/app/components/UserProfile.tsx
+++ b/app/components/UserProfile.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { User, ChevronDown, Settings, LogOut } from 'lucide-react';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { getGravatarUrl } from '@/lib/gravatar';
+import { User as NavidromeUser } from '@/lib/navidrome';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+interface UserProfileProps {
+  variant?: 'desktop' | 'mobile';
+}
+
+export function UserProfile({ variant = 'desktop' }: UserProfileProps) {
+  const { api, isConnected } = useNavidrome();
+  const [userInfo, setUserInfo] = useState<NavidromeUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUserInfo = async () => {
+      if (!api || !isConnected) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const user = await api.getUserInfo();
+        setUserInfo(user);
+      } catch (error) {
+        console.error('Failed to fetch user info:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUserInfo();
+  }, [api, isConnected]);
+
+  const handleLogout = () => {
+    // Clear Navidrome config and reload
+    localStorage.removeItem('navidrome-config');
+    window.location.reload();
+  };
+
+  if (!userInfo) {
+    if (variant === 'desktop') {
+      return (
+        <Link href="/settings">
+          <Button variant="ghost" size="sm" className="gap-2">
+            <User className="w-4 h-4" />
+          </Button>
+        </Link>
+      );
+    } else {
+      return (
+        <Link href="/settings">
+          <Button variant="ghost" size="sm" className="gap-2">
+            <User className="w-4 h-4" />
+          </Button>
+        </Link>
+      );
+    }
+  }
+
+  const gravatarUrl = userInfo.email 
+    ? getGravatarUrl(userInfo.email, variant === 'desktop' ? 32 : 48, 'identicon')
+    : null;
+
+  if (variant === 'desktop') {
+    // Desktop: Only show profile icon
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-1 h-auto p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={16}
+                height={16}
+                className="rounded-full"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.style.display = 'none';
+                }}
+              />
+            ) : (
+              <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-4 h-4 text-primary" />
+              </div>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <div className="flex items-center gap-2 p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={16}
+                height={16}
+                className="rounded-full"
+              />
+            ) : (
+              <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-5 h-5 text-primary" />
+              </div>
+            )}
+            <div>
+              <p className="text-sm font-medium">{userInfo.username}</p>
+              {userInfo.email && (
+                <p className="text-xs text-muted-foreground">{userInfo.email}</p>
+              )}
+            </div>
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/settings" className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              Settings
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem 
+            onClick={handleLogout}
+            className="flex items-center gap-2 text-red-600 focus:text-red-600"
+          >
+            <LogOut className="w-4 h-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  } else {
+    // Mobile: Show only icon with dropdown
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-1 h-auto p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={16}
+                height={16}
+                className="rounded-full"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.style.display = 'none';
+                }}
+              />
+            ) : (
+              <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-4 h-4 text-primary" />
+              </div>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <div className="flex items-center gap-2 p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={16}
+                height={16}
+                className="rounded-full"
+              />
+            ) : (
+              <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-5 h-5 text-primary" />
+              </div>
+            )}
+            <div>
+              <p className="text-sm font-medium">{userInfo.username}</p>
+              {userInfo.email && (
+                <p className="text-xs text-muted-foreground">{userInfo.email}</p>
+              )}
+            </div>
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/settings" className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              Settings
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem 
+            onClick={handleLogout}
+            className="flex items-center gap-2 text-red-600 focus:text-red-600"
+          >
+            <LogOut className="w-4 h-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+}
--- a/app/components/menu.tsx
+++ b/app/components/menu.tsx
@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { useRouter } from 'next/navigation';
 import Image from "next/image";
 import { Github, Mail, Menu as MenuIcon, X } from "lucide-react"
+import { UserProfile } from "@/app/components/UserProfile";
 import {
    Menubar,
    MenubarCheckboxItem,
@@ -332,6 +333,13 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
        </Menubar>
        )}
        
+        {/* User Profile - Desktop only */}
+        {!isMobile && (
+          <div className="ml-auto">
+            <UserProfile variant="desktop" />
+          </div>
+        )}
+        
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,6 +12,8 @@ import { useSearchParams } from 'next/navigation';
 import { useAudioPlayer } from './components/AudioPlayerContext';
 import { SongRecommendations } from './components/SongRecommendations';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { UserProfile } from './components/UserProfile';

 type TimeOfDay = 'morning' | 'afternoon' | 'evening';

@@ -24,6 +26,7 @@ function MusicPageContent() {
  const [favoriteAlbums, setFavoriteAlbums] = useState<Album[]>([]);
  const [favoritesLoading, setFavoritesLoading] = useState(true);
  const [shortcutProcessed, setShortcutProcessed] = useState(false);
+  const isMobile = useIsMobile();

  useEffect(() => {
    if (albums.length > 0) {
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -47,7 +47,6 @@ const SettingsPage = () => {

    // Client-side hydration state
    const [isClient, setIsClient] = useState(false);
-    const [isDev, setIsDev] = useState(false);

    // Check if Navidrome is configured via environment variables
    const hasEnvConfig = React.useMemo(() => {
@@ -63,7 +62,6 @@ const SettingsPage = () => {
    // Initialize client-side state after hydration
    useEffect(() => {
        setIsClient(true);
-        setIsDev(process.env.NODE_ENV === 'development');
        
        // Initialize form data with config values
        setFormData({
@@ -335,39 +333,6 @@ const SettingsPage = () => {
        }
    };

-    const handleDebugClearStorage = () => {
-        if (!isClient) return;
-        
-        try {
-            // Preserve Navidrome config
-            const navidromeConfig = localStorage.getItem('navidrome-config');
-            
-            // Clear all localStorage
-            localStorage.clear();
-            
-            // Restore Navidrome config if it existed
-            if (navidromeConfig) {
-                localStorage.setItem('navidrome-config', navidromeConfig);
-            }
-            
-            toast({
-                title: "Debug: Storage Cleared",
-                description: "All localStorage cleared except Navidrome config. Page will reload.",
-            });
-            
-            // Reload the page to reset all state
-            setTimeout(() => {
-                window.location.reload();
-            }, 1500);
-        } catch (error) {
-            toast({
-                title: "Debug: Clear Failed",
-                description: "Failed to clear localStorage: " + (error instanceof Error ? error.message : "Unknown error"),
-                variant: "destructive"
-            });
-        }
-    };
-
    return (
        <div className="p-6 pb-24 w-full">
            {!isClient ? (
@@ -388,7 +353,7 @@ const SettingsPage = () => {
                     style={{ columnFill: 'balance' }}>

                {!hasEnvConfig && (
-                    <Card className="mb-6 break-inside-avoid">
+                    <Card className="mb-6 break-inside-avoid py-5">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <FaServer className="w-5 h-5" />
@@ -477,7 +442,7 @@ const SettingsPage = () => {
                )}

                {hasEnvConfig && (
-                    <Card className="mb-6 break-inside-avoid">
+                    <Card className="mb-6 break-inside-avoid py-5">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <FaServer className="w-5 h-5" />
@@ -504,7 +469,7 @@ const SettingsPage = () => {
                    </Card>
                )}

-                <Card className="mb-6 break-inside-avoid">
+                <Card className="mb-6 break-inside-avoid py-5">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FaLastfm className="w-5 h-5" />
@@ -582,7 +547,7 @@ const SettingsPage = () => {
                    </CardContent>
                </Card> */}

-                <Card className="mb-6 break-inside-avoid">
+                <Card className="mb-6 break-inside-avoid py-5">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Settings className="w-5 h-5" />
@@ -637,7 +602,7 @@ const SettingsPage = () => {
                    </CardContent>
                </Card>

-                <Card className="mb-6 break-inside-avoid">
+                {/* <Card className="mb-6 break-inside-avoid py-5">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FaLastfm className="w-5 h-5" />
@@ -730,7 +695,7 @@ const SettingsPage = () => {
                            </>
                        )}
                    </CardContent>
-                </Card>
+                </Card> */}

                {/* Sidebar Customization */}
                <div className="break-inside-avoid mb-6">
@@ -747,41 +712,7 @@ const SettingsPage = () => {
                  <CacheManagement />
                </div>

-                {/* Debug Tools - Only in Development */}
-                {isDev && (
-                  <Card className="mb-6 break-inside-avoid border-orange-200 dark:border-orange-800">
-                    <CardHeader>
-                      <CardTitle className="flex items-center gap-2 text-orange-600 dark:text-orange-400">
-                        <FaCog className="w-5 h-5" />
-                        Debug Tools (Dev Only)
-                      </CardTitle>
-                      <CardDescription>
-                        Development tools for debugging and testing
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <div className="p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg border border-orange-200 dark:border-orange-800">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h4 className="font-medium text-orange-800 dark:text-orange-200">Clear Storage</h4>
-                            <p className="text-sm text-orange-600 dark:text-orange-400">
-                              Clears all localStorage except Navidrome config
-                            </p>
-                          </div>
-                          <Button 
-                            onClick={handleDebugClearStorage}
-                            variant="destructive"
-                            size="sm"
-                          >
-                            Clear Storage
-                          </Button>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                )}
-
-                <Card className="mb-6 break-inside-avoid">
+                <Card className="mb-6 break-inside-avoid py-5">
                    <CardHeader>
                        <CardTitle>Appearance</CardTitle>
                        <CardDescription>
@@ -830,7 +761,7 @@ const SettingsPage = () => {
                </Card>

                {/* Theme Preview */}
-                <Card className="mb-6 break-inside-avoid">
+                <Card className="mb-6 break-inside-avoid py-5">
                    <CardHeader>
                        <CardTitle>Preview</CardTitle>
                        <CardDescription>
--- a/lib/gravatar.ts
+++ b/lib/gravatar.ts
@@ -0,0 +1,38 @@
+import crypto from 'crypto';
+
+/**
+ * Generate a Gravatar URL from an email address
+ * @param email - The email address
+ * @param size - The size of the image (default: 80)
+ * @param defaultImage - Default image type if no Gravatar found (default: 'identicon')
+ * @returns The Gravatar URL
+ */
+export function getGravatarUrl(
+  email: string, 
+  size: number = 80, 
+  defaultImage: string = 'identicon'
+): string {
+  // Normalize email: trim whitespace and convert to lowercase
+  const normalizedEmail = email.trim().toLowerCase();
+  
+  // Generate MD5 hash of the email
+  const hash = crypto.createHash('md5').update(normalizedEmail).digest('hex');
+  
+  // Construct the Gravatar URL
+  return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultImage}`;
+}
+
+/**
+ * Generate a Gravatar URL with retina support (2x size)
+ * @param email - The email address
+ * @param size - The base size of the image
+ * @param defaultImage - Default image type if no Gravatar found
+ * @returns The Gravatar URL at 2x resolution
+ */
+export function getGravatarUrlRetina(
+  email: string, 
+  size: number = 80, 
+  defaultImage: string = 'identicon'
+): string {
+  return getGravatarUrl(email, size * 2, defaultImage);
+}
--- a/lib/navidrome.ts
+++ b/lib/navidrome.ts
@@ -110,6 +110,26 @@ export interface ArtistInfo {
  similarArtist?: Artist[];
 }

+export interface User {
+  username: string;
+  email?: string;
+  scrobblingEnabled: boolean;
+  maxBitRate?: number;
+  adminRole: boolean;
+  settingsRole: boolean;
+  downloadRole: boolean;
+  uploadRole: boolean;
+  playlistRole: boolean;
+  coverArtRole: boolean;
+  commentRole: boolean;
+  podcastRole: boolean;
+  streamRole: boolean;
+  jukeboxRole: boolean;
+  shareRole: boolean;
+  videoConversionRole: boolean;
+  avatarLastChanged?: string;
+}
+
 class NavidromeAPI {
  private config: NavidromeConfig;
  private clientName = 'miceclient';
@@ -171,6 +191,12 @@ class NavidromeAPI {
    }
  }

+  async getUserInfo(): Promise<User> {
+    const response = await this.makeRequest('getUser', { username: this.config.username });
+    const userData = response.user as User;
+    return userData;
+  }
+
  async getArtists(): Promise<Artist[]> {
    const response = await this.makeRequest('getArtists');
    const artists: Artist[] = [];