/* global React, ReactDOM, RETAILERS, DEALS, SM_Components, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */ const { useState, useEffect, useMemo, useRef } = window.React; const { IconSearch, IconChevron, IconBookmark, IconShare, IconBarcode, IconBell, IconArrow, IconLightning, SparkStar, Star, StarLogo, Thumb, Sparkline, LivePulse, Sidebar } = SM_Components; // ─── Retailer tab strip ───────────────────────────────────────────────────── const RetailerTabs = ({ active, onChange }) => (
{RETAILERS.map(r => { const isActive = r.id === active; return ( ); })}
App guide API ↗ FAQ
); // ─── Search bar + sort row ────────────────────────────────────────────────── const SearchBar = ({ retailer, query, onQuery, sort, onSort, onOpenFilters }) => { const r = RETAILERS.find(x => x.id === retailer); return (
onQuery(e.target.value)}/> ⌘K
); }; // ─── Page header (title + summary line) ───────────────────────────────────── const PageHeader = ({ retailer, shown, total }) => { const r = RETAILERS.find(x => x.id === retailer); return (

{r?.name} Clearance Deals

Showing {shown} of {total.toLocaleString()} active deals · refreshed 4s ago
Star Monitors may earn a referral fee on purchases.  How it works
); }; // ─── Deal row ─────────────────────────────────────────────────────────────── const DealRow = ({ deal, index, t, saved, onSave, onBarcode, onShare, copied }) => { const r = useRef(null); const dStr = t.density; const thumbSize = dStr === 'compact' ? 56 : dStr === 'comfy' ? 84 : 72; const padY = dStr === 'compact' ? 10 : dStr === 'comfy' ? 18 : 14; return (
{/* Image */}
{deal.hot && t.showHotBadges && ( HOT )}
{/* Product name & meta */}
{deal.name}
{deal.cat} · SKU {deal.sku} · UPC {deal.upc}
{/* Price */}
{deal.now} {deal.was}
{/* Discount + sparkline */}
= 60 ? 'rgba(194,167,83,0.22)' : 'rgba(194,167,83,0.10)', border: `1px solid ${deal.discount >= 60 ? 'rgba(194,167,83,0.55)' : 'rgba(194,167,83,0.30)'}`, color: 'var(--gold)', fontSize: 11.5, fontWeight: 600, fontFamily: 'var(--mono)', }}>−{deal.discount}% {t.showSparklines && }
{/* Added */}
{deal.added} first seen
{/* Locations */}
{deal.stores} {deal.stores === 1 ? 'store' : 'stores'} View map ↗
{/* Actions */}
); }; // ─── Column headers ───────────────────────────────────────────────────────── const ColumnHeaders = ({ t }) => { const dStr = t.density; const thumbSize = dStr === 'compact' ? 56 : dStr === 'comfy' ? 84 : 72; const Cell = ({ children, sortable, active }) => ( {children} {sortable && {active ? '▼' : '↕'}} ); return (
Image Product Price Discount · Trend Added Locations Action
); }; // ─── Barcode modal ────────────────────────────────────────────────────────── const BarcodeModal = ({ deal, onClose }) => { if (!deal) return null; // Generate a deterministic bar pattern from the SKU const seed = parseInt(deal.sku, 10) || 0; const bars = useMemo(() => { const arr = []; let s = seed; for (let i = 0; i < 70; i++) { s = (s * 1103515245 + 12345) & 0x7fffffff; arr.push((s % 4) + 1); } return arr; }, [seed]); return (
e.stopPropagation()} style={{ width: 460, maxWidth: 'calc(100vw - 32px)', background: 'var(--panel-elev)', border: '1px solid var(--border)', borderRadius: 14, padding: '24px 24px 20px', display: 'flex', flexDirection: 'column', gap: 16, boxShadow: '0 24px 80px rgba(0,0,0,0.6)', }}>
In-store barcode
{deal.name}
{(() => { let x = 0; const els = []; bars.forEach((w, i) => { if (i % 2 === 0) els.push(); x += w * 1.5 + 1; }); return els; })()}
{deal.sku.padStart(12, '0').match(/.{1,4}/g).join(' ')}
Show at register · location-specific pricing may vary
); }; // ─── Coming-soon placeholder for retailers not yet wired up ──────────────── const ComingSoonPanel = ({ retailer }) => { const r = RETAILERS.find(x => x.id === retailer); if (!r) return null; return (
{/* Retailer dot ring */}
Coming soon

{r.name} integration is on the way

We're wiring up {r.name}'s in-store inventory and clearance feeds. Home Depot and Lowe's are live now — flip to either tab to start sourcing while we finish this one.

Join Discord
Tracker eta · rolling out over the next few weeks
); }; // ─── Ticker (live drops) ──────────────────────────────────────────────────── const Ticker = ({ className }) => { const items = [ 'WMT · NIKE Pegasus 40 → $42 (−58%)', 'HD · DEWALT DCD777 → $89 (−47%)', 'LOW · Kobalt 80V Trimmer → $129 (−40%)', 'TGT · Instant Pot Duo 6Q → $39.98 (−56%)', 'WGN · Olay Regenerist → $14.99 (−40%)', 'CST · Kirkland Cashews 2.5lb → $14.49 (−37%)', 'HD · Milwaukee M18 Combo → $199 (−54%)', ]; return (
Latest drops
{[...items, ...items].map((s, i) => ( ● {s} ))}
); }; // ─── Main App ─────────────────────────────────────────────────────────────── const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [retailer, setRetailer] = useState('homedepot'); const [query, setQuery] = useState(''); const [sort, setSort] = useState('Added ▼'); const [saved, setSaved] = useState(new Set()); const [barcodeDeal, setBarcodeDeal] = useState(null); const [copied, setCopied] = useState(null); const [filters, setFilters] = useState({ inStock: true, clearance: true, priceDrop: false, restock: false, multi: false, }); const [drawerOpen, setDrawerOpen] = useState(false); // Lock body scroll while the mobile drawer is open useEffect(() => { if (drawerOpen) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [drawerOpen]); // Apply accent token useEffect(() => { document.documentElement.style.setProperty('--gold', t.accent); document.documentElement.style.setProperty('--gold-spark', t.accent); }, [t.accent]); const filtered = useMemo(() => { return DEALS.filter(d => { if (filters.multi && d.stores < 3) return false; if (query && !d.name.toLowerCase().includes(query.toLowerCase()) && !d.cat.toLowerCase().includes(query.toLowerCase())) return false; return true; }); }, [query, filters]); const toggleSave = (sku) => { const next = new Set(saved); if (next.has(sku)) next.delete(sku); else next.add(sku); setSaved(next); }; const handleShare = (sku) => { setCopied(sku); setTimeout(() => setCopied(null), 1400); }; const r = RETAILERS.find(x => x.id === retailer); return (
setDrawerOpen(false)}/>
setDrawerOpen(true)}/> {r?.soon ? ( ) : (
{filtered.map((d, i) => ( ))} {filtered.length === 0 && (
No deals match. Loosen the filters or clear the search.
)}
)}
setBarcodeDeal(null)}/> setTweak('accent', v)}/> setTweak('density', v)}/> setTweak('showSparklines', v)}/> setTweak('showHotBadges', v)}/> setTweak('monoNumerics', v)}/>
); }; ReactDOM.createRoot(document.getElementById('root')).render();