gh-here 3.0.3 → 3.2.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() {
@@ -20,6 +34,11 @@ class Application {
     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() {
@@ -32,6 +51,9 @@ 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();
@@ -57,8 +79,12 @@ class Application {
 
         this.setupGlobalEventListeners();
         this.setupGitignoreToggle();
-        this.setupFileOperations();
         this.highlightLinesFromHash();
+        this.initializeFileViewer();
+        this.initializeInlineSearch();
+        this.initializeFocusMode();
+        this.initializeContentSearch();
+        this.initializeSymbolOutline();
       } catch (error) {
         console.error('Error re-initializing components:', error);
       }
@@ -84,8 +110,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() {
@@ -193,68 +295,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);
@@ -332,6 +372,33 @@ class Application {
       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/css/components/buttons.css

@@ -0,0 +1,423 @@
+/**
+ * Button Styles
+ * All button variants and toggle controls
+ */
+
+/* ========================================
+   Base Button
+   ======================================== */
+
+.btn {
+  align-items: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 600;
+  gap: 8px;
+  justify-content: center;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  padding: 8px 18px;
+  position: relative;
+  transition: all var(--transition-base);
+}
+
+.btn::before {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  content: '';
+  height: 0;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.4s, height 0.4s;
+  width: 0;
+}
+
+.btn:hover::before {
+  height: 300px;
+  width: 300px;
+}
+
+/* ========================================
+   Button Variants
+   ======================================== */
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, var(--hover-bg) 0%, var(--bg-elevated) 100%);
+  border-color: var(--link-color);
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+.btn-primary:active {
+  box-shadow: var(--shadow-sm);
+  transform: translateY(0);
+}
+
+.btn-outline {
+  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.btn-outline:hover {
+  background: linear-gradient(135deg, var(--hover-bg) 0%, var(--bg-elevated) 100%);
+  border-color: var(--link-color);
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--accent-success) 0%, #10b981 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.1);
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.btn-success:hover {
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.2), 0 0 20px rgba(16, 185, 129, 0.2);
+  transform: translateY(-2px);
+}
+
+.btn-success:active {
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
+  color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+  background: var(--hover-bg);
+  border-color: var(--text-secondary);
+}
+
+/* ========================================
+   Button Icons
+   ======================================== */
+
+.btn-icon {
+  fill: currentColor;
+  height: 14px;
+  margin-right: 6px;
+  vertical-align: text-bottom;
+  width: 14px;
+}
+
+.btn-chevron {
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+}
+
+/* ========================================
+   Sidebar Button
+   ======================================== */
+
+.btn-sidebar {
+  align-items: center;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  height: 28px;
+  justify-content: center;
+  padding: 5px 12px;
+  transition: all 0.15s ease;
+  width: 100%;
+}
+
+.btn-sidebar:hover {
+  background-color: var(--bg-tertiary);
+  border-color: var(--text-secondary);
+}
+
+/* ========================================
+   Toggle Buttons
+   ======================================== */
+
+.theme-toggle,
+.gitignore-toggle,
+.edit-btn {
+  align-items: center;
+  backdrop-filter: blur(10px);
+  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  height: 36px;
+  justify-content: center;
+  margin: 0;
+  min-width: 36px;
+  overflow: hidden;
+  padding: 8px 14px;
+  position: relative;
+  transition: all var(--transition-base);
+}
+
+.theme-toggle:hover,
+.gitignore-toggle:hover,
+.edit-btn:hover {
+  background: linear-gradient(135deg, var(--hover-bg) 0%, var(--bg-elevated) 100%);
+  border-color: var(--link-color);
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+.theme-toggle:active,
+.gitignore-toggle:active,
+.edit-btn:active {
+  background: linear-gradient(135deg, var(--hover-bg-strong) 0%, var(--hover-bg) 100%);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(0) scale(0.98);
+}
+
+.gitignore-toggle.showing-ignored {
+  background: linear-gradient(135deg, rgba(88, 166, 255, 0.12) 0%, rgba(88, 166, 255, 0.08) 100%);
+  border-color: var(--link-color);
+  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
+  color: var(--link-color);
+}
+
+.gitignore-toggle.showing-ignored:hover {
+  background: linear-gradient(135deg, rgba(88, 166, 255, 0.18) 0%, rgba(88, 166, 255, 0.12) 100%);
+  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.3), var(--shadow-md);
+}
+
+.theme-icon,
+.gitignore-icon,
+.edit-icon {
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+}
+
+/* ========================================
+   View Toggle
+   ======================================== */
+
+.view-toggle {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  display: inline-flex;
+  overflow: hidden;
+  transition: all var(--transition-base);
+}
+
+.view-toggle:hover {
+  border-color: var(--border-secondary);
+  box-shadow: var(--shadow-md);
+}
+
+.view-btn {
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 500;
+  gap: 6px;
+  padding: 7px 14px;
+  position: relative;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  white-space: nowrap;
+}
+
+.view-btn::before {
+  background: var(--hover-bg);
+  content: '';
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  transition: opacity var(--transition-base);
+}
+
+.view-btn:hover {
+  color: var(--text-primary);
+}
+
+.view-btn:hover::before {
+  opacity: 1;
+}
+
+.view-btn.active {
+  background: linear-gradient(135deg, var(--link-color) 0%, var(--link-hover) 100%);
+  box-shadow: 0 2px 4px rgba(88, 166, 255, 0.3);
+  color: white;
+}
+
+.view-btn.active::before {
+  display: none;
+}
+
+.view-btn.active:hover {
+  background: linear-gradient(135deg, var(--link-hover) 0%, var(--link-color) 100%);
+  box-shadow: 0 4px 8px rgba(88, 166, 255, 0.4);
+  transform: translateY(-1px);
+}
+
+.view-btn + .view-btn {
+  border-left: 1px solid var(--border-primary);
+}
+
+.view-icon {
+  fill: currentColor;
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+}
+
+/* ========================================
+   Branch Button
+   ======================================== */
+
+.branch-button {
+  align-items: center;
+  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 600;
+  gap: 8px;
+  overflow: hidden;
+  padding: 8px 16px;
+  position: relative;
+  transition: all var(--transition-base);
+}
+
+.branch-button::before {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  content: '';
+  height: 100%;
+  left: -100%;
+  position: absolute;
+  top: 0;
+  transition: left var(--transition-slow);
+  width: 100%;
+}
+
+.branch-button:hover::before {
+  left: 100%;
+}
+
+.branch-button:hover {
+  background: linear-gradient(135deg, var(--hover-bg) 0%, var(--bg-elevated) 100%);
+  border-color: var(--link-color);
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+.branch-button:active {
+  box-shadow: var(--shadow-sm);
+  transform: translateY(0);
+}
+
+.branch-count,
+.tag-count {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  font-size: 14px;
+  gap: 6px;
+}
+
+.branch-name {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* ========================================
+   Quick Action Buttons
+   ======================================== */
+
+.quick-actions {
+  backdrop-filter: blur(8px);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  padding: 2px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: all var(--transition-base);
+  z-index: 10;
+}
+
+.file-row:hover .quick-actions {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+.quick-btn {
+  align-items: center;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  height: 28px;
+  justify-content: center;
+  padding: 5px 7px;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  width: 28px;
+}
+
+.quick-btn:hover {
+  background: var(--hover-bg);
+  border-color: var(--border-secondary);
+  box-shadow: var(--shadow-md);
+  color: var(--text-primary);
+  transform: translateY(-2px) scale(1.05);
+}
+
+.quick-btn:active {
+  box-shadow: var(--shadow-sm);
+  transform: translateY(0) scale(1);
+}
+
+.quick-icon {
+  fill: currentColor;
+  height: 12px;
+  width: 12px;
+}