Initial xlxs support

2026-05-25 09:57:09 -07:00 · 2026-05-25 09:57:09 -07:00 · 709c13995c
commit 709c13995c
parent 2648a5ae84
5 changed files with 164 additions and 22 deletions
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@ -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)} 
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@ -14,7 +14,7 @@ interface FileItem {
 }

 interface OfficeHomeProps {
-  type: 'docs' | 'slides';
+  type: 'docs' | 'slides' | 'sheets';
  onFileSelect: (file: FileItem) => void;
  onCreateBlank: (file: FileItem) => void;
  onPinChange?: () => void;
@ -38,6 +38,15 @@ function PptIcon({ className }: { className?: string }) {
  );
 }

+// Custom Excel icon (green)
+function SheetIcon({ className }: { className?: string }) {
+  return (
+    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#107C41] rounded-lg ${className || ''}`}>
+      X
+    </div>
+  );
+}
+
 interface ContextMenuState {
  x: number;
  y: number;
@ -55,8 +64,8 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
  const [renameValue, setRenameValue] = useState('');
  const renameInputRef = useRef<HTMLInputElement>(null);

-  const ext = type === 'docs' ? '.docx' : '.pptx';
-  const fileTypeParam = type === 'docs' ? 'docx' : 'pptx';
+  const ext = type === 'docs' ? '.docx' : type === 'slides' ? '.pptx' : '.xlsx';
+  const fileTypeParam = type === 'docs' ? 'docx' : type === 'slides' ? 'pptx' : 'xlsx';

  const fetchFiles = () => {
    // Fetch recent files from root directory
@ -132,7 +141,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha

  const handleCreateBlank = async () => {
    try {
-      const res = await api.createOnlyOfficeFile(type === 'docs' ? 'word' : 'slide');
+      const res = await api.createOnlyOfficeFile(type === 'docs' ? 'word' : type === 'slides' ? 'slide' : 'cell');
      const { path, name } = res;
      
      const newFile: FileItem = {
@ -140,7 +149,9 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
        path,
        is_dir: false,
        size: 0,
-        mime_type: type === 'docs' ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        mime_type: type === 'docs' ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 
+                   type === 'slides' ? 'application/vnd.openxmlformats-officedocument.presentationml.presentation' :
+                   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        is_pinned: false,
        is_trashed: false,
        mod_time: new Date().toISOString()
@ -204,9 +215,9 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
    }
  };

-  const title = type === 'docs' ? 'Documents' : 'Presentations';
-  const Icon = type === 'docs' ? WordIcon : PptIcon;
-  const accentColor = type === 'docs' ? '#2B579A' : '#D24726';
+  const title = type === 'docs' ? 'Documents' : type === 'slides' ? 'Presentations' : 'Spreadsheets';
+  const Icon = type === 'docs' ? WordIcon : type === 'slides' ? PptIcon : SheetIcon;
+  const accentColor = type === 'docs' ? '#2B579A' : type === 'slides' ? '#D24726' : '#107C41';

  const renderFileCard = (file: FileItem) => {
    const isRenaming = renaming === file.path;
@ -218,7 +229,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
        <button 
          onClick={() => !isRenaming && onFileSelect(file)}
          onContextMenu={(e) => handleContextMenu(e, file)}
-          className={`w-full ${type === 'docs' ? 'aspect-[1/1.4]' : 'aspect-[1.4/1]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
+          className={`w-full ${type === 'slides' ? 'aspect-[1.4/1]' : 'aspect-[1/1.4]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
          style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
        >
          <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
@ -257,12 +268,12 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
      {/* Top Banner */}
      <div className="py-8 px-10" style={{ backgroundColor: 'var(--color-bg-secondary)' }}>
        <div className="max-w-6xl mx-auto">
-          <h2 className="text-lg font-medium mb-4" style={{ color: 'var(--color-text-primary)' }}>Start a new {type === 'docs' ? 'document' : 'presentation'}</h2>
+          <h2 className="text-lg font-medium mb-4" style={{ color: 'var(--color-text-primary)' }}>Start a new {type === 'docs' ? 'document' : type === 'slides' ? 'presentation' : 'spreadsheet'}</h2>
          <div className="flex gap-4">
            <div className="flex flex-col gap-3">
              <button
                onClick={handleCreateBlank}
-                className={`${type === 'docs' ? 'w-40 h-52' : 'w-52 h-40'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
+                className={`${type === 'slides' ? 'w-52 h-40' : 'w-40 h-52'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
                style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
              >
                <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />
@ -284,7 +295,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
          ) : recentFiles.length === 0 ? (
            <div className="text-sm text-gray-500">No recent {title.toLowerCase()} found.</div>
          ) : (
-            <div className={`grid ${type === 'docs' ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'} gap-6`}>
+            <div className={`grid ${type === 'slides' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'} gap-6`}>
              {recentFiles.map(file => renderFileCard(file))}
            </div>
          )}
@ -301,7 +312,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
          ) : allFiles.length === 0 ? (
            <div className="text-sm text-gray-500">No {title.toLowerCase()} found in your drive.</div>
          ) : (
-            <div className={`grid ${type === 'docs' ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'} gap-6`}>
+            <div className={`grid ${type === 'slides' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'} gap-6`}>
              {allFiles.map(file => renderFileCard(file))}
            </div>
          )}
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@ -470,7 +470,7 @@ class ApiClient {
  }

  // --- OnlyOffice ---
-  async createOnlyOfficeFile(type: 'word' | 'slide') {
+  async createOnlyOfficeFile(type: 'word' | 'slide' | 'cell') {
    const res = await this.request('/api/onlyoffice/create', {
      method: 'POST',
      body: { type }
@ -494,7 +494,7 @@ class ApiClient {
    return res.json();
  }

-  async listOfficeFiles(type: 'docx' | 'pptx') {
+  async listOfficeFiles(type: 'docx' | 'pptx' | 'xlsx') {
    const res = await this.request(`/api/onlyoffice/files?type=${type}`);
    return res.json();
  }