Add presentation upload and management features to room functionality

src/pages/RoomDetail.jsx

@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
   ArrowLeft, Play, Square, Users, Settings, FileVideo, Radio,
   Loader2, Copy, ExternalLink, Lock, Mic, MicOff, UserCheck,
   Shield, Save, UserPlus, X, Share2, Globe, Send,
+  FileText, Upload, Trash2,
 } from 'lucide-react';
 import Modal from '../components/Modal';
 import api from '../services/api';
@@ -37,6 +38,11 @@ export default function RoomDetail() {
   const [fedMessage, setFedMessage] = useState('');
   const [fedSending, setFedSending] = useState(false);
 
+  // Presentation state
+  const [uploadingPresentation, setUploadingPresentation] = useState(false);
+  const [removingPresentation, setRemovingPresentation] = useState(false);
+  const presentationInputRef = useRef(null);
+
   const isOwner = room && user && room.user_id === user.id;
   const isShared = room && !!room.shared;
   const canManage = isOwner || isShared;
@@ -159,6 +165,52 @@ export default function RoomDetail() {
   };
 
   // Federation invite handler
+  const handlePresentationUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const allowedTypes = [
+      'application/pdf',
+      'application/vnd.ms-powerpoint',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      'application/vnd.oasis.opendocument.presentation',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    ];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error('Unsupported file type. Allowed: PDF, PPT, PPTX, ODP, DOC, DOCX');
+      return;
+    }
+    setUploadingPresentation(true);
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const res = await api.post(`/rooms/${uid}/presentation`, arrayBuffer, {
+        headers: { 'Content-Type': file.type },
+      });
+      setRoom(res.data.room);
+      setEditRoom(res.data.room);
+      toast.success(t('room.presentationUploaded'));
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('room.presentationUploadFailed'));
+    } finally {
+      setUploadingPresentation(false);
+      if (presentationInputRef.current) presentationInputRef.current.value = '';
+    }
+  };
+
+  const handlePresentationRemove = async () => {
+    setRemovingPresentation(true);
+    try {
+      const res = await api.delete(`/rooms/${uid}/presentation`);
+      setRoom(res.data.room);
+      setEditRoom(res.data.room);
+      toast.success(t('room.presentationRemoved'));
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('room.presentationRemoveFailed'));
+    } finally {
+      setRemovingPresentation(false);
+    }
+  };
+
   const handleFedInvite = async (e) => {
     e.preventDefault();
     if (!fedAddress.includes('@')) {
@@ -538,6 +590,60 @@ export default function RoomDetail() {
             </div>
           </div>
 
+          {/* Presentation section */}
+          <div className="pt-4 border-t border-th-border space-y-4">
+            <div>
+              <h3 className="text-sm font-semibold text-th-text flex items-center gap-2 mb-1">
+                <FileText size={16} />
+                {t('room.presentationTitle')}
+              </h3>
+              <p className="text-xs text-th-text-s">{t('room.presentationDesc')}</p>
+            </div>
+
+            {room.presentation_file ? (
+              <div className="flex items-center justify-between gap-3 p-3 bg-th-bg-s rounded-lg border border-th-border">
+                <div className="flex items-center gap-2 min-w-0">
+                  <FileText size={16} className="text-th-accent flex-shrink-0" />
+                  <div className="min-w-0">
+                    <p className="text-xs text-th-text-s">{t('room.presentationCurrent')}</p>
+                    <p className="text-sm text-th-text font-medium truncate">
+                      presentation.{room.presentation_file.split('.').pop()}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={handlePresentationRemove}
+                  disabled={removingPresentation}
+                  className="btn-ghost text-th-error hover:bg-th-error/10 flex-shrink-0 text-xs py-1.5 px-3"
+                >
+                  {removingPresentation ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
+                  {t('room.presentationRemove')}
+                </button>
+              </div>
+            ) : (
+              <div className="text-xs text-th-text-s italic">{/* no presentation */}</div>
+            )}
+
+            <input
+              ref={presentationInputRef}
+              type="file"
+              accept=".pdf,.ppt,.pptx,.odp,.doc,.docx"
+              className="hidden"
+              onChange={handlePresentationUpload}
+            />
+            <button
+              type="button"
+              onClick={() => presentationInputRef.current?.click()}
+              disabled={uploadingPresentation}
+              className="btn-secondary text-sm flex items-center gap-2"
+            >
+              {uploadingPresentation ? <Loader2 size={15} className="animate-spin" /> : <Upload size={15} />}
+              {t('room.presentationUpload')}
+            </button>
+            <p className="text-xs text-th-text-s">{t('room.presentationAllowedTypes')}</p>
+          </div>
+
           {/* Share section */}
           <div className="pt-4 border-t border-th-border space-y-4">
             <h3 className="text-sm font-semibold text-th-text flex items-center gap-2">