Polish ayah UX with fixed player dock and progressive skeletons.

Compact header, sidebar surah list, closed notes, resume CTA, and larger ayah typography.

src/TafsirQuran.UI/Pages/HomePage.razor

@@ -1,12 +1,23 @@
 @page "/"
 @inject TafsirApiClient Api
+@inject PlayerSessionService Player
+@inject NavigationManager Nav
+@implements IDisposable
 
 <section class="home">
     <h1 class="sr-only">تفسیر قرآن</h1>
 
+    @if (Player.HasTrack)
+    {
+        <button type="button" class="resume-btn" @onclick="Resume">
+            <span class="resume-label">ادامه از آخرین مراجعه</span>
+            <span class="resume-meta">@Player.DisplayTitle</span>
+        </button>
+    }
+
     @if (loading)
     {
-        <p class="muted">در حال بارگذاری...</p>
+        <SkeletonBlock Variant="cards" Lines="2" />
     }
     else if (tafsirs.Count == 0)
     {
@@ -33,11 +44,14 @@
     private List<TafsirDto> tafsirs = [];
     private bool loading = true;
 
+    protected override void OnInitialized() => Player.Changed += OnPlayerChanged;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (!firstRender) return;
         try
         {
+            await Player.EnsureLoadedAsync();
             tafsirs = (await Api.GetTafsirsAsync()).ToList();
         }
         catch
@@ -50,4 +64,10 @@
             await InvokeAsync(StateHasChanged);
         }
     }
+
+    private void Resume() => Nav.NavigateTo(Player.ResumeHref);
+
+    private void OnPlayerChanged() => InvokeAsync(StateHasChanged);
+
+    public void Dispose() => Player.Changed -= OnPlayerChanged;
 }