feat: add commit SHA handling for development environment and update menu layout

.env.example

@@ -4,6 +4,7 @@ NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
 NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
 NEXT_PUBLIC_POSTHOG_KEY=KEY
 NEXT_PUBLIC_POSTHOG_HOST=HOSTURL
+# NEXT_PUBLIC_COMMIT_SHA=$(git rev-parse --short HEAD)
 # Example for external server:
 # NEXT_PUBLIC_NAVIDROME_URL=https://your-navidrome-server.com
 # NEXT_PUBLIC_NAVIDROME_USERNAME=your_username

.env.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_COMMIT_SHA=4b195af

app/components/menu.tsx

@@ -266,25 +266,34 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
             <DialogHeader>
             </DialogHeader>
             <div className="grid gap-4 py-4">
-              <div>
+              <div className="flex items-center gap-4">
                 <Image
-                  src="/splash.png"
+                  src="/icon-512.png"
                   alt="music"
-                  width={400}
-                  height={400}
+                  width={100}
+                  height={100}
                 />
+                <h1 className="text-5xl font-bold">mice</h1>
               </div>
+                <p className="text-sm text-muted-foreground pt-0">
+                  A Navidrome client built with Next.js and Shadcn/UI.
+                </p>
               <Separator />
                 <p>
-                a music player that doesn&apos;t (yet) play music
+                built by <a href="https://github.com/sillyangel" target="_blank" rel="noreferrer" className="underline">sillyangel</a>
                 </p>
-                <div className="flex space-x-4">
-                <a href="https://github.com/sillyangel/project-still" target="_blank" rel="noreferrer">
-                  <Github />
-                </a>
-                <a href="mailto:angel@sillyangel.xyz">
-                  <Mail />
-                </a>
+                <div className="flex flex-col items-center gap-1 text-xs w-full mt-2">
+                  <div className="flex items-center gap-2">
+                  <span className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"}`} />
+                  <span>
+                    Navidrome: <span className={isConnected ? "text-green-600" : "text-red-500"}>{isConnected ? "Connected" : "Not connected"}</span>
+                  </span>
+                  </div>
+                  <div className="truncate max-w-[220px] text-center text-muted-foreground">
+                  URL: {typeof window !== "undefined"
+                    ? localStorage.getItem("navidromeUrl") || <span className="italic text-gray-400">Not set</span>
+                    : <span className="italic text-gray-400">Not available</span>}
+                  </div>
                 </div>
             </div>
           </DialogContent>

app/layout.tsx

@@ -3,10 +3,14 @@ import localFont from "next/font/local";
 import "./globals.css";
 import RootLayoutClient from "./components/RootLayoutClient";
 
+// Get the short commit hash from env (set in dev via .env or prebuild script)
+const isDev = process.env.NODE_ENV === 'development';
+const shortCommit = isDev ? process.env.NEXT_PUBLIC_COMMIT_SHA || '' : '';
+
 export const metadata = {
   title: {
-    template: 'mice | %s',
-    default: 'mice',
+    template: isDev && shortCommit ? `mice (dev: ${shortCommit}) | %s` : 'mice | %s',
+    default: isDev && shortCommit ? `mice (dev: ${shortCommit})` : 'mice',
   },
   description: 'a very awesome music streaming service',
   robots: {

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
+    "predev": "echo NEXT_PUBLIC_COMMIT_SHA=$(git rev-parse --short HEAD) > .env.local",
     "dev": "next dev -p 40624",
     "build": "next build",
     "start": "next start -p 40624",