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

feat: update dialog content layout and styling for improved user experience

Browse Source
This commit is contained in:
angel
2025-06-25 20:19:38 -05:00
parent a17a8bff4e
commit 7bb477bb55
1 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/components/menu.tsx
View File

@@ -262,42 +262,69 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
</Menubar> </Menubar>
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-[425px]"> <DialogContent className="sm:max-w-[400px] p-0 overflow-hidden">
<DialogHeader> <div className=" px-6 pt-8 pb-6 flex flex-col items-center">
</DialogHeader> <Image
<div className="grid gap-4 py-4"> src="/icon-512.png"
<div className="flex items-center gap-4"> alt="music"
<Image width={80}
src="/icon-512.png" height={80}
alt="music" className="rounded-2xl shadow-md mb-4"
width={100} />
height={100} <h1 className="text-3xl font-semibold mb-1 tracking-tight">mice</h1>
/> {/* <span className="text-xs text-muted-foreground mb-2">Version 1.0.0</span> */}
<h1 className="text-5xl font-bold">mice</h1> <p className="text-sm text-muted-foreground mb-4 text-center">
</div> A Navidrome client built with Next.js and Shadcn/UI.
<p className="text-sm text-muted-foreground pt-0"> </p>
A Navidrome client built with Next.js and Shadcn/UI. <Separator className="my-2" />
</p> <div className="w-full flex flex-col gap-2 mb-2">
<Separator /> <div className="flex items-center justify-between">
<p> <span className="text-xs text-muted-foreground">Server Status</span>
built by <a href="https://github.com/sillyangel" target="_blank" rel="noreferrer" className="underline">sillyangel</a> <span className="flex items-center gap-1">
</p> <span className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"} `} style={{ marginTop: "-2px" }} />
<div className="flex flex-col items-center gap-1 text-xs w-full mt-2"> <p className={isConnected ? "text-green-600" : "text-red-500"}>{isConnected ? "Connected" : "Not connected"}</p>
<div className="flex items-center gap-2"> </span>
<span className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"}`} /> </div>
<span> <div className="flex items-center justify-between">
Navidrome: <span className={isConnected ? "text-green-600" : "text-red-500"}>{isConnected ? "Connected" : "Not connected"}</span> <span className="text-xs text-muted-foreground">Navidrome URL</span>
</span> <span className="text-xs truncate max-w-[160px] text-right">
</div> {typeof window !== "undefined"
<div className="truncate max-w-[220px] text-center text-muted-foreground"> ? (() => {
URL: {typeof window !== "undefined" const config = localStorage.getItem("navidrome-config");
? localStorage.getItem("navidromeUrl") || <span className="italic text-gray-400">Not set</span> if (config) {
: <span className="italic text-gray-400">Not available</span>} try {
</div> const { serverUrl } = JSON.parse(config);
</div> if (serverUrl) {
</div> // Remove protocol (http:// or https://) and trailing slash
</DialogContent> const prettyUrl = serverUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
</Dialog> return prettyUrl;
}
return <span className="italic text-gray-400">Not set</span>;
} catch {
return <span className="italic text-gray-400">Invalid config</span>;
}
}
return <span className="italic text-gray-400">Not set</span>;
})()
: <span className="italic text-gray-400">Not available</span>}
</span>
</div>
</div>
<Separator className="my-2" />
<div className="flex flex-col items-center gap-1 mt-2">
<span className="text-xs text-muted-foreground">Copyright © {new Date().getFullYear()} <a
href="https://github.com/sillyangel"
target="_blank"
rel="noreferrer"
className="underline"
>
sillyangel
</a></span>
</div>
</div>
</DialogContent>
</Dialog>
</> </>
) )
} }