From d5b81919965ff7f6d109c22d108e288df42a196b Mon Sep 17 00:00:00 2001
From: natreex <natreex@outlook.com>
Date: Mon, 22 Dec 2025 16:46:43 -0500
Subject: [PATCH] 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/OfflineIndicator.tsx   | 174 ++++++++++++++++
 components/offline/OfflinePinSetup.tsx    | 181 +++++++++++++++++
 components/offline/OfflinePinVerify.tsx   | 158 +++++++++++++++
 components/offline/OfflineSyncDetails.tsx | 126 ++++++++++++
 components/offline/OfflineSyncManager.tsx | 233 ++++++++++++++++++++++
 components/offline/OfflineToggle.tsx      |  40 ++++
 6 files changed, 912 insertions(+)
 create mode 100644 components/offline/OfflineIndicator.tsx
 create mode 100644 components/offline/OfflinePinSetup.tsx
 create mode 100644 components/offline/OfflinePinVerify.tsx
 create mode 100644 components/offline/OfflineSyncDetails.tsx
 create mode 100644 components/offline/OfflineSyncManager.tsx
 create mode 100644 components/offline/OfflineToggle.tsx

diff --git a/components/offline/OfflineIndicator.tsx b/components/offline/OfflineIndicator.tsx
new file mode 100644
index 0000000..26e8fa3
--- /dev/null
+++ b/components/offline/OfflineIndicator.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import React, { useContext } from 'react';
+import OfflineContext from '@/context/OfflineContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWifi, faWifiSlash, faSync, faCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * OfflineIndicator - Displays current online/offline status and sync progress
+ * Allows user to toggle manual offline mode
+ */
+export default function OfflineIndicator() {
+    const { offlineMode, toggleOfflineMode, syncNow } = useContext(OfflineContext);
+
+    const {
+        isOffline,
+        isManuallyOffline,
+        isNetworkOnline,
+        isDatabaseInitialized,
+        syncProgress,
+        lastSyncAt,
+        error
+    } = offlineMode;
+
+    // Determine status color and text
+    const getStatusInfo = () => {
+        if (!isDatabaseInitialized) {
+            return {
+                color: 'text-gray-400',
+                bgColor: 'bg-gray-100',
+                icon: faCircle,
+                text: 'DB non initialisée'
+            };
+        }
+
+        if (error) {
+            return {
+                color: 'text-red-500',
+                bgColor: 'bg-red-50',
+                icon: faExclamationTriangle,
+                text: 'Erreur de sync'
+            };
+        }
+
+        if (syncProgress.isSyncing) {
+            return {
+                color: 'text-blue-500',
+                bgColor: 'bg-blue-50',
+                icon: faSync,
+                text: 'Synchronisation...',
+                spin: true
+            };
+        }
+
+        if (isOffline) {
+            if (syncProgress.pendingChanges > 0) {
+                return {
+                    color: 'text-orange-500',
+                    bgColor: 'bg-orange-50',
+                    icon: faWifiSlash,
+                    text: `Hors ligne (${syncProgress.pendingChanges} en attente)`
+                };
+            }
+            return {
+                color: 'text-orange-500',
+                bgColor: 'bg-orange-50',
+                icon: faWifiSlash,
+                text: isManuallyOffline ? 'Mode hors ligne' : 'Hors ligne'
+            };
+        }
+
+        if (syncProgress.pendingChanges > 0) {
+            return {
+                color: 'text-yellow-500',
+                bgColor: 'bg-yellow-50',
+                icon: faSync,
+                text: `${syncProgress.pendingChanges} changements à sync`
+            };
+        }
+
+        return {
+            color: 'text-green-500',
+            bgColor: 'bg-green-50',
+            icon: faCheck,
+            text: 'Synchronisé'
+        };
+    };
+
+    const statusInfo = getStatusInfo();
+
+    // Format last sync time
+    const formatLastSync = () => {
+        if (!lastSyncAt) return 'Jamais';
+
+        const diff = Date.now() - lastSyncAt;
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(minutes / 60);
+
+        if (hours > 0) return `Il y a ${hours}h`;
+        if (minutes > 0) return `Il y a ${minutes}min`;
+        return 'À l\'instant';
+    };
+
+    const handleSyncNow = async () => {
+        if (!isOffline && !syncProgress.isSyncing) {
+            await syncNow();
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-3 px-4 py-2 bg-white border-b border-gray-200">
+            {/* Status indicator */}
+            <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${statusInfo.bgColor}`}>
+                <FontAwesomeIcon
+                    icon={statusInfo.icon}
+                    className={`${statusInfo.color} text-sm`}
+                    spin={statusInfo.spin}
+                />
+                <span className={`text-sm font-medium ${statusInfo.color}`}>
+                    {statusInfo.text}
+                </span>
+            </div>
+
+            {/* Last sync time */}
+            {isDatabaseInitialized && !isOffline && (
+                <span className="text-xs text-gray-500">
+                    Dernière sync: {formatLastSync()}
+                </span>
+            )}
+
+            {/* Error message */}
+            {error && (
+                <span className="text-xs text-red-500 max-w-xs truncate" title={error}>
+                    {error}
+                </span>
+            )}
+
+            {/* Actions */}
+            <div className="ml-auto flex items-center gap-2">
+                {/* Manual sync button */}
+                {isDatabaseInitialized && !isOffline && !syncProgress.isSyncing && (
+                    <button
+                        onClick={handleSyncNow}
+                        className="px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                        title="Synchroniser maintenant"
+                    >
+                        <FontAwesomeIcon icon={faSync} className="mr-1" />
+                        Sync
+                    </button>
+                )}
+
+                {/* Offline toggle */}
+                {isDatabaseInitialized && (
+                    <button
+                        onClick={toggleOfflineMode}
+                        className={`px-3 py-1 text-sm rounded transition-colors ${
+                            isManuallyOffline
+                                ? 'bg-orange-100 text-orange-700 hover:bg-orange-200'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                        title={isManuallyOffline ? 'Passer en ligne' : 'Passer hors ligne'}
+                        disabled={!isNetworkOnline && !isManuallyOffline}
+                    >
+                        <FontAwesomeIcon
+                            icon={isOffline ? faWifiSlash : faWifi}
+                            className="mr-1"
+                        />
+                        {isManuallyOffline ? 'En ligne' : 'Hors ligne'}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/components/offline/OfflinePinSetup.tsx b/components/offline/OfflinePinSetup.tsx
new file mode 100644
index 0000000..0a1181c
--- /dev/null
+++ b/components/offline/OfflinePinSetup.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import { useState, useContext } from 'react';
+import { SessionContext } from '@/context/SessionContext';
+import { useTranslations } from 'next-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLock, faShieldAlt, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
+interface OfflinePinSetupProps {
+  onClose?: () => void;
+  onSuccess?: () => void;
+  showOnFirstLogin?: boolean;
+}
+
+export default function OfflinePinSetup({ onClose, onSuccess, showOnFirstLogin }: OfflinePinSetupProps) {
+  const t = useTranslations();
+  const { session } = useContext(SessionContext);
+  const [pin, setPin] = useState('');
+  const [confirmPin, setConfirmPin] = useState('');
+  const [showPin, setShowPin] = useState(false);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Only allow PIN setup if authenticated
+  if (!session?.isConnected || !session?.user) {
+    return null;
+  }
+
+  const validatePin = (): boolean => {
+    if (pin.length < 4) {
+      setError(t('offline.pin.errors.tooShort'));
+      return false;
+    }
+    if (pin.length > 8) {
+      setError(t('offline.pin.errors.tooLong'));
+      return false;
+    }
+    if (!/^\d+$/.test(pin)) {
+      setError(t('offline.pin.errors.digitsOnly'));
+      return false;
+    }
+    if (pin !== confirmPin) {
+      setError(t('offline.pin.errors.mismatch'));
+      return false;
+    }
+    return true;
+  };
+
+  const handleSetPin = async () => {
+    if (!validatePin()) return;
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      if (window.electron) {
+        // Set the PIN
+        const result = await window.electron.offlinePinSet(pin);
+
+        if (result.success) {
+          // Enable offline mode
+          await window.electron.offlineModeSet(true, 30); // 30 days sync interval
+
+          console.log('[OfflinePin] PIN configured successfully');
+          onSuccess?.();
+        } else {
+          setError(result.error || t('offline.pin.errors.setupFailed'));
+        }
+      }
+    } catch (error) {
+      console.error('[OfflinePin] Error setting PIN:', error);
+      setError(t('offline.pin.errors.setupFailed'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="p-3 bg-primary/10 rounded-lg">
+            <FontAwesomeIcon icon={faShieldAlt} className="w-6 h-6 text-primary" />
+          </div>
+          <div className="flex-1">
+            <h2 className="text-xl font-bold text-textPrimary">
+              {showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
+            </h2>
+            <p className="text-sm text-muted">
+              {t('offline.pin.setup.subtitle')}
+            </p>
+          </div>
+        </div>
+
+        {/* Info box */}
+        <div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
+          <p className="text-sm text-info">
+            <FontAwesomeIcon icon={faLock} className="w-3 h-3 mr-2" />
+            {t('offline.pin.setup.description')}
+          </p>
+        </div>
+
+        {/* PIN Input */}
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-textPrimary mb-2">
+              {t('offline.pin.setup.pinLabel')}
+            </label>
+            <div className="relative">
+              <input
+                type={showPin ? 'text' : 'password'}
+                value={pin}
+                onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                placeholder="••••"
+                maxLength={8}
+                className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
+                disabled={isLoading}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPin(!showPin)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
+              >
+                <FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-textPrimary mb-2">
+              {t('offline.pin.setup.confirmPinLabel')}
+            </label>
+            <input
+              type={showPin ? 'text' : 'password'}
+              value={confirmPin}
+              onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+              placeholder="••••"
+              maxLength={8}
+              className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <div className="mt-3 p-2 bg-danger/10 border border-danger/20 rounded-lg">
+            <p className="text-sm text-danger">{error}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="mt-6 flex gap-3 justify-end">
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-muted hover:text-textPrimary transition-colors"
+              disabled={isLoading}
+            >
+              {t('offline.pin.setup.laterButton')}
+            </button>
+          )}
+          <button
+            onClick={handleSetPin}
+            disabled={isLoading || !pin || !confirmPin}
+            className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            <FontAwesomeIcon icon={faLock} className="w-4 h-4" />
+            {isLoading ? t('offline.pin.setup.configuringButton') : t('offline.pin.setup.configureButton')}
+          </button>
+        </div>
+
+        {/* Footer note */}
+        <p className="mt-4 text-xs text-muted text-center">
+          {t('offline.pin.setup.footer')}
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/offline/OfflinePinVerify.tsx b/components/offline/OfflinePinVerify.tsx
new file mode 100644
index 0000000..96828bb
--- /dev/null
+++ b/components/offline/OfflinePinVerify.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLock, faWifi, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
+interface OfflinePinVerifyProps {
+  onSuccess: (userId: string) => void;
+  onCancel?: () => void;
+}
+
+export default function OfflinePinVerify({ onSuccess, onCancel }: OfflinePinVerifyProps) {
+  const t = useTranslations();
+  const [pin, setPin] = useState('');
+  const [showPin, setShowPin] = useState(false);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [attempts, setAttempts] = useState(0);
+
+  const handleVerifyPin = async () => {
+    if (!pin || pin.length < 4) {
+      setError(t('offline.pin.verify.enterPin'));
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      if (window.electron) {
+        const result = await window.electron.offlinePinVerify(pin);
+
+        if (result.success && result.userId) {
+          console.log('[OfflinePin] PIN verified, accessing offline mode');
+          onSuccess(result.userId);
+        } else {
+          setAttempts(prev => prev + 1);
+          setPin('');
+
+          if (attempts >= 2) {
+            setError(t('offline.pin.verify.tooManyAttempts'));
+          } else {
+            setError(result.error || t('offline.pin.verify.incorrect'));
+          }
+        }
+      }
+    } catch (error) {
+      console.error('[OfflinePin] Error verifying PIN:', error);
+      setError(t('offline.pin.verify.error'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleVerifyPin();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
+      <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-center mb-6">
+          <div className="relative">
+            <div className="p-4 bg-primary/10 rounded-full">
+              <FontAwesomeIcon icon={faLock} className="w-8 h-8 text-primary" />
+            </div>
+            <div className="absolute -bottom-1 -right-1 p-1 bg-tertiary rounded-full">
+              <div className="p-1 bg-warning/20 rounded-full">
+                <FontAwesomeIcon icon={faWifi} className="w-3 h-3 text-warning" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="text-center mb-6">
+          <h2 className="text-xl font-bold text-textPrimary mb-2">
+            {t('offline.pin.verify.title')}
+          </h2>
+          <p className="text-sm text-muted">
+            {t('offline.pin.verify.subtitle')}
+          </p>
+        </div>
+
+        {/* PIN Input */}
+        <div className="mb-4">
+          <div className="relative">
+            <input
+              type={showPin ? 'text' : 'password'}
+              value={pin}
+              onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+              onKeyPress={handleKeyPress}
+              placeholder={t('offline.pin.verify.placeholder')}
+              maxLength={8}
+              autoFocus
+              className="w-full px-4 py-3 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary text-center text-lg tracking-widest"
+              disabled={isLoading || attempts > 2}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPin(!showPin)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
+            >
+              <FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <div className="mb-4 p-3 bg-danger/10 border border-danger/20 rounded-lg">
+            <p className="text-sm text-danger text-center">{error}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-3">
+          {onCancel && (
+            <button
+              onClick={onCancel}
+              className="flex-1 px-4 py-2 border border-gray-dark text-muted hover:text-textPrimary hover:border-gray rounded-lg transition-colors"
+              disabled={isLoading}
+            >
+              {t('offline.pin.verify.cancelButton')}
+            </button>
+          )}
+          <button
+            onClick={handleVerifyPin}
+            disabled={isLoading || !pin || attempts > 2}
+            className="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                {t('offline.pin.verify.verifyingButton')}
+              </>
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faLock} className="w-4 h-4" />
+                {t('offline.pin.verify.unlockButton')}
+              </>
+            )}
+          </button>
+        </div>
+
+        {/* Help text */}
+        {attempts > 0 && attempts <= 2 && (
+          <p className="mt-4 text-xs text-muted text-center">
+            {t('offline.pin.verify.attemptsRemaining', { count: 3 - attempts })}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/offline/OfflineSyncDetails.tsx b/components/offline/OfflineSyncDetails.tsx
new file mode 100644
index 0000000..3e5792a
--- /dev/null
+++ b/components/offline/OfflineSyncDetails.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import React, { useContext } from 'react';
+import OfflineContext from '@/context/OfflineContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDatabase, faSync, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * OfflineSyncDetails - Detailed view of sync status per table
+ * Shows pending changes and last sync time for each data type
+ */
+export default function OfflineSyncDetails() {
+    const { offlineMode } = useContext(OfflineContext);
+    const { syncProgress, isDatabaseInitialized } = offlineMode;
+
+    if (!isDatabaseInitialized) {
+        return (
+            <div className="p-4 text-center text-gray-500">
+                <FontAwesomeIcon icon={faDatabase} className="text-3xl mb-2" />
+                <p>Base de données non initialisée</p>
+            </div>
+        );
+    }
+
+    if (!syncProgress.tables || syncProgress.tables.length === 0) {
+        return (
+            <div className="p-4 text-center text-gray-500">
+                <FontAwesomeIcon icon={faSync} className="text-3xl mb-2" />
+                <p>Aucune donnée de synchronisation disponible</p>
+            </div>
+        );
+    }
+
+    // Format timestamp
+    const formatTime = (timestamp: number) => {
+        if (!timestamp) return 'Jamais';
+        const date = new Date(timestamp);
+        return date.toLocaleString('fr-FR', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
+    // Get friendly name for table
+    const getTableName = (table: string): string => {
+        const names: { [key: string]: string } = {
+            'erit_books': 'Livres',
+            'book_chapters': 'Chapitres',
+            'book_chapter_content': 'Contenu des chapitres',
+            'book_characters': 'Personnages',
+            'book_world': 'Monde',
+            'book_world_elements': 'Éléments du monde',
+            'ai_conversations': 'Conversations IA',
+            'ai_messages_history': 'Messages IA',
+            'book_guide_line': 'Lignes directrices',
+            'book_plot_points': 'Points de l\'intrigue',
+            'book_incidents': 'Incidents'
+        };
+        return names[table] || table;
+    };
+
+    return (
+        <div className="p-4">
+            <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <FontAwesomeIcon icon={faDatabase} />
+                État de synchronisation
+            </h3>
+
+            <div className="space-y-2">
+                {syncProgress.tables.map((tableStatus) => {
+                    const hasPending = tableStatus.pending > 0;
+
+                    return (
+                        <div
+                            key={tableStatus.table}
+                            className={`p-3 rounded-lg border ${
+                                hasPending
+                                    ? 'border-orange-200 bg-orange-50'
+                                    : 'border-gray-200 bg-gray-50'
+                            }`}
+                        >
+                            <div className="flex items-center justify-between">
+                                <div className="flex-1">
+                                    <div className="font-medium text-sm">
+                                        {getTableName(tableStatus.table)}
+                                    </div>
+                                    <div className="text-xs text-gray-500 mt-1">
+                                        Dernière sync: {formatTime(tableStatus.lastSync)}
+                                    </div>
+                                </div>
+
+                                {hasPending && (
+                                    <div className="flex items-center gap-2 text-orange-600">
+                                        <FontAwesomeIcon
+                                            icon={faExclamationCircle}
+                                            className="text-sm"
+                                        />
+                                        <span className="text-sm font-medium">
+                                            {tableStatus.pending} en attente
+                                        </span>
+                                    </div>
+                                )}
+
+                                {!hasPending && tableStatus.lastSync > 0 && (
+                                    <div className="text-green-600 text-sm">
+                                        ✓ Synchronisé
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* Summary */}
+            <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="text-sm text-blue-800">
+                    <strong>Total:</strong> {syncProgress.pendingChanges} changement(s) en attente
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/offline/OfflineSyncManager.tsx b/components/offline/OfflineSyncManager.tsx
new file mode 100644
index 0000000..c134bd9
--- /dev/null
+++ b/components/offline/OfflineSyncManager.tsx
@@ -0,0 +1,233 @@
+'use client';
+import { useState, useEffect, useContext } from 'react';
+import { SessionContext } from '@/context/SessionContext';
+import { OfflineContext } from '@/context/OfflineContext';
+import { useTranslations } from 'next-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCloudDownloadAlt,
+  faWifi,
+  faCheckCircle,
+  faSpinner,
+  faBook
+} from '@fortawesome/free-solid-svg-icons';
+
+interface SyncOption {
+  id: 'current' | 'recent' | 'all' | 'skip';
+  label: string;
+  description: string;
+  estimatedSize?: string;
+  bookCount?: number;
+}
+
+export default function OfflineSyncManager() {
+  const t = useTranslations();
+  const { session } = useContext(SessionContext);
+  const { syncBooks, isOnline } = useContext(OfflineContext);
+  const [showDialog, setShowDialog] = useState(false);
+  const [isFirstSync, setIsFirstSync] = useState(false);
+  const [syncProgress, setSyncProgress] = useState(0);
+  const [selectedOption, setSelectedOption] = useState<string>('');
+
+  useEffect(() => {
+    // Check if this is first time user sees sync options
+    const hasSeenSync = localStorage.getItem('hasSeenSyncDialog');
+    if (!hasSeenSync && isOnline && session?.user) {
+      setIsFirstSync(true);
+      setShowDialog(true);
+    }
+  }, [session, isOnline]);
+
+  const syncOptions: SyncOption[] = [
+    {
+      id: 'current',
+      label: t('sync.currentBook'),
+      description: t('sync.currentBookDesc'),
+      estimatedSize: '~5 MB',
+      bookCount: 1
+    },
+    {
+      id: 'recent',
+      label: t('sync.recentBooks'),
+      description: t('sync.recentBooksDesc'),
+      estimatedSize: '~25 MB',
+      bookCount: 3
+    },
+    {
+      id: 'all',
+      label: t('sync.allBooks'),
+      description: t('sync.allBooksDesc'),
+      estimatedSize: '~120 MB',
+      bookCount: 12
+    },
+    {
+      id: 'skip',
+      label: t('sync.skipForNow'),
+      description: t('sync.skipDesc'),
+    }
+  ];
+
+  const handleSync = async (option: string) => {
+    if (option === 'skip') {
+      localStorage.setItem('hasSeenSyncDialog', 'true');
+      setShowDialog(false);
+      return;
+    }
+
+    setSyncProgress(0);
+
+    try {
+      // Simulate progressive download
+      const interval = setInterval(() => {
+        setSyncProgress(prev => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return prev + 10;
+        });
+      }, 200);
+
+      // Actual sync logic here
+      // await syncBooks(option);
+
+      localStorage.setItem('hasSeenSyncDialog', 'true');
+      localStorage.setItem('syncPreference', option);
+
+      setTimeout(() => {
+        setShowDialog(false);
+      }, 2000);
+    } catch (error) {
+      console.error('Sync failed:', error);
+    }
+  };
+
+  if (!showDialog) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-tertiary rounded-2xl p-8 max-w-2xl w-full mx-4 shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-6">
+          <div className="relative">
+            <FontAwesomeIcon
+              icon={faCloudDownloadAlt}
+              className="w-8 h-8 text-primary"
+            />
+            {isOnline && (
+              <FontAwesomeIcon
+                icon={faWifi}
+                className="w-4 h-4 text-success absolute -bottom-1 -right-1 bg-tertiary rounded-full p-0.5"
+              />
+            )}
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold">
+              {isFirstSync ? t('sync.welcomeOffline') : t('sync.syncOptions')}
+            </h2>
+            <p className="text-muted text-sm">
+              {t('sync.workAnywhere')}
+            </p>
+          </div>
+        </div>
+
+        {/* Sync Options */}
+        {syncProgress === 0 ? (
+          <div className="space-y-3 mb-6">
+            {syncOptions.map((option) => (
+              <button
+                key={option.id}
+                onClick={() => setSelectedOption(option.id)}
+                className={`
+                  w-full p-4 rounded-lg border-2 text-left transition-all
+                  ${selectedOption === option.id
+                    ? 'border-primary bg-primary/10'
+                    : 'border-gray-dark hover:border-gray'
+                  }
+                `}
+              >
+                <div className="flex justify-between items-start">
+                  <div className="flex-1">
+                    <div className="font-semibold flex items-center gap-2">
+                      {option.bookCount && (
+                        <span className="text-primary">
+                          <FontAwesomeIcon icon={faBook} className="w-4 h-4" />
+                          {' '}{option.bookCount}
+                        </span>
+                      )}
+                      {option.label}
+                    </div>
+                    <p className="text-sm text-muted mt-1">
+                      {option.description}
+                    </p>
+                  </div>
+                  {option.estimatedSize && (
+                    <span className="text-sm text-muted">
+                      {option.estimatedSize}
+                    </span>
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
+        ) : (
+          /* Progress Bar */
+          <div className="mb-6">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-muted">
+                {t('sync.downloading')}...
+              </span>
+              <span className="text-sm font-semibold">
+                {syncProgress}%
+              </span>
+            </div>
+            <div className="h-2 bg-gray-dark rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-primary to-info transition-all duration-300"
+                style={{ width: `${syncProgress}%` }}
+              />
+            </div>
+            {syncProgress === 100 && (
+              <div className="mt-4 text-center">
+                <FontAwesomeIcon
+                  icon={faCheckCircle}
+                  className="w-12 h-12 text-success mx-auto mb-2"
+                />
+                <p className="text-success font-semibold">
+                  {t('sync.complete')}!
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Actions */}
+        {syncProgress === 0 && (
+          <div className="flex gap-3 justify-end">
+            <button
+              onClick={() => handleSync('skip')}
+              className="px-6 py-2 text-muted hover:text-textPrimary transition-colors"
+            >
+              {t('common.later')}
+            </button>
+            <button
+              onClick={() => handleSync(selectedOption)}
+              disabled={!selectedOption}
+              className="
+                px-6 py-2 bg-primary hover:bg-primary/90
+                text-white rounded-lg transition-all
+                disabled:opacity-50 disabled:cursor-not-allowed
+                flex items-center gap-2
+              "
+            >
+              {selectedOption === 'skip' ? t('common.continue') : t('sync.startSync')}
+              {selectedOption && selectedOption !== 'skip' && (
+                <FontAwesomeIcon icon={faCloudDownloadAlt} className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/offline/OfflineToggle.tsx b/components/offline/OfflineToggle.tsx
new file mode 100644
index 0000000..47545bc
--- /dev/null
+++ b/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>
+    );
+}