Complete SRC Refactor - Version 2

**Role:** Senior frontend engineer performing a safe, surgical refactor of all files under `src/`. This is a refactor — not a redesign, rewrite, or feature addition. --- ## Objectives ### 1. Decompose Into Separate Files & Components - Every component, modal, hook, and utility must live in its own dedicated file - File names must reflect their exact purpose using PascalCase for components/modals (e.g. `EntryEditingModal.tsx`, `ListEditingModal.tsx`) and camelCase for hooks/utils - **Shared/reusable components** (buttons, inputs, links, etc.) belong in a `components/shared/` or `components/ui/` directory — extract only what is used in ≥ 2 places - Modals that share a visual container structure must still be fully separate files and components — no shared modal wrappers unless the wrapper itself is a clean, prop-driven abstraction used in ≥ 2 modals without hacks - No two distinct UI concepts may share a single file ### 2. Minimize Code Size - Replace verbose expressions with concise equivalents: destructuring, optional chaining (`?.`), nullish coalescing (`??`), short-circuit logic (`&&`, `||`), early returns - Remove unnecessary variables, intermediate wrappers, and redundant type annotations - Collapse multi-line expressions into one-liners **only when readability is not harmed** - Never sacrifice clarity for brevity ### 3. Remove Dead & Redundant Code Delete without hesitation: - Unused imports, variables, functions, hooks, components, and types - Commented-out code blocks - Unreachable code and dead branches (`if (false)`, always-true/false conditions given current types/state) - `console.log`, debug artifacts, and dev-only leftovers not guarded by env checks ### 4. Extract Reusable Abstractions - If identical or near-identical TSX structure, logic, or hook usage appears **2 or more times**, extract it into a reusable component, custom hook, or utility function - Extraction is only valid if it **reduces total LOC and duplication** without increasing indirection unnecessarily - Extracted units must be used in ≥ 2 places — no speculative abstractions ### 5. Preserve Behavior Exactly The following must be **bit-for-bit identical** before and after: - All rendered UI: layout, spacing, styling, animations, classnames - All user interactions and event handling - All API calls: endpoints, payloads, headers, response handling - All state shape, transitions, and side effects - All routing, navigation, and URL behavior - Prop interfaces of any component used outside `src/` or exported from `src/index` **When in doubt, do not change it.** --- ## Hard Constraints | Constraint | Rule | |---|---| | Scope | `src/` only — no changes outside this directory | | Dependencies | No new libraries, packages, or polyfills | | Routes | No route renaming or restructuring | | Public APIs | Do not alter exported component props, hook signatures, or utility interfaces | | File types | Preserve existing extensions (`.tsx`, `.ts`, `.css`, etc.) | | Formatting | Match existing code style — do not reformat files wholesale | --- ## Decision Rules - **Unclear if code is dead?** Check all import sites. If zero active references exist in `src/`, delete it. - **Unclear if a refactor changes behavior?** Leave it unchanged. - **Two patterns look similar but aren't identical?** Only abstract if the abstraction is clean and covers both without edge-case props or hacks. - **A component does one thing in one place?** Do not extract it. - **Abstraction requires adding a prop to handle an edge case?** Not a clean abstraction — leave it separate. - **Two modals share a container layout?** Give each its own file. Only extract the container if it works as a pure, prop-agnostic wrapper used in ≥ 2 modals. --- ## Output Format - Apply changes directly to the codebase - For each modified or newly created file, output the **full file contents** (not a diff) - Do not add inline comments unless replacing a non-obvious block of removed logic - Do not add `TODO`, `FIXME`, or speculative notes - Do not explain changes unless a decision is genuinely non-obvious --- ## Validation Checklist Before marking any file complete, confirm: - [ ] Build passes with zero new TypeScript errors or warnings - [ ] No ESLint violations introduced - [ ] Visual output is pixel-identical (spot-check key views) - [ ] API call signatures are unchanged - [ ] Every file is named to reflect its exact responsibility - [ ] No two distinct UI concepts share a file - [ ] All extracted abstractions are used in ≥ 2 places - [ ] LOC is equal or lower across all modified files - [ ] No dead code remains in any modified file - [ ] No behavior change in interactions, state, or routing --- **Mantra: Decompose completely. Optimize internally. Freeze the experience.**