Bug: Enable native Electron find-in-page (Cmd/Ctrl+F) functionality

[areibman]

Bug Report / Feature Request

Enable the native Electron find-in-page functionality (Cmd/Ctrl+F) which is currently not working. Users expect this standard keyboard shortcut to work for searching within the current page.

Description

The standard Cmd/Ctrl+F keyboard shortcut for find-in-page doesn't work in the Electron app. This is a basic browser feature that users expect to have. Electron provides built-in support for this, but it needs to be explicitly enabled.

Current Behavior

• Pressing Cmd+F (macOS) or Ctrl+F (Windows/Linux) does nothing
• No find bar appears
• Cannot search within PR descriptions, comments, or code

Expected Behavior

• Pressing Cmd/Ctrl+F should open the native Electron find bar
• Should work exactly like find-in-page in Chrome/Chromium
• Standard keyboard shortcuts should work (Enter for next, Shift+Enter for previous, Esc to close)

Simple Implementation

Enable Default Find-in-Page

// main.js or main.ts
const { app, BrowserWindow, globalShortcut } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // Enable find-in-page with default Electron implementation
  mainWindow.webContents.on('before-input-event', (event, input) => {
    if (input.type === 'keyDown') {
      // Cmd/Ctrl + F
      if ((input.meta || input.control) && input.key === 'f') {
        mainWindow.webContents.showFindBar();
        event.preventDefault();
      }
      // Escape to close find bar
      else if (input.key === 'Escape') {
        mainWindow.webContents.closeFindBar();
      }
    }
  });
}

Alternative: Using Menu

// Add to application menu
const template = [
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      { type: 'separator' },
      {
        label: 'Find',
        accelerator: 'CmdOrCtrl+F',
        click: (menuItem, browserWindow) => {
          browserWindow.webContents.showFindBar();
        }
      }
    ]
  }
];

Even Simpler: Use Built-in Role

// Simplest approach - use Electron's built-in menu roles
const template = [
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      { type: 'separator' },
      { role: 'find' }, // <-- This enables Cmd/Ctrl+F automatically
      { role: 'findNext' },
      { role: 'findPrevious' }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

Important Notes

• Use Native Implementation: Electron provides native find-in-page functionality that matches the OS behavior
• No Custom UI Needed: The native find bar looks and behaves like users expect from Chrome
• Automatic Keyboard Shortcuts: Native implementation handles all standard shortcuts automatically
• Better Performance: Native implementation is optimized and handles large documents well
• Accessibility: Native implementation includes proper accessibility support

Benefits

• Zero Custom Code: Just enable the built-in functionality
• Familiar UX: Looks and works exactly like Chrome's find
• No Maintenance: Native implementation is maintained by Electron team
• Cross-Platform: Works consistently across Windows, macOS, and Linux
• Full Feature Set: Includes match counting, highlighting, case sensitivity, etc.

Acceptance Criteria

• MUST use native Electron find-in-page functionality (not custom implementation)
• Cmd+F (macOS) / Ctrl+F (Windows/Linux) opens native find bar
• Find bar appears with native OS styling
• Enter/Return finds next match
• Shift+Enter finds previous match
• Escape closes find bar
• Matches are highlighted in the page
• Match counter shows "X of Y" results
• Works on all pages/views in the application
• No custom search UI is implemented
• Uses either showFindBar() method or menu role: 'find'

NOT in Scope

• ❌ Custom search UI
• ❌ Custom highlighting logic
• ❌ Custom keyboard handling beyond enabling the feature
• ❌ Advanced search features
• ❌ Search history
• ❌ Regex support

Testing

1. Open the application
2. Press Cmd/Ctrl+F
3. Native find bar should appear
4. Type search term
5. Verify highlighting works
6. Press Enter to go to next match
7. Press Escape to close

Resources

• Electron findInPage Documentation
• Electron Menu Roles
• Electron showFindBar()

🤖 Generated with Claude Code