feat: implement epub service, navigation service, and global error boundary with updated reader UI layouts

2026-04-25 16:16:36 +02:00
parent f3e94c4f42
commit 59074a05a0
23 changed files with 726 additions and 157 deletions
@@ -1,16 +1,18 @@
 .intelligence-toolbar {
    width: 50px;
    height: 100%;
-    background: #1a1a1a;
-    border-right: 1px solid rgba(255, 255, 255, 0.05);
+    background: #080808;
+    border-right: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    padding: 1rem 0;
+    padding: 1.5rem 0;
    align-items: center;
    z-index: 20;
+    box-shadow: inset -2px 0 10px rgba(0,0,0,0.5);
 }

+
 .toolbar-top, .toolbar-middle, .toolbar-bottom {
    display: flex;
    flex-direction: column;
@@ -20,29 +22,46 @@
 .toolbar-item {
    background: none;
    border: none;
-    color: #666;
+    color: #444;
    cursor: pointer;
-    padding: 8px;
+    width: 34px;
+    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
-    transition: all 0.2s ease;
-    border-radius: 4px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 8px;
+    position: relative;
 }

 .toolbar-item:hover {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.05);
+    color: var(--nexus-neon);
+    background: rgba(0, 255, 153, 0.05);
 }

 .toolbar-item.active {
    color: var(--nexus-neon);
+    background: rgba(0, 255, 153, 0.08);
+}
+
+.toolbar-item.active::after {
+    content: '';
+    position: absolute;
+    right: -2px;
+    top: 25%;
+    height: 50%;
+    width: 3px;
+    background: var(--nexus-neon);
+    box-shadow: 0 0 8px var(--nexus-neon);
+    border-radius: 2px;
 }

 .toolbar-item.focus-active {
-    filter: drop-shadow(0 0 5px var(--nexus-neon));
+    color: var(--nexus-neon);
+    filter: drop-shadow(0 0 8px var(--nexus-neon));
 }

+
 .rotate-180 {
    transform: rotate(180deg);
 }
@@ -7,13 +7,14 @@
@inject IJSRuntime JS
@inject IThemeService ThemeService
@inject IFocusModeService FocusMode
+@inject IReaderNavigationService NavigationService

-<div class="reader-canvas theme-light">
-
-
+<div class="reader-canvas @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
    @if (ViewModel == null)
    {
-        <NexusTypography Variant="NexusTypography.TypographyVariant.UI">@StatusMessage</NexusTypography>
+        <div class="loading-state">
+            <NexusTypography Variant="NexusTypography.TypographyVariant.UI">@StatusMessage</NexusTypography>
+        </div>
    }
    else
    {
@@ -23,7 +24,7 @@
                <div id="@block.Id" class="block-wrapper">
                    @if (block is TextSegmentBlock textSegment)
                    {
-                        <NexusTypography Variant="NexusTypography.TypographyVariant.Ebook">@textSegment.Content</NexusTypography>
+                        <NexusTypography Variant="NexusTypography.TypographyVariant.Ebook">@((MarkupString)textSegment.Content)</NexusTypography>
                    }
                    else if (block is AiActionTriggerBlock aiTrigger)
                    {
@@ -43,18 +44,37 @@
    private ReaderPageViewModel? ViewModel;
    private string StatusMessage = "Loading chapter...";

-    protected override async Task OnInitializedAsync()
+    protected override void OnInitialized()
    {
        ThemeService.OnThemeChanged += StateHasChanged;
+        NavigationService.OnNavigationChanged += OnNavigationChanged;
+    }

-        var result = await Mediator.Send(new GetReaderPageQuery());
+    protected override async Task OnParametersSetAsync()
+    {
+        await LoadChapterAsync(NavigationService.CurrentChapterIndex);
+    }
+
+    private async void OnNavigationChanged()
+    {
+        await LoadChapterAsync(NavigationService.CurrentChapterIndex);
+        StateHasChanged();
+    }
+
+    private async Task LoadChapterAsync(int index)
+    {
+        ViewModel = null;
+        StatusMessage = "Fetching content...";
+        
+        var result = await Mediator.Send(new GetReaderPageQuery(index));
        if (result.IsSuccess)
        {
            ViewModel = result.Value;
+            NavigationService.UpdateMetadata(ViewModel.CurrentChapterIndex, ViewModel.TotalChapters, ViewModel.ChapterTitle);
        }
        else
        {
-            StatusMessage = "Failed to load chapter content.";
+            StatusMessage = $"Error: {result.Errors.FirstOrDefault()?.Message ?? "Failed to load"}";
        }
    }

@@ -75,5 +95,6 @@
    public void Dispose()
    {
        ThemeService.OnThemeChanged -= StateHasChanged;
+        NavigationService.OnNavigationChanged -= OnNavigationChanged;
    }
 }
@@ -9,4 +9,4 @@
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
-}
+}
@@ -1,21 +1,49 @@
+@using NexusReader.UI.Shared.Services
+@inject IReaderNavigationService NavigationService
+@implements IDisposable
+
 <footer class="reader-footer">
    <div class="footer-content">
