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

Initial xlxs support
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m25s
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 09:57:09 -07:00
parent 2648a5ae84
commit 709c13995c
5 changed files with 164 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/components/FileExplorer.tsx
View file

@ -239,7 +239,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
const [files, setFiles] = useState<FileItem[]>([]);
const [loading, setLoading] = useState(true);
const [viewMode, setViewMode] = useState<ViewMode>('grid');
const [appMode, setAppMode] = useState<'drive' | 'docs' | 'slides'>('drive');
const [appMode, setAppMode] = useState<'drive' | 'docs' | 'slides' | 'sheets'>('drive');
const [editingFile, setEditingFile] = useState<FileItem | null>(null);
const [activeSection, setActiveSection] = useState<SidebarSection>('files');
const [searchQuery, setSearchQuery] = useState('');
@ -558,6 +558,9 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
} else if (file.name.endsWith('.pptx')) {
setAppMode('slides');
setEditingFile(file);
} else if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
setAppMode('sheets');
setEditingFile(file);
} else {
setPreviewFile(file);
}
@ -1181,6 +1184,14 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
</div>
);
}
if (ext === 'xlsx' || ext === 'xls') {
return (
<div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#107C41]`}>
X
</div>
);
}
const fallbackIcon = (() => {
if (isImage) {
@ -1447,6 +1458,20 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
</div>
Slides
</button>
<button
onClick={() => { setAppMode('sheets'); setEditingFile(null); }}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-bold transition-all duration-150"
style={{
backgroundColor: appMode === 'sheets' ? 'var(--color-accent-subtle)' : 'transparent',
color: appMode === 'sheets' ? 'var(--color-accent)' : 'var(--color-text-primary)',
}}
>
<div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: appMode === 'sheets' ? 'linear-gradient(135deg, #10b981, #059669)' : 'var(--color-bg-elevated)' }}>
<Grid3X3 className={`w-4 h-4 ${appMode === 'sheets' ? 'text-white' : ''}`} style={{ color: appMode !== 'sheets' ? 'var(--color-text-secondary)' : undefined }} />
</div>
Sheets
</button>
</div>
<nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
@ -1560,6 +1585,24 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
{renderPinnedSidebarSection('.pptx')}
</>
)}
{appMode === 'sheets' && (
<>
<div className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Spreadsheets</div>
<button
onClick={() => { setActiveSection('files'); setEditingFile(null); }}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150"
style={{
backgroundColor: !editingFile ? 'var(--color-accent-subtle)' : 'transparent',
color: !editingFile ? 'var(--color-accent)' : 'var(--color-text-secondary)',
}}
>
<Grid3X3 className="w-4.5 h-4.5" />
Recent Spreadsheets
</button>
{renderPinnedSidebarSection('.xlsx')}
</>
)}
</nav>
<div className="px-3 py-4 border-t" style={{ borderColor: 'var(--color-border-subtle)' }}>
@ -1620,7 +1663,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
))
) : (
<span className="text-lg font-semibold" style={{ color: 'var(--color-text-primary)' }}>
{appMode === 'docs' ? 'Documents' : 'Presentations'}
{appMode === 'docs' ? 'Documents' : appMode === 'slides' ? 'Presentations' : 'Spreadsheets'}
</span>
)}
</div>
@ -1896,7 +1939,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
) : editingFile ? (
<OnlyOfficeEditor
file={editingFile}
type={editingFile.name.endsWith('.docx') ? 'word' : editingFile.name.endsWith('.pptx') ? 'slide' : 'word'}
type={editingFile.name.endsWith('.docx') ? 'word' : editingFile.name.endsWith('.pptx') ? 'slide' : 'cell'}
onClose={() => setEditingFile(null)}
onRename={(oldPath, newName, newPath) => {
setEditingFile(prev => prev ? { ...prev, name: newName, path: newPath } : null);
@ -1904,7 +1947,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
theme={theme as 'light' | 'dark'}
toggleTheme={toggleTheme}
/>
) : (appMode === 'docs' || appMode === 'slides') && activeSection === 'files' ? (
) : (appMode === 'docs' || appMode === 'slides' || appMode === 'sheets') && activeSection === 'files' ? (
<OfficeHome
type={appMode}
onFileSelect={(file) => setEditingFile(file)}