gh-here 2.0.0 → 3.0.0

package/public/js/modal-manager.js

@@ -0,0 +1,70 @@
+/**
+ * Modal management utilities
+ */
+
+export function createModal(content, className = '') {
+  const modal = document.createElement('div');
+  modal.className = `modal-overlay ${className}`;
+  modal.innerHTML = content;
+
+  document.body.appendChild(modal);
+
+  return {
+    element: modal,
+    close: () => modal.remove()
+  };
+}
+
+export function showDraftDialog(filePath) {
+  return new Promise(resolve => {
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.innerHTML = `
+      <div class="modal-content draft-modal">
+        <h3>Unsaved Changes Found</h3>
+        <p>You have unsaved changes for this file. What would you like to do?</p>
+        <div class="draft-actions">
+          <button class="btn btn-primary" data-action="load">Load Draft</button>
+          <button class="btn btn-secondary" data-action="discard">Discard Draft</button>
+          <button class="btn btn-secondary" data-action="cancel">Cancel</button>
+        </div>
+      </div>
+    `;
+
+    modal.addEventListener('click', e => {
+      if (e.target.matches('[data-action]') || e.target === modal) {
+        const action = e.target.dataset?.action || 'cancel';
+        modal.remove();
+        resolve(action);
+      }
+    });
+
+    document.body.appendChild(modal);
+  });
+}
+
+export function showConfirmDialog(message, confirmText = 'Confirm', cancelText = 'Cancel') {
+  return new Promise(resolve => {
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.innerHTML = `
+      <div class="modal-content">
+        <p>${message}</p>
+        <div class="modal-actions">
+          <button class="btn btn-secondary" data-action="cancel">${cancelText}</button>
+          <button class="btn btn-primary" data-action="confirm">${confirmText}</button>
+        </div>
+      </div>
+    `;
+
+    modal.addEventListener('click', e => {
+      if (e.target.matches('[data-action]') || e.target === modal) {
+        const confirmed = e.target.dataset?.action === 'confirm';
+        modal.remove();
+        resolve(confirmed);
+      }
+    });
+
+    document.body.appendChild(modal);
+  });
+}

package/public/js/navigation.js

