mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-07-09 15:05:59 +00:00
Maurice
741639edf0
The text-size control now adjusts each size class (Large / Medium / Normal / Small) independently as well as all-at-once. Inline px sizes are mapped to a class by their value, so the per-class sliders reach real content; each class variable = global factor x its per-class factor (no double-scaling with the root font-size that handles rem text). The settings UI gains a live preview that resizes as you drag, and the four size sliders sit behind a clear toggle.
37 lines
1.9 KiB
TypeScript
37 lines
1.9 KiB
TypeScript
import { Trash2 } from 'lucide-react'
|
|
import type { FileManagerState } from './useFileManager'
|
|
import { FileRow } from './FileManagerRow'
|
|
|
|
export function TrashView(S: FileManagerState) {
|
|
const { trashFiles, can, trip, handleEmptyTrash, loadingTrash, t } = S
|
|
return (
|
|
<div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
|
|
{trashFiles.length > 0 && can('file_delete', trip) && (
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
|
|
<button onClick={handleEmptyTrash} style={{
|
|
padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
|
|
background: '#fef2f2', color: '#dc2626', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500,
|
|
cursor: 'pointer', fontFamily: 'inherit',
|
|
}}>
|
|
{t('files.emptyTrash') || 'Empty Trash'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
{loadingTrash ? (
|
|
<div style={{ textAlign: 'center', padding: 40, color: 'var(--text-faint)' }}>
|
|
<div style={{ width: 20, height: 20, border: '2px solid var(--text-faint)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }} />
|
|
</div>
|
|
) : trashFiles.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
|
|
<Trash2 size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
|
|
<p style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.trashEmpty') || 'Trash is empty'}</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{trashFiles.map(file => <FileRow key={file.id} {...S} file={file} isTrash />)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|