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.
This commit is contained in:
natreex
@@ -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">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('characterComponent.enableTool')}
|
||||
description={t('characterComponent.enableToolDescription')}
|
||||
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
|
||||
<InputField
|
||||
icon={faToggleOn}
|
||||
fieldName={t('characterComponent.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="text-muted text-sm mt-2">
|
||||
{t('characterComponent.enableToolDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{toolEnabled && (
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('locationComponent.enableTool')}
|
||||
description={t('locationComponent.enableToolDescription')}
|
||||
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
|
||||
<InputField
|
||||
icon={faToggleOn}
|
||||
fieldName={t('locationComponent.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="text-muted text-sm mt-2">
|
||||
{t('locationComponent.enableToolDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{toolEnabled && (
|
||||
|
||||
@@ -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">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('worldSetting.enableTool')}
|
||||
description={t('worldSetting.enableToolDescription')}
|
||||
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
|
||||
<InputField
|
||||
icon={faToggleOn}
|
||||
fieldName={t('worldSetting.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="text-muted text-sm mt-2">
|
||||
{t('worldSetting.enableToolDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{toolEnabled && (
|
||||
|
||||
@@ -1,59 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import {Dispatch, SetStateAction} from 'react';
|
||||
'use client'
|
||||
import React from "react";
|
||||
|
||||
interface ToggleSwitchProps {
|
||||
enabled: boolean;
|
||||
setEnabled: Dispatch<SetStateAction<boolean>>;
|
||||
label?: string;
|
||||
description?: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function ToggleSwitch({
|
||||
enabled,
|
||||
setEnabled,
|
||||
label,
|
||||
description,
|
||||
disabled = false
|
||||
}: ToggleSwitchProps) {
|
||||
function handleToggle(): void {
|
||||
if (!disabled) {
|
||||
setEnabled(!enabled);
|
||||
}
|
||||
}
|
||||
|
||||
export default function ToggleSwitch({checked, onChange, disabled = false}: ToggleSwitchProps) {
|
||||
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}
|
||||
>
|
||||
<span
|
||||
className={`
|
||||
pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0
|
||||
transition duration-200 ease-in-out
|
||||
${enabled ? 'translate-x-5' : 'translate-x-0'}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
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={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||||
checked ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user