gh-here 3.0.2 → 3.1.0

package/public/app.js

@@ -1,16 +1,30 @@
 /**
  * Main application entry point
  * Coordinates all modules and initializes the application
+ * @module app
  */
 
-import { ThemeManager } from './js/theme-manager.js';
-import { SearchHandler } from './js/search-handler.js';
-import { KeyboardHandler } from './js/keyboard-handler.js';
+// ============================================================================
+// Imports (alpha-sorted)
+// ============================================================================
+
+import { ContentSearchHandler } from './js/content-search-handler.js';
+import { copyToClipboard } from './js/clipboard-utils.js';
 import { FileTreeNavigator } from './js/file-tree.js';
+import { FileViewer } from './js/file-viewer.js';
+import { FocusMode } from './js/focus-mode.js';
+import { InlineSearch } from './js/inline-search.js';
+import { KeyboardHandler } from './js/keyboard-handler.js';
 import { NavigationHandler } from './js/navigation.js';
 import { PathUtils } from './js/utils.js';
+import { SearchHandler } from './js/search-handler.js';
 import { showNotification } from './js/notification.js';
-import { copyToClipboard } from './js/clipboard-utils.js';
+import { SymbolOutline } from './js/symbol-outline.js';
+import { ThemeManager } from './js/theme-manager.js';
+
+// ============================================================================
+// Application Class
+// ============================================================================
 
 class Application {
   constructor() {
@@ -19,6 +33,12 @@ class Application {
     this.keyboardHandler = null;
     this.fileTree = null;
     this.navigationHandler = null;
+    this.lastSelectedLine = null;
+    this.fileViewer = null;
+    this.inlineSearch = null;
+    this.focusMode = null;
+    this.contentSearch = null;
+    this.symbolOutline = null;
   }
 
   init() {
@@ -31,19 +51,22 @@ class Application {
     // Re-initialize components after client-side navigation
     document.addEventListener('content-loaded', () => {
       try {
+        // Cleanup existing components before re-initializing
+        this.cleanupComponents();
+
         // Re-initialize theme manager listeners (button might be re-rendered)
         if (this.themeManager) {
           this.themeManager.setupListeners();
         }
-        
+
         // Re-initialize components that need fresh DOM references
         this.searchHandler = new SearchHandler();
         this.keyboardHandler = new KeyboardHandler(this.searchHandler);
-        
+
         // Re-initialize file tree when sidebar becomes visible
         const sidebar = document.querySelector('.file-tree-sidebar');
         const treeContainer = document.getElementById('file-tree');
-        
+
         if (sidebar && treeContainer && !sidebar.classList.contains('hidden')) {
           // Sidebar is visible - initialize or re-initialize file tree
           if (!this.fileTree || !this.fileTree.isInitialized || this.fileTree.treeContainer !== treeContainer) {
@@ -53,10 +76,14 @@ class Application {
           // Sidebar is hidden - don't initialize but keep reference for when it becomes visible
           this.fileTree = null;
         }
-        
+
         this.setupGlobalEventListeners();
         this.setupGitignoreToggle();
-        this.setupFileOperations();
+        this.highlightLinesFromHash();
+        this.initializeFileViewer();
+        this.initializeInlineSearch();
+        this.initializeFocusMode();
+        this.initializeContentSearch();
       } catch (error) {
         console.error('Error re-initializing components:', error);
       }
@@ -72,7 +99,7 @@ class Application {
     // Initialize components
     this.searchHandler = new SearchHandler();
     this.keyboardHandler = new KeyboardHandler(this.searchHandler);
-    
+
     // Initialize file tree if sidebar is visible (not hidden)
     const sidebar = document.querySelector('.file-tree-sidebar');
     const treeContainer = document.getElementById('file-tree');
@@ -82,7 +109,84 @@ class Application {
 
     this.setupGlobalEventListeners();
     this.setupGitignoreToggle();
-    this.setupFileOperations();
+    this.highlightLinesFromHash();
+    this.initializeFileViewer();
+    this.initializeInlineSearch();
+    this.initializeFocusMode();
+    this.initializeContentSearch();
+    this.initializeSymbolOutline();
+  }
+
+  // ========================================================================
+  // Component Initialization
+  // ========================================================================
+
+  /**
+   * Check if current page is a file view page
+   */
+  isFileViewPage() {
+    const fileContent = document.querySelector('.file-content');
+    return fileContent?.querySelector('pre code.hljs.with-line-numbers') !== null;
+  }
+
+  /**
+   * Initialize Monaco-based file viewer
+   */
+  initializeFileViewer() {
+    if (!this.isFileViewPage()) return;
+
+    // Wait for Monaco to be ready
+    if (typeof require === 'undefined' || !window.monacoReady) {
+      // Wait a bit and try again
+      setTimeout(() => this.initializeFileViewer(), 100);
+      return;
+    }
+
+    if (!this.fileViewer) {
+      this.fileViewer = new FileViewer();
+    }
+  }
+
+  /**
+   * Initialize inline search component
+   * Note: Skipped when Monaco viewer is active (Monaco has built-in search)
+   */
+  initializeInlineSearch() {
+    if (!this.isFileViewPage()) return;
+    
+    // Skip if Monaco viewer is active
+    if (document.querySelector('.monaco-file-viewer')) {
+      return;
+    }
+
+    if (!this.inlineSearch) {
+      this.inlineSearch = new InlineSearch();
+    }
+    this.inlineSearch.init();
+  }
+
+  initializeFocusMode() {
+    if (!this.focusMode) {
+      this.focusMode = new FocusMode();
+    }
+    this.focusMode.init();
+  }
+
+  /**
+   * Initialize symbol outline panel
+   */
+  initializeSymbolOutline() {
+    // Cleanup previous instance
+    if (this.symbolOutline) {
+      this.symbolOutline.destroy();
+      this.symbolOutline = null;
+    }
+
+    // Only initialize on file view pages
+    if (!this.isFileViewPage()) return;
+
+    this.symbolOutline = new SymbolOutline();
+    this.symbolOutline.init();
   }
 
   setupGlobalEventListeners() {
@@ -104,6 +208,16 @@ class Application {
   }
 
   handleGlobalClick(e) {
+    // Line number selection (like GitHub)
+    const lineNumber = e.target.closest('.line-number');
+    if (lineNumber) {
+      e.preventDefault();
+      e.stopPropagation();
+      const lineNum = parseInt(lineNumber.textContent.trim(), 10);
+      this.handleLineSelection(lineNum, e.shiftKey);
+      return;
+    }
+
     // Copy path button
     const copyPathBtn = e.target.closest('.copy-path-btn, .file-path-copy-btn');
     if (copyPathBtn) {
@@ -180,68 +294,6 @@ class Application {
   }
 
 
-  setupFileOperations() {
-    document.addEventListener('click', async e => {
-      if (e.target.closest('.delete-btn')) {
-        const btn = e.target.closest('.delete-btn');
-        const itemPath = btn.dataset.path;
-        const itemName = btn.dataset.name;
-        const isDirectory = btn.dataset.isDirectory === 'true';
-
-        const message = `Are you sure you want to delete ${isDirectory ? 'folder' : 'file'} "${itemName}"?`;
-        if (!confirm(message)) {
-          return;
-        }
-
-        try {
-          const response = await fetch('/api/delete', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ path: itemPath })
-          });
-
-          if (!response.ok) {
-            throw new Error('Delete failed');
-          }
-
-          showNotification(`${isDirectory ? 'Folder' : 'File'} deleted successfully`, 'success');
-          setTimeout(() => window.location.reload(), 600);
-        } catch (error) {
-          showNotification('Failed to delete item', 'error');
-        }
-      }
-
-      if (e.target.closest('.rename-btn')) {
-        const btn = e.target.closest('.rename-btn');
-        const itemPath = btn.dataset.path;
-        const currentName = btn.dataset.name;
-        const isDirectory = btn.dataset.isDirectory === 'true';
-
-        const newName = prompt(`Rename ${isDirectory ? 'folder' : 'file'}:`, currentName);
-        if (!newName || newName.trim() === currentName) {
-          return;
-        }
-
-        try {
-          const response = await fetch('/api/rename', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ path: itemPath, newName: newName.trim() })
-          });
-
-          if (!response.ok) {
-            throw new Error('Rename failed');
-          }
-
-          showNotification(`Renamed to "${newName.trim()}"`, 'success');
-          setTimeout(() => window.location.reload(), 600);
-        } catch (error) {
-          showNotification('Failed to rename item', 'error');
-        }
-      }
-    });
-  }
-
   showDiffViewer(filePath) {
     // Simplified - redirect to diff view
     const url = new URL(window.location.href);
@@ -264,6 +316,88 @@ class Application {
       showNotification('Failed to copy raw content', 'error');
     }
   }
+
+  handleLineSelection(lineNum, shiftKey) {
+    // If shift is held and we have a previous selection, select range
+    if (shiftKey && this.lastSelectedLine) {
+      const start = Math.min(this.lastSelectedLine, lineNum);
+      const end = Math.max(this.lastSelectedLine, lineNum);
+      this.highlightLines(start, end);
+      this.updateUrlHash(start, end);
+    } else {
+      // Single line selection
+      this.highlightLines(lineNum, lineNum);
+      this.updateUrlHash(lineNum, lineNum);
+      this.lastSelectedLine = lineNum;
+    }
+  }
+
+  highlightLines(start, end) {
+    // Clear all existing selections and highlight new range in one pass
+    document.querySelectorAll('.line-container').forEach(el => {
+      const lineNum = parseInt(el.dataset.line, 10);
+      if (lineNum >= start && lineNum <= end) {
+        el.classList.add('selected');
+      } else {
+        el.classList.remove('selected');
+      }
+    });
+  }
+
+  updateUrlHash(start, end) {
+    const hash = start === end ? `L${start}` : `L${start}-L${end}`;
+    // Use history API to update URL without scrolling - preserve path and query params
+    const url = new URL(window.location);
+    url.hash = hash;
+    history.replaceState(null, null, url);
+  }
+
+  highlightLinesFromHash() {
+    const hash = window.location.hash.slice(1); // Remove #
+    if (!hash.startsWith('L')) return;
+
+    const match = hash.match(/^L(\d+)(?:-L(\d+))?$/);
+    if (!match) return;
+
+    const start = parseInt(match[1], 10);
+    const end = match[2] ? parseInt(match[2], 10) : start;
+
+    this.highlightLines(start, end);
+    this.lastSelectedLine = start;
+
+    // Scroll to the first selected line
+    const firstLine = document.querySelector(`.line-container[data-line="${start}"]`);
+    if (firstLine) {
+      firstLine.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
+  initializeContentSearch() {
+    if (!this.contentSearch) {
+      this.contentSearch = new ContentSearchHandler();
+    }
+    this.contentSearch.init();
+  }
+
+  /**
+   * Cleanup components before navigation/re-initialization
+   */
+  cleanupComponents() {
+    // Cleanup file viewer
+    if (this.fileViewer && typeof this.fileViewer.destroy === 'function') {
+      this.fileViewer.destroy();
+      this.fileViewer = null;
+    }
+
+    // Cleanup inline search
+    if (this.inlineSearch && typeof this.inlineSearch.destroy === 'function') {
+      this.inlineSearch.destroy();
+      this.inlineSearch = null;
+    }
+
+    // Focus mode persists across navigations, no cleanup needed
+    // Content search persists across navigations, no cleanup needed
+  }
 }
 
 const app = new Application();

package/public/js/constants.js

@@ -1,60 +1,76 @@
 /**
  * Application constants and configuration
+ * @module constants
  */
 
+// ============================================================================
+// Configuration
+// ============================================================================
+
 export const CONFIG = {
-  MONACO_CDN: 'https://unpkg.com/monaco-editor@0.45.0/min/vs',
-  MONACO_VERSION: '0.45.0',
-  EDITOR_HEIGHT: 600,
   DEFAULT_PORT: 5555,
+  MONACO_CDN: 'https://unpkg.com/monaco-editor@0.45.0/min/vs',
   NOTIFICATION_DURATION: 4000
 };
 
+// ============================================================================
+// Enums
+// ============================================================================
+
 export const THEME = {
   DARK: 'dark',
   LIGHT: 'light'
 };
 
+// ============================================================================
+// Storage Keys
+// ============================================================================
+
 export const STORAGE_KEYS = {
-  THEME: 'gh-here-theme',
-  DRAFT_PREFIX: 'gh-here-draft-'
+  THEME: 'gh-here-theme'
 };
 
+// ============================================================================
+// Keyboard Shortcuts (alpha-sorted)
+// ============================================================================
+
+export const KEYBOARD_SHORTCUTS = {
+  ESCAPE: 'Escape',
+  GO_UP: 'h',
+  HELP: '?',
+  NAV_DOWN: 'j',
+  NAV_UP: 'k',
+  OPEN: 'o',
+  REFRESH: 'r',
+  SEARCH: ['/', 's'],
+  SHOW_DIFF: 'd',
+  THEME_TOGGLE: 't',
+  TOGGLE_GITIGNORE: 'i'
+};
+
+// ============================================================================
+// Monaco Editor Options (for FileViewer read-only mode)
+// ============================================================================
+
 export const EDITOR_OPTIONS = {
-  minimap: { enabled: false },
-  lineNumbers: 'on',
-  wordWrap: 'off',
-  scrollBeyondLastLine: false,
-  fontSize: 12,
-  lineHeight: 20,
-  fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
-  padding: { top: 16, bottom: 16 },
-  renderLineHighlight: 'line',
-  selectOnLineNumbers: true,
   automaticLayout: true,
+  bracketPairColorization: { enabled: true },
   folding: true,
   foldingHighlight: true,
   foldingStrategy: 'auto',
-  showFoldingControls: 'mouseover',
-  bracketPairColorization: { enabled: true },
+  fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: 12,
   guides: {
     bracketPairs: true,
     indentation: true
-  }
-};
-
-export const KEYBOARD_SHORTCUTS = {
-  SEARCH: ['/', 's'],
-  THEME_TOGGLE: 't',
-  HELP: '?',
-  ESCAPE: 'Escape',
-  GO_UP: 'h',
-  REFRESH: 'r',
-  CREATE_FILE: 'c',
-  EDIT_FILE: 'e',
-  SHOW_DIFF: 'd',
-  TOGGLE_GITIGNORE: 'i',
-  NAV_DOWN: 'j',
-  NAV_UP: 'k',
-  OPEN: 'o'
+  },
+  lineHeight: 20,
+  lineNumbers: 'on',
+  minimap: { enabled: false },
+  padding: { top: 16, bottom: 16 },
+  renderLineHighlight: 'line',
+  scrollBeyondLastLine: false,
+  selectOnLineNumbers: true,
+  showFoldingControls: 'mouseover',
+  wordWrap: 'off'
 };