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).

public/manifest.json

@@ -8,15 +8,10 @@
   "theme_color": "#1e3a5f",
   "icons": [
     {
-      "src": "/RMAB_1024x1024_ICON.png",
+      "src": "/RMAB_1024x1024_APPICON.png",
       "sizes": "1024x1024",
       "type": "image/png",
       "purpose": "any maskable"
-    },
-    {
-      "src": "/rmab_32x32.png",
-      "sizes": "32x32",
-      "type": "image/png"
     }
   ]
 }

src/app/bookdate/page.tsx

@@ -414,6 +414,7 @@ export default function BookDatePage() {
             requestStatus={currentRec.requestStatus}
             isAvailable={currentRec.isAvailable}
             requestedByUsername={currentRec.requestedByUsername}
+            hideRequestActions
           />
         ) : null;
       })()}

src/app/globals.css

@@ -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;
+}

src/app/layout.tsx

@@ -30,7 +30,8 @@ export const metadata: Metadata = {
     ],
     shortcut: "/rmab_icon.ico",
     apple: [
-      { url: "/RMAB_1024x1024_ICON.png", sizes: "1024x1024", type: "image/png" },
+      { url: "/RMAB_180x180_APPICON.png", sizes: "180x180", type: "image/png" },
+      { url: "/RMAB_1024x1024_APPICON.png", sizes: "1024x1024", type: "image/png" },
     ],
   },
   appleWebApp: {

src/components/audiobooks/AudiobookCard.tsx

@@ -1,14 +1,15 @@
 /**
  * Component: Audiobook Card
  * Documentation: documentation/frontend/components.md
+ *
+ * Premium "Cover First" design - Apple-inspired aesthetic
+ * The cover is the hero. Metadata supports, never overwhelms.
  */
 
 'use client';
 
 import React, { useState } from 'react';
 import Image from 'next/image';
-import { Button } from '@/components/ui/Button';
-import { StatusBadge } from '@/components/requests/StatusBadge';
 import { AudiobookDetailsModal } from '@/components/audiobooks/AudiobookDetailsModal';
 import { useCreateRequest } from '@/lib/hooks/useRequests';
 import { useAuth } from '@/contexts/AuthContext';
@@ -22,10 +23,31 @@ interface AudiobookCardProps {
   squareCovers?: boolean;
 }
 
+// Status configuration for elegant display
+const getStatusConfig = (audiobook: Audiobook) => {
+  if (audiobook.isAvailable || audiobook.requestStatus === 'completed') {
+    return { type: 'available', label: 'In Library', color: 'emerald' };
+  }
+
+  const processingStatuses = ['downloading', 'processing', 'downloaded', 'awaiting_import'];
+  if (audiobook.requestStatus && processingStatuses.includes(audiobook.requestStatus)) {
+    return { type: 'processing', label: 'Processing', color: 'amber' };
+  }
+
+  const pendingStatuses = ['pending', 'awaiting_search', 'searching', 'awaiting_approval'];
+  if (audiobook.requestStatus && pendingStatuses.includes(audiobook.requestStatus)) {
+    return { type: 'pending', label: 'Requested', color: 'blue' };
+  }
+
+  if (audiobook.requestStatus === 'denied') {
+    return { type: 'denied', label: 'Denied', color: 'red' };
+  }
+
+  return null;
+};
+
 export function AudiobookCard({
   audiobook,
-  isRequested = false,
-  requestStatus,
   onRequestSuccess,
   squareCovers = false,
 }: AudiobookCardProps) {
@@ -35,223 +57,194 @@ export function AudiobookCard({
   const [error, setError] = useState<string | null>(null);
   const [showModal, setShowModal] = useState(false);
 
-  const handleRequest = async () => {
+  const status = getStatusConfig(audiobook);
+
+  const handleRequest = async (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (!user) {
       setError('Please log in to request audiobooks');
+      setTimeout(() => setError(null), 3000);
       return;
     }
 
     try {
       await createRequest(audiobook);
       setShowToast(true);
-      setTimeout(() => setShowToast(false), 3000);
+      setTimeout(() => setShowToast(false), 2500);
       onRequestSuccess?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create request');
-      setTimeout(() => setError(null), 5000);
+      setTimeout(() => setError(null), 4000);
     }
   };
 
-  const formatDuration = (minutes?: number) => {
-    if (!minutes) return null;
-    const hours = Math.floor(minutes / 60);
-    const mins = minutes % 60;
-    return `${hours}h ${mins}m`;
-  };
+  // Determine if we can request this book
+  const canRequest = !status || status.type === 'denied';
 
   return (
     <>
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300">
-        {/* Cover Art - Clickable */}
-        <div
-          className={`relative bg-gray-200 dark:bg-gray-700 cursor-pointer group overflow-hidden ${
-            squareCovers ? 'aspect-square' : 'aspect-[2/3]'
-          }`}
-          onClick={() => setShowModal(true)}
-        >
-          {audiobook.coverArtUrl ? (
-            <Image
-              src={audiobook.coverArtUrl}
-              alt={`Cover art for ${audiobook.title}`}
-              fill
-              className="object-cover group-hover:scale-105 transition-transform duration-300"
-              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-            />
-          ) : (
-            <div className="flex items-center justify-center h-full text-gray-400">
-              <svg
-                className="w-16 h-16"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-                />
-              </svg>
-            </div>
-          )}
+      <article
+        className="group cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-2xl"
+        onClick={() => setShowModal(true)}
+        tabIndex={0}
+        onKeyDown={(e) => e.key === 'Enter' && setShowModal(true)}
+        role="button"
+        aria-label={`View details for ${audiobook.title} by ${audiobook.author}`}
+      >
+        {/* Cover Container - The Hero */}
+        <div className="relative">
+          {/* Cover Image with Premium Shadow */}
+          <div
+            className={`
+              relative overflow-hidden rounded-2xl
+              shadow-lg shadow-black/20 dark:shadow-black/40
+              group-hover:shadow-xl group-hover:shadow-black/25 dark:group-hover:shadow-black/50
+              transform group-hover:scale-[1.02] group-hover:-translate-y-1
+              transition-all duration-300 ease-out
+              ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'}
+              ${status?.type === 'available' ? 'ring-2 ring-emerald-400/60 dark:ring-emerald-500/50' : ''}
+              ${status?.type === 'processing' ? 'ring-2 ring-amber-400/60 dark:ring-amber-500/50' : ''}
+            `}
+          >
+            {/* Cover Art */}
+            {audiobook.coverArtUrl ? (
+              <Image
+                src={audiobook.coverArtUrl}
+                alt=""
+                fill
+                className="object-cover"
+                sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+              />
+            ) : (
+              <div className="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
+                <svg className="w-12 h-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
+                </svg>
+              </div>
+            )}
 
-          {/* Hover overlay for click hint */}
-          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center">
-            <div className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/90 dark:bg-gray-900/90 rounded-full p-3">
-              <svg className="w-6 h-6 text-gray-900 dark:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-              </svg>
+            {/* Hover Overlay with Actions - Desktop Only
+                pointer-events-none by default so taps on mobile pass through to card
+                Only enable pointer-events on devices that support hover */}
+            <div className="
+              absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent
+              opacity-0 pointer-events-none
+              [@media(hover:hover)]:group-hover:opacity-100
+              [@media(hover:hover)]:group-hover:pointer-events-auto
+              transition-opacity duration-300
+            ">
+              <div className="absolute inset-x-0 bottom-0 p-4 flex flex-col gap-2">
+                {/* Quick Action Button */}
+                {canRequest ? (
+                  <button
+                    onClick={handleRequest}
+                    disabled={isLoading || !user}
+                    className={`
+                      w-full py-2.5 px-4 rounded-xl font-semibold text-sm
+                      backdrop-blur-md transition-all duration-200
+                      ${isLoading
+                        ? 'bg-white/20 text-white/70 cursor-wait'
+                        : 'bg-white text-gray-900 hover:bg-blue-500 hover:text-white hover:scale-[1.02] hover:shadow-lg hover:shadow-blue-500/25 active:scale-[0.98]'
+                      }
+                    `}
+                  >
+                    {isLoading ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                        </svg>
+                        Requesting...
+                      </span>
+                    ) : !user ? 'Sign in to Request' : 'Request'}
+                  </button>
+                ) : status?.type === 'available' ? (
+                  <div className="w-full py-2.5 px-4 rounded-xl font-semibold text-sm text-center bg-emerald-500 text-white backdrop-blur-md shadow-lg shadow-emerald-500/25">
+                    In Your Library
+                  </div>
+                ) : (
+                  <div className={`
+                    w-full py-2.5 px-4 rounded-xl font-semibold text-sm text-center backdrop-blur-md
+                    ${status?.type === 'processing' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/25' : ''}
+                    ${status?.type === 'pending' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/25' : ''}
+                    ${status?.type === 'denied' ? 'bg-red-500 text-white shadow-lg shadow-red-500/25' : ''}
+                  `}>
+                    {status?.type === 'processing' && (
+                      <span className="flex items-center justify-center gap-2">
+                        <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                        </svg>
+                        Processing
+                      </span>
+                    )}
+                    {status?.type === 'pending' && 'Requested'}
+                    {status?.type === 'denied' && 'Request Denied'}
+                  </div>
+                )}
+              </div>
             </div>
+
+            {/* Subtle Status Indicator (visible when not hovered) */}
+            {status && (
+              <div className={`
+                absolute top-3 right-3 w-3 h-3 rounded-full
+                shadow-lg transition-opacity duration-300 group-hover:opacity-0
+                ${status.type === 'available' ? 'bg-emerald-400' : ''}
+                ${status.type === 'processing' ? 'bg-amber-400 animate-pulse' : ''}
+                ${status.type === 'pending' ? 'bg-blue-400' : ''}
+                ${status.type === 'denied' ? 'bg-red-400' : ''}
+              `} />
+            )}
+
+            {/* Rating Badge - Top Left, Elegant */}
+            {audiobook.rating && audiobook.rating > 0 && (
+              <div className="absolute top-3 left-3 flex items-center gap-1 px-2 py-1 rounded-lg bg-black/50 backdrop-blur-md text-white text-xs font-medium transition-opacity duration-300 group-hover:opacity-0">
+                <svg className="w-3.5 h-3.5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                <span>{audiobook.rating.toFixed(1)}</span>
+              </div>
+            )}
           </div>
-
-          {/* Availability Badge */}
-          {audiobook.isAvailable && (
-            <div className="absolute top-2 right-2 bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-md shadow-lg flex items-center gap-1">
-              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-              </svg>
-              <span>Available</span>
-            </div>
-          )}
-
-          {/* Processing Badge - show when status is 'downloaded' */}
-          {audiobook.requestStatus === 'downloaded' && (
-            <div className="absolute top-2 right-2 bg-orange-500 text-white text-xs font-semibold px-2 py-1 rounded-md shadow-lg flex items-center gap-1">
-              <svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-              <span>Processing</span>
-            </div>
-          )}
         </div>
 
-        {/* Content */}
-        <div className="p-4 space-y-2">
-          {/* Title - Clickable */}
-          <h3
-            className="font-semibold text-gray-900 dark:text-gray-100 line-clamp-2 min-h-[3rem] cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-            onClick={() => setShowModal(true)}
-          >
+        {/* Metadata - Clean, Minimal */}
+        <div className="mt-3 px-1">
+          <h3 className="font-semibold text-[15px] leading-snug text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
             {audiobook.title}
           </h3>
-
-        {/* Author */}
-        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-1">
-          By {audiobook.author}
-        </p>
-
-        {/* Narrator */}
-        {audiobook.narrator && (
-          <p className="text-xs text-gray-500 dark:text-gray-500 line-clamp-1">
-            Narrated by {audiobook.narrator}
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 truncate">
+            {audiobook.author}
           </p>
-        )}
-
-        {/* Metadata Row - Fixed height for alignment */}
-        <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 h-5">
-          {/* Rating - Only show if > 0 (0 means no rating) */}
-          {audiobook.rating && audiobook.rating > 0 && (
-            <div className="flex items-center gap-1">
-              <svg className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
-                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-              </svg>
-              <span>{audiobook.rating.toFixed(1)}</span>
-            </div>
-          )}
         </div>
 
-        {/* Status or Action */}
-        <div className="pt-2">
-          {(() => {
-            // Check if book is already available in Plex or completed/available status
-            if (audiobook.isAvailable || audiobook.requestStatus === 'completed') {
-              return (
-                <div className="w-full py-2 px-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md text-center">
-                  <span className="text-sm font-medium text-green-700 dark:text-green-400">
-                    In Your Library
-                  </span>
-                </div>
-              );
-            }
-
-            // Check if book is requested and in progress (non-re-requestable statuses)
-            const inProgressStatuses = ['pending', 'awaiting_search', 'searching', 'downloading', 'processing', 'downloaded', 'awaiting_import', 'awaiting_approval', 'denied'];
-            if (audiobook.isRequested && audiobook.requestStatus && inProgressStatuses.includes(audiobook.requestStatus)) {
-              // Determine button text based on status
-              let buttonText;
-              let buttonClass = 'w-full cursor-not-allowed opacity-75';
-
-              if (audiobook.requestStatus === 'downloaded') {
-                buttonText = 'Processing...';
-              } else if (audiobook.requestStatus === 'awaiting_approval') {
-                buttonText = audiobook.requestedByUsername
-                  ? `Pending Approval (${audiobook.requestedByUsername})`
-                  : 'Pending Approval';
-              } else if (audiobook.requestStatus === 'denied') {
-                buttonText = 'Request Denied';
-                buttonClass = 'w-full cursor-not-allowed opacity-75 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/30';
-              } else {
-                buttonText = audiobook.requestedByUsername
-                  ? `Requested by ${audiobook.requestedByUsername}`
-                  : 'Requested';
-              }
-
-              return (
-                <Button
-                  onClick={() => {}}
-                  disabled={true}
-                  variant="primary"
-                  size="md"
-                  className={buttonClass}
-                >
-                  {buttonText}
-                </Button>
-              );
-            }
-
-            // For failed/warn/cancelled or no request - show Request button
-            return (
-              <Button
-                onClick={handleRequest}
-                loading={isLoading}
-                disabled={!user}
-                variant="primary"
-                size="md"
-                className="w-full"
-              >
-                {!user ? 'Login to Request' : 'Request'}
-              </Button>
-            );
-          })()}
-        </div>
-
-        {/* Error Message */}
-        {error && (
-          <p className="text-xs text-red-600 dark:text-red-400 text-center">{error}</p>
+        {/* Toast Notifications - Floating */}
+        {(showToast || error) && (
+          <div className={`
+            fixed bottom-6 left-1/2 -translate-x-1/2 z-50
+            px-4 py-3 rounded-xl shadow-2xl backdrop-blur-md
+            animate-slide-in-right
+            ${showToast ? 'bg-emerald-500/95 text-white' : 'bg-red-500/95 text-white'}
+          `}>
+            <p className="text-sm font-medium">
+              {showToast ? 'Request created!' : error}
+            </p>
+          </div>
         )}
+      </article>
 
-        {/* Success Toast */}
-        {showToast && (
-          <p className="text-xs text-green-600 dark:text-green-400 text-center font-medium">
-            ✓ Request created successfully!
-          </p>
-        )}
-      </div>
-    </div>
-
-    {/* Details Modal */}
-    <AudiobookDetailsModal
-      asin={audiobook.asin}
-      isOpen={showModal}
-      onClose={() => setShowModal(false)}
-      onRequestSuccess={onRequestSuccess}
-      isRequested={audiobook.isRequested}
-      requestStatus={audiobook.requestStatus}
-      isAvailable={audiobook.isAvailable}
-      requestedByUsername={audiobook.requestedByUsername}
-    />
+      {/* Details Modal */}
+      <AudiobookDetailsModal
+        asin={audiobook.asin}
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        onRequestSuccess={onRequestSuccess}
+        isRequested={audiobook.isRequested}
+        requestStatus={audiobook.requestStatus}
+        isAvailable={audiobook.isAvailable}
+        requestedByUsername={audiobook.requestedByUsername}
+      />
     </>
   );
 }

src/components/audiobooks/AudiobookGrid.tsx

@@ -1,6 +1,8 @@
 /**
  * Component: Audiobook Grid
  * Documentation: documentation/frontend/components.md
+ *
+ * Premium grid layout with generous spacing and elegant skeletons
  */
 
 'use client';
@@ -18,21 +20,20 @@ interface AudiobookGridProps {
   squareCovers?: boolean; // true = square (1:1), false = rectangle (2:3)
 }
 
-// Helper function to get grid classes based on card size
-// IMPORTANT: Classes must be explicit strings (not template literals) for Tailwind purging
+// Grid classes with generous spacing for premium feel
+// IMPORTANT: Classes must be explicit strings for Tailwind purging
 function getGridClasses(size: number): string {
   const sizeMap: Record<number, string> = {
-    1: 'grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10', // Smallest
+    1: 'grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10',
     2: 'grid-cols-3 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-9',
     3: 'grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8',
     4: 'grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7',
-    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5', // Default
+    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5',
     6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
     7: 'grid-cols-2 md:grid-cols-3',
     8: 'grid-cols-2',
-    9: 'grid-cols-1', // Largest
+    9: 'grid-cols-1',
   };
-
   return sizeMap[size] || sizeMap[5];
 }
 
@@ -48,9 +49,9 @@ export function AudiobookGrid({
 
   if (isLoading) {
     return (
-      <div className={`grid ${gridClasses} gap-3 sm:gap-4 md:gap-6`}>
-        {Array.from({ length: 8 }).map((_, i) => (
-          <SkeletonCard key={i} squareCovers={squareCovers} />
+      <div className={`grid ${gridClasses} gap-5 sm:gap-6 lg:gap-8`}>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <SkeletonCard key={i} squareCovers={squareCovers} index={i} />
         ))}
       </div>
     );
@@ -58,27 +59,19 @@ export function AudiobookGrid({
 
   if (audiobooks.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <svg
-          className="w-16 h-16 text-gray-400 mb-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-          />
-        </svg>
-        <p className="text-gray-600 dark:text-gray-400">{emptyMessage}</p>
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <div className="w-20 h-20 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-6">
+          <svg className="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
+          </svg>
+        </div>
+        <p className="text-gray-500 dark:text-gray-400 text-lg">{emptyMessage}</p>
       </div>
     );
   }
 
   return (
-    <div className={`grid ${gridClasses} gap-3 sm:gap-4 md:gap-6 transition-all duration-300`}>
+    <div className={`grid ${gridClasses} gap-5 sm:gap-6 lg:gap-8`}>
       {audiobooks.map((audiobook) => (
         <AudiobookCard
           key={audiobook.asin}
@@ -91,28 +84,29 @@ export function AudiobookGrid({
   );
 }
 
-function SkeletonCard({ squareCovers = false }: { squareCovers?: boolean }) {
+// Premium skeleton with shimmer effect
+function SkeletonCard({ squareCovers = false, index = 0 }: { squareCovers?: boolean; index?: number }) {
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-pulse transition-all duration-300">
-      {/* Cover Art Skeleton */}
-      <div className={`bg-gray-200 dark:bg-gray-700 ${
-        squareCovers ? 'aspect-square' : 'aspect-[2/3]'
-      }`} />
+    <div
+      className="animate-pulse"
+      style={{ animationDelay: `${index * 50}ms` }}
+    >
+      {/* Cover Skeleton */}
+      <div
+        className={`
+          relative overflow-hidden rounded-2xl
+          bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800
+          ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'}
+        `}
+      >
+        {/* Shimmer overlay */}
+        <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+      </div>
 
-      {/* Content Skeleton */}
-      <div className="p-4 space-y-3">
-        {/* Title */}
-        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
-        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
-
-        {/* Author */}
-        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3" />
-
-        {/* Metadata */}
-        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3" />
-
-        {/* Button */}
-        <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+      {/* Text Skeleton */}
+      <div className="mt-3 px-1 space-y-2">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-lg w-4/5" />
+        <div className="h-3.5 bg-gray-200 dark:bg-gray-700 rounded-lg w-3/5" />
       </div>
     </div>
   );

src/contexts/PreferencesContext.tsx

@@ -23,7 +23,7 @@ const PreferencesContext = createContext<PreferencesContextType | undefined>(und
 
 const DEFAULT_PREFERENCES: Preferences = {
   cardSize: 5,
-  squareCovers: false,
+  squareCovers: true,
 };
 
 const STORAGE_KEY = 'preferences';