Add square cover toggle and UI support

Introduce a SquareCoversToggle component and wire cover-aspect switching throughout the app. PreferencesContext now stores and persists a new squareCovers flag (with cross-tab sync), and pages (Home, Search) expose the toggle and pass the squareCovers prop to AudiobookGrid/AudiobookCard. AudiobookCard/Grid and skeletons were updated to respect square vs 2:3 aspect ratios and include smoother transitions. Also update app icons/manifest references to RMAB_1024x1024_ICON.png and make header/branding responsive (truncate titles, adjust version badge placement and logo usage). Minor UI/UX tweaks added for accessibility and visual polish.

src/app/layout.tsx

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

src/app/page.tsx

@@ -12,12 +12,13 @@ import { useAudiobooks } from '@/lib/hooks/useAudiobooks';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 import { StickyPagination } from '@/components/ui/StickyPagination';
 import { CardSizeControls } from '@/components/ui/CardSizeControls';
+import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
 import { usePreferences } from '@/contexts/PreferencesContext';
 
 export default function HomePage() {
   const [popularPage, setPopularPage] = useState(1);
   const [newReleasesPage, setNewReleasesPage] = useState(1);
-  const { cardSize, setCardSize } = usePreferences();
+  const { cardSize, setCardSize, squareCovers, setSquareCovers } = usePreferences();
 
   // Refs for auto-scrolling to section tops
   const popularSectionRef = useRef<HTMLElement>(null);
@@ -62,10 +63,11 @@ export default function HomePage() {
             <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
               <div className="flex items-center gap-3">
                 <div className="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full" />
-                <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
+                <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 truncate">
                   Popular Audiobooks
                 </h2>
-                <div className="ml-auto">
+                <div className="ml-auto flex items-center gap-1">
+                  <SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
                   <CardSizeControls size={cardSize} onSizeChange={setCardSize} />
                 </div>
               </div>
@@ -89,6 +91,7 @@ export default function HomePage() {
                 isLoading={loadingPopular}
                 emptyMessage="No popular audiobooks available"
                 cardSize={cardSize}
+                squareCovers={squareCovers}
               />
             )}
           </div>
@@ -101,10 +104,11 @@ export default function HomePage() {
             <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
               <div className="flex items-center gap-3">
                 <div className="w-1 h-6 bg-gradient-to-b from-emerald-500 to-teal-500 rounded-full" />
-                <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
+                <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 truncate">
                   New Releases
                 </h2>
-                <div className="ml-auto">
+                <div className="ml-auto flex items-center gap-1">
+                  <SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
                   <CardSizeControls size={cardSize} onSizeChange={setCardSize} />
                 </div>
               </div>
@@ -128,6 +132,7 @@ export default function HomePage() {
                 isLoading={loadingNewReleases}
                 emptyMessage="No new releases available"
                 cardSize={cardSize}
+                squareCovers={squareCovers}
               />
             )}
           </div>

src/app/search/page.tsx

@@ -11,13 +11,14 @@ import { AudiobookGrid } from '@/components/audiobooks/AudiobookGrid';
 import { useSearch } from '@/lib/hooks/useAudiobooks';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 import { CardSizeControls } from '@/components/ui/CardSizeControls';
+import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
 import { usePreferences } from '@/contexts/PreferencesContext';
 
 export default function SearchPage() {
   const [query, setQuery] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
   const [page, setPage] = useState(1);
-  const { cardSize, setCardSize } = usePreferences();
+  const { cardSize, setCardSize, squareCovers, setSquareCovers } = usePreferences();
 
   // Debounce search query
   useEffect(() => {
@@ -109,15 +110,16 @@ export default function SearchPage() {
               <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
                 <div className="flex items-center gap-3">
                   <div className="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full" />
-                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
                     Search Results
                   </h2>
                   {!isLoading && totalResults > 0 && (
-                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                    <span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline whitespace-nowrap">
                       ({totalResults.toLocaleString()} result{totalResults !== 1 ? 's' : ''})
                     </span>
                   )}
-                  <div className="ml-auto">
+                  <div className="ml-auto flex items-center gap-1">
+                    <SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
                     <CardSizeControls size={cardSize} onSizeChange={setCardSize} />
                   </div>
                 </div>
@@ -130,6 +132,7 @@ export default function SearchPage() {
               isLoading={!!(isLoading && page === 1)}
               emptyMessage={`No results found for "${debouncedQuery}"`}
               cardSize={cardSize}
+              squareCovers={squareCovers}
             />
 
             {/* Load More */}