Add offline mode components and enhance synchronization logic

- Introduced `OfflineSyncManager`, `OfflineToggle`, `OfflinePinSetup`, `OfflineIndicator`, and `OfflineSyncDetails` components to support offline mode functionality.
- Added PIN verification (`OfflinePinVerify`) for secure offline access.
- Implemented sync options for books (current, recent, all) with progress tracking and improved user feedback.
- Enhanced offline context integration and error handling in sync processes.
- Refined UI elements for better online/offline status visibility and manual sync controls.

components/offline/OfflineToggle.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useContext } from 'react';
+import OfflineContext from '@/context/OfflineContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWifi, faCircle } from '@fortawesome/free-solid-svg-icons';
+
+export default function OfflineToggle() {
+    const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
+
+    if (!window.electron) {
+        return null;
+    }
+
+    const handleToggle = () => {
+        toggleOfflineMode();
+    };
+
+    return (
+        <button
+            onClick={handleToggle}
+            className={`
+                flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
+                ${offlineMode.isOffline
+                    ? 'bg-orange-500/20 border-orange-500/40 hover:bg-orange-500/30'
+                    : 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
+                }
+            `}
+            title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
+        >
+            <FontAwesomeIcon
+                icon={offlineMode.isOffline ? faCircle : faWifi}
+                className={`w-3 h-3 ${offlineMode.isOffline ? 'text-orange-300' : 'text-green-300'}`}
+            />
+            <span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
+                {offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
+            </span>
+        </button>
+    );
+}