angel/mice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Releases 3 Wiki Activity

feat: Enhance sidebar functionality and favorite albums feature

Browse Source 
- Updated GitHub workflows to include additional metadata in labels for Docker images.
- Modified Dockerfile to copy README.md into the app directory for documentation purposes.
- Added favorite albums functionality in the album page, allowing users to mark albums as favorites.
- Improved AudioPlayer component to save playback position more frequently.
- Refactored sidebar component to include a favorites section and improved navigation.
- Introduced useFavoriteAlbums hook to manage favorite albums state and local storage.
- Updated settings page to allow users to toggle sidebar visibility.
This commit is contained in:
angel
2025-07-09 21:39:16 +00:00
committed by GitHub
parent 53bbbe1801
commit 4cc59b4c1f
9 changed files with 488 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.github/workflows/nightly.yml vendored
View File

@@ -109,7 +109,10 @@ jobs:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
labels: |
${{ steps.meta.outputs.labels }}
org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
platforms: |
linux/amd64
linux/arm64/v8

5
.github/workflows/release.yml vendored
View File

@@ -66,7 +66,10 @@ jobs:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
labels: |
${{ steps.meta.outputs.labels }}
org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
platforms: |
linux/amd64
linux/arm64/v8

3
Dockerfile
View File

@@ -16,6 +16,9 @@ RUN pnpm install
# Copy source code
COPY . .
# Copy README.md to the app directory for documentation
COPY README.md /app/
# Set environment variable placeholders during build
# These will be replaced at runtime with actual values
ENV NEXT_PUBLIC_NAVIDROME_URL=NEXT_PUBLIC_NAVIDROME_URL

12
app/album/[id]/page.tsx
View File

