Remove unused components and models for improved maintainability

- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files.
- Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter.
- Updated project structure and references to reflect these removals.

components/offline/OfflinePinSetup.tsx

@@ -1,176 +1,166 @@
-'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';
-import * as tauri from '@/lib/tauri';
-
-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 {
-      const result = await tauri.offlinePinSet(pin);
-
-      if (result.success) {
-        await tauri.offlineModeSet(true, 30);
-        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>
-  );
-}
+'use client';
+
+import {useState, useContext} from 'react';
+import {SessionContext} from '@/context/SessionContext';
+import {useTranslations} from '@/lib/i18n';
+import {Lock, ShieldCheck, Eye, EyeOff} from 'lucide-react';
+import * as tauri from '@/lib/tauri';
+import Button from '@/components/ui/Button';
+
+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);
+
+    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 {
+            const result = await tauri.offlinePinSet(pin);
+
+            if (result.success) {
+                await tauri.offlineModeSet(true, 30);
+                onSuccess?.();
+            } else {
+                setError(result.error || t('offline.pin.errors.setupFailed'));
+            }
+        } catch (error) {
+            setError(t('offline.pin.errors.setupFailed'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-darkest-background/60 backdrop-blur-md">
+            <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="p-3 bg-primary/10 rounded-lg">
+                        <ShieldCheck className="w-6 h-6 text-primary"/>
+                    </div>
+                    <div className="flex-1">
+                        <h2 className="text-xl font-bold text-text-primary">
+                            {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>
+
+                <div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
+                    <p className="text-sm text-info flex items-center gap-2">
+                        <Lock className="w-3 h-3"/>
+                        {t('offline.pin.setup.description')}
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-text-primary 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="input-base text-center text-lg tracking-widest"
+                                disabled={isLoading}
+                            />
+                            <button
+                                type="button"
+                                onClick={() => setShowPin(!showPin)}
+                                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
+                            >
+                                {showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-text-primary 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="input-base text-center text-lg tracking-widest"
+                            disabled={isLoading}
+                        />
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="mt-3 p-2 bg-error/10 border border-error/20 rounded-lg">
+                        <p className="text-sm text-error">{error}</p>
+                    </div>
+                )}
+
+                <div className="mt-6 flex gap-3 justify-end">
+                    {onClose && (
+                        <Button variant="ghost" onClick={onClose} disabled={isLoading}>
+                            {t('offline.pin.setup.laterButton')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="primary"
+                        icon={Lock}
+                        isLoading={isLoading}
+                        loadingText={t('offline.pin.setup.configuringButton')}
+                        onClick={handleSetPin}
+                        disabled={isLoading || !pin || !confirmPin}
+                    >
+                        {t('offline.pin.setup.configureButton')}
+                    </Button>
+                </div>
+
+                <p className="mt-4 text-xs text-muted text-center">
+                    {t('offline.pin.setup.footer')}
+                </p>
+            </div>
+        </div>
+    );
+}

components/offline/OfflinePinVerify.tsx

@@ -1,170 +1,149 @@
-'use client';
-
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock, faWifi, faEye, faEyeSlash, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
-import System from '@/lib/models/System';
-import * as tauri from '@/lib/tauri';
-
-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 {
-      const result = await tauri.offlinePinVerify(pin);
-
-      if (result.success && result.userId) {
-        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) {
-      setError(t('offline.pin.verify.error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleVerifyPin();
-    }
-  };
-
-  const handleLogout = async () => {
-    System.removeCookie("token");
-    await tauri.removeToken();
-    tauri.logout();
-  };
-
-  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">
-          <button
-            onClick={handleLogout}
-            className="flex-1 px-4 py-2 text-error hover:bg-error/10 rounded-lg transition-all flex items-center justify-center gap-2"
-            disabled={isLoading}
-          >
-            <FontAwesomeIcon icon={faSignOutAlt} className="w-4 h-4" />
-            <span className="text-sm font-medium">{t('userMenu.logout')}</span>
-          </button>
-          {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>
-  );
-}
+'use client';
+
+import {useState} from 'react';
+import {useTranslations} from '@/lib/i18n';
+import {Lock, Wifi, Eye, EyeOff, LogOut} from 'lucide-react';
+import {removeCookie} from '@/lib/utils/cookies';
+import * as tauri from '@/lib/tauri';
+import Button from '@/components/ui/Button';
+
+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 {
+            const result = await tauri.offlinePinVerify(pin);
+
+            if (result.success && result.userId) {
+                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) {
+            setError(t('offline.pin.verify.error'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleVerifyPin();
+        }
+    };
+
+    const handleLogout = async () => {
+        removeCookie("token");
+        await tauri.removeToken();
+        tauri.logout();
+    };
+
+    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">
+                <div className="flex items-center justify-center mb-6">
+                    <div className="relative">
+                        <div className="p-4 bg-primary/10 rounded-full">
+                            <Lock 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">
+                                <Wifi className="w-3 h-3 text-warning"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="text-center mb-6">
+                    <h2 className="text-xl font-bold text-text-primary mb-2">
+                        {t('offline.pin.verify.title')}
+                    </h2>
+                    <p className="text-sm text-muted">
+                        {t('offline.pin.verify.subtitle')}
+                    </p>
+                </div>
+
+                <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="input-base 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-text-primary transition-colors"
+                        >
+                            {showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
+                        </button>
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
+                        <p className="text-sm text-error text-center">{error}</p>
+                    </div>
+                )}
+
+                <div className="flex gap-3">
+                    <Button variant="danger" icon={LogOut} onClick={handleLogout} disabled={isLoading}>
+                        {t('userMenu.logout')}
+                    </Button>
+                    {onCancel && (
+                        <Button variant="secondary" onClick={onCancel} disabled={isLoading}>
+                            {t('offline.pin.verify.cancelButton')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="primary"
+                        icon={Lock}
+                        isLoading={isLoading}
+                        loadingText={t('offline.pin.verify.verifyingButton')}
+                        onClick={handleVerifyPin}
+                        disabled={isLoading || !pin || attempts > 2}
+                    >
+                        {t('offline.pin.verify.unlockButton')}
+                    </Button>
+                </div>
+
+                {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>
+    );
+}

components/offline/OfflineToggle.tsx

@@ -1,40 +1,39 @@
-'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 (!offlineMode.isDatabaseInitialized) {
-        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>
-    );
-}
+'use client';
+
+import { useContext } from 'react';
+import OfflineContext from '@/context/OfflineContext';
+import { Wifi, Circle } from 'lucide-react';
+
+export default function OfflineToggle() {
+    const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
+
+    if (!offlineMode.isDatabaseInitialized) {
+        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'}
+        >
+            {offlineMode.isOffline
+                ? <Circle className="w-3 h-3 text-orange-300" />
+                : <Wifi className="w-3 h-3 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>
+    );
+}