fix: Phase 4 Technical Debt - ESLint, Recovery Files, Bundle Optimization #13
Conversation
…tion - Add ESLint Configuration - Install ESLint with TypeScript and React plugins - Create .eslintrc.json with recommended rules - Add lint and lint:fix scripts to package.json - Configure rules for any types, unused vars, console usage - Implement Recovery File Handling - New file: src/utils/recovery-file.ts - Export recovery file with user passphrase encryption - Passphrase validation (min 8 chars, letters + numbers) - Add recovery file export UI to ProfileEditor - Modal with passphrase input and confirmation - Critical UX improvement for key backup - Optimize Bundle Size - Add lazy loading for qrcode and react-image-crop - Split heavy dependencies into separate chunks - Reduces initial bundle size - Add typecheck Script - Add 'typecheck' script to package.json - Run TypeScript type checking without emitting files - Useful for CI/CD and pre-commit hooks - Enhance Keyboard Shortcuts Documentation - Update README.md with complete shortcut list - Add all shortcuts including Shift+? help - Add platform-specific notes (Mac vs Windows/Linux) - Create Dependency Upgrade Plan - New file: docs/DEPENDENCY_UPGRADE_PLAN.md - Document upgrade priorities and timelines - Process for handling breaking changes - Security update procedures Addresses low priority technical debt from production audit: - Code quality tooling (ESLint) - Missing recovery file functionality - Bundle size optimization - Documentation improvements Phase 4 of comprehensive production audit remediation plan.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <button | ||
| onClick={() => setShowRecoveryModal(true)} | ||
| className="w-full px-4 py-2 bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 border border-yellow-600/50 rounded-lg transition focus:outline-none focus:ring-2 focus:ring-yellow-500" |
There was a problem hiding this comment.
The new recovery export UI calls setShowRecoveryModal here and later reads showRecoveryModal, recoveryPassphrase, recoveryPassphraseConfirm, recoveryError, and isExportingRecovery, but the component never declares these state hooks (only name/bio/upload state is initialized at the top). This leaves the component using undefined identifiers, so the TypeScript build will fail (and at runtime would throw ReferenceError) as soon as the file is imported, blocking the profile editor and the new recovery flow entirely.
Useful? React with 👍 / 👎.
Phase 4: Technical Debt (Low Priority)
This PR addresses 6 low-priority technical debt items identified in the production audit report.
Changes
1. Add ESLint Configuration (2 hours)
.eslintrc.jsonanytypes, unused vars, console usagelintandlint:fixto package.json2. Implement Recovery File Handling (6 hours)
src/utils/recovery-file.tssrc/popup/components/ProfileEditor.tsx3. Optimize Bundle Size (4 hours)
vite.config.tsqrcodelibrary (only needed for auth)react-image-crop(only needed for profile editor)4. Add typecheck Script (30 min)
package.jsontypecheckscriptnpm run typecheckrunstsc --noEmit5. Enhance Keyboard Shortcuts Documentation (2 hours)
README.md6. Create Dependency Upgrade Plan (30 min)
docs/DEPENDENCY_UPGRADE_PLAN.mdVerification
npm run lint- check for linting errorsnpm run typecheck- verify type checkingRelated
Part of comprehensive production audit remediation plan:
Audit Report
See
COMPREHENSIVE_AUDIT_REPORT.mdfor full details.