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

style: enhance layout and typography for Browse, Favorites, and Settings pages

Browse Source
This commit is contained in:
angel
2025-07-03 16:01:06 +00:00
committed by GitHub
parent 7b622cb1ec
commit 54a268f485
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/browse/page.tsx
View File

@@ -91,13 +91,18 @@ export default function BrowsePage() {
}
return (
<div className="h-full px-4 py-6 lg:px-8">
<>
<Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
<TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
<div className="container mx-auto p-6 pb-24 max-w-none">
<div className="space-y-6">
<div className="text-left">
<h1 className="text-3xl font-semibold tracking-tight">Browse</h1>
<p className="text-muted-foreground">Explore your complete music library</p>
</div>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
<TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
<div className="flex items-center justify-between">
<div className="space-y-1">
<p className="text-2xl font-semibold tracking-tight">
Artists
</p>
@@ -178,7 +183,7 @@ export default function BrowsePage() {
</div>
</TabsContent>
</Tabs>
</>
</div>
</div>
);
}

17
app/favorites/page.tsx
View File

@@ -118,16 +118,24 @@ const FavoritesPage = () => {
if (!isConnected) {
return (
<div className="container mx-auto p-6">
<div className="text-center">
<p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
<div className="container mx-auto p-6 pb-24 max-w-none">
<div className="space-y-6">
<div className="text-left">
<h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
<p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
</div>
</div>
</div>
);
}
return (
<div className="container mx-auto p-6 pb-24">
<div className="container mx-auto p-6 pb-24 max-w-none">
<div className="space-y-6">
<div className="text-left">
<h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
<p className="text-muted-foreground">Your starred albums, songs, and artists</p>
</div>
<div className="space-y-6">
<div className="flex items-center gap-3">
<div>
@@ -257,6 +265,7 @@ const FavoritesPage = () => {
)}
</TabsContent>
</Tabs>
</div>
</div>
</div>
);

23
app/settings/page.tsx
View File

@@ -303,9 +303,9 @@ const SettingsPage = () => {
};
return (
<div className="container mx-auto p-6 pb-24 max-w-2xl">
<div className="container mx-auto p-6 pb-24 max-w-none">
{!isClient ? (
<div className="space-y-6">
<div className="space-y-6 max-w-2xl mx-auto">
<div>
<h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
<p className="text-muted-foreground">Loading...</p>
@@ -313,13 +313,15 @@ const SettingsPage = () => {
</div>
) : (
<div className="space-y-6">
<div>
<div className="text-left">
<h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
<p className="text-muted-foreground">Customize your music experience</p>
</div>
<div className="columns-1 md:columns-2 xl:columns-3 gap-6 space-y-0">
{!hasEnvConfig && (
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaServer className="w-5 h-5" />
@@ -408,7 +410,7 @@ const SettingsPage = () => {
)}
{hasEnvConfig && (
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaServer className="w-5 h-5" />
@@ -435,7 +437,7 @@ const SettingsPage = () => {
</Card>
)}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaLastfm className="w-5 h-5" />
@@ -513,7 +515,7 @@ const SettingsPage = () => {
</CardContent>
</Card> */}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Settings className="w-5 h-5" />
@@ -548,7 +550,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaLastfm className="w-5 h-5" />
@@ -643,7 +645,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle>Appearance</CardTitle>
<CardDescription>
@@ -692,7 +694,7 @@ const SettingsPage = () => {
</Card>
{/* Theme Preview */}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle>Preview</CardTitle>
<CardDescription>
@@ -721,6 +723,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
</div>
</div>
)}
</div>
);