From 8dba510a6c8c6de543684b2ad99c4e4c1bf256e6 Mon Sep 17 00:00:00 2001
From: Yutaka Kurosaki <y963@royal.ocn.ne.jp>
Date: Thu, 4 Dec 2025 01:47:51 +0900
Subject: [PATCH] Fix sidebar scroll position preservation during page
 navigation

- Replace unstable x-navigate:scroll directive with custom Alpine event handlers
- Use alpine:navigating event to save sidebar scroll position to localStorage
- Use alpine:navigated event to restore sidebar scroll position after navigation
- Sidebar now maintains scroll position when clicking document links
- Fixed 'Element not found' error that was preventing scroll restoration
- Uses requestAnimationFrame for smooth DOM restoration
---
 .../views/layouts/knowledge-base.blade.php    | 29 ++++++++++++++++++-
 .../views/livewire/sidebar-tree.blade.php     |  1 -
 .../views/partials/tree-item.blade.php        |  1 -
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/resources/views/layouts/knowledge-base.blade.php b/src/resources/views/layouts/knowledge-base.blade.php
index 0eab52d..3ee9fa6 100644
--- a/src/resources/views/layouts/knowledge-base.blade.php
+++ b/src/resources/views/layouts/knowledge-base.blade.php
@@ -200,7 +200,7 @@ class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring
             <div class="flex h-[calc(100vh-4rem)]">
                 <!-- Sidebar - Desktop -->
                 <aside 
-                    x-navigate:scroll
+                    id="kb-sidebar"
                     class="hidden lg:block bg-white border-r border-gray-200 overflow-y-auto relative"
                     :style="'width: ' + sidebarWidth + 'px'"
                 >
@@ -259,6 +259,33 @@ class="fixed inset-y-0 left-0 top-16 w-64 bg-white border-r border-gray-200 over
 
         <!-- Global Keyboard Shortcuts -->
         <script>
+            // Sidebar scroll position management
+            function saveSidebarScroll() {
+                const sidebar = document.getElementById('kb-sidebar');
+                if (sidebar) {
+                    localStorage.setItem('kb_sidebar_scroll_pos', sidebar.scrollTop);
+                }
+            }
+
+            function restoreSidebarScroll() {
+                const sidebar = document.getElementById('kb-sidebar');
+                if (sidebar) {
+                    const savedPos = localStorage.getItem('kb_sidebar_scroll_pos');
+                    if (savedPos !== null) {
+                        // Use requestAnimationFrame to ensure DOM is ready
+                        requestAnimationFrame(() => {
+                            sidebar.scrollTop = parseInt(savedPos, 10);
+                        });
+                    }
+                }
+            }
+
+            // Save scroll position before navigation
+            document.addEventListener('alpine:navigating', saveSidebarScroll);
+            
+            // Restore scroll position after navigation
+            document.addEventListener('alpine:navigated', restoreSidebarScroll);
+
             document.addEventListener('keydown', function(e) {
                 if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                     e.preventDefault();
diff --git a/src/resources/views/livewire/sidebar-tree.blade.php b/src/resources/views/livewire/sidebar-tree.blade.php
index 7cb0317..182968b 100644
--- a/src/resources/views/livewire/sidebar-tree.blade.php
+++ b/src/resources/views/livewire/sidebar-tree.blade.php
@@ -18,7 +18,6 @@
     @auth
         <div class="mt-6 pt-6 border-t border-gray-200">
             <a
-                x-navigate:scroll
                 href="{{ route('documents.create') }}"
                 class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"
             >
diff --git a/src/resources/views/partials/tree-item.blade.php b/src/resources/views/partials/tree-item.blade.php
index 36700f4..9813325 100644
--- a/src/resources/views/partials/tree-item.blade.php
+++ b/src/resources/views/partials/tree-item.blade.php
@@ -8,7 +8,6 @@
                     $displayTitle = basename($file['document']->title);
                 @endphp
                 <a
-                    x-navigate:scroll
                     href="{{ route('documents.show', $file['document']) }}"
                     class="flex items-center px-2 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100 group"
                 >