Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement code highlighting, thumbnail retries, and pinned order fix
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m29s
Details

Browse source
This commit is contained in:
Elijah 2026-05-23 08:42:30 -07:00
parent 745d959c9b
commit 2b49e90b81
5 changed files with 371 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/FilePreview.tsx
View file

@ -5,6 +5,8 @@ import { motion, AnimatePresence } from 'framer-motion';
import { X, Download, File, Image as ImageIcon, Film, Music, FileText, Code, Loader2 } from 'lucide-react';
import api from '@/lib/api';
import dynamic from 'next/dynamic';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
const DynamicPdfViewer = dynamic(() => import('./PdfViewer'), { ssr: false });
@ -83,9 +85,9 @@ export default function FilePreview({ file, onClose }: FilePreviewProps) {
exit={{ scale: 0.95, opacity: 0, y: 20 }}
onClick={(e) => e.stopPropagation()}
className={`relative flex flex-col max-w-[95vw] max-h-[95vh] rounded-2xl overflow-hidden shadow-2xl ${
(previewType === 'image' || previewType === 'video' || previewType === 'pdf') ? 'w-fit' : 'w-full'
(previewType === 'image' || previewType === 'video' || previewType === 'pdf' || previewType === 'audio') ? 'w-fit' : 'w-full'
} ${
(previewType === 'image' || previewType === 'video') ? 'h-fit' : 'h-full'
(previewType === 'image' || previewType === 'video' || previewType === 'audio') ? 'h-fit' : 'h-full'
}`}
style={{ backgroundColor: 'var(--color-bg-elevated)', border: '1px solid var(--color-border)' }}
>
@ -173,6 +175,17 @@ export default function FilePreview({ file, onClose }: FilePreviewProps) {
Download File
</a>
</div>
) : previewType === 'code' ? (
<div className="w-full h-full overflow-auto rounded-lg" style={{ backgroundColor: 'var(--color-bg-secondary)', border: '1px solid var(--color-border-subtle)' }}>
<SyntaxHighlighter
language={file.name.split('.').pop()?.toLowerCase() || 'text'}
style={vscDarkPlus}
customStyle={{ margin: 0, background: 'transparent', height: '100%', fontSize: '14px' }}
showLineNumbers={true}
>
{content || ''}
</SyntaxHighlighter>
</div>
) : (
<pre
className="w-full h-full p-4 overflow-auto text-sm rounded-lg"