zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
37
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: replace inline feed toggle with segmented control (#1283)

the inline "for you" text next to the heading read as a sentence
("latest tracks for you") rather than a toggle. replaced with a
proper segmented control — two pill buttons with clear active/inactive
states using the same color-mix accent pattern as settings theme buttons.

heading simplified to "tracks" with the switcher sitting alongside.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4.6 (1M context) and committed by
GitHub 62688585 793ca5b7

+46 -22
+45 -21
frontend/src/routes/+page.svelte
··· 322 322 type="button" 323 323 class="clickable-heading" 324 324 onclick={refreshFeed} 325 - onkeydown={(event) => { 326 - if (event.key === 'Enter' || event.key === ' ') { 327 - event.preventDefault(); 328 - refreshFeed(); 329 - } 330 - }} 331 325 title="click to refresh" 332 326 > 333 - {feedMode === 'for-you' ? 'for you' : 'latest tracks'} 327 + tracks 334 328 </button> 335 - {#if auth.isAuthenticated && forYouAvailable} 336 - <button class="feed-toggle" onclick={toggleFeed}> 337 - {feedMode === 'for-you' ? 'latest' : 'for you'} 338 - </button> 339 - {/if} 340 329 </h2> 330 + {#if auth.isAuthenticated && forYouAvailable} 331 + <div class="feed-switcher" role="tablist" aria-label="feed type"> 332 + <button 333 + class="feed-tab" 334 + class:active={feedMode === 'latest'} 335 + role="tab" 336 + aria-selected={feedMode === 'latest'} 337 + onclick={() => { if (feedMode !== 'latest') toggleFeed(); }} 338 + >latest</button> 339 + <button 340 + class="feed-tab" 341 + class:active={feedMode === 'for-you'} 342 + role="tab" 343 + aria-selected={feedMode === 'for-you'} 344 + onclick={() => { if (feedMode !== 'for-you') toggleFeed(); }} 345 + >for you</button> 346 + </div> 347 + {/if} 341 348 </div> 342 349 {#if feedMode === 'latest'} 343 350 <div class="filter-row"> ··· 417 424 opacity: 0.7; 418 425 } 419 426 420 - .feed-toggle { 427 + .feed-switcher { 428 + display: flex; 429 + gap: 0.25rem; 430 + background: var(--bg-secondary); 431 + border: 1px solid var(--border-subtle); 432 + border-radius: var(--radius-xl); 433 + padding: 0.2rem; 434 + } 435 + 436 + .feed-tab { 421 437 background: transparent; 422 - border: none; 423 - padding: 0; 438 + border: 1px solid transparent; 439 + border-radius: var(--radius-xl); 440 + padding: 0.35rem 0.85rem; 424 441 font: inherit; 425 - font-size: var(--text-base); 426 - font-weight: 400; 427 - color: var(--accent); 442 + font-size: var(--text-sm); 443 + color: var(--text-tertiary); 428 444 cursor: pointer; 429 - transition: opacity 0.15s; 445 + transition: all 0.15s; 430 446 user-select: none; 447 + white-space: nowrap; 431 448 } 432 449 433 - .feed-toggle:hover { 434 - opacity: 0.7; 450 + .feed-tab:hover:not(.active) { 451 + color: var(--text-secondary); 452 + } 453 + 454 + .feed-tab.active { 455 + background: color-mix(in srgb, var(--accent) 15%, transparent); 456 + border-color: var(--accent); 457 + color: var(--accent); 458 + font-weight: 600; 435 459 } 436 460 437 461 .top-tracks-grid {
+1 -1
loq.toml
··· 232 232 233 233 [[rules]] 234 234 path = "frontend/src/routes/+page.svelte" 235 - max_lines = 606 235 + max_lines = 630 236 236 237 237 [[rules]] 238 238 path = "frontend/src/lib/components/AlbumUploadForm.svelte"