@@ -0,0 +1,254 @@
+/**
+ * Client-side navigation handler for smooth page transitions
+ * Optimized with request cancellation and efficient DOM updates
+ */
+
+export class NavigationHandler {
+  constructor() {
+    this.mainContentWrapper = document.querySelector('.main-content-wrapper');
+    this.isNavigating = false;
+    this.abortController = null;
+    
+    // Clear any stuck navigation state on initialization
+    this.removeNavigatingClass();
+    
+    this.setupListeners();
+  }
+
+  setupListeners() {
+    // Listen for navigation events from file tree and keyboard
+    document.addEventListener('navigate', this.handleNavigateEvent.bind(this));
+
+    // Intercept all internal link clicks (event delegation - no duplicates)
+    document.addEventListener('click', this.handleLinkClick.bind(this));
+
+    // Handle back/forward buttons
+    window.addEventListener('popstate', this.handlePopState.bind(this));
+  }
+
+  handleNavigateEvent(e) {
+    const { path } = e.detail;
+    this.navigateTo(path);
+  }
+
+  handleLinkClick(e) {
+    const link = e.target.closest('a');
+    if (!link) return;
+
+    // Skip if clicking inside quick actions or other interactive elements
+    if (e.target.closest('.quick-actions, button, .file-action-btn')) {
+      return;
+    }
+
+    // Only intercept left clicks on same-origin links without modifier keys
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey ||
+        e.button !== 0 || link.target === '_blank' || link.download) {
+      return;
+    }
+
+    if (!this.isSameOrigin(link.href)) return;
+
+    const url = new URL(link.href);
+    // Only intercept navigation within our app
+    if (url.origin === window.location.origin &&
+        (url.pathname === '/' || url.pathname === window.location.pathname)) {
+      e.preventDefault();
+      e.stopPropagation();
+      const path = url.searchParams.get('path') || '';
+      const view = url.searchParams.get('view') || '';
+      this.navigateTo(path, true, view);
+    }
+  }
+
+  handlePopState(e) {
+    const url = new URL(window.location.href);
+    const path = e.state?.path ?? (url.searchParams.get('path') || '');
+    const view = e.state?.view ?? (url.searchParams.get('view') || '');
+    this.navigateTo(path, false, view);
+  }
+
+  isSameOrigin(href) {
+    try {
+      return new URL(href, window.location.origin).origin === window.location.origin;
+    } catch {
+      return false;
+    }
+  }
+
+  // Helper to safely remove navigating class
+  removeNavigatingClass() {
+    // Re-find the element in case reference is stale
+    const wrapper = document.querySelector('.main-content-wrapper');
+    if (wrapper) {
+      wrapper.classList.remove('navigating');
+    }
+  }
+
+  async navigateTo(path, pushState = true, view = '') {
+    // Cancel any in-flight request
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    if (this.isNavigating) return;
+    this.isNavigating = true;
+
+    // Preserve existing query parameters (like showGitignored) while updating path and view
+    let url = '/';
+    const currentParams = new URLSearchParams(window.location.search);
+    const params = new URLSearchParams(currentParams); // Start with existing params
+
+    // Update path parameter
+    if (path) {
+      params.set('path', path);
+    } else {
+      params.delete('path');
+    }
+
+    // Update view parameter
+    if (view) {
+      params.set('view', view);
+    } else {
+      params.delete('view');
+    }
+
+    const queryString = params.toString();
+    if (queryString) {
+      url += `?${queryString}`;
+    }
+    this.abortController = new AbortController();
+
+    try {
+      // Re-find element in case reference is stale
+      this.mainContentWrapper = document.querySelector('.main-content-wrapper');
+      
+      // Optimize: Use class instead of inline style
+      if (this.mainContentWrapper) {
+        this.mainContentWrapper.classList.add('navigating');
+      }
+
+      // Fetch with abort signal
+      const response = await fetch(url, { signal: this.abortController.signal });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const html = await response.text();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+
+      // Extract the new content - update main-content-wrapper and sidebar if needed
+      const newMainContent = doc.querySelector('.main-content-wrapper');
+      const newBreadcrumb = doc.querySelector('.breadcrumb-section');
+      const newSidebar = doc.querySelector('.file-tree-sidebar');
+
+      if (!newMainContent) {
+        throw new Error('Content not found: missing .main-content-wrapper in response');
+      }
+
+      // If current wrapper doesn't exist, create it (shouldn't happen, but handle gracefully)
+      if (!this.mainContentWrapper) {
+        const main = document.querySelector('main');
+        if (!main) {
+          throw new Error('Content not found: missing <main> element');
+        }
+        // Create wrapper if it doesn't exist (edge case)
+        const wrapper = document.createElement('div');
+        wrapper.className = 'main-content-wrapper';
+        main.appendChild(wrapper);
+        this.mainContentWrapper = wrapper;
+      }
+
+      // Batch DOM updates
+      requestAnimationFrame(() => {
+        // Re-find in case reference changed
+        const wrapper = document.querySelector('.main-content-wrapper');
+        const main = document.querySelector('main');
+        
+        if (!wrapper) {
+          this.removeNavigatingClass();
+          return;
+        }
+
+        // Update sidebar visibility based on path (always check, even if not in new content)
+        if (main) {
+          const currentSidebar = main.querySelector('.file-tree-sidebar');
+          const hasPath = path && path !== '';
+          
+          if (currentSidebar) {
+            // Always update visibility based on path
+            if (hasPath) {
+              currentSidebar.classList.remove('hidden');
+              // Update sidebar content if new sidebar exists and structure changed
+              if (newSidebar) {
+                const newSidebarContent = newSidebar.innerHTML;
+                if (newSidebarContent !== currentSidebar.innerHTML) {
+                  currentSidebar.innerHTML = newSidebarContent;
+                }
+              }
+            } else {
+              // Hide sidebar when navigating to root
+              currentSidebar.classList.add('hidden');
+            }
+          } else if (hasPath && newSidebar) {
+            // Sidebar doesn't exist but should - insert it before main-content-wrapper
+            const sidebarClone = newSidebar.cloneNode(true);
+            sidebarClone.classList.remove('hidden');
+            main.insertBefore(sidebarClone, wrapper);
+          }
+        }
+
+        // Update breadcrumbs if they exist
+        if (newBreadcrumb) {
+          const oldBreadcrumb = wrapper.parentElement?.querySelector('.breadcrumb-section');
+          if (oldBreadcrumb) {
+            oldBreadcrumb.replaceWith(newBreadcrumb.cloneNode(true));
+          }
+        }
+
+        // Update main content wrapper content
+        wrapper.innerHTML = newMainContent.innerHTML;
+        wrapper.className = newMainContent.className;
+
+        // Update browser URL
+        if (pushState) {
+          window.history.pushState({ path, view }, '', url);
+        }
+
+        // Fade in new content - always remove navigating class
+        wrapper.classList.remove('navigating');
+        this.mainContentWrapper = wrapper; // Update reference
+
+        // Notify that content has changed
+        document.dispatchEvent(new CustomEvent('content-loaded'));
+      });
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        // Request was cancelled - still need to clean up
+        this.removeNavigatingClass();
+        this.isNavigating = false;
+        this.abortController = null;
+        return;
+      }
+      
+      // Log more detailed error info
+      console.error('Navigation failed:', {
+        error: error.message,
+        url,
+        path,
+        view,
+        hasWrapper: !!this.mainContentWrapper,
+        timestamp: new Date().toISOString()
+      });
+      
+      // Always restore state on error
+      this.removeNavigatingClass();
+      
+      // Fall back to full page load
+      window.location.href = url;
+    } finally {
+      this.isNavigating = false;
+      this.abortController = null;
+    }
+  }
+}

