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

Configure Feed

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

fix: replace feed switcher pill with inline cycle toggle (#1296)

the segmented pill control for latest/for-you looked busy and
inconsistent with the rest of the UI. replace it with an inline
cycling button that matches the top tracks period toggle pattern —
tap to cycle between "latest" and "for you".

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 96d39e84 ed0da8a9

+12 -50
+12 -50
frontend/src/routes/+page.svelte
··· 341 341 > 342 342 tracks 343 343 </button> 344 + {#if auth.isAuthenticated && forYouAvailable} 345 + <button class="feed-toggle" onclick={toggleFeed}>{feedMode === 'latest' ? 'latest' : 'for you'}</button> 346 + {/if} 344 347 </h2> 345 - {#if auth.isAuthenticated && forYouAvailable} 346 - <div class="feed-switcher" role="tablist" aria-label="feed type"> 347 - <button 348 - class="feed-tab" 349 - class:active={feedMode === 'latest'} 350 - role="tab" 351 - aria-selected={feedMode === 'latest'} 352 - onclick={() => { if (feedMode !== 'latest') toggleFeed(); }} 353 - >latest</button> 354 - <button 355 - class="feed-tab" 356 - class:active={feedMode === 'for-you'} 357 - role="tab" 358 - aria-selected={feedMode === 'for-you'} 359 - onclick={() => { if (feedMode !== 'for-you') toggleFeed(); }} 360 - >for you</button> 361 - </div> 362 - {/if} 363 348 </div> 364 349 <div class="filter-row"> 365 350 <TagFilter ··· 449 434 opacity: 0.7; 450 435 } 451 436 452 - .feed-switcher { 453 - display: flex; 454 - gap: 0.25rem; 455 - background: var(--track-bg, var(--bg-secondary)); 456 - border: 1px solid var(--track-border, var(--border-subtle)); 457 - border-radius: var(--radius-md); 458 - padding: 0.2rem; 459 - } 460 - 461 - .feed-tab { 437 + .feed-toggle { 462 438 background: transparent; 463 - border: 1px solid transparent; 464 - border-radius: var(--radius-sm); 465 - padding: 0.3rem 0.75rem; 439 + border: none; 440 + padding: 0; 466 441 font: inherit; 467 - font-size: var(--text-sm); 468 - color: var(--text-tertiary); 442 + font-size: var(--text-base); 443 + font-weight: 400; 444 + color: var(--accent); 469 445 cursor: pointer; 470 - transition: all 0.15s; 446 + transition: opacity 0.15s; 471 447 user-select: none; 472 - white-space: nowrap; 473 448 } 474 449 475 - .feed-tab:hover:not(.active) { 476 - color: var(--text-secondary); 477 - background: var(--track-border, rgba(255, 255, 255, 0.06)); 478 - } 479 - 480 - .feed-tab.active { 481 - background: color-mix(in srgb, var(--accent) 12%, var(--track-bg, transparent)); 482 - border-color: color-mix(in srgb, var(--accent) 20%, var(--track-border, transparent)); 483 - color: var(--accent); 484 - font-weight: 600; 450 + .feed-toggle:hover { 451 + opacity: 0.7; 485 452 } 486 453 487 454 .top-tracks-grid { ··· 586 553 } 587 554 588 555 .section-header { 589 - display: flex; 590 - justify-content: space-between; 591 - align-items: center; 592 - gap: 1rem; 593 556 margin-bottom: 0.75rem; 594 - flex-wrap: wrap; 595 557 } 596 558 597 559 .section-header h2 {