feat: implement draggable sidebar resizer with persistent state and dynamic UI updates

src/NexusReader.UI.Shared/Layout/MainLayout.razor

@@ -6,6 +6,7 @@
 @inject IPlatformService PlatformService
 @inject IFocusModeService FocusMode
 @inject IQuizStateService QuizService
+@inject IJSRuntime JS
 @implements IDisposable
 
 <div class="app-container @_platformClass @(FocusMode.IsFocusModeActive ? "focus-mode-active" : "")">
@@ -16,6 +17,8 @@
         <ReaderFooter />
     </div>
 
+    <div class="resizer" id="sidebar-resizer"></div>
+
     <div class="intelligence-sidebar">
         <IntelligenceToolbar />
         <div class="intelligence-content">
@@ -58,6 +61,19 @@
         }
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            try
+            {
+                var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
+                await module.InvokeVoidAsync("initResizer", ".app-container", "#sidebar-resizer", "--sidebar-width");
+            }
+            catch { }
+        }
+    }
+
     public void Dispose()
     {
         FocusMode.OnFocusModeChanged -= StateHasChanged;

src/NexusReader.UI.Shared/Layout/MainLayout.razor.css

@@ -1,11 +1,10 @@
 .app-container {
     display: grid;
-    grid-template-columns: 1fr 450px;
+    grid-template-columns: 1fr auto var(--sidebar-width, 450px);
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     background: #121212;
-    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 
@@ -29,26 +28,47 @@ main {
 .intelligence-sidebar {
     display: grid;
     grid-template-columns: 50px 1fr;
-    width: 450px;
+    width: 100%; /* controlled by grid */
     height: 100%;
     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;
 }
 
+.resizer {
+    width: 4px;
+    cursor: col-resize;
+    background: rgba(255, 255, 255, 0.02);
+    transition: background 0.2s, width 0.2s;
+    z-index: 20;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.resizer:hover, .app-container.is-resizing .resizer {
+    background: var(--nexus-neon);
+    width: 6px;
+    box-shadow: 0 0 10px var(--nexus-neon);
+}
+
+.app-container.is-resizing {
+    user-select: none;
+}
+
 
 .app-container.focus-mode-active {
-    grid-template-columns: 1fr 50px;
+    grid-template-columns: 1fr 0px 50px;
 }
 
 .app-container.focus-mode-active .intelligence-sidebar {
-    width: 50px;
     grid-template-columns: 50px 0px;
 }
 
+.app-container.focus-mode-active .resizer {
+    display: none;
+}
+
 .app-container.focus-mode-active .intelligence-content {
     opacity: 0;
     pointer-events: none;