Files
reddit-tweaks-ffe/chat-summaries/2026-08-28_01-08-thermo-nuclear-review-summary.md
cottongin 00507fe87c refactor: decompose CSS, unify dark mode, extract shared modules
Structural cleanup based on thermo-nuclear code quality review:
- Extract shared color-picker.css and color-popover.css from badges.css (611→85 lines)
- Extract shared lib/presets.js for preset CRUD used by popup and popover
- Unify dark mode to single applyDarkModeClass on <html>, removing 4 scattered functions
- Fix stale closure in startPostObserver, data-driven reload key check
- Remove dead exports, getHelpers wrapper, duplicated colorToHex
- Replace DOM expando properties with state array in popup.js

Net: -318 lines of duplication, no file over 401 lines.
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-28 01:39:25 -04:00

2.8 KiB
Raw Permalink Blame History

Thermo-Nuclear Code Quality Review — Reddit Tweaks Extension

Date: 2026-08-28 01:08 Task: Deep code quality audit of the full codebase using thermo-nuclear review criteria

Verdict

Not approved — several structural regressions and missed simplification opportunities identified.

Key Findings

Critical

  1. ~200 lines of CSS duplicated between content/styles/badges.css (lines 409–611) and popup/popup.css (lines 287–489). Color picker widget and preset badge styles are copy-pasted verbatim. Fix: extract shared color-picker.css.

  2. badges.css (611 lines) conflates three concerns — badge styling (~85 lines), color popover chrome (~230 lines), and color picker widget (~150 lines). Should be decomposed into separate files.

High

  1. Preset management logic duplicated across popup.js (renderPopupPresets, addPopupPreset, deletePopupPreset) and color-popover.js (renderPresets, saveAsPreset, removePreset). Nearly identical CRUD pattern. Fix: extract shared presets.js module.

  2. colorToHex identity function duplicated in both popup.js and color-popover.js.

Medium

  1. Dark mode class management scattered across 4 files with inconsistent scoping — cards.js targets <html>, badges.js targets each container, color-popover.js targets itself. Code-judo: apply rt-dark once on <html> and let CSS cascade handle the rest.

  2. DOM expando properties (entry._colorState, entry._nameInput, etc.) used as state management in popup.js. Should use plain objects.

  3. Stale closure in startPostObserver — line 47 uses captured settings instead of freshly-loaded updated.

Low

  1. Dead exports (isDarkMode, getColorPrefix) on badgeTweak object.
  2. Verbose storage change listener — four repetitive conditions should be data-driven.
  3. getHelpers() wrapper in color-popover.js adds pointless indirection.
  1. Extract shared color-picker.css (~200 lines deleted)
  2. Split badges.css into badges, popover, picker
  3. Extract shared preset module
  4. Unify dark mode to single html.rt-dark class
  5. Fix stale closure bug
  6. Clean up dead exports, verbose conditions, and unnecessary wrappers

Lessons Learned

  • The thermo-nuclear review skill is useful for catching CSS duplication that would otherwise grow silently — CSS files don't get the same refactoring attention as JS.
  • Browser extension architecture (content scripts vs popup) makes code sharing harder since there's no module system, but shared files loaded via both manifest.json and popup.html <script>/<link> tags work fine.
  • IIFE-scoped modules on a global namespace are a reasonable pattern for small extensions but make duplication easy to miss since there's no import graph to inspect.