Add modern UI enhancements over the classic redesign
Layered progressive polish on the warm classic + brass theme: - Card entrance animation on first mount (virtualizer-aware) - Cursor-tracking brass spotlight border on cards - Thumbnail skeleton shimmer until the poster paints - Hover video preview after a short dwell (only when formats resolved) - View Transition + blurred-poster ambient backdrop on player open - Favorite heart pop + expanding ring on add - ⌘K command palette (search, theme, density, reels, source/channel) - Scroll-progress bar + back-to-top FAB - Grid density toggle (comfortable/compact) - Reels HUD: serif title, brass scrubber, muted-state pulse All new motion respects prefers-reduced-motion; no JS/HTML structure changes to the core grid/feed. New glue lives in frontend/js/enhance.js. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -77,6 +77,7 @@ App.favorites = App.favorites || {};
|
||||
if (!key) return;
|
||||
const favorites = App.favorites.getAll();
|
||||
const existingIndex = favorites.findIndex((item) => item.key === key);
|
||||
const becameFavorite = existingIndex < 0;
|
||||
if (existingIndex >= 0) {
|
||||
favorites.splice(existingIndex, 1);
|
||||
} else {
|
||||
@@ -86,6 +87,15 @@ App.favorites = App.favorites || {};
|
||||
App.favorites.setAll(favorites);
|
||||
App.favorites.renderBar();
|
||||
App.favorites.syncButtons();
|
||||
// Celebrate an add with a brass pop + ring on every button for this key.
|
||||
if (becameFavorite) {
|
||||
document.querySelectorAll(`.favorite-btn[data-fav-key="${(window.CSS && CSS.escape) ? CSS.escape(key) : key}"]`).forEach((btn) => {
|
||||
btn.classList.remove('just-favorited');
|
||||
void btn.offsetWidth; // restart the animation
|
||||
btn.classList.add('just-favorited');
|
||||
btn.addEventListener('animationend', () => btn.classList.remove('just-favorited'), { once: true });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
App.favorites.renderBar = function() {
|
||||
|
||||
Reference in New Issue
Block a user