-        <div class="page-info">
-            <span class="label">Postęp:</span>
-            <span class="value">@Progress%</span>
+        <div class="navigation-controls">
+            <button class="nav-btn" @onclick="NavigationService.GoToPreviousChapter" disabled="@(NavigationService.CurrentChapterIndex == 0)">
+                <NexusIcon Name="arrow-left" Size="14" />
+            </button>
+            
+            <div class="chapter-info">
+                <span class="chapter-title">@NavigationService.ChapterTitle</span>
+                <span class="chapter-count">(@(NavigationService.CurrentChapterIndex + 1) / @NavigationService.TotalChapters)</span>
+            </div>
+
+            <button class="nav-btn" @onclick="NavigationService.GoToNextChapter" disabled="@(NavigationService.CurrentChapterIndex >= NavigationService.TotalChapters - 1)">
+                <NexusIcon Name="arrow-right" Size="14" />
+            </button>
        </div>
        
        <div class="progress-container">
-            <div class="progress-bar" style="width: @Progress%"></div>
+            <div class="progress-bar" style="width: @CalculateProgress()%"></div>
        </div>
        
        <div class="meta-info">
-            <span class="time">1:30</span>
            <span class="battery">45% 🔋</span>
+            <span class="time">@DateTime.Now.ToString("HH:mm")</span>
        </div>
    </div>
 </footer>

@code {
-    [Parameter] public int Progress { get; set; } = 45;
+    protected override void OnInitialized()
+    {
+        NavigationService.OnNavigationChanged += StateHasChanged;
+    }
+
+    private int CalculateProgress()
+    {
+        if (NavigationService.TotalChapters <= 1) return 0;
+        return (int)((NavigationService.CurrentChapterIndex / (float)(NavigationService.TotalChapters - 1)) * 100);
+    }
+
+    public void Dispose()
+    {
+        NavigationService.OnNavigationChanged -= StateHasChanged;
+    }
 }
@@ -1,53 +1,102 @@
 .reader-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 40px;
+    position: relative;
+    height: 50px;
    background: #F9F9F9;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 10;
