Front End

- MudBlazor Theme Manager tryout
 - Navigation bar rework
 - Icons and styles rework
 - Track Gallery & Card layout redesign for SPA
 - Track Player bottom bar

DeepDrftWeb.Client/Controls/AppNavLink.razor

@@ -0,0 +1,12 @@
+<MudStack Row AlignItems="AlignItems.Center" Spacing="3" Class="mx-3">
+    @if (Icon != null)
+    {
+        <MudIcon Icon="@Icon" />
+    }
+    <NavLink href="@Href" Match="@(Match ?? NavLinkMatch.Prefix)">
+        @if (ChildContent != null)
+        {
+            @ChildContent
+        }
+    </NavLink>
+</MudStack>

DeepDrftWeb.Client/Controls/AppNavLink.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class AppNavLink : ComponentBase
+{
+    [Parameter] public required string Href { get; set; }
+    [Parameter] public NavLinkMatch? Match { get; set; }
+    [Parameter] public string? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

DeepDrftWeb.Client/Controls/AppNavLink.razor.css

@@ -0,0 +1 @@
+

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor

@@ -0,0 +1,51 @@
+<MudContainer>
+    <MudPaper Class="bottom-bar" Square="true">
+        <MudStack Row AlignItems="AlignItems.Center" Spacing="4" Class="px-4 py-2">
+            <MudStack Class="pb-2">
+                <MudStack Row AlignItems="AlignItems.Center">
+                    <MudIconButton Icon="@GetPlayIcon()"
+                                   Color="Color.Primary"
+                                   Size="Size.Large"
+                                   OnClick="@TogglePlayPause"
+                                   Disabled="!IsLoaded"/>
+                    @if (IsLoaded)
+                    {
+                        <MudIconButton Icon="Icons.Material.Filled.Stop"
+                                       Color="Color.Secondary"
+                                       OnClick="@Stop"
+                                       Disabled="!IsLoaded"/>    
+                    }
+                </MudStack>
+                <MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
+                    @FormatTime(CurrentTime) / @FormatTime(Duration)
+                </MudText>
+            </MudStack>
+
+            <MudSlider T="double"
+                       Min="0"
+                       Max="@Duration"
+                       Step="0.1"
+                       Value="@CurrentTime"
+                       ValueChanged="OnSeek"
+                       Disabled="!IsLoaded"
+                       Style="flex: 1; margin-right: 8px;"/>
+
+            <div style="display: flex; align-items: center; width: 140px;">
+                <MudIcon Icon="@GetVolumeIcon()" Style="margin-right: 4px;"/>
+                <MudSlider T="double"
+                           Min="0"
+                           Max="1"
+                           Step="0.01"
+                           Value="@Volume"
+                           ValueChanged="OnVolumeChange"
+                           Style="flex: 1;"/>
+            </div>
+        </MudStack>
+        @if (!string.IsNullOrEmpty(ErrorMessage))
+        {
+            <MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError">
+                @ErrorMessage
+            </MudAlert>
+        }
+    </MudPaper>
+</MudContainer>

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.cs

@@ -0,0 +1,257 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftWeb.Client.Services;
+using MudBlazor;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
+{
+    [Parameter] public string? AudioUrl { get; set; }
+    [Parameter] public bool ShowLoadProgress { get; set; } = true;
+    [Parameter] public EventCallback<double> OnProgressChanged { get; set; }
+    [Parameter] public EventCallback OnPlaybackEnded { get; set; }
+
+    [Inject] public required AudioInteropService AudioInterop { get; set; }
+    
+    private string PlayerId = Guid.NewGuid().ToString();
+    private bool IsLoaded = false;
+    private bool IsPlaying = false;
+    private bool IsPaused = false;
+    private double CurrentTime = 0;
+    private double Duration = 0;
+    private double Volume = 0.8;
+    private double LoadProgress = 0;
+    private string? ErrorMessage;
+    private Timer? progressTimer;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var result = await AudioInterop.CreatePlayerAsync(PlayerId);
+        if (!result.Success)
+        {
+            ErrorMessage = $"Failed to initialize audio player: {result.Error}";
+            return;
+        }
+
+        await AudioInterop.SetOnProgressCallbackAsync(PlayerId, OnProgress);
+        await AudioInterop.SetOnEndCallbackAsync(PlayerId, OnPlaybackEnd);
+        await AudioInterop.SetOnLoadProgressCallbackAsync(PlayerId, OnLoadProgress);
+        
+        await AudioInterop.SetVolumeAsync(PlayerId, Volume);
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (IsLoaded) return;
+
+        try
+        {
+            AudioLoadResult? loadResult = null;
+
+            if (!string.IsNullOrEmpty(AudioUrl))
+            {
+                loadResult = await AudioInterop.LoadAudioFromUrlAsync(PlayerId, AudioUrl);
+            }
+
+            if (loadResult?.Success == true)
+            {
+                IsLoaded = true;
+                Duration = loadResult.Duration;
+                LoadProgress = loadResult.LoadProgress;
+                ErrorMessage = null;
+                StateHasChanged();
+            }
+            else
+            {
+                ErrorMessage = $"Failed to load audio: {loadResult?.Error ?? "No audio source provided"}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error loading audio: {ex.Message}";
+        }
+    }
+
+    private async Task TogglePlayPause()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            AudioOperationResult result;
+
+            if (IsPlaying)
+            {
+                result = await AudioInterop.PauseAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = false;
+                    IsPaused = true;
+                }
+            }
+            else
+            {
+                result = await AudioInterop.PlayAsync(PlayerId);
+                if (result.Success)
+                {
+                    IsPlaying = true;
+                    IsPaused = false;
+                }
+            }
+
+            if (!result.Success)
+            {
+                ErrorMessage = $"Playback error: {result.Error}";
+            }
+            else
+            {
+                ErrorMessage = null;
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error controlling playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task Stop()
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.StopAsync(PlayerId);
+            if (result.Success)
+            {
+                IsPlaying = false;
+                IsPaused = false;
+                CurrentTime = 0;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Stop error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error stopping playback: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnSeek(double position)
+    {
+        if (!IsLoaded) return;
+
+        try
+        {
+            var result = await AudioInterop.SeekAsync(PlayerId, position);
+            if (result.Success)
+            {
+                CurrentTime = position;
+                ErrorMessage = null;
+            }
+            else
+            {
+                ErrorMessage = $"Seek error: {result.Error}";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Error seeking: {ex.Message}";
+        }
+
+        StateHasChanged();
+    }
+
+    private async Task OnVolumeChange(double volume)
+    {
+        Volume = volume;
+
+        if (IsLoaded)
+        {
+            try
+            {
+                var result = await AudioInterop.SetVolumeAsync(PlayerId, volume);
+                if (!result.Success)
+                {
+                    ErrorMessage = $"Volume error: {result.Error}";
+                    StateHasChanged();
+                }
+            }
+            catch (Exception ex)
+            {
+                ErrorMessage = $"Error setting volume: {ex.Message}";
+                StateHasChanged();
+            }
+        }
+    }
+
+    private async Task OnProgress(double currentTime)
+    {
+        CurrentTime = currentTime;
+        if (OnProgressChanged.HasDelegate)
+        {
+            await OnProgressChanged.InvokeAsync(currentTime);
+        }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnPlaybackEnd()
+    {
+        IsPlaying = false;
+        IsPaused = false;
+        CurrentTime = 0;
+        
+        if (OnPlaybackEnded.HasDelegate)
+        {
+            await OnPlaybackEnded.InvokeAsync();
+        }
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnLoadProgress(double progress)
+    {
+        LoadProgress = progress;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private string GetPlayIcon()
+    {
+        return IsPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
+    }
+
+    private string GetVolumeIcon()
+    {
+        if (Volume == 0) return Icons.Material.Filled.VolumeOff;
+        if (Volume < 0.5) return Icons.Material.Filled.VolumeDown;
+        return Icons.Material.Filled.VolumeUp;
+    }
+
+    private static string FormatTime(double seconds)
+    {
+        var timeSpan = TimeSpan.FromSeconds(seconds);
+        return timeSpan.ToString(timeSpan.TotalHours >= 1 ? @"h\:mm\:ss" : @"m\:ss");
+    }
+
+    private void ClearError()
+    {
+        ErrorMessage = null;
+        StateHasChanged();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        progressTimer?.Dispose();
+        
+        if (IsLoaded)
+        {
+            await AudioInterop.DisposePlayerAsync(PlayerId);
+        }
+    }
+}

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor.css

@@ -0,0 +1,10 @@
+.bottom-bar {
+    justify-self: center; 
+    max-width: 1800px; 
+    position: fixed;
+    bottom: 0;
+    left: var(--mud-drawer-width-left);
+    right: 0;
+    margin: 0 1.5rem 1.5rem 1.5rem;
+    z-index: 1000;
+}

DeepDrftWeb.Client/Controls/TrackCard.razor

@@ -1,10 +1,10 @@
 <MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
          Elevation="4">
     
-    @if (!string.IsNullOrEmpty(Track?.ImagePath))
+    @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
         <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
-                    background-image: url('@Track.ImagePath'); 
+                    background-image: url('@TrackModel.ImagePath'); 
                     background-size: cover; 
                     background-position: center;
                     filter: brightness(0.7);">
@@ -25,45 +25,45 @@
                      Color="Color.Surface"
                      Style="margin-bottom: 4px;"
                      Class="text-truncate">
-                @Track?.TrackName
+                @TrackModel?.TrackName
             </MudText>
             
             <MudText Typo="Typo.subtitle1" 
                      Color="Color.Surface"
                      Style="margin-bottom: 8px;"
                      Class="text-truncate">
-                @Track?.Artist
+                @TrackModel?.Artist
             </MudText>
         </div>
         
         <div Style="margin: 8px 0;">
-            @if (!string.IsNullOrEmpty(Track?.Album))
+            @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption" 
                          Color="Color.Surface"
                          Class="text-truncate">
-                    @Track.Album
+                    @TrackModel.Album
                 </MudText>
             }
             
-            @if (!string.IsNullOrEmpty(Track?.Genre))
+            @if (!string.IsNullOrEmpty(TrackModel?.Genre))
             {
                 <MudChip T="string" 
                          Size="Size.Small" 
                          Variant="Variant.Filled" 
                          Color="Color.Primary"
                          Style="opacity: 0.9; margin-top: 4px;">
-                    @Track.Genre
+                    @TrackModel.Genre
                 </MudChip>
             }
         </div>
         
         <div Style="display: flex; justify-content: space-between; align-items: center;">
-            @if (Track?.ReleaseDate.HasValue == true)
+            @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption" 
                          Color="Color.Surface">
-                    @Track.ReleaseDate.Value.Year
+                    @TrackModel.ReleaseDate.Value.Year
                 </MudText>
             }
             else
@@ -73,9 +73,8 @@
             
             <MudFab Color="Color.Primary" 
                     Size="Size.Medium"
-                    StartIcon="@_playPauseIcon"
-                    OnClick="@HandlePlayClick"/>
-            <audio class="d-none" src="@_audioStream" autoplay></audio>
+                    StartIcon="@PlayPauseIcon"
+                    OnClick="@PlayClick"/>
         </div>
         
     </MudCardContent>

DeepDrftWeb.Client/Controls/TrackCard.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
+using MudBlazor;
+
+namespace DeepDrftWeb.Client.Controls;
+
+public partial class TrackCard : ComponentBase
+{
+    [Parameter] public required TrackEntity TrackModel { get; set; }
+    [Parameter] public EventCallback<TrackEntity> OnPlay { get; set; }
+    
+    private bool _isPlaying = false;
+    private string PlayPauseIcon => _isPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
+
+    private async Task PlayClick()
+    {
+        if (!_isPlaying)
+        {
+            _isPlaying = true;
+            await OnPlay.InvokeAsync();
+        }
+    }
+}

DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs

@@ -1,29 +0,0 @@
-using Microsoft.AspNetCore.Components;
-using DeepDrftModels.Entities;
-using DeepDrftWeb.Client.Clients;
-using MudBlazor;
-
-namespace DeepDrftWeb.Client.Controls;
-
-public partial class TrackPlayer : ComponentBase
-{
-    [Parameter] public required TrackEntity Track { get; set; }
-    [Inject] public required TrackMediaClient Client { get; set; }
-    
-    private Stream? _audioStream = null;
-    private bool _isPlaying = false;
-    private string _playPauseIcon => _isPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow;
-    private async Task HandlePlayClick()
-    {
-        if (_audioStream == null)
-        {
-            _audioStream = await Client.GetTrackMedia(Track.EntryKey);
-            PlayAudio();
-        }
-    }
-
-    private void PlayAudio()
-    {
-        throw new NotImplementedException();
-    }
-}

DeepDrftWeb.Client/Controls/TracksGallery.razor

@@ -1,10 +1,10 @@
-<MudContainer MaxWidth="MaxWidth.False" Style="padding: 16px;">
+<MudContainer MaxWidth="MaxWidth.False" Class="tracks-gallery-container">
     <MudGrid Spacing="3" Justify="Justify.Center">
         @foreach (var track in Tracks)
         {
             <MudItem xs="12" sm="6" md="4" lg="2" xl="2">
                 <div Style="display: flex; justify-content: center;">
-                    <TrackPlayer Track="@track" />
+                    <TrackCard TrackModel="@track" OnPlay="@HandlePlayClick"/>
                 </div>
             </MudItem>
         }

DeepDrftWeb.Client/Controls/TracksGallery.razor.cs

@@ -1,9 +1,28 @@
 using Microsoft.AspNetCore.Components;
 using DeepDrftModels.Entities;
+using DeepDrftWeb.Client.Clients;
 
 namespace DeepDrftWeb.Client.Controls;
 
 public partial class TracksGallery : ComponentBase
 {
+    private Stream? _audioStream = null;
     [Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = Enumerable.Empty<TrackEntity>();
+    
+    [Inject] public required TrackMediaClient Client { get; set; }
+    
+    private async Task HandlePlayClick(TrackEntity track)
+    {
+        if (_audioStream == null)
+        {
+            _audioStream = await Client.GetTrackMedia(track.EntryKey);
+            PlayAudio();
+        }
+    }
+
+    private void PlayAudio()
+    {
+        throw new NotImplementedException();
+    }
+    
 }

DeepDrftWeb.Client/Controls/TracksGallery.razor.css

@@ -0,0 +1,5 @@
+.tracks-gallery-container {
+    padding: 16px;
+    height: 100%;
+    box-sizing: border-box;
+}

DeepDrftWeb.Client/DeepDrftWeb.Client.csproj

@@ -13,10 +13,17 @@
     <PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.3.0" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="9.*" />
     <PackageReference Include="MudBlazor" Version="8.*" />
+    <PackageReference Include="MudBlazor.ThemeManager" Version="3.0.0" />
   </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Layout\NavMenu.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>

DeepDrftWeb.Client/Layout/MainLayout.razor

@@ -1,21 +1,22 @@
 @inherits LayoutComponentBase
 
-<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
+<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
 <MudLayout>
-    <MudAppBar Elevation="1">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
-        <MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
-        <MudSpacer />
-        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
-        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
-    </MudAppBar>
-    <MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+    <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
+    <MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
+    <MudAppBar Elevation="_themeManager.AppBarElevation">
+        <MudAvatar Class="mr-2">
+            <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
+        </MudAvatar>
         <NavMenu />
-    </MudDrawer>
-    <MudMainContent Class="pt-16 pa-4">
+        <MudSpacer/>
+        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
+        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
+    </MudAppBar>
+    <MudMainContent Class="pt-16 pa-4" Style="min-height: 100vh">
         @Body
     </MudMainContent>
 </MudLayout>
@@ -30,18 +31,21 @@
 @code {
     private bool _drawerOpen = true;
     private bool _isDarkMode = true;
-    private MudTheme? _theme = null;
+    // private MudTheme? _theme = null;
 
     protected override void OnInitialized()
     {
         base.OnInitialized();
-
-        _theme = new()
+        _themeManager = new ThemeManagerTheme
         {
-            PaletteLight = _lightPalette,
-            PaletteDark = _darkPalette,
-            LayoutProperties = new LayoutProperties()
+            Theme =
+            {
+                PaletteDark = _darkPalette,
+                PaletteLight = _lightPalette
+            }
         };
+
+        StateHasChanged();
     }
 
     private void DrawerToggle()
@@ -53,6 +57,20 @@
     {
         _isDarkMode = !_isDarkMode;
     }
+    
+    private ThemeManagerTheme _themeManager;
+    public bool _themeManagerOpen = false;
+
+    void OpenThemeManager(bool value)
+    {
+        _themeManagerOpen = value;
+    }
+
+    void UpdateTheme(ThemeManagerTheme value)
+    {
+        _themeManager = value;
+        StateHasChanged();
+    }
 
     private readonly PaletteLight _lightPalette = new()
     {

DeepDrftWeb.Client/Layout/NavMenu.razor

@@ -1,8 +1,8 @@
-
-<MudNavMenu>
-    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
-    <MudNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.BrowseGallery">Track Gallery</MudNavLink>
-    <MudNavLink Href="/audio-example" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Audio Test</MudNavLink>
-</MudNavMenu>
+@using DeepDrftWeb.Client.Controls
+
+<AppNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</AppNavLink>
+<AppNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.BrowseGallery">Track Gallery</AppNavLink>
+<AppNavLink Href="/audio-example" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Audio Test</AppNavLink>
+
 
 

DeepDrftWeb.Client/Pages/TracksView.razor

@@ -1,46 +1,37 @@
 @page "/tracks"
-@using DeepDrftModels.DTOs
-@using DeepDrftModels.Entities
+
 @using DeepDrftWeb.Client.Controls
 
-<h3>Track Gallery</h3>
-    
-@if (ViewModel.Page != null)
-{
-    @* <MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm"> *@
-    @*     <HeaderContent> *@
-    @*         <MudTh>Name</MudTh> *@
-    @*         <MudTh>Artist</MudTh> *@
-    @*         <MudTh>Album</MudTh> *@
-    @*         <MudTh>Genre</MudTh> *@
-    @*         <MudTh>Released</MudTh> *@
-    @*         <MudTh>Actions</MudTh> *@
-    @*     </HeaderContent> *@
-    @*     <RowTemplate> *@
-    @*         <MudTd DataLabel="Name">@context.TrackName</MudTd> *@
-    @*         <MudTd DataLabel="Artist">@context.Artist</MudTd> *@
-    @*         <MudTd DataLabel="Album">@context.Album</MudTd> *@
-    @*         <MudTd DataLabel="Genre">@context.Genre</MudTd> *@
-    @*         <MudTd DataLabel="Released">@context.ReleaseDate</MudTd> *@
-    @*         <MudTd DataLabel="Actions"> *@
-    @*             <MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton> *@
-    @*         </MudTd> *@
-    @*     </RowTemplate> *@
-    @* </MudTable> *@
-    
-    <TracksGallery Tracks="@ViewModel.Page.Items" />
-    
-    <MudContainer Class="d-flex justify-center my-4 py-4">
-        <MudPagination Count="@ViewModel.Page.TotalPages" 
-                       Selected="@ViewModel.Page.Page" 
-                       SelectedChanged="i => SetPage(i)" 
-                       BoundaryCount="2" 
-                       MiddleCount="3"/>
-    </MudContainer>
-}
-else
-{
-    <MudSkeleton Height="650px" Class="pa-2 ma-2"/>
-    <MudSkeleton Height="80px"/>
-    <MudSpacer />
-}
+<PageTitle>DeepDrft Track Gallery</PageTitle>
+
+<div class="tracks-page-wrapper">
+    <div class="tracks-view-container">
+        @if (ViewModel.Page != null)
+        {
+            <div class="tracks-content">
+                <TracksGallery Tracks="@ViewModel.Page.Items"/>
+            </div>
+
+            <div class="tracks-pagination">
+                <MudContainer Class="d-flex justify-center py-2">
+                    <MudPagination Count="@ViewModel.Page.TotalPages"
+                                   Selected="@ViewModel.Page.Page"
+                                   SelectedChanged="i => SetPage(i)"
+                                   BoundaryCount="2"
+                                   MiddleCount="3"/>
+                </MudContainer>
+            </div>
+        }
+        else
+        {
+            <div class="tracks-content">
+                <MudSkeleton Height="100%" Class="pa-2 ma-2"/>
+            </div>
+            <div class="tracks-pagination">
+                <MudSkeleton Height="60px"/>
+            </div>
+        }
+    </div>
+
+    <AudioPlayerBar AudioUrl=""></AudioPlayerBar>
+</div>

DeepDrftWeb.Client/Pages/TracksView.razor.css

@@ -0,0 +1,28 @@
+.tracks-page-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: calc(100dvh - 64px); /* Subtract app bar height (pt-16 = 4rem = 64px) */
+    margin: -16px; /* Counteract MudMainContent padding */
+    padding-top: 16px; /* Restore top padding for spacing */
+}
+
+.tracks-view-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    padding: 0 16px; /* Horizontal padding only */
+}
+
+.tracks-content {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+    min-height: 0;
+    padding-top: 16px;
+}
+
+.tracks-pagination {
+    flex: 0 0 auto;
+    padding: 8px 0;
+}

DeepDrftWeb.Client/_Imports.razor

@@ -8,3 +8,4 @@
 @using Microsoft.JSInterop
 @using MudBlazor
 @using MudBlazor.Services
+@using MudBlazor.ThemeManager

DeepDrftWeb/Components/App.razor

@@ -4,11 +4,15 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="/" />  
+    <base href="/" />
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
     <link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
+    <link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
     <ImportMap />
-    <link rel="icon" type="image/ico" href="favicon.ico" />
+    <link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
     <HeadOutlet @rendermode="InteractiveAuto" />
 </head>