diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..1ace430 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,294 @@ +# GitHub Copilot Instructions for WP SQLite + +## Project Overview + +WP SQLite is a desktop application for viewing and editing SQLite databases in [WordPress Studio](https://developer.wordpress.com/studio/) installations. It's built with Electron and React, providing a user-friendly interface for database management. + +WordPress Studio is a desktop application for local WordPress development. For more information, see the [Studio GitHub repository](https://github.com/Automattic/studio/). + +## Technology Stack + +- **Electron**: Desktop application framework (main and renderer processes) +- **React**: UI library for the renderer process +- **Tailwind CSS**: Utility-first CSS framework for styling +- **better-sqlite3**: SQLite3 bindings for Node.js +- **Webpack**: Module bundler for the renderer process +- **Electron Forge**: Build and packaging tool + +## Project Structure + +``` +wp-sqlite/ +├── main/ +│ └── index.js # Main Electron process with IPC handlers +├── renderer/ +│ ├── src/ +│ │ ├── App.js # Main React component +│ │ ├── components/ # React components (DatabaseViewer, TableList, TableViewer, EditRowModal, RecentDirectories) +│ │ ├── index.js # React entry point +│ │ └── styles.css # Tailwind CSS styles +│ ├── index.html # HTML template +│ └── about.html # About window +├── scripts/ +│ ├── generate-app-icons.js # Icon generation script +│ └── generate-tray-icon.js # Tray icon generation +├── preload.js # Electron preload script (security bridge) +├── webpack.config.js # Webpack configuration +└── forge.config.js # Electron Forge configuration +``` + +## Architecture and Patterns + +### Electron IPC Communication + +The app uses Electron's IPC (Inter-Process Communication) for secure communication between main and renderer processes: + +- **Main Process** (`main/index.js`): Handles IPC requests, database operations, file system access +- **Renderer Process** (`renderer/src/`): React UI that makes IPC calls via `window.electronAPI` +- **Preload Script** (`preload.js`): Exposes secure API via `contextBridge` + +**Important:** Always use IPC for database operations. Never directly access SQLite from the renderer process. + +### IPC Handlers + +Main process handlers available: +- `select-directory`: Directory picker for WordPress Studio installation +- `get-database-info`: Database path and table count +- `get-tables`: List all tables +- `get-table-data`: Paginated table data +- `get-table-row-count`: Total row count +- `execute-query`: Custom SQL query execution +- `update-row`, `delete-row`, `insert-row`: CRUD operations +- `get-recent-directories`, `select-recent-directory`: Recent directory management + +### React Component Patterns + +- **Functional Components**: Use functional components with hooks +- **State Management**: Use React's `useState` and `useEffect` hooks +- **Props**: Pass data and callbacks via props +- **Event Handlers**: Prefix handler functions with `handle` (e.g., `handleEdit`, `handleDelete`) + +### Database Operations + +**Critical Security Rule:** All SQL queries MUST use parameterized statements to prevent SQL injection: + +```javascript +// ✅ Good - Parameterized values with validated table name +// Note: Table names cannot be parameterized, so validate against a whitelist +const validTables = db.prepare("SELECT name FROM sqlite_master WHERE type='table'").all().map(t => t.name); +if (!validTables.includes(tableName)) { + throw new Error('Invalid table name'); +} +const stmt = db.prepare(`SELECT * FROM ${tableName} LIMIT ? OFFSET ?`); +const data = stmt.all(limit, offset); + +// ❌ Bad - Direct concatenation of user values (SQL injection risk!) +const query = `SELECT * FROM users WHERE name = '${userName}'`; // NEVER DO THIS +// Correct version: db.prepare('SELECT * FROM users WHERE name = ?').all(userName); +``` + +### WordPress Studio Database Location + +The app expects the SQLite database at: +``` +{wordpress-studio-directory}/wp-content/database/.ht.sqlite +``` + +Example paths: +- macOS: `/Users/username/Studio/my-site/wp-content/database/.ht.sqlite` +- Windows: `C:\Users\username\Studio\my-site\wp-content\database\.ht.sqlite` +- Linux: `/home/username/Studio/my-site/wp-content/database/.ht.sqlite` + +## Development Workflow + +### Available Commands + +- `npm run dev`: Start development mode (generates icons, runs webpack watch, launches Electron) +- `npm run build`: Build for production +- `npm run generate-all`: Generate all application icons +- `npm run make`: Create platform-specific distributables +- `npm start`: Start the application without watch mode + +### Development Mode + +When working on the app: +1. Run `npm run dev` to start development server +2. Webpack watches for changes in renderer code +3. React components hot reload automatically +4. Main process changes require app restart + +## Code Style and Conventions + +### JavaScript/React + +- Use ES6+ syntax (arrow functions, destructuring, template literals) +- Use `const` and `let`, avoid `var` +- Prefer functional components over class components +- Use meaningful variable and function names +- Keep components focused and single-purpose + +### Naming Conventions + +- **Components**: PascalCase (e.g., `DatabaseViewer`, `TableList`) +- **Files**: Match component names (e.g., `DatabaseViewer.js`) +- **Functions**: camelCase (e.g., `handleSelectDirectory`) +- **Event Handlers**: Prefix with `handle` (e.g., `handleEdit`, `handleDelete`) +- **IPC Channels**: kebab-case (e.g., `select-directory`, `get-table-data`) + +### CSS/Styling + +- Use Tailwind CSS utility classes +- Keep inline styles for dynamic values only +- Follow existing Tailwind patterns in components +- Use `@tailwindcss/forms` plugin for form elements + +## Common Tasks + +### Adding a New IPC Handler + +1. Add handler in `main/index.js`: +```javascript +ipcMain.handle('my-handler', async (event, arg) => { + // Implementation + return result; +}); +``` + +2. Expose in `preload.js`: +```javascript +contextBridge.exposeInMainWorld('electronAPI', { + myFunction: (arg) => ipcRenderer.invoke('my-handler', arg) +}); +``` + +3. Call from React: +```javascript +const result = await window.electronAPI.myFunction(arg); +``` + +### Adding a New Component + +1. Create component file in `renderer/src/components/` +2. Use functional component with hooks +3. Import and use Tailwind classes for styling +4. Export as default +5. Import in parent component + +### Modifying Database Queries + +- Always use parameterized statements +- Test with WordPress Studio database +- Handle errors gracefully +- Consider pagination for large result sets + +## Testing + +### Manual Testing + +1. Create test WordPress Studio directory structure: + +**macOS/Linux:** +```bash +mkdir -p ~/test-wp-studio/wp-content/database +``` + +**Windows (PowerShell):** +```powershell +New-Item -ItemType Directory -Path "$env:USERPROFILE\test-wp-studio\wp-content\database" -Force +``` + +2. Use the app to open and test functionality +3. Test CRUD operations (Create, Read, Update, Delete) +4. Test pagination with large datasets +5. Test error handling with invalid directories + +**Note:** This project does not currently have automated tests. When adding code, ensure manual testing covers: +- Directory selection and validation +- Table listing +- Data viewing with pagination +- Row editing and deletion +- Error states and edge cases + +## Security Considerations + +### Critical Security Rules + +1. **SQL Injection Prevention**: ALWAYS use parameterized statements, NEVER concatenate user input into SQL queries +2. **Directory Validation**: Only allow selection of valid WordPress Studio directories with expected structure +3. **Read-only Primary Keys**: Primary key fields must not be editable to prevent data corruption +4. **Secure IPC**: Use `contextBridge` to expose limited API surface to renderer +5. **No Remote Code Execution**: All SQL executes locally, no network requests + +### When Adding Features + +- Validate all user input +- Use parameterized SQL queries +- Sanitize file paths +- Handle errors without exposing sensitive information +- Follow Electron security best practices + +## Platform-Specific Considerations + +### Cross-Platform Support + +The app supports macOS, Windows, and Linux: +- Use `path.join()` for file paths (not string concatenation) +- Test on target platforms when possible +- Use Electron Forge platform-specific configurations in `forge.config.js` + +### Icons and Assets + +- Application icons generated from `assets/icons/icon.png` +- Tray icon at `assets/tray-icon.png` +- Run `npm run generate-all` after changing source icons + +## Dependencies + +### Core Dependencies + +- `better-sqlite3`: Direct SQLite access (main process only) +- `electron-store`: Persistent storage for recent directories +- `react` and `react-dom`: UI framework +- `tailwindcss`: Styling + +### Development Dependencies + +- `webpack` and loaders: Bundling +- `electron-forge`: Building and packaging +- `sharp`: Icon processing + +### Adding New Dependencies + +1. Install via npm: `npm install package-name` +2. Import where needed +3. Ensure compatibility with Electron +4. Test build and packaging still work + +## Common Pitfalls to Avoid + +1. **Don't** access SQLite directly from renderer process +2. **Don't** use string concatenation for SQL queries +3. **Don't** forget to handle errors in IPC handlers +4. **Don't** block the main process with long-running operations +5. **Don't** modify primary keys when editing rows +6. **Don't** forget to validate directory structure before accessing database +7. **Don't** use synchronous file system operations in the main process unnecessarily + +## Helpful Context + +- The app is specifically designed for WordPress Studio SQLite databases +- WordPress Studio uses `.ht.sqlite` as the database filename +- Database path: `wp-content/database/.ht.sqlite` relative to Studio installation +- The app stores recent directories using `electron-store` for quick access +- System tray integration allows running in background + +## Future Enhancement Areas + +When considering new features, these areas have been identified for potential enhancement: +- Export/import functionality (CSV/JSON) +- SQL query console +- Table schema editor +- Database backup/restore +- Dark mode theme +- Keyboard shortcuts +- Undo/Redo for data changes