package/public/js/notification.js

@@ -0,0 +1,23 @@
+/**
+ * Notification system
+ */
+
+import { CONFIG } from './constants.js';
+
+export function showNotification(message, type = 'info') {
+  const existingNotifications = document.querySelectorAll('.notification');
+  existingNotifications.forEach(n => n.remove());
+
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    if (notification.parentNode) {
+      notification.style.opacity = '0';
+      setTimeout(() => notification.remove(), 300);
+    }
+  }, CONFIG.NOTIFICATION_DURATION);
+}

package/public/js/search-handler.js

@@ -0,0 +1,238 @@
+/**
+ * Context-aware file search
+ * - Directory pages: Global repository search
+ * - File view pages: Filter sidebar tree
+ */
+
+export class SearchHandler {
+  constructor() {
+    this.fileTree = document.getElementById('file-tree');
+    this.fileTable = document.getElementById('file-table');
+    this.debounceTimer = null;
+    this.searchOverlay = null;
+    this.treeItems = [];
+
+    // Determine context based on page elements
+    this.isFileViewContext = !!this.fileTree && !this.fileTable;
+
+    // Use correct search input for context
+    const searchId = this.isFileViewContext ? 'file-search' : 'root-file-search';
+    this.searchInput = document.getElementById(searchId);
+
+    this.init();
+  }
+
+  init() {
+    if (!this.searchInput) return;
+
+    if (this.isFileViewContext) {
+      this.updateTreeItems();
+      document.addEventListener('filetree-loaded', () => this.updateTreeItems());
+    }
+
+    this.setupListeners();
+  }
+
+  setupListeners() {
+    if (!this.searchInput) return;
+
+    this.searchInput.addEventListener('input', () => this.handleSearchInput());
+
+    if (!this.isFileViewContext) {
+      // Global search: show results on focus
+      this.searchInput.addEventListener('focus', () => this.handleSearchFocus());
+
+      // Close results on click outside
+      document.addEventListener('click', (e) => {
+        if (this.searchOverlay &&
+            !e.target.closest('.search-container') &&
+            !e.target.closest('.search-results-overlay')) {
+          this.hideResults();
+        }
+      });
+    }
+  }
+
+  updateTreeItems() {
+    if (this.fileTree) {
+      this.treeItems = Array.from(this.fileTree.querySelectorAll('.tree-item'));
+    }
+  }
+
+  handleSearchFocus() {
+    if (this.isFileViewContext) return;
+
+    const query = this.searchInput.value.trim();
+    if (query) {
+      this.performGlobalSearch(query);
+    }
+  }
+
+  handleSearchInput() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    const query = this.searchInput.value.trim();
+
+    if (!query) {
+      if (this.isFileViewContext) {
+        this.clearTreeFilter();
+      } else {
+        this.hideResults();
+      }
+      return;
+    }
+
+    this.debounceTimer = setTimeout(() => {
+      if (this.isFileViewContext) {
+        this.filterTree(query);
+      } else {
+        this.performGlobalSearch(query);
+      }
+    }, 200);
+  }
+
+  // File view context: Filter sidebar tree
+  filterTree(query) {
+    if (!this.fileTree || this.treeItems.length === 0) return;
+
+    const queryLower = query.toLowerCase();
+    const containers = this.fileTree.querySelectorAll('.tree-children');
+
+    // Hide all items first
+    this.treeItems.forEach(item => item.style.display = 'none');
+    containers.forEach(container => container.style.display = 'none');
+
+    // Show matching items and their parent folders
+    this.treeItems.forEach(item => {
+      const label = item.querySelector('.tree-label');
+      const fileName = label?.textContent?.toLowerCase() || '';
+
+      if (fileName.includes(queryLower)) {
+        item.style.display = '';
+
+        // Show all parent folders
+        let parent = item.parentElement;
+        while (parent && parent !== this.fileTree) {
+          if (parent.classList.contains('tree-children')) {
+            parent.style.display = '';
+          }
+          const parentItem = parent.previousElementSibling;
+          if (parentItem?.classList.contains('tree-item')) {
+            parentItem.style.display = '';
+          }
+          parent = parent.parentElement;
+        }
+      }
+    });
+  }
+
+  clearTreeFilter() {
+    if (!this.fileTree) return;
+
+    this.treeItems.forEach(item => item.style.display = '');
+    this.fileTree.querySelectorAll('.tree-children').forEach(container => {
+      container.style.display = '';
+    });
+  }
+
+  // Directory context: Global repository search
+  async performGlobalSearch(query) {
+    try {
+      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+
+      if (data.success) {
+        this.showResults(data.results, query);
+      }
+    } catch (error) {
+      console.error('Search failed:', error);
+    }
+  }
+
+  showResults(results, query) {
+    this.hideResults();
+
+    this.searchOverlay = document.createElement('div');
+    this.searchOverlay.className = 'search-results-overlay';
+
+    if (results.length === 0) {
+      this.searchOverlay.innerHTML = `
+        <div class="search-results-container">
+          <div class="search-results-header">
+            <span class="search-results-count">No results for "${query}"</span>
+          </div>
+        </div>
+      `;
+    } else {
+      const resultsList = results.map(result => {
+        const icon = result.isDirectory
+          ? '<svg class="result-icon" viewBox="0 0 16 16" width="16" height="16"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg>'
+          : '<svg class="result-icon file-icon" viewBox="0 0 16 16" width="16" height="16"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg>';
+
+        return `
+          <a href="/?path=${encodeURIComponent(result.path)}" class="search-result-item" data-path="${result.path}">
+            ${icon}
+            <div class="search-result-content">
+              <div class="search-result-path">${this.highlightMatch(result.path, query)}</div>
+            </div>
+          </a>
+        `;
+      }).join('');
+
+      this.searchOverlay.innerHTML = `
+        <div class="search-results-container">
+          <div class="search-results-header">
+            <span class="search-results-count">${results.length} result${results.length === 1 ? '' : 's'}</span>
+          </div>
+          <div class="search-results-list">
+            ${resultsList}
+          </div>
+        </div>
+      `;
+    }
+
+    const searchContainer = this.searchInput.closest('.search-container');
+    if (searchContainer) {
+      searchContainer.appendChild(this.searchOverlay);
+    }
+
+    this.searchOverlay.querySelectorAll('.search-result-item').forEach(item => {
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.location.href = item.getAttribute('href');
+      });
+    });
+  }
+
+  highlightMatch(text, query) {
+    if (!query) return text;
+
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    const index = lowerText.indexOf(lowerQuery);
+
+    if (index === -1) return text;
+
+    const before = text.substring(0, index);
+    const match = text.substring(index, index + query.length);
+    const after = text.substring(index + query.length);
+
+    return `${before}<mark class="search-highlight">${match}</mark>${after}`;
+  }
+
+  hideResults() {
+    if (this.searchOverlay) {
+      this.searchOverlay.remove();
+      this.searchOverlay = null;
+    }
+  }
+
+  focusSearch() {
+    if (this.searchInput) {
+      this.searchInput.focus();
+      this.searchInput.select();
+    }
+  }
+}

