feat(ai-ux): deduplicate AI queries, handle ServiceUnavailable retries, and optimize reader canvas graph prerendering (#44)
This Pull Request encapsulates all outstanding AI, Blazor InteractiveAuto lifecycle, pgvector, and Firefox authorization/session compatibility fixes. ### Key Accomplishments: 1. **Concurrent Request Deduplication (Option B):** Implemented a thread-safe active task registry in `KnowledgeService` that groups concurrent graph extraction queries for the same content, preventing duplicate AI calls completely. 2. **Resilience Strategy for Downstream Demands:** Extended the `ai-retry` resilience pipeline to automatically intercept and retry on temporary Google API `503 ServiceUnavailable` / `high demand` spikes. 3. **Interactive Graph Generation Guard (Option A):** Prevented server-side prerender-phase graph requests in the reader canvas component. 4. **Firefox Compatibility & Cookie Handler:** Implemented an authentication endpoint and hybrid hidden-form submission flow to solve login, registration, and logout redirections and cookies securely. 5. **Autoscrolling & Graph Exclusions:** Added concept-to-block smooth scrolling, active block badging, and filtered out markdown code blocks from being extracted as nodes. All unit tests compiled and passed 100% cleanly. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #44 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #44.
This commit is contained in:
@@ -117,6 +117,7 @@
|
||||
"ProvisioningFailed" => "Wystąpił błąd podczas przygotowywania Twojego konta.",
|
||||
"UserAlreadyExists" => "Użytkownik o tym adresie e-mail już istnieje. Zaloguj się tradycyjnie hasłem.",
|
||||
"LockedOut" => "Twoje konto zostało zablokowane. Spróbuj ponownie później.",
|
||||
"InvalidCredentials" => "Nieprawidłowy e-mail lub hasło.",
|
||||
_ => "Wystąpił nieoczekiwany błąd podczas logowania."
|
||||
};
|
||||
}
|
||||
@@ -132,8 +133,8 @@
|
||||
var result = await IdentityService.LoginAsync(_loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
// Trigger hidden form submission to perform cookie-based sign-in
|
||||
await JS.InvokeVoidAsync("eval", "document.getElementById('nexusLoginForm').submit()");
|
||||
// Trigger hidden form submission via robust JS helper to perform cookie-based sign-in
|
||||
await JS.InvokeVoidAsync("nexusAuth.submitLoginForm", "nexusLoginForm", _loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@@ -94,8 +94,8 @@
|
||||
var loginResult = await IdentityService.LoginAsync(_registerModel.Email, _registerModel.Password);
|
||||
if (loginResult.IsSuccess)
|
||||
{
|
||||
// Trigger hidden form submission to perform cookie-based sign-in
|
||||
await JS.InvokeVoidAsync("eval", "document.getElementById('nexusLoginForm').submit()");
|
||||
// Trigger hidden form submission via robust JS helper to perform cookie-based sign-in
|
||||
await JS.InvokeVoidAsync("nexusAuth.submitLoginForm", "nexusLoginForm", _registerModel.Email, _registerModel.Password, false);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@page "/"
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using NexusReader.UI.Shared.Components.Atoms
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@inject IIdentityService IdentityService
|
||||
@inject NavigationManager NavigationManager
|
||||
@@ -42,57 +43,7 @@
|
||||
|
||||
<div class="main-grid">
|
||||
<!-- Current Reading Card -->
|
||||
<section class="reading-card glass-panel">
|
||||
@if (_profile?.LastReadBook != null)
|
||||
{
|
||||
<div class="card-header">
|
||||
<h3>Ostatnio czytane: @_profile.LastReadBook.Title</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="reading-thumb">
|
||||
<img src="@(_profile.LastReadBook.CoverUrl ?? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg")" alt="Current Book" />
|
||||
</div>
|
||||
<div class="reading-info">
|
||||
<div class="progress-section">
|
||||
<span class="chapter-label">@_profile.LastReadBook.LastChapter</span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" style="width: @(_profile.LastReadBook.Progress.ToString("F0", System.Globalization.CultureInfo.InvariantCulture))%">
|
||||
<div class="progress-bubble">@(_profile.LastReadBook.Progress.ToString("F1"))%</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="progress-detail">Postęp: @(_profile.LastReadBook.Progress.ToString("F2"))% - @_profile.LastReadBook.Author.Name</span>
|
||||
</div>
|
||||
<p class="reading-desc">
|
||||
Kontynuuj odkrywanie wiedzy w książce "@_profile.LastReadBook.Title".
|
||||
Twój cyfrowy asystent Nexus jest gotowy do analizy kolejnych rozdziałów i generowania interaktywnych map myśli.
|
||||
</p>
|
||||
<div class="card-actions">
|
||||
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo($"/reader?chapter={_profile.LastReadBook.LastChapterIndex}")'>Kontynuuj Czytanie</button>
|
||||
<button class="btn-nexus secondary" @onclick='() => NavigationManager.NavigateTo("/library")'>Moja Biblioteka</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card-header">
|
||||
<h3>Brak aktywnych lektur</h3>
|
||||
</div>
|
||||
<div class="card-body empty-state">
|
||||
<div class="empty-icon">
|
||||
<NexusIcon Name="book-open" Size="64" />
|
||||
</div>
|
||||
<div class="reading-info">
|
||||
<p class="reading-desc">
|
||||
Nie czytasz obecnie żadnej książki. Przejdź do biblioteki, aby przesłać swój pierwszy plik EPUB i rozpocząć przygodę z Nexus Reader.
|
||||
</p>
|
||||
<div class="card-actions">
|
||||
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo("/library")'>Przejdź do Biblioteki</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
<CurrentReadingWidget Book="_profile?.LastReadBook" />
|
||||
|
||||
<div class="secondary-grid">
|
||||
<!-- Knowledge Integration -->
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@page "/reader"
|
||||
@page "/reader/{BookId:guid}"
|
||||
@layout ReaderLayout
|
||||
@attribute [Authorize]
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@@ -8,6 +9,7 @@
|
||||
@inject IJSRuntime JS
|
||||
@inject NavigationManager NavManager
|
||||
@inject IReaderNavigationService NavService
|
||||
@inject IIdentityService IdentityService
|
||||
<PageTitle>Nexus E-Reader</PageTitle>
|
||||
|
||||
<div class="home-reader-container">
|
||||
@@ -16,6 +18,8 @@
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public Guid? BookId { get; set; }
|
||||
|
||||
private ReaderCanvas? readerCanvas;
|
||||
private string? _activeQuizBlockId;
|
||||
|
||||
@@ -28,14 +32,31 @@
|
||||
QuizState.OnQuizRequested += HandleQuizRequestedAsync;
|
||||
FocusMode.OnFocusModeChanged += HandleUpdate;
|
||||
await FocusMode.InitializeAsync();
|
||||
}
|
||||
|
||||
// Handle deep-linking to a specific chapter
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
|
||||
int chapterIndex = 0;
|
||||
if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("chapter", out var chapterValue))
|
||||
{
|
||||
if (int.TryParse(chapterValue, out var chapterIndex))
|
||||
int.TryParse(chapterValue, out chapterIndex);
|
||||
}
|
||||
|
||||
if (BookId.HasValue && BookId.Value != Guid.Empty)
|
||||
{
|
||||
if (NavService.CurrentEbookId != BookId.Value || NavService.CurrentChapterIndex != chapterIndex)
|
||||
{
|
||||
await NavService.GoToChapter(chapterIndex);
|
||||
NavService.SetBook(BookId.Value, chapterIndex);
|
||||
}
|
||||
}
|
||||
else if (NavService.CurrentEbookId == Guid.Empty)
|
||||
{
|
||||
// If no BookId in URL and no book currently selected, try to load last read book
|
||||
var profileResult = await IdentityService.GetProfileAsync();
|
||||
if (profileResult.IsSuccess && profileResult.Value.LastReadBook != null)
|
||||
{
|
||||
NavService.SetBook(profileResult.Value.LastReadBook.Id, chapterIndex > 0 ? chapterIndex : profileResult.Value.LastReadBook.LastChapterIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,108 @@
|
||||
@page "/library"
|
||||
@attribute [Authorize]
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@using NexusReader.Application.DTOs.User
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using System.Net.Http.Json
|
||||
@inject HttpClient Http
|
||||
@inject IReaderNavigationService ReaderNavigation
|
||||
|
||||
<div class="library-page">
|
||||
<header class="library-header">
|
||||
<h1>Biblioteka</h1>
|
||||
<div class="header-title-section">
|
||||
<h1>Moja Biblioteka</h1>
|
||||
<p class="subtitle">Zarządzaj swoją kolekcją e-booków i rozwijaj strukturę wiedzy z Nexus AI</p>
|
||||
</div>
|
||||
<AuthorizeView Roles="Admin, ContentManager">
|
||||
<NexusButton Class="add-book-trigger" OnClick="() => _isModalOpen = true">
|
||||
[+] Add New Book
|
||||
<span class="btn-icon">+</span> Dodaj E-book
|
||||
</NexusButton>
|
||||
</AuthorizeView>
|
||||
</header>
|
||||
|
||||
<BookIngestionModal @bind-IsOpen="_isModalOpen" />
|
||||
<BookIngestionModal @bind-IsOpen="_isModalOpen" @bind-IsOpen:after="RefreshLibrary" />
|
||||
|
||||
<div class="library-content glass-panel">
|
||||
<div class="empty-state">
|
||||
<p>Twoja kolekcja książek i dokumentów pojawi się tutaj wkrótce.</p>
|
||||
</div>
|
||||
<div class="library-content">
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="library-loading-container">
|
||||
<div class="loader-card glass-panel">
|
||||
<div class="spinner-glow small"></div>
|
||||
<span class="loader-text">Wczytywanie biblioteki...</span>
|
||||
</div>
|
||||
|
||||
<div class="loading-grid">
|
||||
@for (int i = 0; i < 3; i++)
|
||||
{
|
||||
<div class="skeleton-card glass-panel">
|
||||
<div class="skeleton-cover"></div>
|
||||
<div class="skeleton-details">
|
||||
<div class="skeleton-line title"></div>
|
||||
<div class="skeleton-line author"></div>
|
||||
<div class="skeleton-line progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (_books == null || !_books.Any())
|
||||
{
|
||||
<div class="empty-state-container glass-panel">
|
||||
<div class="empty-icon-pulse">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Pusta biblioteka</h3>
|
||||
<p>Nie masz jeszcze żadnych książek w swojej kolekcji.</p>
|
||||
<AuthorizeView Roles="Admin, ContentManager">
|
||||
<Authorized>
|
||||
<button class="btn-nexus primary" @onclick="() => _isModalOpen = true">
|
||||
Prześlij pierwszą książkę
|
||||
</button>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<p class="restricted-info">Skontaktuj się z administratorem, aby dodać książki do swojego konta.</p>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="books-grid">
|
||||
@foreach (var book in _books)
|
||||
{
|
||||
<div class="book-card glass-panel" @onclick="() => OpenBook(book.Id)">
|
||||
<div class="book-cover-container">
|
||||
<img src="@(book.CoverUrl ?? "https://api.dicebear.com/7.x/identicon/svg?seed=" + book.Title)" alt="@book.Title" class="book-cover" />
|
||||
<div class="cover-overlay">
|
||||
<span class="read-action">Czytaj teraz</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="book-details">
|
||||
<h3 class="book-title" title="@book.Title">@book.Title</h3>
|
||||
<p class="book-author">@book.Author.Name</p>
|
||||
|
||||
@if (book.Progress > 0)
|
||||
{
|
||||
<div class="book-progress-section">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: @(book.Progress.ToString("F0"))%"></div>
|
||||
</div>
|
||||
<span class="progress-text">Postęp: @(book.Progress.ToString("F0"))% (@book.LastChapter)</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="new-badge">Nowa</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,35 +111,440 @@
|
||||
padding: 3rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.library-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--nexus-font-serif);
|
||||
font-size: 2.5rem;
|
||||
.header-title-section h1 {
|
||||
font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif);
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5rem 0;
|
||||
background: linear-gradient(135deg, var(--nexus-text, #ffffff) 0%, rgba(var(--nexus-text-rgb, 255, 255, 255), 0.7) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.header-title-section .subtitle {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0;
|
||||
color: var(--nexus-text);
|
||||
}
|
||||
|
||||
.library-content {
|
||||
min-height: 400px;
|
||||
.add-book-trigger {
|
||||
background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
|
||||
font-weight: 600 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.add-book-trigger:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6) !important;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Books Grid */
|
||||
.books-grid, .loading-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.book-card {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nexus-radius-lg, 16px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.book-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.book-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.book-cover-container {
|
||||
position: relative;
|
||||
height: 380px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
.book-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.book-card:hover .book-cover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.cover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.book-card:hover .cover-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.read-action {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 30px;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.book-card:hover .read-action {
|
||||
transform: translateY(0);
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.book-details {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--nexus-text, #ffffff);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: var(--nexus-font-sans, 'Inter', sans-serif);
|
||||
}
|
||||
|
||||
.book-author {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
align-self: flex-start;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--nexus-primary, #6366f1);
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
/* Book Progress Bar */
|
||||
.book-progress-section {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--nexus-primary, #6366f1) 0%, #a855f7 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
opacity: 0.6;
|
||||
border-radius: var(--nexus-radius-lg, 16px);
|
||||
}
|
||||
|
||||
.empty-icon-pulse {
|
||||
margin-bottom: 2rem;
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
animation: pulse 3s infinite alternate;
|
||||
}
|
||||
|
||||
.empty-state-container h3 {
|
||||
font-family: var(--nexus-font-serif);
|
||||
font-size: 1.8rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--nexus-text);
|
||||
}
|
||||
|
||||
.empty-state-container p {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
max-width: 400px;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
.btn-nexus.primary {
|
||||
background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-nexus.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
|
||||
}
|
||||
|
||||
.restricted-info {
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
color: rgba(255, 255, 255, 0.35) !important;
|
||||
}
|
||||
|
||||
/* Skeleton Loading */
|
||||
.skeleton-card {
|
||||
border-radius: var(--nexus-radius-lg, 16px);
|
||||
overflow: hidden;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.skeleton-cover {
|
||||
height: 380px;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
.skeleton-details {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-line.title {
|
||||
height: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.skeleton-line.author {
|
||||
height: 14px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.skeleton-line.progress {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.library-loading-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.library-loading-container .loader-card {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
padding: 1.25rem 2.25rem;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.spinner-glow {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid rgba(0, 255, 153, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--nexus-neon, #00ff99);
|
||||
animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.spinner-glow.small {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.loader-text {
|
||||
font-family: var(--nexus-font-sans, 'Inter', sans-serif);
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* Skeleton Loading enhancements */
|
||||
.skeleton-card {
|
||||
background: rgba(255, 255, 255, 0.02) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.skeleton-cover {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(15px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@@keyframes pulse {
|
||||
0% { transform: scale(0.95); opacity: 0.6; }
|
||||
100% { transform: scale(1.05); opacity: 0.9; }
|
||||
}
|
||||
|
||||
@@keyframes loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
@@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@keyframes scaleIn {
|
||||
from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
||||
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private bool _isModalOpen;
|
||||
private bool _isLoading = true;
|
||||
private List<LastReadBookDto>? _books;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadBooksAsync();
|
||||
}
|
||||
|
||||
private async Task LoadBooksAsync()
|
||||
{
|
||||
_isLoading = true;
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
_books = await Http.GetFromJsonAsync<List<LastReadBookDto>>("api/library/books");
|
||||
_isLoading = false;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"[Library] Failed to load books: {ex.Message}");
|
||||
if (OperatingSystem.IsBrowser())
|
||||
{
|
||||
_isLoading = false;
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task RefreshLibrary()
|
||||
{
|
||||
// Refresh when modal closes or when a book is successfully ingested
|
||||
await LoadBooksAsync();
|
||||
}
|
||||
|
||||
private void OpenBook(Guid bookId)
|
||||
{
|
||||
ReaderNavigation.NavigateToBook(bookId);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user