Add tier-specific color-coded glow rings to member avatars by spe1020 · Pull Request #187 · zapcooking/frontend

spe1020 · 2026-02-18T00:24:56Z

Summary

Adds distinct double-layered glow rings around member avatars based on tier: gold (Founders), purple (Pro Kitchen), orange (Cook+)
Uses inline box-shadow styles instead of Svelte scoped CSS classes — fixes issue where dynamically computed class names were being stripped/mis-scoped by Svelte's compiler
Removes the old padding/border ring approach that was shrinking avatar images by up to 25%
Zero layout impact — avatars stay the exact same size regardless of membership status

Test plan

Verify glow renders on member avatars in feed, profile, and comment views
Confirm each tier has a distinct color (gold, purple, orange)
Check that non-member avatars have no glow
Toggle dark mode — glow should remain visible
Verify avatar size does not change when membership data loads

🤖 Generated with Claude Code

Co-authored-by: spe1020 <140115230+spe1020@users.noreply.github.com>

…ot/sub-pr-183

Add production KV store validation to Lightning payment verification endpoints

Truncate pubkey in Lightning invoice creation logs

Restore pubkey truncation in Lightning invoice logs

Use inline box-shadow styles instead of Svelte scoped CSS classes to avoid style pruning issues with dynamically computed class names. Each tier gets a distinct double-layered glow: - Founders: gold - Pro Kitchen: purple - Cook+: orange Removes padding/border approach that was shrinking avatars. The glow now renders purely via box-shadow with zero layout impact. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-02-18T00:26:19Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	zapcooking-frontend	`611b945`	Feb 18 2026, 12:26 AM

cloudflare-workers-and-pages · 2026-02-18T00:26:20Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	frontend	`611b945`	Feb 18 2026, 12:28 AM

cloudflare-workers-and-pages · 2026-02-18T00:26:21Z

Deploying frontend with Cloudflare Pages

Latest commit:	`611b945`
Status:	✅ Deploy successful!
Preview URL:	https://aec28883.frontend-hvd.pages.dev
Branch Preview URL:	https://feature-membership-rings-and.frontend-hvd.pages.dev

View logs

Copilot

Pull request overview

Adds tier-specific glow rings to member avatars while also tightening Lightning membership logging and production misconfiguration handling in related API endpoints.

Changes:

Reworks Avatar membership ring rendering to use tier-based inline box-shadow glow (no padding/border shrink).
Truncates logged pubkeys when creating Lightning invoices.
Returns a 503 with a clearer payload when GATED_CONTENT KV is missing in production for verify endpoints.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`src/components/Avatar.svelte`	Switches from padding/border ring to tier-colored inline `box-shadow` glow on the wrapper.
`src/routes/api/membership/create-lightning-invoice/+server.ts`	Redacts pubkey in invoice-created logs (prefix + ellipsis).
`src/routes/api/membership/verify-lightning-payment/+server.ts`	Returns 503 + logs error when KV binding is missing in prod; tweaks error payload.
`src/routes/api/genesis/create-lightning-invoice/+server.ts`	Redacts pubkey in invoice-created logs (prefix + ellipsis).
`src/routes/api/genesis/verify-lightning-payment/+server.ts`	Adds 503 + logs error when KV binding is missing in prod; tweaks error payload.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-18T00:32:28Z