package/public/js/theme-manager.js

@@ -0,0 +1,108 @@
+/**
+ * Theme management
+ */
+
+import { THEME, STORAGE_KEYS } from './constants.js';
+
+export class ThemeManager {
+  constructor() {
+    this.html = document.documentElement;
+    this.themeToggle = null;
+    this.currentTheme = THEME.DARK;
+    this.init();
+  }
+
+  init() {
+    const systemPrefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    const systemTheme = systemPrefersDark ? THEME.DARK : THEME.LIGHT;
+    const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME) || systemTheme;
+
+    this.currentTheme = savedTheme;
+    this.setTheme(savedTheme);
+
+    // Setup listeners - try immediately, then retry after DOM is ready
+    this.setupListeners();
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => this.setupListeners());
+    }
+    
+    // Also re-setup after content changes (navigation)
+    document.addEventListener('content-loaded', () => this.setupListeners());
+  }
+
+  setupListeners() {
+    // Re-find the theme toggle button (it might be replaced after navigation)
+    const themeToggle = document.getElementById('theme-toggle');
+    
+    if (themeToggle) {
+      // Remove old listener if button was replaced
+      if (this.themeToggle && this.themeToggle !== themeToggle && this.themeToggleClickHandler) {
+        this.themeToggle.removeEventListener('click', this.themeToggleClickHandler);
+      }
+      
+      // Set up new listener if we don't have one yet or button changed
+      if (!this.themeToggle || this.themeToggle !== themeToggle || !this.themeToggleClickHandler) {
+        this.themeToggle = themeToggle;
+        this.themeToggleClickHandler = () => this.toggleTheme();
+        this.themeToggle.addEventListener('click', this.themeToggleClickHandler);
+      }
+      
+      // Update icon for current theme
+      this.updateThemeIcon(this.currentTheme);
+    }
+
+    // Setup system theme listener (only once)
+    if (window.matchMedia && !this.mediaQueryListener) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      this.mediaQueryListener = (e) => {
+        if (!localStorage.getItem(STORAGE_KEYS.THEME)) {
+          const newTheme = e.matches ? THEME.DARK : THEME.LIGHT;
+          this.setTheme(newTheme);
+        }
+      };
+      // Use addEventListener if available (modern), fallback to addListener
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', this.mediaQueryListener);
+      } else {
+        mediaQuery.addListener(this.mediaQueryListener);
+      }
+    }
+  }
+
+  toggleTheme() {
+    const newTheme = this.currentTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK;
+
+    this.currentTheme = newTheme;
+    this.setTheme(newTheme);
+    localStorage.setItem(STORAGE_KEYS.THEME, newTheme);
+
+    if (typeof monaco !== 'undefined') {
+      const monacoTheme = newTheme === THEME.DARK ? 'vs-dark' : 'vs';
+      monaco.editor.setTheme(monacoTheme);
+    }
+  }
+
+  setTheme(theme) {
+    this.currentTheme = theme;
+    this.html.setAttribute('data-theme', theme);
+    this.updateThemeIcon(theme);
+  }
+
+  updateThemeIcon(theme) {
+    const iconSvg = this.themeToggle?.querySelector('.theme-icon');
+    if (!iconSvg) {
+      return;
+    }
+
+    if (theme === THEME.DARK) {
+      iconSvg.innerHTML = '<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0zm0 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13zM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.061zm9.193 9.193a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061zM16 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8zM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8zm10.657-5.657a.75.75 0 0 1 0 1.061l-1.061 1.06a.75.75 0 1 1-1.06-1.06l1.06-1.06a.75.75 0 0 1 1.061 0zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0z"></path>';
+    } else {
+      iconSvg.innerHTML = '<path d="M9.598 1.591a.75.75 0 0 1 .785-.175 7 7 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.5 5.5 0 1 0 7.678-7.678z"></path>';
+    }
+  }
+
+  getCurrentTheme() {
+    return this.currentTheme;
+  }
+}