From 9a45a078a60067b77f58e5748ab8aa13dea95765 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@google.com>
Date: Sun, 10 May 2026 17:45:25 +0000
Subject: [PATCH] feat(ui/auth): implement authorized 'Add Book' trigger in
 Library view #32 (#38)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves #32

### Changes:
- Added '[+] Add New Book' button to `Library.razor`.
- Wrapped the button in `AuthorizeView` for `Admin` and `ContentManager` roles.
- Updated `NexusButton` styling to follow standards: secondary gray background with neon glow on hover/focus.
- Refined `Library.razor` layout with a header and glassmorphism panel.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: https://git.archimap.cloud/mjasin/Nexus.Reader/pulls/38
Reviewed-by: Marek Jaisński <jasins.marek@gmail.com>
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
---
 .../Components/Atoms/NexusButton.razor.css    | 33 +++++++------
 src/NexusReader.UI.Shared/Pages/Library.razor | 46 +++++++++++++++++--
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/NexusReader.UI.Shared/Components/Atoms/NexusButton.razor.css b/src/NexusReader.UI.Shared/Components/Atoms/NexusButton.razor.css
index f8e54d3..003565a 100644
--- a/src/NexusReader.UI.Shared/Components/Atoms/NexusButton.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Atoms/NexusButton.razor.css
@@ -4,32 +4,35 @@
     justify-content: center;
     min-width: 44px;
     min-height: 44px;
-    padding: 0.5rem 1rem;
-    background-color: var(--nexus-card);
-    color: var(--nexus-neon);
-    border: 1px solid var(--nexus-neon);
+    padding: 0.5rem 1.25rem;
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     font-family: var(--nexus-font-sans);
     font-weight: 500;
-    font-size: 1rem;
-    border-radius: 8px;
+    font-size: 0.95rem;
+    border-radius: 10px;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 0 5px rgba(0, 255, 153, 0.1);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.nexus-btn:hover:not(:disabled) {
-    background-color: rgba(0, 255, 153, 0.1);
+.nexus-btn:hover:not(:disabled),
+.nexus-btn:focus:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(0, 255, 153, 0.4);
+    color: var(--nexus-neon);
     box-shadow: 0 0 15px rgba(0, 255, 153, 0.3);
+    outline: none;
+    transform: translateY(-1px);
 }
 
 .nexus-btn:active:not(:disabled) {
-    transform: scale(0.98);
+    transform: translateY(0) scale(0.98);
 }
 
 .nexus-btn:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
-    border-color: #555;
-    color: #555;
-    box-shadow: none;
+    filter: grayscale(1);
 }
diff --git a/src/NexusReader.UI.Shared/Pages/Library.razor b/src/NexusReader.UI.Shared/Pages/Library.razor
index 9953c37..412c9ca 100644
--- a/src/NexusReader.UI.Shared/Pages/Library.razor
+++ b/src/NexusReader.UI.Shared/Pages/Library.razor
@@ -2,16 +2,52 @@
 @attribute [Authorize]
 
 <div class="library-page">
-    <h1>Biblioteka</h1>
-    <p>Twoja kolekcja książek i dokumentów pojawi się tutaj wkrótce.</p>
+    <header class="library-header">
+        <h1>Biblioteka</h1>
+        <AuthorizeView Roles="Admin, ContentManager">
+            <NexusButton Class="add-book-trigger">
+                [+] Add New Book
+            </NexusButton>
+        </AuthorizeView>
+    </header>
+    
+    <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>
 </div>
 
 <style>
     .library-page {
-        padding: 2rem;
+        padding: 3rem 2rem;
+        max-width: 1200px;
+        margin: 0 auto;
     }
+
+    .library-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2.5rem;
+    }
+
     h1 {
-        margin-bottom: 1rem;
-        color: #fff;
+        font-family: var(--nexus-font-serif);
+        font-size: 2.5rem;
+        margin: 0;
+        color: var(--nexus-text);
+    }
+
+    .library-content {
+        min-height: 400px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .empty-state {
+        text-align: center;
+        opacity: 0.6;
     }
 </style>