Docs sync + DRY/reuse refactors by nathanialhenniges · Pull Request #88 · MrDemonWolf/wolfathon

nathanialhenniges · 2026-07-10T22:53:09Z

What

Two things: (1) bring the docs back in line with the current codebase, and (2) act on a DRY/reuse audit — reuse existing packages/ui primitives and packages/api helpers instead of hand-rolled copies. No behaviour change intended.

Docs sync

SETUP.md: /control → /dashboard (the operator route was renamed; README was already updated, SETUP was not).
README.md + packages/infra/.env.example: add ALCHEMY_STATE_TOKEN (deploy state moved to the shared account-wide alchemy-state CloudflareStateStore); fix the rewards overlay size 1920×1080 → 760×540; drop the retired per-overlay size-slider claims (overlays render at fixed native size now); document the rewards Mirror (?side=right) toggle.
New repo CLAUDE.md: lean pointer to README/SETUP + the non-obvious gotchas (Bun-segfaults-Alchemy → tsx deploy; public-Worker vs Access-gated /api/trpc vs ?t= overlay-token split; ALCHEMY_STATE_TOKEN) and a conventions section (use /frontend-design + /uiux-review for UI work; reuse packages/ui/packages/api over re-implementing).
Removed UIUX-REVIEW-SETTINGS-NAV-2026-07-04.md — every finding shipped (settings sidebar md:max-h/overflow-y-auto, header flex-wrap).

Refactors (from a DRY/reuse audit)

Area	Change
`twitch`	`refreshAndPersistUserToken` + `tokenFresh` + `TOKEN_REFRESH_SKEW_MS` shared by the broadcaster (api router) and bot (server worker) token paths
`theme`	Brand blue hoisted to exported `BRAND_DARK/ACCENT/LIGHT/STOPS`, reused across overlay/timer views + theme editor
`ui`	New `NumberStepper` (adopted in `subs-control` + `goal-editor`); deleted dead `card`/`dropdown-menu`/`skeleton` (0 imports)
overlays	`OverlayShell` wrapper for the 3 OBS pages; `OVERLAY_SIZES` (size + preview aspect in one place — this is what had drifted to `760×380`); `LIVE_POLL_MS` for the wheel/giveaway 3s poll
control	`import-export` copy routed through `useCopyToClipboard`; shared `ConnectionCard`/`CheckingConnection`/`DisconnectDialog` + `useOAuthCallback` for the Twitch + bot panels

Deliberately scoped out

Raw <button> → <Button>: the audit found these are mostly legitimately custom (color swatches, segmented tabs); converting them would be wrong.
usePolledPublic query hook: a shared hook around tRPC's queryOptions needs any-laden generics; the token+query stays inline (3 lines/page). The OverlayShell wrapper — the real dedup — is kept.
The connect() OAuth-redirect fn stays inline per panel (6 lines; a typed extraction costs more than it saves).

Verification

bun run check-types ✅
bun run test ✅ (153 pass)
bun run check (eslint + prettier) ✅

🤖 Generated with Claude Code

