feat: update NEXT_PUBLIC_COMMIT_SHA and improve component layouts for better styling and functionality

app/components/RootLayoutClient.tsx

@@ -18,7 +18,7 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
       <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
         {/* top right add the logo located in /icon-192.png here and the word mice */}
         <div className="absolute top-4 left-4 flex items-center space-x-2">
-          <Image src="/icon-192.png" alt="Logo" className="h-8 w-8" />
+          <Image src="/icon-192.png" alt="Logo" width={32} height={32} className="h-8 w-8" />
           <span className="text-xl font-semibold">mice | navidrome client</span>
         </div>
 

app/components/ihateserverside.tsx

@@ -25,7 +25,13 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
   return (
     <div className="hidden md:flex md:flex-col md:h-screen">
       {/* Top Menu */}
-      <div className="sticky top-0 z-10 bg-background border-b">
+      <div
+        className="sticky z-10 bg-background border-b"
+        style={{
+          left: 'env(titlebar-area-x, 0)',
+          top: 'env(titlebar-area-y, 0)',
+        }}
+      >
         <Menu
           toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
           isSidebarVisible={isSidebarVisible}

app/components/menu.tsx

@@ -90,8 +90,15 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
         </div>
           <div style={{ marginRight: '0.24rem' }} className="border-r-4 w-0"><p className="invisible">j</p></div>
 
-        <Menubar className="rounded-none border-b border-none px-0 lg:px-0 flex-1" style={{ minWidth: 0 }}>
-          <MenubarMenu>
+        <Menubar
+          className="rounded-none border-b border-none px-0 lg:px-0 flex-1"
+          style={{
+            minWidth: 0,
+            WebkitAppRegion: "drag"
+          } as any}
+        >
+        <div style={{ WebkitAppRegion: "no-drag" } as any} className="flex items-center gap-2">
+        <MenubarMenu>
         <MenubarTrigger className="font-bold">mice</MenubarTrigger>
         <MenubarContent>
           <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
@@ -249,6 +256,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarItem>
         </MenubarContent>
           </MenubarMenu>
+          </div>
         </Menubar>
         
       </div>

app/components/start-screen.tsx

@@ -137,7 +137,6 @@ export function LoginForm({
               {/* Theme Selection */}
               <div className="grid gap-3">
                 <span>
-                  <FaPalette className="w-5 h-5" />
                   <Label htmlFor="theme">Theme</Label>
                 </span>
                 <Select value={theme} onValueChange={setTheme}>