From 0aa78a8e8be286b810ea4c66ba8ced807889490a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Jul 2026 02:52:12 +0000
Subject: [PATCH] feat(ux): improve empty state and search accessibility

- Improve the empty state in Home.razor to use a LucideIcon and better typography.
- Add an aria-label to the search input in Players.razor for improved screen reader support.

Co-authored-by: myarichuk <1473701+myarichuk@users.noreply.github.com>
---
 src/Codex.Web/Components/Pages/Home.razor    | 6 ++++--
 src/Codex.Web/Components/Pages/Players.razor | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Codex.Web/Components/Pages/Home.razor b/src/Codex.Web/Components/Pages/Home.razor
index 83eb8f4..18f5932 100644
--- a/src/Codex.Web/Components/Pages/Home.razor
+++ b/src/Codex.Web/Components/Pages/Home.razor
@@ -100,8 +100,10 @@ else
                         else
                         {
                             <tr>
-                                <td colspan="4" class="text-center py-5 opacity-25" style="font-style: italic;">
-                                    Your grimoire is empty. Begin an adventure to see history here.
+                                <td colspan="4" class="text-center py-5">
+                                    <LucideIcon IconName="book-open" Size="48" Class="text-tertiary mb-3" />
+                                    <h3 class="h5 mb-2">Your Grimoire is Empty</h3>
+                                    <p class="text-tertiary mb-0">Begin an adventure to see history here.</p>
                                 </td>
                             </tr>
                         }
diff --git a/src/Codex.Web/Components/Pages/Players.razor b/src/Codex.Web/Components/Pages/Players.razor
index 0d1707e..4bfa8cb 100644
--- a/src/Codex.Web/Components/Pages/Players.razor
+++ b/src/Codex.Web/Components/Pages/Players.razor
@@ -6,7 +6,7 @@
     <header class="d-flex justify-content-between align-items-center mb-4">
         <div class="search-container">
             <LucideIcon IconName="search" Size="18" Class="search-icon" />
-            <input type="text" class="search-input" placeholder="Search players or characters...">
+            <input type="text" class="search-input" placeholder="Search players or characters..." aria-label="Search players or characters">
         </div>
         <div class="d-flex gap-3">
             <button class="ai-sparkle-btn">