- SETUP: /control -> /dashboard (route was renamed) - README + .env.example: add ALCHEMY_STATE_TOKEN (shared alchemy-state worker); fix rewards overlay size 1920x1080 -> 760x540; drop the retired per-overlay size-slider claims; document the rewards Mirror toggle - add a lean repo CLAUDE.md (build/deploy gotchas + reuse/design conventions) - remove UIUX-REVIEW-SETTINGS-NAV: all its findings shipped Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Dedupe the broadcaster (api router) and bot (server worker) token paths onto refreshAndPersistUserToken + tokenFresh + TOKEN_REFRESH_SKEW_MS in packages/api/twitch.ts. Each caller keeps its own persist shape and error mapping; the skew constant, refresh call, and expiry math are now shared. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Replace the repeated #00aced/#5bc8f0/#0077c8 fallback literals with exported BRAND_DARK/ACCENT/LIGHT/STOPS in theme.ts, reused by the overlay + timer views and the theme editor. Also fixes the drifted 760x380 -> 760x540 doc comment in overlay-view. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- extract NumberStepper (minus / tabular-nums field / plus with clamp + step) and adopt it in subs-control and the goal-editor target stepper - delete card/dropdown-menu/skeleton (zero imports across the repo) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- OverlayShell wraps the fixed transparent frame + token-error hint for the three OBS overlay pages (the token+query stays inline — typing a wrapper around tRPC queryOptions costs more than it saves) - OVERLAY_SIZES: one home for each source's size string + preview aspect class, killing the 760x380/760x540 drift; used by overlays-tab and the previews - LIVE_POLL_MS: shared 3s cadence for the wheel + giveaway surfaces Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Replace the two hand-rolled navigator.clipboard.writeText + toast calls with the shared hook (already used by the giveaway + overlays cards). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The Twitch and bot panels shared the OAuth-callback effect, the tri-state status card + "Checking connection…" loader, and the ~40-line Disconnect confirm dialog. Extract ConnectionCard / CheckingConnection / DisconnectDialog + useOAuthCallback; each panel keeps its own (genuinely different) status body and inline connect(). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

coderabbitai · 2026-07-10T22:53:16Z

Warning

Review limit reached

@nathanialhenniges, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 27 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b52056f4-d985-4b68-8567-2dad6336753d

📥 Commits

Reviewing files that changed from the base of the PR and between 000415b and ada4a13.

📒 Files selected for processing (33)

CLAUDE.md
README.md
SETUP.md
UIUX-REVIEW-SETTINGS-NAV-2026-07-04.md
apps/server/src/index.ts
apps/web/src/app/overlay/rewards/page.tsx
apps/web/src/app/overlay/timer/page.tsx
apps/web/src/app/overlay/wheel/page.tsx
apps/web/src/components/control/bot-panel.tsx
apps/web/src/components/control/connection.tsx
apps/web/src/components/control/giveaway-tab.tsx
apps/web/src/components/control/goal-editor.tsx
apps/web/src/components/control/import-export-panel.tsx
apps/web/src/components/control/overlay-preview.tsx
apps/web/src/components/control/overlays-tab.tsx
apps/web/src/components/control/subs-control.tsx
apps/web/src/components/control/theme-editor.tsx
apps/web/src/components/control/timer-preview.tsx
apps/web/src/components/control/twitch-panel.tsx
apps/web/src/components/control/wheel-preview.tsx
apps/web/src/components/control/wheel-tab.tsx
apps/web/src/components/overlay/overlay-shell.tsx
apps/web/src/components/overlay/overlay-view.tsx
apps/web/src/components/overlay/timer-view.tsx
apps/web/src/utils/constants.ts
packages/api/src/routers/timer.ts
packages/api/src/theme.ts
packages/api/src/twitch.ts
packages/infra/.env.example
packages/ui/src/components/card.tsx
packages/ui/src/components/dropdown-menu.tsx
packages/ui/src/components/number-stepper.tsx
packages/ui/src/components/skeleton.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/docs-codebase-review-8f9e96

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nathanialhenniges and others added 7 commits July 10, 2026 17:49

refactor(control): route import/export copy through useCopyToClipboard

39488d1

Replace the two hand-rolled navigator.clipboard.writeText + toast calls with the shared hook (already used by the giveaway + overlays cards). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

nathanialhenniges merged commit 144cb66 into main Jul 10, 2026
3 checks passed

nathanialhenniges deleted the claude/docs-codebase-review-8f9e96 branch July 10, 2026 22:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Docs sync + DRY/reuse refactors - #88

Docs sync + DRY/reuse refactors#88
nathanialhenniges merged 7 commits into
mainfrom
claude/docs-codebase-review-8f9e96

nathanialhenniges commented Jul 10, 2026

Uh oh!

coderabbitai Bot commented Jul 10, 2026

Review limit reached

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

nathanialhenniges commented Jul 10, 2026

What

Docs sync

Refactors (from a DRY/reuse audit)

Deliberately scoped out

Verification

Uh oh!

coderabbitai Bot commented Jul 10, 2026

Review limit reached

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant