Add request approval system and audiobook path template

Implements admin approval workflow for user requests with global and per-user auto-approve controls. Adds new request statuses ('awaiting_approval', 'denied'), related API endpoints, and UI for pending approvals. Introduces configurable audiobook organization path template with validation and preview in settings, updates database schema and migrations for new fields.

src/components/audiobooks/AudiobookCard.tsx

@@ -173,12 +173,21 @@ export function AudiobookCard({
             }
 
             // Check if book is requested and in progress (non-re-requestable statuses)
-            const inProgressStatuses = ['pending', 'awaiting_search', 'searching', 'downloading', 'processing', 'downloaded', 'awaiting_import'];
+            const inProgressStatuses = ['pending', 'awaiting_search', 'searching', 'downloading', 'processing', 'downloaded', 'awaiting_import', 'awaiting_approval', 'denied'];
             if (audiobook.isRequested && audiobook.requestStatus && inProgressStatuses.includes(audiobook.requestStatus)) {
-              // Special text for 'downloaded' status (waiting for Plex scan)
+              // 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}`
@@ -191,7 +200,7 @@ export function AudiobookCard({
                   disabled={true}
                   variant="primary"
                   size="md"
-                  className="w-full cursor-not-allowed opacity-75"
+                  className={buttonClass}
                 >
                   {buttonText}
                 </Button>

src/components/audiobooks/AudiobookDetailsModal.tsx

@@ -411,16 +411,27 @@ export function AudiobookDetailsModal({
                   'processing',
                   'downloaded',
                   'awaiting_import',
+                  'awaiting_approval',
+                  'denied',
                 ];
                 if (
                   isRequested &&
                   requestStatus &&
                   inProgressStatuses.includes(requestStatus)
                 ) {
-                  // Special text for 'downloaded' status (waiting for Plex scan)
+                  // Determine button text and styling based on status
                   let buttonText;
+                  let buttonClass = 'w-full cursor-not-allowed opacity-75';
+
                   if (requestStatus === 'downloaded') {
                     buttonText = 'Processing...';
+                  } else if (requestStatus === 'awaiting_approval') {
+                    buttonText = requestedByUsername
+                      ? `Pending Approval (${requestedByUsername})`
+                      : 'Pending Approval';
+                  } else if (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 = requestedByUsername
                       ? `Requested by ${requestedByUsername}`
@@ -434,7 +445,7 @@ export function AudiobookDetailsModal({
                         disabled={true}
                         variant="primary"
                         size="lg"
-                        className="w-full cursor-not-allowed opacity-75"
+                        className={buttonClass}
                       >
                         {buttonText}
                       </Button>

src/components/audiobooks/AudiobookGrid.tsx

@@ -14,6 +14,25 @@ interface AudiobookGridProps {
   isLoading?: boolean;
   emptyMessage?: string;
   onRequestSuccess?: () => void;
+  cardSize?: number; // 1-9, default 5
+}
+
+// Helper function to get grid classes based on card size
+// IMPORTANT: Classes must be explicit strings (not template literals) 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
+    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
+    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
+  };
+
+  return sizeMap[size] || sizeMap[5];
 }
 
 export function AudiobookGrid({
@@ -21,10 +40,13 @@ export function AudiobookGrid({
   isLoading = false,
   emptyMessage = 'No audiobooks found',
   onRequestSuccess,
+  cardSize = 5,
 }: AudiobookGridProps) {
+  const gridClasses = getGridClasses(cardSize);
+
   if (isLoading) {
     return (
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 md:gap-6">
+      <div className={`grid ${gridClasses} gap-3 sm:gap-4 md:gap-6`}>
         {Array.from({ length: 8 }).map((_, i) => (
           <SkeletonCard key={i} />
         ))}
@@ -54,7 +76,7 @@ export function AudiobookGrid({
   }
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 md:gap-6">
+    <div className={`grid ${gridClasses} gap-3 sm:gap-4 md:gap-6`}>
       {audiobooks.map((audiobook) => (
         <AudiobookCard
           key={audiobook.asin}

src/components/requests/StatusBadge.tsx

@@ -64,6 +64,14 @@ export function StatusBadge({ status, progress, className }: StatusBadgeProps) {
       label: 'Cancelled',
       color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
     },
+    awaiting_approval: {
+      label: 'Pending Approval',
+      color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+    },
+    denied: {
+      label: 'Request Denied',
+      color: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+    },
   };
 
   const config = statusConfig[status] || {

src/components/ui/CardSizeControls.tsx

@@ -0,0 +1,132 @@
+/**
+ * Component: Card Size Controls
+ * Documentation: UI controls for adjusting audiobook card size (zoom level)
+ */
+
+'use client';
+
+import React from 'react';
+
+interface CardSizeControlsProps {
+  size: number; // 1-9
+  onSizeChange: (size: number) => void;
+}
+
+// Column count mapping for each size at each breakpoint
+const columnMap = {
+  base: { 1: 4, 2: 3, 3: 3, 4: 2, 5: 2, 6: 2, 7: 2, 8: 2, 9: 1 },
+  md: { 1: 6, 2: 5, 3: 4, 4: 4, 5: 3, 6: 3, 7: 3, 8: 2, 9: 1 },
+  lg: { 1: 8, 2: 7, 3: 6, 4: 5, 5: 4, 6: 4, 7: 3, 8: 2, 9: 1 },
+  xl: { 1: 10, 2: 9, 3: 8, 4: 7, 5: 5, 6: 4, 7: 3, 8: 2, 9: 1 },
+};
+
+// Get current breakpoint based on window width
+function getCurrentBreakpoint(): 'base' | 'md' | 'lg' | 'xl' {
+  if (typeof window === 'undefined') return 'base';
+  const width = window.innerWidth;
+  if (width >= 1280) return 'xl';
+  if (width >= 1024) return 'lg';
+  if (width >= 768) return 'md';
+  return 'base';
+}
+
+// Get column count for a size at current breakpoint
+function getColumnCount(size: number, breakpoint: 'base' | 'md' | 'lg' | 'xl'): number {
+  return columnMap[breakpoint][size as keyof typeof columnMap.base];
+}
+
+// Find next size that produces a visible column change
+function findNextVisibleSize(currentSize: number, direction: 'in' | 'out'): number {
+  const breakpoint = getCurrentBreakpoint();
+  const currentCols = getColumnCount(currentSize, breakpoint);
+
+  if (direction === 'in') {
+    // Zoom in: increase size (fewer columns, bigger cards)
+    for (let size = currentSize + 1; size <= 9; size++) {
+      const cols = getColumnCount(size, breakpoint);
+      if (cols < currentCols) {
+        return size;
+      }
+    }
+    return 9; // Max boundary
+  } else {
+    // Zoom out: decrease size (more columns, smaller cards)
+    for (let size = currentSize - 1; size >= 1; size--) {
+      const cols = getColumnCount(size, breakpoint);
+      if (cols > currentCols) {
+        return size;
+      }
+    }
+    return 1; // Min boundary
+  }
+}
+
+export function CardSizeControls({ size, onSizeChange }: CardSizeControlsProps) {
+  const handleZoomOut = () => {
+    const nextSize = findNextVisibleSize(size, 'out');
+    if (nextSize !== size) {
+      onSizeChange(nextSize);
+    }
+  };
+
+  const handleZoomIn = () => {
+    const nextSize = findNextVisibleSize(size, 'in');
+    if (nextSize !== size) {
+      onSizeChange(nextSize);
+    }
+  };
+
+  // Check if zoom buttons should be disabled
+  const canZoomOut = findNextVisibleSize(size, 'out') !== size;
+  const canZoomIn = findNextVisibleSize(size, 'in') !== size;
+
+  return (
+    <div className="flex items-center gap-1">
+      {/* Zoom Out Button */}
+      <button
+        onClick={handleZoomOut}
+        disabled={!canZoomOut}
+        aria-label="Zoom out"
+        className="p-1.5 text-gray-600 dark:text-gray-400 hover:bg-white/20 dark:hover:bg-gray-700/50 rounded-md transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+      >
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </button>
+
+      {/* Zoom In Button */}
+      <button
+        onClick={handleZoomIn}
+        disabled={!canZoomIn}
+        aria-label="Zoom in"
+        className="p-1.5 text-gray-600 dark:text-gray-400 hover:bg-white/20 dark:hover:bg-gray-700/50 rounded-md transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+      >
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}