src/routes/api/membership/create-lightning-invoice/+server.ts

      expiresAt = Math.floor(Date.now() / 1000) + 3600; // 1 hour default
    }

    console.log('[Membership Lightning] Invoice created:', {


The PR description focuses on avatar glow-ring UI changes, but this PR also changes backend Lightning endpoints (KV-misconfiguration handling + pubkey logging). Please update the PR description/scope to reflect the API changes, or split them into a separate PR to keep review and rollback risk isolated.

Copilot · 2026-02-18T00:32:28Z

src/components/Avatar.svelte

+        return 'box-shadow: 0 0 0 2px rgba(255,215,0,0.85), 0 0 12px 4px rgba(255,215,0,0.6), 0 0 24px 8px rgba(255,215,0,0.3);';
+      case 'pro_kitchen':
+        return 'box-shadow: 0 0 0 2px rgba(139,92,246,0.8), 0 0 12px 4px rgba(139,92,246,0.6), 0 0 24px 8px rgba(139,92,246,0.3);';
+      case 'cook_plus':
+        return 'box-shadow: 0 0 0 2px rgba(249,115,22,0.8), 0 0 12px 4px rgba(249,115,22,0.6), 0 0 24px 8px rgba(249,115,22,0.3);';
+      default:
+        return 'box-shadow: 0 0 0 2px rgba(249,115,22,0.8), 0 0 12px 4px rgba(249,115,22,0.6), 0 0 24px 8px rgba(249,115,22,0.3);';


glowStyle sets box-shadow inline on .avatar-wrapper, which will override any box-shadow-based styles passed via className (notably Tailwind ring-* and shadow-*). This is already used at least in TrendingRecipeCard.svelte (className="ring-2 ring-white"), so active members would lose that ring. Consider rendering the glow via a pseudo-element/overlay, or set a CSS var for the glow and compose it with Tailwind’s --tw-ring-* / --tw-shadow variables in .avatar-wrapper so both effects apply.

Suggested change

return 'box-shadow: 0 0 0 2px rgba(255,215,0,0.85), 0 0 12px 4px rgba(255,215,0,0.6), 0 0 24px 8px rgba(255,215,0,0.3);';

case 'pro_kitchen':

return 'box-shadow: 0 0 0 2px rgba(139,92,246,0.8), 0 0 12px 4px rgba(139,92,246,0.6), 0 0 24px 8px rgba(139,92,246,0.3);';

case 'cook_plus':

return 'box-shadow: 0 0 0 2px rgba(249,115,22,0.8), 0 0 12px 4px rgba(249,115,22,0.6), 0 0 24px 8px rgba(249,115,22,0.3);';

default:

return 'box-shadow: 0 0 0 2px rgba(249,115,22,0.8), 0 0 12px 4px rgba(249,115,22,0.6), 0 0 24px 8px rgba(249,115,22,0.3);';

return 'filter: drop-shadow(0 0 0 rgba(255,215,0,0.85)) drop-shadow(0 0 12px rgba(255,215,0,0.6)) drop-shadow(0 0 24px rgba(255,215,0,0.3));';

case 'pro_kitchen':

return 'filter: drop-shadow(0 0 0 rgba(139,92,246,0.8)) drop-shadow(0 0 12px rgba(139,92,246,0.6)) drop-shadow(0 0 24px rgba(139,92,246,0.3));';

case 'cook_plus':

return 'filter: drop-shadow(0 0 0 rgba(249,115,22,0.8)) drop-shadow(0 0 12px rgba(249,115,22,0.6)) drop-shadow(0 0 24px rgba(249,115,22,0.3));';

default:

return 'filter: drop-shadow(0 0 0 rgba(249,115,22,0.8)) drop-shadow(0 0 12px rgba(249,115,22,0.6)) drop-shadow(0 0 24px rgba(249,115,22,0.3));';

Copilot · 2026-02-18T00:32:29Z

src/routes/api/membership/verify-lightning-payment/+server.ts

+          error: 'Service unavailable',
+          message: 'GATED_CONTENT KV namespace is not configured'


This 503 response splits the details across error and message, but existing checkout pages only read data.error when surfacing failures. As a result, users will see the less actionable "Service unavailable" while the useful context is in message. Consider either keeping the full detail in error, or updating the client(s) to prefer message when present.

Suggested change

error: 'Service unavailable',

message: 'GATED_CONTENT KV namespace is not configured'

error: 'Service unavailable: GATED_CONTENT KV namespace is not configured'

Copilot · 2026-02-18T00:32:29Z

src/routes/api/genesis/verify-lightning-payment/+server.ts

+      console.error('[Genesis Lightning] GATED_CONTENT KV binding is missing in production environment');
+      return json(
+        {
+          error: 'Service unavailable',


The 503 response includes actionable info in message, but current clients typically display only data.error on non-OK responses. That means users will likely only see "Service unavailable" and miss the actual configuration hint. Consider consolidating into error, or teaching the client error handling to surface message when available.

Suggested change

error: 'Service unavailable',

error: 'Service unavailable: GATED_CONTENT KV namespace is not configured',

Copilot AI and others added 12 commits February 17, 2026 17:26

Initial plan

09a87ed

Initial plan

e214c3a

Initial plan

1bbb2e6

fix: restore pubkey truncation in Lightning invoice log for privacy

91c3e5b

Co-authored-by: spe1020 <140115230+spe1020@users.noreply.github.com>

fix: truncate pubkey in Lightning invoice log for privacy

bdf8d01

Co-authored-by: spe1020 <140115230+spe1020@users.noreply.github.com>

fix: also truncate pubkey in membership Lightning invoice log

e34596b

Co-authored-by: spe1020 <140115230+spe1020@users.noreply.github.com>

Add production KV store check to Lightning verification endpoints

56e343d

Co-authored-by: spe1020 <140115230+spe1020@users.noreply.github.com>

Merge branch 'feature/membership-rings-and-baseline-fixes' into copil…

202ee08

…ot/sub-pr-183

Merge pull request #184 from zapcooking/copilot/sub-pr-183

c593828

Add production KV store validation to Lightning payment verification endpoints

Merge pull request #185 from zapcooking/copilot/sub-pr-183-again

49205da

Truncate pubkey in Lightning invoice creation logs

Merge pull request #186 from zapcooking/copilot/sub-pr-183-another-one

93355c1

Restore pubkey truncation in Lightning invoice logs

spe1020 requested a review from Copilot February 18, 2026 00:26

Copilot started reviewing on behalf of spe1020 February 18, 2026 00:26 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

spe1020 merged commit 5fee552 into main Feb 18, 2026
8 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tier-specific color-coded glow rings to member avatars#187

Add tier-specific color-coded glow rings to member avatars#187
spe1020 merged 12 commits intomainfrom
feature/membership-rings-and-baseline-fixes

spe1020 commented Feb 18, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

		error: 'Service unavailable',
		message: 'GATED_CONTENT KV namespace is not configured'

	error: 'Service unavailable',
	message: 'GATED_CONTENT KV namespace is not configured'
	error: 'Service unavailable: GATED_CONTENT KV namespace is not configured'

Conversation

spe1020 commented Feb 18, 2026

Summary

Test plan

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026

Deploying with Cloudflare Workers

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

cloudflare-workers-and-pages bot commented Feb 18, 2026

Deploying frontend with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

cloudflare-workers-and-pages bot commented Feb 18, 2026 •

edited

Loading