cottongin
00507fe87c
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>
127 lines
4.7 KiB
HTML
127 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="popup.css">
|
|
<link rel="stylesheet" href="../content/styles/color-picker.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<h1>Reddit Tweaks</h1>
|
|
|
|
<div class="section">
|
|
<label class="toggle-row">
|
|
<span>Enabled</span>
|
|
<input type="checkbox" id="enabled">
|
|
</label>
|
|
<label class="toggle-row">
|
|
<span>Badge layout</span>
|
|
<input type="checkbox" id="badgeLayout">
|
|
</label>
|
|
<label class="toggle-row">
|
|
<span>Reddit fonts</span>
|
|
<input type="checkbox" id="fontOverride">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<label for="darkMode">Dark Mode</label>
|
|
<select id="darkMode">
|
|
<option value="auto">Auto (detect RES)</option>
|
|
<option value="light">Force Light</option>
|
|
<option value="dark">Force Dark</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Card Layout</h2>
|
|
<label class="toggle-row">
|
|
<span>Enable card layout</span>
|
|
<input type="checkbox" id="cardLayout">
|
|
</label>
|
|
<label for="cardDensity">Card Density</label>
|
|
<select id="cardDensity">
|
|
<option value="cozy">Cozy</option>
|
|
<option value="modern">Modern</option>
|
|
<option value="extra">Extra</option>
|
|
</select>
|
|
<label for="cardBackground">Background Style</label>
|
|
<select id="cardBackground">
|
|
<option value="reddit">Reddit Default</option>
|
|
<option value="shadcn">shadcn Style</option>
|
|
</select>
|
|
<label for="cardGap">Card Spacing</label>
|
|
<select id="cardGap">
|
|
<option value="1">1px</option>
|
|
<option value="2">2px</option>
|
|
<option value="4">4px</option>
|
|
<option value="6">6px</option>
|
|
<option value="8">8px</option>
|
|
<option value="12">12px</option>
|
|
<option value="16">16px</option>
|
|
<option value="24">24px</option>
|
|
<option value="32">32px</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Light Mode Colors</h2>
|
|
<fieldset>
|
|
<legend>Subreddit Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="light.subredditBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="light.subredditBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="light.subredditTextColor"></div></label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Comments Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="light.commentsBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="light.commentsBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="light.commentsTextColor"></div></label>
|
|
</fieldset>
|
|
<button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Dark Mode Colors</h2>
|
|
<fieldset>
|
|
<legend>Subreddit Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="dark.subredditBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="dark.subredditBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="dark.subredditTextColor"></div></label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Comments Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="dark.commentsBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="dark.commentsBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="dark.commentsTextColor"></div></label>
|
|
</fieldset>
|
|
<button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Color Presets</h2>
|
|
<p class="section-hint">Saved color sets. Click to apply to light subreddit badge.</p>
|
|
<div class="rt-preset-bar">
|
|
<div id="presetList" class="rt-preset-list"></div>
|
|
<button id="addPreset" class="rt-preset-add" type="button" title="Save light subreddit colors as preset">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Per-Subreddit Overrides</h2>
|
|
<p class="section-hint">Set custom subreddit badge colors per mode.</p>
|
|
<div id="subredditList"></div>
|
|
<button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<button id="resetAll" class="btn-danger">Reset All Settings</button>
|
|
</div>
|
|
</div>
|
|
<script src="../lib/settings.js"></script>
|
|
<script src="../lib/presets.js"></script>
|
|
<script src="../content/tweaks/color-picker.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|