+    flex-shrink: 0;
 }

 .footer-content {
    display: flex;
-    justify-content: space-between;
    align-items: center;
    width: 100%;
-    font-family: var(--nexus-font-sans);
+    gap: 1.5rem;
+}
+
+.navigation-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-shrink: 0;
+}
+
+.nav-btn {
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: #f0f0f0;
+    transform: translateY(-1px);
+}
+
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.chapter-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: #333;
+    white-space: nowrap;
+}
+
+.chapter-title {
+    font-weight: 600;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.chapter-count {
+    opacity: 0.5;
    font-size: 0.75rem;
-    color: #666;
 }

 .progress-container {
    flex: 1;
-    height: 4px;
-    background: rgba(0, 0, 0, 0.1);
-    margin: 0 2rem;
-    border-radius: 2px;
+    height: 6px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
    overflow: hidden;
-    max-width: 400px;
+    margin: 0 1rem;
 }

 .progress-bar {
    height: 100%;
-    background: linear-gradient(90deg, #00ff99 0%, #00d4ff 100%);
-    border-radius: 2px;
+    background: #2ECC71;
+    border-radius: 3px;
+    transition: width 0.3s ease;
 }

-.page-info, .meta-info {
+.meta-info {
    display: flex;
-    gap: 0.5rem;
    align-items: center;
+    gap: 1rem;
+    font-size: 0.75rem;
+    color: #888;
+    flex-shrink: 0;
 }

-.label {
-    opacity: 0.7;
-}
-
-.value {
-    font-weight: 600;
-}
+.battery {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
@@ -11,7 +11,7 @@
        <main>
            @Body
        </main>
-        <ReaderFooter Progress="45" />
+        <ReaderFooter />
    </div>

    <div class="intelligence-sidebar">
@@ -12,10 +12,18 @@
 .reader-pane {
    background: #F9F9F9;
    position: relative;
-    overflow-y: auto;
+    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 5;
+    height: 100vh;
+}
+
+main {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
 }

 .intelligence-sidebar {
@@ -23,22 +31,30 @@
    grid-template-columns: 50px 1fr;
    width: 450px;
    height: 100%;
-    background: #121212;
-    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    background: #0d0d0d;
+    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
+    z-index: 10;
 }

+
 .app-container.focus-mode-active {
-    grid-template-columns: 1fr 0px;
+    grid-template-columns: 1fr 50px;
 }

 .app-container.focus-mode-active .intelligence-sidebar {
-    width: 0;
-    border-left-width: 0;
-    opacity: 0;
+    width: 50px;
+    grid-template-columns: 50px 0px;
 }

+.app-container.focus-mode-active .intelligence-content {
+    opacity: 0;
+    pointer-events: none;
+}
+
+

 .intelligence-content {
    display: flex;
@@ -77,11 +93,6 @@
    flex-direction: column;
 }

-main {
-    flex: 1;
-    padding-bottom: 40px; /* footer height */
-}
-
 /* Platform Specifics */
 .platform-mobile .intelligence-sidebar {
    position: fixed;
@@ -91,3 +102,22 @@ main {
    width: 80%;
    z-index: 100;
 }
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
@@ -1,6 +1,34 @@
-<Router AppAssembly="@typeof(Routes).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-</Router>
+<ErrorBoundary @ref="_errorBoundary">
+    <ChildContent>
+        <Router AppAssembly="@typeof(Routes).Assembly">
+            <Found Context="routeData">
+                <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
+                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+            </Found>
+        </Router>
+    </ChildContent>
+    <ErrorContent Context="ex">
+        <div class="nexus-error-boundary">
+            <div class="error-card">
+                <div class="error-icon">
+                    <NexusIcon Name="alert-triangle" Size="48" Color="#ff4444" />
+                </div>
+                <h3>Nexus System Error</h3>
+                <p>Wystąpił nieoczekiwany błąd podczas renderowania komponentu.</p>
+                
+                <div class="error-details">
+                    <code>@ex.Message</code>
+                </div>
+
+                <button class="retry-btn" @onclick="() => _errorBoundary?.Recover()">
+                    <NexusIcon Name="refresh-cw" Size="16" />
+                    Spróbuj ponownie
+                </button>
+            </div>
+        </div>
+    </ErrorContent>
+</ErrorBoundary>
+
+@code {
+    private ErrorBoundary? _errorBoundary;
+}
@@ -0,0 +1,83 @@
+.nexus-error-boundary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    width: 100%;
+    padding: 2rem;
+    background: rgba(18, 18, 18, 0.8);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    margin: 1rem 0;
+}
+
+.error-card {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 68, 68, 0.2);
+    border-radius: 16px;
+    padding: 2.5rem;
+    max-width: 500px;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+}
+
+.error-icon {
+    margin-bottom: 1.5rem;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.1); opacity: 0.8; }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+h3 {
+    color: #fff;
+    font-family: var(--nexus-font-sans);
+    margin-bottom: 1rem;
+    font-weight: 700;
+}
+
+p {
+    color: #aaa;
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+}
+
+.error-details {
+    background: #000;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    text-align: left;
+    overflow-x: auto;
+}
+
+code {
+    color: #ff4444;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+}
+
+.retry-btn {
+    background: linear-gradient(135deg, #333 0%, #111 100%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.retry-btn:hover {
+    background: linear-gradient(135deg, #444 0%, #222 100%);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
@@ -0,0 +1,15 @@
+namespace NexusReader.UI.Shared.Services;
+
+public interface IReaderNavigationService
+{
+    int CurrentChapterIndex { get; }
+    int TotalChapters { get; }
+    string ChapterTitle { get; }
+    
+    event Action OnNavigationChanged;
+    
+    void GoToChapter(int index);
+    void GoToNextChapter();
+    void GoToPreviousChapter();
+    void UpdateMetadata(int currentIndex, int totalChapters, string title);
+}
@@ -0,0 +1,47 @@
+namespace NexusReader.UI.Shared.Services;
+
+public class ReaderNavigationService : IReaderNavigationService
+{
+    public int CurrentChapterIndex { get; private set; } = 0;
+    public int TotalChapters { get; private set; } = 1;
+    public string ChapterTitle { get; private set; } = "Loading...";
+
+    public event Action? OnNavigationChanged;
+
+    public void GoToChapter(int index)
+    {
+        if (index < 0 || index >= TotalChapters) return;
+        
+        CurrentChapterIndex = index;
+        OnNavigationChanged?.Invoke();
+    }
+
+    public void GoToNextChapter()
+    {
+        if (CurrentChapterIndex < TotalChapters - 1)
+        {
+            GoToChapter(CurrentChapterIndex + 1);
+        }
+    }
+
+    public void GoToPreviousChapter()
+    {
+        if (CurrentChapterIndex > 0)
+        {
+            GoToChapter(CurrentChapterIndex - 1);
+        }
+    }
+
+    public void UpdateMetadata(int currentIndex, int totalChapters, string title)
+    {
+        bool changed = false;
+        if (CurrentChapterIndex != currentIndex) { CurrentChapterIndex = currentIndex; changed = true; }
+        if (TotalChapters != totalChapters) { TotalChapters = totalChapters; changed = true; }
+        if (ChapterTitle != title) { ChapterTitle = title; changed = true; }
+        
+        if (changed)
+        {
+            OnNavigationChanged?.Invoke();
+        }
+    }
+}
@@ -27,6 +27,12 @@
 }


+* {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 body {
    background-color: var(--nexus-bg);
    color: var(--nexus-text);
@@ -44,6 +50,26 @@ body {
    overflow-x: hidden;
 }

+/* Modern Scrollbars */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+
 /* Platform Specific Tweaks */
 .platform-mobile .nexus-button {
    min-height: var(--touch-target-size);