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

feat: enhance mobile experience with responsive audio player and navigation improvements

Browse Source
This commit is contained in:
angel
2025-07-11 20:47:56 +00:00
committed by GitHub
parent d8a853401f
commit 14d5036e8b
5 changed files with 508 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/components/ihateserverside.tsx
View File

@@ -96,48 +96,72 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
</div>
);
}
return (
<div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
{/* Top Menu */}
<div
className="sticky z-10 bg-background border-b w-full"
style={{
left: 'env(titlebar-area-x, 0)',
top: 'env(titlebar-area-y, 0)',
}}
>
<Menu
toggleSidebar={toggleSidebarVisibility}
isSidebarVisible={isSidebarVisible}
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
isStatusBarVisible={isStatusBarVisible}
/>
</div>
{/* Main Content Area */}
<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"
visible={isSidebarVisible}
favoriteAlbums={favoriteAlbums}
onRemoveFavoriteAlbum={removeFavoriteAlbum}
/>
</div>
)}
<div className="flex-1 overflow-y-auto min-w-0">
<div>{children}</div>
</div>
<>
{/* Mobile Layout */}
<div className="flex md:hidden flex-col h-screen w-screen overflow-hidden">
{/* Top Menu */}
<div className="shrink-0 bg-background border-b w-full">
<Menu
toggleSidebar={toggleSidebarVisibility}
isSidebarVisible={isSidebarVisible}
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
isStatusBarVisible={isStatusBarVisible}
/>
</div>
{/* Floating Audio Player */}
{isStatusBarVisible && (
<AudioPlayer />
)}
<Toaster />
</div>
{/* Main Content Area with bottom padding for audio player */}
<div className="flex-1 overflow-y-auto pb-24">
<div>{children}</div>
</div>
{/* Mobile Audio Player - always visible on mobile */}
<Toaster />
</div>
{/* Desktop Layout */}
<div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
{/* Top Menu */}
<div
className="sticky z-10 bg-background border-b w-full"
style={{
left: 'env(titlebar-area-x, 0)',
top: 'env(titlebar-area-y, 0)',
}}
>
<Menu
toggleSidebar={toggleSidebarVisibility}
isSidebarVisible={isSidebarVisible}
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
isStatusBarVisible={isStatusBarVisible}
/>
</div>
{/* Main Content Area */}
<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"
visible={isSidebarVisible}
favoriteAlbums={favoriteAlbums}
onRemoveFavoriteAlbum={removeFavoriteAlbum}
/>
</div>
)}
<div className="flex-1 overflow-y-auto min-w-0">
<div>{children}</div>
</div>
</div>
<Toaster />
</div>
{/* Single Shared Audio Player - shows on all layouts */}
<AudioPlayer />
</>
);
};