@@ -12,6 +12,8 @@ import Loading from "@/app/components/loading";
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { getNavidromeAPI } from '@/lib/navidrome';
import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
import { Star } from 'lucide-react';
export default function AlbumPage() {
const { id } = useParams();
@@ -22,6 +24,7 @@ export default function AlbumPage() {
const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
const { getAlbum, starItem, unstarItem } = useNavidrome();
const { playTrack, addAlbumToQueue, playAlbum, playAlbumFromTrack, currentTrack } = useAudioPlayer();
const { isFavoriteAlbum, toggleFavoriteAlbum } = useFavoriteAlbums();
const api = getNavidromeAPI();
useEffect(() => {
@@ -137,9 +140,16 @@ export default function AlbumPage() {
<div className="space-y-2">
<div className="flex items-center space-x-4">
<p className="text-3xl font-semibold tracking-tight">{album.name}</p>
<Button onClick={handleStar} variant="ghost">
<Button onClick={handleStar} variant="ghost" title={isStarred ? "Unstar album" : "Star album"}>
<Heart className={isStarred ? 'text-primary' : 'text-gray-500'} fill={isStarred ? 'var(--primary)' : ""}/>
</Button>
<Button
onClick={() => toggleFavoriteAlbum(album.id)}
variant="ghost"
title={isFavoriteAlbum(album.id) ? "Remove from sidebar favorites" : "Add to sidebar favorites"}
>
<Star className={isFavoriteAlbum(album.id) ? 'text-yellow-500' : 'text-gray-500'} fill={isFavoriteAlbum(album.id) ? 'currentColor' : ""}/>
</Button>
</div>
<Link href={`/artist/${album.artistId}`}>
<p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>

12
app/components/AudioPlayer.tsx
View File

@@ -116,7 +116,7 @@ export const AudioPlayer: React.FC = () => {
useEffect(() => {
const audioCurrent = audioRef.current;
return () => {
if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) {
if (audioCurrent && currentTrack && audioCurrent.currentTime > 5) {
localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
}
};
@@ -134,12 +134,12 @@ export const AudioPlayer: React.FC = () => {
// Notify scrobbler about new track
onTrackStart(currentTrack);
// Check for saved timestamp (only restore if more than 10 seconds in)
// Check for saved timestamp (only restore if more than 5 seconds in)
const savedTime = localStorage.getItem('navidrome-current-track-time');
if (savedTime) {
const time = parseFloat(savedTime);
// Only restore if we were at least 10 seconds in and not near the end
if (time > 10 && time < (currentTrack.duration - 30)) {
// Only restore if we were at least 5 seconds in and not near the end
if (time > 5 && time < (currentTrack.duration - 15)) {
const restorePosition = () => {
if (audioCurrent.readyState >= 2) { // HAVE_CURRENT_DATA
audioCurrent.currentTime = time;
@@ -181,9 +181,9 @@ export const AudioPlayer: React.FC = () => {
if (audioCurrent && currentTrack) {
setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100);
// Save current time every 30 seconds, but only if we've moved forward significantly
// Save current time every 10 seconds, but only if we've moved forward significantly
const currentTime = audioCurrent.currentTime;
if (Math.abs(currentTime - lastSavedTime) >= 30 && currentTime > 10) {
if (Math.abs(currentTime - lastSavedTime) >= 10 && currentTime > 5) {
localStorage.setItem('navidrome-current-track-time', currentTime.toString());
lastSavedTime = currentTime;
}

71
app/components/ihateserverside.tsx
View File

@@ -5,7 +5,8 @@ import { Menu } from "@/app/components/menu";
import { Sidebar } from "@/app/components/sidebar";
import { useNavidrome } from "@/app/components/NavidromeContext";
import { AudioPlayer } from "./AudioPlayer";
import { Toaster } from "@/components/ui/toaster"
import { Toaster } from "@/components/ui/toaster";
import { useFavoriteAlbums } from "@/hooks/use-favorite-albums";
interface IhateserversideProps {
children: React.ReactNode;
@@ -18,12 +19,15 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
const [isClient, setIsClient] = useState(false);
const { playlists } = useNavidrome();
const { favoriteAlbums, removeFavoriteAlbum } = useFavoriteAlbums();
// Handle client-side hydration
useEffect(() => {
setIsClient(true);
const savedCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
const savedVisible = localStorage.getItem('sidebar-visible') !== 'false'; // Default to true
setIsSidebarCollapsed(savedCollapsed);
setIsSidebarVisible(savedVisible);
}, []);
const toggleSidebarCollapse = () => {
@@ -34,6 +38,14 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
}
};
const toggleSidebarVisibility = () => {
const newVisible = !isSidebarVisible;
setIsSidebarVisible(newVisible);
if (typeof window !== 'undefined') {
localStorage.setItem('sidebar-visible', newVisible.toString());
}
};
const handleTransitionEnd = () => {
if (!isSidebarVisible) {
setIsSidebarHidden(true); // This will fully hide the sidebar after transition
@@ -53,7 +65,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
}}
>
<Menu
toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
toggleSidebar={toggleSidebarVisibility}
isSidebarVisible={isSidebarVisible}
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
isStatusBarVisible={isStatusBarVisible}
@@ -62,15 +74,19 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
{/* Main Content Area */}
<div className="flex-1 flex overflow-hidden w-full">
<div className="w-64 shrink-0 border-r transition-all duration-200">
<Sidebar
playlists={playlists}
className="h-full overflow-y-auto"
collapsed={false}
onToggle={toggleSidebarCollapse}
onTransitionEnd={handleTransitionEnd}
/>
</div>
{isSidebarVisible && (
<div className="w-16 shrink-0 border-r transition-all duration-200">
<Sidebar
playlists={playlists}
className="h-full overflow-y-auto"
collapsed={true}
visible={isSidebarVisible}
favoriteAlbums={favoriteAlbums}
onToggle={toggleSidebarCollapse}
onTransitionEnd={handleTransitionEnd}
/>
</div>
)}
<div className="flex-1 overflow-y-auto min-w-0">
<div>{children}</div>
</div>
@@ -93,7 +109,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
}}
>
<Menu
toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
toggleSidebar={toggleSidebarVisibility}
isSidebarVisible={isSidebarVisible}
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
isStatusBarVisible={isStatusBarVisible}
@@ -101,22 +117,25 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
</div>
{/* Main Content Area */}
<div className="flex-1 flex overflow-hidden w-full">
{isSidebarVisible && (
<div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} shrink-0 border-r transition-all duration-200`}>
<Sidebar
playlists={playlists}
className="h-full overflow-y-auto"
collapsed={isSidebarCollapsed}
onToggle={toggleSidebarCollapse}
onTransitionEnd={handleTransitionEnd}
/>
<div className="flex-1 flex overflow-hidden w-full">
{isSidebarVisible && (
<div className="w-16 shrink-0 border-r transition-all duration-200">
<Sidebar
playlists={playlists}
className="h-full overflow-y-auto"
collapsed={true}
visible={isSidebarVisible}
favoriteAlbums={favoriteAlbums}
onToggle={toggleSidebarCollapse}
onTransitionEnd={handleTransitionEnd}
onRemoveFavoriteAlbum={removeFavoriteAlbum}
/>
</div>
)}
<div className="flex-1 overflow-y-auto min-w-0">
<div>{children}</div>
</div>
)}
<div className="flex-1 overflow-y-auto min-w-0">
<div>{children}</div>
</div>
</div>
{/* Floating Audio Player */}
{isStatusBarVisible && (

497
app/components/sidebar.tsx
View File

@@ -6,17 +6,33 @@ import { usePathname } from 'next/navigation';
import { Button } from "../../components/ui/button";
import { ScrollArea } from "../../components/ui/scroll-area";
import Link from "next/link";
import Image from "next/image";
import { Playlist } from "@/lib/navidrome";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useNavidrome } from "./NavidromeContext";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
playlists: Playlist[];
collapsed?: boolean;
onToggle?: () => void;
visible?: boolean;
favoriteAlbums?: Array<{id: string, name: string, artist: string, coverArt?: string}>;
onRemoveFavoriteAlbum?: (albumId: string) => void;
}
export function Sidebar({ className, playlists, collapsed = false, onToggle }: SidebarProps) {
export function Sidebar({ className, playlists, collapsed = false, onToggle, visible = true, favoriteAlbums = [], onRemoveFavoriteAlbum }: SidebarProps) {
const pathname = usePathname();
const { api } = useNavidrome();
if (!visible) {
return null;
}
// Define all routes and their active states
const routes = {
@@ -44,74 +60,20 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
const isAnySidebarRouteActive = Object.values(routes).some(Boolean);
return (
<div className={cn("pb-23 relative", className)}>
{/* Collapse/Expand Button */}
<Button
variant="ghost"
size="sm"
onClick={onToggle}
className="absolute top-2 right-2 z-10 h-6 w-6 p-0"
>
{collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
</Button>
<div className={cn("pb-23 relative w-16", className)}>
<div className="space-y-4 py-4 pt-6">
<div className="px-3 py-2">
<p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
Discover
Navigation
</p>
<div className="space-y-1">
<Link href="/">
<Button
variant={routes.isRoot ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Listen Now" : undefined}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
>
<circle cx="12" cy="12" r="10" />
<polygon points="10 8 16 12 10 16 10 8" />
</svg>
{!collapsed && "Listen Now"}
</Button>
</Link>
<Link href="/browse">
<Button
variant={routes.isBrowse ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Browse" : undefined}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
>
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<rect width="7" height="7" x="14" y="14" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
</svg>
{!collapsed && "Browse"}
</Button>
</Link>
{/* Search */}
<Link href="/search">
<Button
variant={routes.isSearch ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Search" : undefined}
className={cn("w-full justify-center px-2")}
title="Search"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -121,19 +83,43 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
</svg>
{!collapsed && "Search"}
</Button>
</Link>
{/* Home */}
<Link href="/">
<Button
variant={routes.isRoot ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Home"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<circle cx="12" cy="12" r="10" />
<polygon points="10 8 16 12 10 16 10 8" />
</svg>
</Button>
</Link>
{/* Queue */}
<Link href="/queue">
<Button
variant={routes.isQueue ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Queue" : undefined}
className={cn("w-full justify-center px-2")}
title="Queue"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -143,18 +129,19 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
{!collapsed && "Queue"}
</Button>
</Link>
{/* Radio */}
<Link href="/radio">
<Button
variant={routes.isRadio ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Radio" : undefined}
className={cn("w-full justify-center px-2")}
title="Radio"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -164,7 +151,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
>
<path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
<path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/>
@@ -172,22 +159,118 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
<path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/>
<path d="M19.1 4.9C23 8.8 23 15.2 19.1 19.1"/>
</svg>
{!collapsed && "Radio"}
</Button>
</Link>
{/* Artists */}
<Link href="/library/artists">
<Button
variant={routes.isArtists ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Artists"
>
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
<circle cx="17" cy="7" r="5" />
</svg>
</Button>
</Link>
{/* Albums */}
<Link href="/library/albums">
<Button
variant={routes.isAlbums ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Albums"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
</Button>
</Link>
{/* Playlists */}
<Link href="/library/playlists">
<Button
variant={routes.isPlaylists ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Playlists"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="M21 15V6" />
<path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
<path d="M12 12H3" />
<path d="M16 6H3" />
<path d="M12 18H3" />
</svg>
</Button>
</Link>
{/* Favorites */}
<Link href="/favorites">
<Button
variant={routes.isFavorites ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Favorites"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
</Button>
</Link>
</div>
</div>
<div>
<div className="px-3 py-0 pt-0">
<p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
Library
</p>
<div className="space-y-1">
<Link href="/library/playlists">
<div>
<div className="px-3 py-0 pt-0">
<p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight sr-only")}>
Library
</p>
<div className="space-y-1">
{/* Browse */}
<Link href="/browse">
<Button
variant={routes.isPlaylists ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-1", collapsed && "justify-center px-2")}
title={collapsed ? "Playlists" : undefined}
variant={routes.isBrowse ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Browse"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -197,25 +280,25 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
>
<path d="M21 15V6" />
<path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
<path d="M12 12H3" />
<path d="M16 6H3" />
<path d="M12 18H3" />
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<rect width="7" height="7" x="14" y="14" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
</svg>
{!collapsed && "Playlists"}
</Button>
</Link>
<Link href="/library/songs">
</Link>
{/* Songs */}
<Link href="/library/songs">
<Button
variant={routes.isSongs ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Songs" : undefined}
className={cn("w-full justify-center px-2")}
title="Songs"
>
<svg
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
@@ -227,108 +310,15 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
<circle cx="8" cy="18" r="4" />
<path d="M12 18V2l7 4" />
</svg>
{!collapsed && "Songs"}
</Button>
</Link>
<Link href="/library/artists">
</Link>
{/* History */}
<Link href="/history">
<Button
variant={routes.isArtists ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Artists" : undefined}
>
<svg
className={cn("h-4 w-4", !collapsed && "mr-2")}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
<circle cx="17" cy="7" r="5" />
</svg>
{!collapsed && "Artists"}
</Button>
</Link>
<Link href="/library/albums">
<Button
variant={routes.isAlbums ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Albums" : undefined}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
{!collapsed && "Albums"}
</Button>
</Link>
<Link href="/history">
<Button
variant={routes.isHistory ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "History" : undefined}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
>
<path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10Z" />
<path d="M12 8v4l4 2" />
</svg>
{!collapsed && "History"}
</Button>
</Link>
<Link href="/favorites">
<Button
variant={routes.isFavorites ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Favorites" : undefined}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
>
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
{!collapsed && "Favorites"}
</Button>
</Link>
</div>
</div>
</div>
<div className="px-3">
<div className="space-y-0">
<Link href="/settings">
<Button
variant={routes.isSettings ? "secondary" : "ghost"}
className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
title={collapsed ? "Settings" : undefined}
variant={routes.isHistory ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="History"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -338,16 +328,131 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-4 w-4", !collapsed && "mr-2")}
className="h-4 w-4"
>
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
<circle cx="12" cy="12" r="3" />
<path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10Z" />
<path d="M12 8v4l4 2" />
</svg>
{!collapsed && "Settings"}
</Button>
</Link>
{/* Favorite Albums Section */}
{favoriteAlbums.length > 0 && (
<>
<div className="border-t my-2"></div>
{favoriteAlbums.slice(0, 5).map((album) => (
<ContextMenu key={album.id}>
<ContextMenuTrigger asChild>
<Link href={`/album/${album.id}`}>
<Button
variant="ghost"
className="w-full justify-center px-2"
title={`${album.name} - ${album.artist}`}
>
{album.coverArt ? (
<Image
src={album.coverArt}
alt={album.name}
width={16}
height={16}
className="w-4 h-4 rounded"
/>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
)}
</Button>
</Link>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onRemoveFavoriteAlbum?.(album.id);
}}
className="text-destructive focus:text-destructive"
>
Remove from favorites
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
))}
</>
)}
{/* Playlists Section */}
{playlists.length > 0 && (
<>
<div className="border-t my-2"></div>
{playlists.slice(0, 5).map((playlist) => {
const playlistImageUrl = playlist.coverArt && api
? api.getCoverArtUrl(playlist.coverArt, 32)
: '/play.png'; // fallback to a music icon
return (
<Link key={playlist.id} href={`/playlist/${playlist.id}`}>
<Button
variant="ghost"
className="w-full justify-center px-2 h-10"
title={`${playlist.name} by ${playlist.owner} - ${playlist.songCount} songs`}
>
<div className="w-6 h-6 rounded-sm overflow-hidden">
<Image
src={playlistImageUrl}
alt={playlist.name}
width={24}
height={24}
className="w-full h-full object-cover"
/>
</div>
</Button>
</Link>
);
})}
</>
)}
</div>
</div>
</div>
<div className="px-3">
<div className="space-y-0">
<Link href="/settings">
<Button
variant={routes.isSettings ? "secondary" : "ghost"}
className={cn("w-full justify-center px-2")}
title="Settings"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
<circle cx="12" cy="12" r="3" />
</svg>
</Button>
</Link>
</div>
</div>
</div>
</div>
);

44
app/settings/page.tsx
View File

@@ -52,6 +52,7 @@ const SettingsPage = () => {
// Sidebar settings
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [sidebarVisible, setSidebarVisible] = useState(true);
// Initialize client-side state after hydration
useEffect(() => {
@@ -80,6 +81,13 @@ const SettingsPage = () => {
setSidebarCollapsed(savedSidebarCollapsed === 'true');
}
const savedSidebarVisible = localStorage.getItem('sidebar-visible');
if (savedSidebarVisible !== null) {
setSidebarVisible(savedSidebarVisible === 'true');
} else {
setSidebarVisible(true); // Default to visible
}
// Load Last.fm credentials
const storedCredentials = localStorage.getItem('lastfm-credentials');
if (storedCredentials) {
@@ -232,6 +240,24 @@ const SettingsPage = () => {
}
};
const handleSidebarVisibilityToggle = (visible: boolean) => {
setSidebarVisible(visible);
if (isClient) {
localStorage.setItem('sidebar-visible', visible.toString());
}
toast({
title: visible ? "Sidebar Shown" : "Sidebar Hidden",
description: visible
? "Sidebar is now visible"
: "Sidebar is now hidden",
});
// Trigger a custom event to notify the sidebar component
if (typeof window !== 'undefined') {
window.dispatchEvent(new CustomEvent('sidebar-visibility-toggle', { detail: { visible } }));
}
};
const handleLastFmAuth = () => {
if (!lastFmCredentials.apiKey) {
toast({
@@ -527,25 +553,25 @@ const SettingsPage = () => {
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label htmlFor="sidebar-mode">Sidebar Mode</Label>
<Label htmlFor="sidebar-visibility">Sidebar Visibility</Label>
<Select
value={sidebarCollapsed ? "collapsed" : "expanded"}
onValueChange={(value) => handleSidebarToggle(value === "collapsed")}
value={sidebarVisible ? "visible" : "hidden"}
onValueChange={(value) => handleSidebarVisibilityToggle(value === "visible")}
>
<SelectTrigger id="sidebar-mode">
<SelectTrigger id="sidebar-visibility">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="expanded">Expanded (with labels)</SelectItem>
<SelectItem value="collapsed">Collapsed (icons only)</SelectItem>
<SelectItem value="visible">Visible</SelectItem>
<SelectItem value="hidden">Hidden</SelectItem>
</SelectContent>
</Select>
</div>
<div className="text-sm text-muted-foreground space-y-2">
<p><strong>Expanded:</strong> Shows full navigation labels</p>
<p><strong>Collapsed:</strong> Shows only icons with tooltips</p>
<p className="mt-3"><strong>Note:</strong> You can also toggle the sidebar using the collapse button in the sidebar.</p>
<p><strong>Visible:</strong> Sidebar is always shown with icon navigation</p>
<p><strong>Hidden:</strong> Sidebar is completely hidden for maximum space</p>
<p className="mt-3"><strong>Note:</strong> The sidebar now shows only icons with tooltips on hover for a cleaner interface.</p>
</div>
</CardContent>
</Card>

79
hooks/use-favorite-albums.ts Normal file
View File

@@ -0,0 +1,79 @@
'use client';
import { useState, useEffect } from 'react';
import { useNavidrome } from '@/app/components/NavidromeContext';
export interface FavoriteAlbum {
id: string;
name: string;
artist: string;
coverArt?: string;
}
export function useFavoriteAlbums() {
const [favoriteAlbums, setFavoriteAlbums] = useState<FavoriteAlbum[]>([]);
const { api } = useNavidrome();
// Load favorite albums from localStorage
useEffect(() => {
const saved = localStorage.getItem('favorite-albums');
if (saved) {
try {
setFavoriteAlbums(JSON.parse(saved));
} catch (error) {
console.error('Failed to parse favorite albums:', error);
}
}
}, []);
// Save to localStorage when favorites change
useEffect(() => {
localStorage.setItem('favorite-albums', JSON.stringify(favoriteAlbums));
}, [favoriteAlbums]);
const addFavoriteAlbum = (album: FavoriteAlbum) => {
setFavoriteAlbums(prev => {
const exists = prev.some(fav => fav.id === album.id);
if (exists) return prev;
return [...prev, album].slice(0, 10); // Keep only 10 favorites
});
};
const removeFavoriteAlbum = (albumId: string) => {
setFavoriteAlbums(prev => prev.filter(fav => fav.id !== albumId));
};
const isFavoriteAlbum = (albumId: string) => {
return favoriteAlbums.some(fav => fav.id === albumId);
};
const toggleFavoriteAlbum = async (albumId: string) => {
if (!api) return;
try {
if (isFavoriteAlbum(albumId)) {
removeFavoriteAlbum(albumId);
} else {
// Fetch album details to add to favorites
const { album } = await api.getAlbum(albumId);
const favoriteAlbum: FavoriteAlbum = {
id: album.id,
name: album.name,
artist: album.artist,
coverArt: album.coverArt ? api.getCoverArtUrl(album.coverArt, 64) : undefined
};
addFavoriteAlbum(favoriteAlbum);
}
} catch (error) {
console.error('Failed to toggle favorite album:', error);
}
};
return {
favoriteAlbums,
addFavoriteAlbum,
removeFavoriteAlbum,
isFavoriteAlbum,
toggleFavoriteAlbum
};
}