Apple-style audiobook card & modal redesign

Add Apple-style UI refinements and UX improvements across audiobooks.

- Add app icons and update manifest/layout to reference new 180x180 and 1024x1024 app icons.
- Add global CSS animations (shimmer and toast slide-in) for improved skeletons/toasts.
- Refactor AudiobookCard: new "cover-first" design, accessibility improvements, hover actions, request handling, inline toast/error UI, status helper (status -> badge/state mapping), simplified metadata layout, and polished animations/visuals. Removed some legacy imports and adjusted request UX (shorter toasts, error timing).
- Enhance AudiobookDetailsModal: mobile-first sticky header, desktop modal polish, improved status logic, toast/notification helper, ASIN copy behavior, ebook request flows, uses preferences (squareCovers) and various layout/formatting tweaks.
- Propagate hideRequestActions from bookdate page (bookdate/page.tsx).

These changes focus on visual polish, accessibility, and smoother request/notification UX. Files changed: public manifest & icons, globals.css, app/layout.tsx, bookdate page, AudiobookCard, AudiobookDetailsModal, and PreferencesContext (context usage updated).
This commit is contained in:
kikootwo
2026-02-05 11:51:07 -05:00
parent d3dc6cf76d
commit 93d33464bf
10 changed files with 662 additions and 823 deletions
+26
View File
@@ -170,3 +170,29 @@ body {
-webkit-backface-visibility: hidden;
transform-origin: center center;
}
/* Premium Shimmer Animation for Skeletons */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Smooth Toast Slide In */
@keyframes toast-slide-in {
0% {
opacity: 0;
transform: translate(-50%, 20px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
.animate-toast-in {
animation: toast-slide-in 0.3s ease-out;
}