Improve current document highlighting with better URL matching

- Add removal of previous highlighting before applying new one - Support multiple URL matching strategies (exact, full URL, ends with) - Add debug logging to troubleshoot highlighting issues - Reset all links before applying highlight to ensure clean state
Add current document highlighting in sidebar navigation
2025-12-04 02:45:24 +09:00 · 2025-12-04 02:42:20 +09:00 · 2025-12-04 02:37:07 +09:00 · 2025-12-04 02:35:29 +09:00 · 2025-12-04 02:30:48 +09:00 · 2025-12-04 02:24:00 +09:00
4 changed files with 127 additions and 5 deletions
--- a/src/.env.example
+++ b/src/.env.example
@@ -7,6 +7,7 @@ APP_URL=http://localhost
 APP_LOCALE=en
 APP_FALLBACK_LOCALE=en
 APP_FAKER_LOCALE=en_US
+APP_TIMEZONE=Asia/Tokyo

 APP_MAINTENANCE_DRIVER=file
 # APP_MAINTENANCE_STORE=database
--- a/src/config/app.php
+++ b/src/config/app.php
@@ -65,7 +65,7 @@
    |
    */

-    'timezone' => 'UTC',
+    'timezone' => env('APP_TIMEZONE', 'Asia/Tokyo'),

    /*
    |--------------------------------------------------------------------------
--- a/src/resources/views/layouts/knowledge-base.blade.php
+++ b/src/resources/views/layouts/knowledge-base.blade.php
@@ -27,7 +27,30 @@
        @livewireStyles
        @stack('styles')
    </head>
-    <body class="font-sans antialiased" x-data="{ mobileMenuOpen: false }">
+    <body class="font-sans antialiased" x-data="{ 
+        mobileMenuOpen: false,
+        sidebarWidth: localStorage.getItem('kb_sidebar_width') || 320,
+        isResizing: false,
+        startResize(e) {
+            if (window.innerWidth < 1024) return; // lg breakpoint
+            this.isResizing = true;
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        },
+        resize(e) {
+            if (!this.isResizing) return;
+            const newWidth = Math.max(200, Math.min(600, e.clientX));
+            this.sidebarWidth = newWidth;
+            localStorage.setItem('kb_sidebar_width', newWidth);
+        },
+        stopResize() {
+            if (this.isResizing) {
+                this.isResizing = false;
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        }
+    }" @mousemove.window="resize($event)" @mouseup.window="stopResize()">
        <div class="min-h-screen bg-gray-50">
            <!-- Header -->
            <header class="bg-white border-b border-gray-200 sticky top-0 z-20">
@@ -176,8 +199,21 @@ class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring
            <!-- Main Content -->
            <div class="flex h-[calc(100vh-4rem)]">
                <!-- Sidebar - Desktop -->
-                <aside class="hidden lg:block w-64 bg-white border-r border-gray-200 overflow-y-auto">
+                <aside 
+                    id="kb-sidebar"
+                    class="hidden lg:block bg-white border-r border-gray-200 overflow-y-auto relative"
+                    :style="'width: ' + sidebarWidth + 'px'"
+                >
                    @livewire('sidebar-tree')
+                    
+                    <!-- Resize Handle -->
+                    <div 
+                        @mousedown="startResize($event)"
+                        class="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-indigo-500 transition-colors group"
+                        title="ドラッグして幅を変更"
+                    >
+                        <div class="absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-1.5 h-12 bg-gray-300 rounded-full group-hover:bg-indigo-500 transition-colors"></div>
+                    </div>
                </aside>

                <!-- Sidebar - Mobile Overlay -->
@@ -223,6 +259,91 @@ class="fixed inset-y-0 left-0 top-16 w-64 bg-white border-r border-gray-200 over

        <!-- Global Keyboard Shortcuts -->
        <script>
+            // Preserve sidebar scroll position during navigation
+            document.addEventListener('click', function(e) {
+                const sidebar = document.getElementById('kb-sidebar');
+                if (!sidebar) return;
+                
+                const link = e.target.closest('a');
+                if (link && sidebar.contains(link)) {
+                    const scrollPos = sidebar.scrollTop;
+                    sessionStorage.setItem('kb_sidebar_scroll', scrollPos);
+                }
+            }, true);
+
+            // Restore scroll position after page load
+            function restoreSidebarScroll() {
+                const sidebar = document.getElementById('kb-sidebar');
+                if (!sidebar) return;
+                
+                const savedPos = sessionStorage.getItem('kb_sidebar_scroll');
+                if (savedPos !== null && savedPos !== '0') {
+                    sidebar.scrollTop = parseInt(savedPos, 10);
+                }
+            }
+
+            // Highlight current document in sidebar
+            function highlightCurrentDocument() {
+                const sidebar = document.getElementById('kb-sidebar');
+                if (!sidebar) {
+                    console.log('Sidebar not found for highlighting');
+                    return;
+                }
+
+                const currentPath = window.location.pathname;
+                const links = sidebar.querySelectorAll('a');
+                
+                console.log('Current path:', currentPath);
+                console.log('Found links in sidebar:', links.length);
+                
+                links.forEach(link => {
+                    const href = link.getAttribute('href');
+                    
+                    // Remove previous highlighting
+                    link.classList.remove('bg-indigo-50', 'text-indigo-700', 'font-semibold');
+                    link.classList.add('text-gray-700');
+                    
+                    const icon = link.querySelector('svg');
+                    if (icon) {
+                        icon.classList.remove('text-indigo-600');
+                        icon.classList.add('text-gray-400', 'group-hover:text-gray-600');
+                    }
+                    
+                    // Check if this is the current page
+                    if (href === currentPath || href === window.location.href || 
+                        (href && currentPath && href.endsWith(currentPath))) {
+                        console.log('Matched link:', href, 'with current path:', currentPath);
+                        link.classList.add('bg-indigo-50', 'text-indigo-700', 'font-semibold');
+                        link.classList.remove('text-gray-700');
+                        
+                        if (icon) {
+                            icon.classList.remove('text-gray-400', 'group-hover:text-gray-600');
+                            icon.classList.add('text-indigo-600');
+                        }
+                    }
+                });
+            }
+
+            // Restore on page load
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    restoreSidebarScroll();
+                    highlightCurrentDocument();
+                });
+            } else {
+                restoreSidebarScroll();
+                highlightCurrentDocument();
+            }
+
+            // Also restore on window load (for safety)
+            window.addEventListener('load', () => {
+                restoreSidebarScroll();
+                highlightCurrentDocument();
+            });
+
+            // Update highlight after Alpine navigation
+            document.addEventListener('alpine:navigated', highlightCurrentDocument);
+
            document.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                    e.preventDefault();
--- a/src/resources/views/livewire/document-viewer.blade.php
+++ b/src/resources/views/livewire/document-viewer.blade.php
@@ -21,7 +21,7 @@ class="inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-indigo-600 t

        <div class="flex flex-col sm:flex-row sm:items-center text-xs sm:text-sm text-gray-500 gap-2 sm:gap-4">
            <span>
-                {{ __('messages.documents.updated') }} {{ $document->updated_at->diffForHumans() }}
+                {{ __('messages.documents.updated') }} {{ $document->updated_at->diffForHumans() }}（{{ config('app.timezone') }}）
            </span>

            @if($document->updated_by && $document->updater)
@@ -77,7 +77,7 @@ class="block p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
            </div>
            <div>
                <span class="font-medium">{{ __('messages.documents.last_modified') }}:</span>
-                <span class="ml-2">{{ $document->updated_at->format('Y-m-d H:i:s') }}</span>
+                <span class="ml-2">{{ $document->updated_at->format('Y-m-d H:i:s') }}（{{ config('app.timezone') }}）</span>
            </div>
        </div>
    </div>
Author	SHA1	Message	Date
Yutaka Kurosaki	8ea8b3f6b6	Improve current document highlighting with better URL matching - Add removal of previous highlighting before applying new one - Support multiple URL matching strategies (exact, full URL, ends with) - Add debug logging to troubleshoot highlighting issues - Reset all links before applying highlight to ensure clean state	2025-12-04 02:45:24 +09:00
Yutaka Kurosaki	d52968e697	Add current document highlighting in sidebar navigation - Highlight active document with indigo background and bold font - Change icon color to indigo for active document - Use JavaScript to match current URL path with sidebar links - Update highlighting on page load and Alpine navigation events - Active document is visually distinct from other items	2025-12-04 02:42:20 +09:00
Yutaka Kurosaki	bed7137e43	Remove debug console logs from sidebar scroll preservation - Remove all console.log statements - Clean up code for production use - Preserve scroll position functionality without debug output	2025-12-04 02:37:07 +09:00
Yutaka Kurosaki	028e0b11c7	Fix sidebar scroll preservation by correcting link selector - Change selector from 'a[x-navigate]' to 'a' (no x-navigate attribute) - Remove sessionStorage.removeItem to prevent clearing saved scroll position - Add '0' check to prevent restoring scroll position to top - Add debug logging for troubleshooting - Now works correctly in all browsers including Chrome	2025-12-04 02:35:29 +09:00
Yutaka Kurosaki	5bf43abab9	Remove x-navigate directive, use native HTML links with scroll preservation - Remove x-navigate.preserve-scroll from sidebar links - Use standard <a> tags for navigation - Implement manual JavaScript-based scroll position management - Save scroll position to sessionStorage before navigation - Restore scroll position after page load - Works consistently across all browsers including Chrome	2025-12-04 02:30:48 +09:00
Yutaka Kurosaki	f96ad4d14f	Use manual scroll position management instead of x-navigate.preserve-scroll - Add JavaScript to save sidebar scroll position before navigation - Restore scroll position after page load using sessionStorage - Works consistently in Chrome and other browsers - Handles both DOMContentLoaded and window load events - Compatible with Alpine navigate and standard navigation	2025-12-04 02:24:00 +09:00
Yutaka Kurosaki	a4aff43091	Add preserve-scroll modifier to x-navigate directive - Use x-navigate.preserve-scroll to maintain sidebar scroll position during navigation - Prevents page from scrolling to top after clicking sidebar links - Alpine navigate automatically saves and restores scroll position	2025-12-04 02:17:13 +09:00
Yutaka Kurosaki	1e20982e00	Simplify sidebar scroll preservation using only x-navigate directive - Remove custom sessionStorage scroll management logic - Rely solely on x-navigate directive from Alpine for scroll preservation - x-navigate handles automatic scroll position saving and restoring - Cleaner and simpler implementation - Keep x-navigate directive on all sidebar links	2025-12-04 02:13:28 +09:00
Yutaka Kurosaki	ec7aaf44a9	Fix sidebar scroll preservation per page with x-navigate directive - Add x-navigate directive to all sidebar document links for Alpine navigation - Store scroll position per page using URL path as key in sessionStorage - Each page now maintains its own scroll position in the sidebar - Save scroll position before navigation and restore after navigation - Scroll position is preserved when clicking links in the sidebar - Works correctly with Alpine navigate events triggered by x-navigate directive	2025-12-04 02:11:06 +09:00
Yutaka Kurosaki	00a5951654	Improve sidebar scroll position preservation with sessionStorage fallback - Replace localStorage with sessionStorage for session-based scroll restoration - Add console logging for debugging scroll behavior - Support both Livewire and Alpine navigate events - Intercept sidebar link clicks to ensure scroll position is saved before navigation - Use setTimeout for smoother DOM restoration timing - Restore scroll position on page load and window load events - Sidebar now maintains scroll position consistently across navigation	2025-12-04 01:55:59 +09:00
Yutaka Kurosaki	8dba510a6c	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	2025-12-04 01:47:51 +09:00
Yutaka Kurosaki	e66ece71e3	Preserve sidebar scroll position when navigating between documents - Add x-navigate:scroll directive to sidebar container to maintain scroll position - Add x-navigate:scroll to all document links in sidebar (tree-item.blade.php) - Add x-navigate:scroll to 'New Document' button - When clicking a link in sidebar, the sidebar scroll position is now preserved during page navigation - Fixes issue where sidebar would scroll to top after loading a document	2025-12-04 01:37:19 +09:00
Yutaka Kurosaki	b96012f598	Add resizable sidebar feature and increase default width to 320px - Add resizable handle on the right edge of sidebar in desktop view (lg and above) - Allow dragging to adjust sidebar width between 200px and 600px - Persist resize settings in localStorage across page reloads - Keep mobile mode unchanged with fixed 256px width - Increase default width from 256px to 320px - Implement visual feedback with color change on mouse hover	2025-12-04 01:24:47 +09:00
Yutaka Kurosaki	e50ed261e1	Show timezone information	2025-11-30 13:58:03 +09:00
Yutaka Kurosaki	79a09430aa	Fix timezone issue: Set default timezone to Asia/Tokyo - Update config/app.php to use APP_TIMEZONE from .env with Asia/Tokyo as default - Add APP_TIMEZONE to .env.example - Fixes issue where timestamps were displayed 9 hours behind (UTC vs JST) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-30 13:46:16 +09:00