itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 23:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(modal): migrate DeviceSyncPreSyncModal onto the Modal primitive

Browse Source
This commit is contained in:
Psychotoxical
2026-06-21 02:23:29 +02:00
parent 764ad7dfe0
commit e9d9365110
1 changed files with 50 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/deviceSync/DeviceSyncPreSyncModal.tsx
+50 -53
View File
@@ -1,8 +1,8 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { AlertCircle, Loader2 } from 'lucide-react';
import type { SyncDelta } from '../../utils/deviceSync/runDeviceSyncExecution';
import { formatMb } from '../../utils/format/formatBytes';
import Modal from '../Modal';
interface Props {
preSyncOpen: boolean;
@@ -16,62 +16,59 @@ export default function DeviceSyncPreSyncModal({
preSyncOpen, preSyncLoading, syncDelta, onCancel, onProceed,
}: Props) {
const { t } = useTranslation();
if (!preSyncOpen) return null;
const overBudget = syncDelta.addBytes > syncDelta.availableBytes + syncDelta.delBytes;
return (
<div className="modal-overlay">
<div className="modal-content device-sync-modal">
<h2 className="modal-title">{t('deviceSync.syncSummary')}</h2>
{preSyncLoading ? (
<div className="device-sync-loading-modal" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px' }}>
<Loader2 size={32} className="spin" />
<p style={{ marginTop: '10px' }}>{t('deviceSync.calculating')}</p>
<Modal
open={preSyncOpen}
onClose={onCancel}
title={t('deviceSync.syncSummary')}
size="md"
closeLabel={t('deviceSync.cancel')}
bodyClassName="ui-modal-body--padded"
footer={!preSyncLoading ? (
<>
<button className="btn btn-ghost" onClick={onCancel}>
{t('deviceSync.cancel')}
</button>
<button className="btn btn-primary" onClick={onProceed} disabled={overBudget}>
{t('deviceSync.proceed')}
</button>
</>
) : undefined}
>
{preSyncLoading ? (
<div className="device-sync-loading-modal" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px' }}>
<Loader2 size={32} className="spin" />
<p style={{ marginTop: '10px' }}>{t('deviceSync.calculating')}</p>
</div>
) : (
<div className="device-sync-summary-stats" style={{ display: 'flex', flexDirection: 'column', gap: '8px', margin: '10px 0' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
<span>{t('deviceSync.filesToAdd')}</span>
<span className="color-success">+{syncDelta.addCount} ({formatMb(syncDelta.addBytes)})</span>
</div>
) : (
<div className="device-sync-summary-stats" style={{ display: 'flex', flexDirection: 'column', gap: '8px', margin: '10px 0' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
<span>{t('deviceSync.filesToAdd')}</span>
<span className="color-success">+{syncDelta.addCount} ({formatMb(syncDelta.addBytes)})</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
<span>{t('deviceSync.filesToDelete')}</span>
<span className="color-error">-{syncDelta.delCount} ({formatMb(syncDelta.delBytes)})</span>
</div>
<hr style={{ border: 'none', borderTop: '1px solid var(--border)', margin: '10px 0' }} />
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>
<span>{t('deviceSync.netChange')}</span>
<span>{formatMb(syncDelta.addBytes - syncDelta.delBytes)}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', color: syncDelta.addBytes > syncDelta.availableBytes + syncDelta.delBytes ? 'var(--danger)' : 'inherit', marginTop: '10px' }}>
<span>{t('deviceSync.availableSpace')}</span>
<span>{formatMb(syncDelta.availableBytes)}</span>
</div>
{syncDelta.addBytes > syncDelta.availableBytes + syncDelta.delBytes && (
<div className="sync-warning error" style={{ background: 'color-mix(in srgb, var(--danger) 15%, transparent)', padding: '10px', borderRadius: 'var(--radius-md)', marginTop: '15px', display: 'flex', gap: '10px', color: 'var(--danger)', alignItems: 'flex-start' }}>
<AlertCircle size={16} style={{ flexShrink: 0, marginTop: '2px' }} />
<span>{t('deviceSync.spaceWarning')}</span>
</div>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
<span>{t('deviceSync.filesToDelete')}</span>
<span className="color-error">-{syncDelta.delCount} ({formatMb(syncDelta.delBytes)})</span>
</div>
)}
{!preSyncLoading && (
<div className="modal-actions" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '25px' }}>
<button className="btn btn-ghost" onClick={onCancel}>
{t('deviceSync.cancel')}
</button>
<button
className="btn btn-primary"
onClick={onProceed}
disabled={syncDelta.addBytes > syncDelta.availableBytes + syncDelta.delBytes}
>
{t('deviceSync.proceed')}
</button>
<hr style={{ border: 'none', borderTop: '1px solid var(--border)', margin: '10px 0' }} />
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>
<span>{t('deviceSync.netChange')}</span>
<span>{formatMb(syncDelta.addBytes - syncDelta.delBytes)}</span>
</div>
)}
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', color: overBudget ? 'var(--danger)' : 'inherit', marginTop: '10px' }}>
<span>{t('deviceSync.availableSpace')}</span>
<span>{formatMb(syncDelta.availableBytes)}</span>
</div>
{overBudget && (
<div className="sync-warning error" style={{ background: 'color-mix(in srgb, var(--danger) 15%, transparent)', padding: '10px', borderRadius: 'var(--radius-md)', marginTop: '15px', display: 'flex', gap: '10px', color: 'var(--danger)', alignItems: 'flex-start' }}>
<AlertCircle size={16} style={{ flexShrink: 0, marginTop: '2px' }} />
<span>{t('deviceSync.spaceWarning')}</span>
</div>
)}
</div>
)}
</Modal>
);
}