Remove unused OfflineIndicator, OfflineSyncDetails, and OfflineSyncManager components

- Deleted obsolete offline-related components as they are no longer in use.
- Simplified imports and removed related context dependencies.
- Updated synchronization and toggle switch handling in `CharacterComponent`, `WorldSetting`, and `LocationComponent` to improve consistency.

app/login/LoginWrapper.tsx

@@ -57,7 +57,7 @@ export default function LoginWrapper({children}: { children: React.ReactNode })
         <SessionContext.Provider value={{session: session, setSession: setSession}}>
             <LangContext.Provider value={{lang: locale, setLang: setLocale}}>
                 <NextIntlClientProvider locale={locale} messages={messages}>
-                    <AlertContext.Provider value={{errorMessage: setErrorMessage, successMessage: setSuccessMessage}}>
+                    <AlertContext.Provider value={{errorMessage: setErrorMessage, successMessage: setSuccessMessage, infoMessage: setInfoMessage, warningMessage: setWarningMessage}}>
                         {children}
                         <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3">
                             {

components/book/settings/characters/CharacterComponent.tsx

@@ -14,6 +14,8 @@ import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQ
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
 import {SyncedBook} from "@/lib/models/SyncedBook";
 import ToggleSwitch from "@/components/form/ToggleSwitch";
+import InputField from "@/components/form/InputField";
+import {faToggleOn} from "@fortawesome/free-solid-svg-icons";
 
 interface CharacterDetailProps {
     selectedCharacter: CharacterProps | null;
@@ -366,13 +368,20 @@ export function CharacterComponent({showToggle = true}: {showToggle?: boolean},
     return (
         <div className="space-y-5">
             {showToggle && (
-                <div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
+                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                    <InputField
+                        icon={faToggleOn}
+                        fieldName={t('characterComponent.enableTool')}
+                        input={
                             <ToggleSwitch
-                        enabled={toolEnabled}
+                                checked={toolEnabled}
-                        setEnabled={handleToggleTool}
+                                onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
-                        label={t('characterComponent.enableTool')}
-                        description={t('characterComponent.enableToolDescription')}
                             />
+                        }
+                    />
+                    <p className="text-muted text-sm mt-2">
+                        {t('characterComponent.enableToolDescription')}
+                    </p>
                 </div>
             )}
             {toolEnabled && (

components/book/settings/guide-line/GuideLineSetting.tsx

@@ -93,13 +93,13 @@ function GuideLineSetting(props: any, ref: any) {
                 }
             }
             if (response) {
-                setPlotSummary(response.globalResume);
+                setPlotSummary(response.globalResume || '');
                 setVerbTense(response.verbeTense?.toString() || '');
                 setNarrativeType(response.narrativeType?.toString() || '');
                 setDialogueType(response.dialogueType?.toString() || '');
-                setToneAtmosphere(response.atmosphere);
+                setToneAtmosphere(response.atmosphere || '');
                 setLanguage(response.langue?.toString() || '');
-                setThemes(response.themes);
+                setThemes(response.themes || '');
             }
         } catch (e: unknown) {
             if (e instanceof Error) {

components/book/settings/locations/LocationComponent.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
+import {faMapMarkerAlt, faPlus, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
 import {SessionContext} from "@/context/SessionContext";
@@ -477,13 +477,20 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
     return (
         <div className="space-y-6">
             {showToggle && (
-                <div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
+                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                    <InputField
+                        icon={faToggleOn}
+                        fieldName={t('locationComponent.enableTool')}
+                        input={
                             <ToggleSwitch
-                        enabled={toolEnabled}
+                                checked={toolEnabled}
-                        setEnabled={handleToggleTool}
+                                onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
-                        label={t('locationComponent.enableTool')}
-                        description={t('locationComponent.enableToolDescription')}
                             />
+                        }
+                    />
+                    <p className="text-muted text-sm mt-2">
+                        {t('locationComponent.enableToolDescription')}
+                    </p>
                 </div>
             )}
             {toolEnabled && (

components/book/settings/world/WorldSetting.tsx

@@ -1,7 +1,7 @@
 'use client'
 import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus, IconDefinition} from "@fortawesome/free-solid-svg-icons";
+import {faPlus, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
 import {WorldContext} from '@/context/WorldContext';
 import {BookContext} from "@/context/BookContext";
 import {AlertContext} from "@/context/AlertContext";
@@ -242,13 +242,20 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
     return (
         <div className="space-y-6">
             {showToggle && (
-                <div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
+                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                    <InputField
+                        icon={faToggleOn}
+                        fieldName={t('worldSetting.enableTool')}
+                        input={
                             <ToggleSwitch
-                        enabled={toolEnabled}
+                                checked={toolEnabled}
-                        setEnabled={handleToggleTool}
+                                onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
-                        label={t('worldSetting.enableTool')}
-                        description={t('worldSetting.enableToolDescription')}
                             />
+                        }
+                    />
+                    <p className="text-muted text-sm mt-2">
+                        {t('worldSetting.enableToolDescription')}
+                    </p>
                 </div>
             )}
             {toolEnabled && (

components/form/ToggleSwitch.tsx

@@ -1,59 +1,29 @@
-'use client';
+'use client'
-
+import React from "react";
-import {Dispatch, SetStateAction} from 'react';
 
 interface ToggleSwitchProps {
-    enabled: boolean;
+    checked: boolean;
-    setEnabled: Dispatch<SetStateAction<boolean>>;
+    onChange: (checked: boolean) => void;
-    label?: string;
-    description?: string;
     disabled?: boolean;
 }
 
-export default function ToggleSwitch({
+export default function ToggleSwitch({checked, onChange, disabled = false}: ToggleSwitchProps) {
-    enabled,
-    setEnabled,
-    label,
-    description,
-    disabled = false
-}: ToggleSwitchProps) {
-    function handleToggle(): void {
-        if (!disabled) {
-            setEnabled(!enabled);
-        }
-    }
-
     return (
-        <div className="flex items-center justify-between">
-            <div className="flex flex-col">
-                {label && (
-                    <span className="text-text-primary font-medium">{label}</span>
-                )}
-                {description && (
-                    <span className="text-text-secondary text-sm mt-1">{description}</span>
-                )}
-            </div>
         <button
             type="button"
-                onClick={handleToggle}
-                disabled={disabled}
-                className={`
-                    relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
-                    transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-                    ${enabled ? 'bg-primary' : 'bg-secondary'}
-                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                `}
             role="switch"
-                aria-checked={enabled}
+            aria-checked={checked}
+            disabled={disabled}
+            onClick={(): void => onChange(!checked)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+                checked ? 'bg-primary' : 'bg-secondary'
+            } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
         >
             <span
-                    className={`
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
-                        pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0
+                    checked ? 'translate-x-6' : 'translate-x-1'
-                        transition duration-200 ease-in-out
+                }`}
-                        ${enabled ? 'translate-x-5' : 'translate-x-0'}
-                    `}
             />
         </button>
-        </div>
     );
 }

components/offline/OfflineIndicator.tsx

@@ -1,174 +0,0 @@
-'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>
-    );
-}

components/offline/OfflineSyncDetails.tsx

@@ -1,126 +0,0 @@
-'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>
-    );
-}

components/offline/OfflineSyncManager.tsx

@@ -1,233 +0,0 @@
-'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>
-  );
-}