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:
@@ -21,6 +21,13 @@ App.ui = App.ui || {};
|
||||
if (select) select.value = App.storage.getFeedEndBehavior();
|
||||
};
|
||||
|
||||
App.ui.applyDensity = function() {
|
||||
const density = App.storage.getDensity();
|
||||
document.body.dataset.density = density;
|
||||
const select = document.getElementById('density-select');
|
||||
if (select) select.value = density;
|
||||
};
|
||||
|
||||
// Toast helper for playback + network errors.
|
||||
App.ui.showError = function(message) {
|
||||
const toast = document.getElementById('error-toast');
|
||||
@@ -286,6 +293,18 @@ App.ui = App.ui || {};
|
||||
};
|
||||
}
|
||||
|
||||
const densitySelect = document.getElementById('density-select');
|
||||
if (densitySelect) {
|
||||
densitySelect.value = App.storage.getDensity();
|
||||
densitySelect.onchange = () => {
|
||||
App.storage.setDensity(densitySelect.value);
|
||||
App.ui.applyDensity();
|
||||
if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
|
||||
App.virtualGrid.relayout();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const feedEndSelect = document.getElementById('feed-end-select');
|
||||
if (feedEndSelect) {
|
||||
feedEndSelect.value = App.storage.getFeedEndBehavior();
|
||||
|
||||
Reference in New Issue
Block a user