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

src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js

@@ -4,7 +4,7 @@ let simulation;
 let zoomBehavior;
 let svgElement;
 
-let node, link, rootGroup, badge, width, height, currentDotNetHelper;
+let node, link, rootGroup, badge, width, height, currentDotNetHelper, resizeHandler;
 
 export function mount(containerId, data, dotNetHelper) {
     const container = document.getElementById(containerId);
@@ -66,6 +66,9 @@ export function mount(containerId, data, dotNetHelper) {
     
     svgElement.call(zoomBehavior).on("wheel.zoom", null);
 
+    resizeHandler = () => handleResize(containerId);
+    window.addEventListener('resize', resizeHandler);
+
     simulation = d3.forceSimulation()
         .force("link", d3.forceLink().id(d => d.id).distance(120))
         .force("charge", d3.forceManyBody().strength(-400))
@@ -228,12 +231,27 @@ export function unmount(containerId) {
     if (simulation) {
         simulation.stop();
     }
+    if (resizeHandler) {
+        window.removeEventListener('resize', resizeHandler);
+    }
     const container = document.getElementById(containerId);
     if (container) {
         container.innerHTML = ''; // clear svg
     }
 }
 
+export function handleResize(containerId) {
+    const container = document.getElementById(containerId);
+    if (!container || !svgElement || !simulation) return;
+
+    width = container.clientWidth;
+    height = container.clientHeight;
+
+    svgElement.attr("viewBox", [0, 0, width, height]);
+    simulation.force("center", d3.forceCenter(width / 2, height / 2));
+    simulation.alpha(0.3).restart();
+}
+
 export function scrollToNode(id) {
     const el = document.getElementById(id);
     if (el) {