chore: sync root client pages from deploy/frontend to match live build

client/src/pages/TutorialTasks.tsx

@@ -123,14 +123,13 @@ const TutorialTasks: React.FC = () => {
     const [docs, setDocs] = useState<any[]>([]);
     const [urlInput, setUrlInput] = useState<string>('');
     const [errorMsg, setErrorMsg] = useState<string>('');
-    const [replaceMode, setReplaceMode] = useState<boolean>(false);
     const [copiedLink, setCopiedLink] = useState<string>('');
     const isAdmin = (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin');
 
     const CopySquaresIcon: React.FC<{ className?: string }> = ({ className }) => (
-      <svg className={className || 'h-4 w-4'} viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <rect x="6" y="6" width="10" height="10" rx="2" className="opacity-100"/>
-        <rect x="2" y="2" width="10" height="10" rx="2" className="opacity-60"/>
+      <svg className={className || 'h-4 w-4'} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg">
+        <rect x="8" y="8" width="12" height="12" rx="2"/>
+        <rect x="4" y="4" width="12" height="12" rx="2"/>
       </svg>
     );
 
@@ -164,7 +163,6 @@ const TutorialTasks: React.FC = () => {
         await api.post('/api/docs/create', { weekNumber, groupNumber: group, docUrl: url });
         await loadDocs();
         setUrlInput('');
-        setReplaceMode(false);
       } finally {
         setCreating(false);
       }
@@ -182,27 +180,25 @@ const TutorialTasks: React.FC = () => {
       <div>
         {/* Top control row */}
         {isAdmin && (
-          <div className="flex items-center justify-between gap-4 mb-4">
-            <div className="flex-1">
-              <label className="text-sm text-gray-700 block mb-1">Group</label>
-              <select
-                value={group}
-                onChange={(e) => {
-                  const g = parseInt(e.target.value);
-                  setGroup(g);
-                  localStorage.setItem(`tutorial_group_${weekNumber}`, String(g));
-                }}
-                className="w-full px-3 py-2 border rounded-md text-sm"
-              >
-                {[1,2,3,4,5,6,7,8].map(g => <option key={g} value={g}>Group {g}</option>)}
-              </select>
-            </div>
+          <div className="mb-4 max-w-2xl">
+            <label className="text-sm text-gray-700 block mb-1">Group</label>
+            <select
+              value={group}
+              onChange={(e) => {
+                const g = parseInt(e.target.value);
+                setGroup(g);
+                localStorage.setItem(`tutorial_group_${weekNumber}`, String(g));
+              }}
+              className="w-full px-3 py-2 border rounded-md text-sm"
+            >
+              {[1,2,3,4,5,6,7,8].map(g => <option key={g} value={g}>Group {g}</option>)}
+            </select>
           </div>
         )}
 
         {/* Replace / Add link inline editor */}
         {isAdmin && (
-          <div className="mb-4">
+          <div className="mb-4 max-w-2xl">
             <div className="flex items-center gap-2">
               <input
                 type="url"
@@ -212,12 +208,6 @@ const TutorialTasks: React.FC = () => {
                 className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
               />
               <button onClick={createDoc} disabled={creating} className="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm">{creating ? 'Saving…' : (current ? 'Save new link' : 'Add Doc Link')}</button>
-              {current && (
-                <button onClick={() => setReplaceMode(v => !v)} className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md text-sm inline-flex items-center gap-2">
-                  <ArrowsRightLeftIcon className="h-4 w-4" />
-                  {replaceMode ? 'Cancel' : 'Replace'}
-                </button>
-              )}
             </div>
             {errorMsg && <div className="mt-1 text-xs text-red-600">{errorMsg}</div>}
           </div>
@@ -247,11 +237,11 @@ const TutorialTasks: React.FC = () => {
                           <ArrowTopRightOnSquareIcon className="h-4 w-4" /> Open
                         </a>
                         <button onClick={() => copyLink(d.docUrl)} className="inline-flex items-center gap-1 text-indigo-700">
-                          <CopySquaresIcon className="h-4 w-4" /> Copy
+                          <CopySquaresIcon className="h-4 w-4" /> {copiedLink === d.docUrl ? 'Copied' : 'Copy'}
                         </button>
                         {isAdmin && (
-                          <button onClick={() => { setGroup(d.groupNumber); setReplaceMode(true); }} className="inline-flex items-center gap-1 text-gray-700">
-                            <ArrowsRightLeftIcon className="h-4 w-4" /> Replace
+                          <button onClick={() => { setGroup(d.groupNumber); }} className="inline-flex items-center gap-1 text-gray-700">
+                            <ArrowsRightLeftIcon className="h-4 w-4" /> Edit
                           </button>
                         )}
                       </div>

client/src/pages/WeeklyPractice.tsx

@@ -25,7 +25,7 @@ interface WeeklyPractice {
   imageUrl?: string;
   imageAlt?: string;
   imageSize?: number;
-  imageAlignment?: 'left' | 'center' | 'right';
+  imageAlignment?: 'left' | 'center' | 'right' | 'portrait-split';
 }
 
 interface WeeklyPracticeWeek {
@@ -95,6 +95,71 @@ const WeeklyPractice: React.FC = () => {
   const [anonymousSubmissions, setAnonymousSubmissions] = useState<{[key: string]: boolean}>({});
   const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
 
+  // Basic inline formatting helpers for weeks 4–6 (bold/italic via simple markdown) + links
+  const renderFormatted = (text: string) => {
+    const escape = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const html = escape(text)
+      .replace(/\[([^\]]+?)\]\((https?:\/\/[^\s)]+)\)/g, '<a class="text-purple-700 underline" href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+      .replace(/(^|[^=\"'\/:])(https?:\/\/[^\s<]+)/g, (m, p1, url) => `${p1}<a class=\"text-purple-700 underline\" href=\"${url}\" target=\"_blank\" rel=\"noopener noreferrer\">${url}</a>`)
+      .replace(/(^|[^=\"'\/:])(www\.[^\s<]+)/g, (m, p1, host) => `${p1}<a class=\"text-purple-700 underline\" href=\"https://${host}\" target=\"_blank\" rel=\"noopener noreferrer\">${host}</a>`)
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/\n/g, '<br/>');
+    return <span dangerouslySetInnerHTML={{ __html: html }} />;
+  };
+
+  const applyInlineFormat = (
+    elementId: string,
+    current: string,
+    setValue: (v: string) => void,
+    wrapper: '**' | '*'
+  ) => {
+    const el = document.getElementById(elementId) as HTMLTextAreaElement | null;
+    if (!el) {
+      setValue(current + wrapper + wrapper);
+      return;
+    }
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? current.length;
+    const before = current.slice(0, start);
+    const selection = current.slice(start, end);
+    const after = current.slice(end);
+    const next = `${before}${wrapper}${selection}${wrapper}${after}`;
+    setValue(next);
+    setTimeout(() => {
+      try {
+        el.focus();
+        el.selectionStart = start + wrapper.length;
+        el.selectionEnd = end + wrapper.length;
+      } catch {}
+    }, 0);
+  };
+
+  const applyLinkFormat = (
+    elementId: string,
+    current: string,
+    setValue: (v: string) => void
+  ) => {
+    const urlInput = window.prompt('Enter URL (e.g., https://example.com):');
+    if (!urlInput) return;
+    let url = /^https?:\/\//i.test(urlInput) ? urlInput : `https://${urlInput}`;
+    url = url.replace(/["'>)\s]+$/g, '');
+    const el = document.getElementById(elementId) as HTMLTextAreaElement | null;
+    if (!el) {
+      setValue(`${current}[link](${url})`);
+      return;
+    }
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? current.length;
+    const before = current.slice(0, start);
+    const selection = current.slice(start, end) || 'link';
+    const after = current.slice(end);
+    setValue(`${before}[${selection}](${url})${after}`);
+    setTimeout(() => {
+      try { el.focus(); el.setSelectionRange(end, end); } catch {}
+    }, 0);
+  };
+
   const [editingPractice, setEditingPractice] = useState<string | null>(null);
   const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
   const [addingPractice, setAddingPractice] = useState<boolean>(false);
@@ -114,7 +179,7 @@ const WeeklyPractice: React.FC = () => {
     imageUrl: string;
     imageAlt: string;
     imageSize: number;
-    imageAlignment: 'left' | 'center' | 'right';
+  imageAlignment: 'left' | 'center' | 'right' | 'portrait-split';
   }>({
     imageUrl: '',
     imageAlt: '',
@@ -123,6 +188,10 @@ const WeeklyPractice: React.FC = () => {
   });
   const [saving, setSaving] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [uploadingSource, setUploadingSource] = useState(false);
+  const [uploadingTranslation, setUploadingTranslation] = useState(false);
+  const [weekFiles, setWeekFiles] = useState<{ source: any[]; translation: any[] }>({ source: [], translation: [] });
+  const [showAllTranslations, setShowAllTranslations] = useState(false);
   const navigate = useNavigate();
 
   // Subtitling state for Week 2
@@ -150,32 +219,51 @@ const WeeklyPractice: React.FC = () => {
 
   const handleWeekChange = async (week: number) => {
     setIsWeekTransitioning(true);
-    
-    // Clear existing data first and update state
+    // Clear existing data immediately
     setWeeklyPractice([]);
     setWeeklyPracticeWeek(null);
     setUserSubmissions({});
-    setSelectedWeek(week);
     localStorage.setItem('selectedWeeklyPracticeWeek', week.toString());
-    
-    // Wait for actual content to load before ending animation
+    setSelectedWeek(week);
+
     try {
-      // Fetch new week's data
-      await fetchWeeklyPractice(false);
-      // fetchUserSubmissions will be called automatically by useEffect
-      // after weeklyPractice is updated
-      
-      // Wait longer for DOM to update with new content (especially for Week 2)
+      // Explicitly fetch for the target week to avoid stale selectedWeek race
+      await fetchWeeklyPracticeForWeek(week, false);
       const delay = week === 2 ? 400 : 200;
       await new Promise(resolve => setTimeout(resolve, delay));
     } catch (error) {
       console.error('Error loading week data:', error);
     } finally {
-      // End transition after content is loaded and rendered
       setIsWeekTransitioning(false);
     }
   };
 
+  // Authenticated file download helper
+  const downloadWeekFile = async (fileId: string, fallbackName?: string) => {
+    try {
+      const response = await api.get(`/api/weekly-practice-files/${fileId}/download`, { responseType: 'blob' });
+      // Try to extract filename from Content-Disposition
+      const disposition = (response.headers?.['content-disposition'] as string) || '';
+      let fileName = fallbackName || 'download';
+      try {
+        const starMatch = disposition.match(/filename\*=UTF-8''([^;]+)/i);
+        const plainMatch = disposition.match(/filename="([^"\\]+)"/i);
+        if (starMatch && starMatch[1]) fileName = decodeURIComponent(starMatch[1]);
+        else if (plainMatch && plainMatch[1]) fileName = plainMatch[1];
+      } catch {}
+      const blobUrl = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobUrl);
+    } catch (e) {
+      console.error('Failed to download file', e);
+    }
+  };
+
   // Subtitle data state - will be loaded from database
   const [subtitleSegments, setSubtitleSegments] = useState<SubtitleSegment[]>([]);
   const [loadingSubtitles, setLoadingSubtitles] = useState<boolean>(true);
@@ -728,11 +816,11 @@ const WeeklyPractice: React.FC = () => {
           groupedSubmissions[practice._id] = [];
         });
         
-        // Then populate with actual submissions
+        // Then populate with actual submissions and mark ownership for edit visibility after refresh/login
         practice.forEach(practice => {
-          const practiceSubmissions = data.submissions.filter((sub: any) => 
-            sub.sourceTextId && sub.sourceTextId._id === practice._id
-          );
+          const practiceSubmissions = data.submissions
+            .filter((sub: any) => sub.sourceTextId && sub.sourceTextId._id === practice._id)
+            .map((sub: any) => ({ ...sub, isOwner: true }));
           if (practiceSubmissions.length > 0) {
             groupedSubmissions[practice._id] = practiceSubmissions;
           }
@@ -745,6 +833,7 @@ const WeeklyPractice: React.FC = () => {
     }
   }, []);
 
+  // Fetch for current selectedWeek
   const fetchWeeklyPractice = useCallback(async (showLoading = true) => {
     try {
       if (showLoading) { setLoading(true); }
@@ -756,7 +845,14 @@ const WeeklyPractice: React.FC = () => {
         
         // Organize practices into week structure
         if (practices.length > 0) {
-          const translationBrief = practices[0].translationBrief;
+          let translationBrief = practices[0].translationBrief;
+          // Fallback to explicit week brief API if missing
+          if (!translationBrief) {
+            try {
+              const br = await api.get(`/api/search/weekly-practice/${selectedWeek}/brief`);
+              translationBrief = br.data?.translationBrief || '';
+            } catch {}
+          }
           const weeklyPracticeWeekData: WeeklyPracticeWeek = {
             weekNumber: selectedWeek,
             translationBrief: translationBrief,
@@ -764,7 +860,13 @@ const WeeklyPractice: React.FC = () => {
           };
           setWeeklyPracticeWeek(weeklyPracticeWeekData);
         } else {
-          setWeeklyPracticeWeek(null);
+          // No practices: still fetch brief
+          try {
+            const br = await api.get(`/api/search/weekly-practice/${selectedWeek}/brief`);
+            setWeeklyPracticeWeek({ weekNumber: selectedWeek, translationBrief: br.data?.translationBrief || '', practices: [] });
+          } catch {
+            setWeeklyPracticeWeek(null);
+          }
         }
         
         await fetchUserSubmissions(practices);
@@ -778,6 +880,53 @@ const WeeklyPractice: React.FC = () => {
     }
   }, [selectedWeek, fetchUserSubmissions]);
 
+  // Fetch files list for current week (source + translation)
+  const fetchWeekFiles = useCallback(async () => {
+    try {
+      const [src, trn] = await Promise.all([
+        api.get(`/api/weekly-practice-files/week/${selectedWeek}?type=source`),
+        api.get(`/api/weekly-practice-files/week/${selectedWeek}?type=translation`)
+      ]);
+      setWeekFiles({ source: src.data.files || [], translation: trn.data.files || [] });
+    } catch (e) {
+      console.error('Failed to load week files', e);
+      setWeekFiles({ source: [], translation: [] });
+    }
+  }, [selectedWeek]);
+
+  // Fetch for a specific week (avoids stale week race when changing weeks)
+  const fetchWeeklyPracticeForWeek = useCallback(async (week: number, showLoading = true) => {
+    try {
+      if (showLoading) { setLoading(true); }
+      const response = await api.get(`/api/search/weekly-practice/${week}`);
+
+      if (response.data) {
+        const practices = response.data;
+        setWeeklyPractice(practices);
+
+        if (practices.length > 0) {
+          const translationBrief = practices[0].translationBrief;
+          const weeklyPracticeWeekData: WeeklyPracticeWeek = {
+            weekNumber: week,
+            translationBrief: translationBrief,
+            practices: practices
+          };
+          setWeeklyPracticeWeek(weeklyPracticeWeekData);
+        } else {
+          setWeeklyPracticeWeek(null);
+        }
+
+        await fetchUserSubmissions(practices);
+      } else {
+        console.error('Failed to fetch weekly practice');
+      }
+    } catch (error) {
+      console.error('Error fetching weekly practice (explicit week):', error);
+    } finally {
+      if (showLoading) { setLoading(false); }
+    }
+  }, [fetchUserSubmissions]);
+
   useEffect(() => {
     const user = localStorage.getItem('user');
     if (!user) {
@@ -785,7 +934,40 @@ const WeeklyPractice: React.FC = () => {
       return;
     }
     fetchWeeklyPractice();
-  }, [fetchWeeklyPractice, navigate]);
+    fetchWeekFiles();
+  }, [fetchWeeklyPractice, fetchWeekFiles, navigate]);
+
+  // Upload handlers for week files
+  const uploadSourceFile = async (file: File, description?: string) => {
+    try {
+      setUploadingSource(true);
+      const form = new FormData();
+      form.append('file', file);
+      if (description) form.append('description', description);
+      await api.post(`/api/weekly-practice-files/week/${selectedWeek}/source`, form, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+      await fetchWeekFiles();
+    } finally {
+      setUploadingSource(false);
+    }
+  };
+
+  const uploadTranslationFile = async (file: File, description?: string, sourceFileId?: string) => {
+    try {
+      setUploadingTranslation(true);
+      const form = new FormData();
+      form.append('file', file);
+      if (description) form.append('description', description);
+      if (sourceFileId) form.append('sourceFileId', sourceFileId);
+      await api.post(`/api/weekly-practice-files/week/${selectedWeek}/translation`, form, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+      await fetchWeekFiles();
+    } finally {
+      setUploadingTranslation(false);
+    }
+  };
 
   // Listen for week reset events from page navigation
   useEffect(() => {
@@ -822,11 +1004,11 @@ const WeeklyPractice: React.FC = () => {
       const token = localStorage.getItem('token');
       const user = JSON.parse(localStorage.getItem('user') || '{}');
       const response = await api.post('/api/submissions', {
-        sourceTextId: practiceId,
-        transcreation: translationText[practiceId],
-        culturalAdaptations: [],
-        isAnonymous: anonymousSubmissions[practiceId] || false,
-        username: user.name || 'Unknown'
+          sourceTextId: practiceId,
+          transcreation: translationText[practiceId],
+          culturalAdaptations: [],
+          isAnonymous: anonymousSubmissions[practiceId] || false,
+          username: user.name || 'Unknown'
       });
 
       if (response.status === 201 || response.status === 200) {
@@ -858,7 +1040,7 @@ const WeeklyPractice: React.FC = () => {
     try {
       const token = localStorage.getItem('token');
       const response = await api.put(`/api/submissions/${editingSubmission.id}`, {
-        transcreation: editSubmissionText
+          transcreation: editSubmissionText
       });
 
       if (response.status === 200) {
@@ -1030,8 +1212,11 @@ const WeeklyPractice: React.FC = () => {
       });
 
       if (response.data) {
-        await fetchWeeklyPractice(false);
+        // Optimistic UI update
+        setWeeklyPracticeWeek(prev => prev ? { ...prev, translationBrief: editForm.translationBrief } : prev);
         setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+        // Background refresh
+        fetchWeeklyPractice(false);
       } else {
         console.error('Failed to update translation brief');
       }
@@ -1164,12 +1349,20 @@ const WeeklyPractice: React.FC = () => {
         imageAlignment: imageForm.imageAlignment
       };
 
-      console.log('Saving new image with payload:', payload);
+          console.log('Saving new image with payload:', payload);
 
       const response = await api.post('/api/auth/admin/weekly-practice', payload);
 
       if (response.data) {
         console.log('Image saved successfully:', response.data);
+        // Optimistic UI update: append new practice for current week (4–6 only)
+        if (selectedWeek >= 4) {
+          const newPractice = response.data.weeklyPractice || response.data.practice || null;
+          if (newPractice) {
+            setWeeklyPractice(prev => [...prev, newPractice]);
+            setWeeklyPracticeWeek(prev => prev ? { ...prev, practices: [...prev.practices, newPractice] } : prev);
+          }
+        }
         await fetchWeeklyPractice(false);
         setAddingImage(false);
       } else {
@@ -1192,10 +1385,18 @@ const WeeklyPractice: React.FC = () => {
 
     setSaving(true);
     try {
+      if (String(practiceId).startsWith('wb-')) {
+        console.warn('Skipping deletion of week-brief placeholder');
+        setSaving(false);
+        return;
+      }
       const response = await api.delete(`/api/auth/admin/weekly-practice/${practiceId}`);
 
       if (response.data) {
-        await fetchWeeklyPractice(false);
+        setWeeklyPracticeWeek(prev => prev ? { ...prev, translationBrief: '' } : prev);
+        const briefKey = `weeklyBrief_week_${selectedWeek}`;
+        try { localStorage.removeItem(briefKey); } catch {}
+        fetchWeeklyPractice(false);
       } else {
         console.error('Failed to delete weekly practice');
       }
@@ -1251,7 +1452,7 @@ const WeeklyPractice: React.FC = () => {
           </div>
         )}
 
-        {/* Translation Brief - Shown once at the top */}
+        {/* Translation Brief - Shown once at the top (standalone allowed) */}
         {!isWeekTransitioning && weeklyPracticeWeek && weeklyPracticeWeek.translationBrief ? (
           <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200">
             <div className="flex items-center justify-between mb-4">
@@ -1303,15 +1504,23 @@ const WeeklyPractice: React.FC = () => {
               )}
             </div>
             {editingBrief[selectedWeek] ? (
-              <textarea
-                value={editForm.translationBrief}
-                onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
-                className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
-                rows={6}
-                placeholder="Enter translation brief..."
-              />
+              <div>
+                <div className="flex items-center justify-end space-x-2 mb-2">
+                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">B</button>
+                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded italic">I</button>
+                  <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Link</button>
+                </div>
+                <textarea
+                  id="weekly-brief-input"
+                  value={editForm.translationBrief}
+                  onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                  className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
+                  rows={6}
+                  placeholder="Enter translation brief..."
+                />
+              </div>
             ) : (
-              <p className="text-blue-800 leading-relaxed text-lg font-smiley">{weeklyPracticeWeek.translationBrief}</p>
+              <div className="text-blue-800 leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(weeklyPracticeWeek.translationBrief || '')}</div>
             )}
           </div>
         ) : (
@@ -1335,6 +1544,11 @@ const WeeklyPractice: React.FC = () => {
               </div>
               {editingBrief[selectedWeek] && (
                 <div className="space-y-4">
+                  <div className="flex items-center justify-end space-x-2">
+                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">B</button>
+                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded italic">I</button>
+                    <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Link</button>
+                  </div>
                   <textarea
                     value={editForm.translationBrief}
                     onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
@@ -1367,6 +1581,109 @@ const WeeklyPractice: React.FC = () => {
           )
         )}
 
+        {/* Week Files (Week 6 uploads) */}
+        {(weekFiles.source.length > 0 || weekFiles.translation.length > 0 || (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
+        <div className="bg-white rounded-xl shadow p-6 mb-8">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Week {selectedWeek} Files</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start content-start">
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-medium text-gray-800">Source Files</span>
+                {((JSON.parse(localStorage.getItem('user') || '{}').role || 'visitor') === 'admin') && (
+                  <label className="inline-flex items-center px-3 py-1.5 text-sm bg-indigo-600 text-white rounded cursor-pointer hover:bg-indigo-700">
+                    <input
+                      type="file"
+                      className="hidden"
+                      onChange={(e) => {
+                        const f = e.target.files && e.target.files[0];
+                        if (f) uploadSourceFile(f);
+                      }}
+                    />
+                    {uploadingSource ? 'Uploading…' : 'Upload'}
+                  </label>
+                )}
+              </div>
+              <ul className="text-sm text-gray-700 space-y-1 max-h-96 overflow-auto divide-y">
+                {weekFiles.source.length === 0 && (
+                  <li className="text-gray-500">No source files yet.</li>
+                )}
+                {weekFiles.source.map((f: any) => (
+                  <li key={f._id} className="flex items-center justify-between space-x-3 py-1">
+                    <div className="min-w-0 truncate font-medium" title={f.fileName}>{f.fileName}</div>
+                    <div className="flex items-center space-x-3 flex-shrink-0">
+                      <button className="text-indigo-700 hover:underline" onClick={() => downloadWeekFile(f._id, f.fileName)}>Download</button>
+                      {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                        <button
+                          className="text-red-600 hover:underline"
+                          onClick={async () => {
+                            if (!window.confirm('Delete this file?')) return;
+                            await api.delete(`/api/weekly-practice-files/${f._id}`);
+                            await fetchWeekFiles();
+                          }}
+                        >
+                          Delete
+                        </button>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-medium text-gray-800">Translation Files</span>
+                <div className="flex items-center space-x-3">
+                  {weekFiles.translation.length > 10 && (
+                    <button
+                      className="text-xs text-gray-600 hover:text-gray-800 underline"
+                      onClick={() => setShowAllTranslations(v => !v)}
+                    >
+                      {showAllTranslations ? 'Show first 10' : `Show all (${weekFiles.translation.length})`}
+                    </button>
+                  )}
+                  <label className="inline-flex items-center px-3 py-1.5 text-sm bg-orange-600 text-white rounded cursor-pointer hover:bg-orange-700">
+                    <input
+                      type="file"
+                      className="hidden"
+                      onChange={(e) => {
+                        const f = e.target.files && e.target.files[0];
+                        if (f) uploadTranslationFile(f);
+                      }}
+                    />
+                    {uploadingTranslation ? 'Uploading…' : 'Upload'}
+                  </label>
+                </div>
+              </div>
+              <ul className="text-sm text-gray-700 space-y-1 max-h-96 overflow-auto divide-y">
+                {weekFiles.translation.length === 0 && (
+                  <li className="text-gray-500">Please upload your translated file here.</li>
+                )}
+                {(showAllTranslations ? weekFiles.translation : weekFiles.translation.slice(0, 10)).map((f: any) => (
+                  <li key={f._id} className="flex items-center justify-between space-x-3 py-1">
+                    <div className="min-w-0 truncate font-medium" title={f.fileName}>{f.fileName}</div>
+                    <div className="flex items-center space-x-3 flex-shrink-0">
+                      <button className="text-indigo-700 hover:underline" onClick={() => downloadWeekFile(f._id, f.fileName)}>Download</button>
+                      {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                        <button
+                          className="text-red-600 hover:underline"
+                          onClick={async () => {
+                            if (!window.confirm('Delete this file?')) return;
+                            await api.delete(`/api/weekly-practice-files/${f._id}`);
+                            await fetchWeekFiles();
+                          }}
+                        >
+                          Delete
+                        </button>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+        )}
+
         {/* Special Subtitling Interface for Week 2 */}
         {!isWeekTransitioning && selectedWeek === 2 ? (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -1698,13 +2015,19 @@ const WeeklyPractice: React.FC = () => {
                       <label className="block text-sm font-medium text-gray-700 mb-1">
                         Practice Content <span className="text-gray-500">(optional if image is provided)</span>
                       </label>
-                      <textarea
-                        value={editForm.content}
-                        onChange={(e) => setEditForm({ ...editForm, content: e.target.value })}
-                        className="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
-                        rows={4}
+                    <div className="flex items-center justify-end space-x-2 mb-2">
+                      <button onClick={() => applyInlineFormat('weekly-newpractice-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded">B</button>
+                      <button onClick={() => applyInlineFormat('weekly-newpractice-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded italic">I</button>
+                      <button onClick={() => applyLinkFormat('weekly-newpractice-input', editForm.content || '', v => setEditForm({ ...editForm, content: v }))} className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded">Link</button>
+                    </div>
+                    <textarea
+                      id="weekly-newpractice-input"
+                      value={editForm.content}
+                      onChange={(e) => setEditForm({ ...editForm, content: e.target.value })}
+                      className="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+                      rows={4}
                         placeholder="Enter weekly practice content (or upload an image below)..."
-                      />
+                    />
                     </div>
                     {selectedWeek >= 3 && (
                       <div className="space-y-3">
@@ -1861,6 +2184,7 @@ const WeeklyPractice: React.FC = () => {
                           <option value="left">Left</option>
                           <option value="center">Center</option>
                           <option value="right">Right</option>
+                          {selectedWeek >= 4 && <option value="portrait-split">Portrait Split (image left, text+input right)</option>}
                         </select>
                       </div>
                     </div>
@@ -1879,13 +2203,13 @@ const WeeklyPractice: React.FC = () => {
                       </div>
                     </div>
                     <div className="flex space-x-3">
-                      <button
-                        onClick={startAddingPractice}
-                        className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
-                      >
-                        <PlusIcon className="h-5 w-5" />
-                        <span className="font-medium">Add Practice</span>
-                      </button>
+                    <button
+                      onClick={startAddingPractice}
+                      className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
+                    >
+                      <PlusIcon className="h-5 w-5" />
+                      <span className="font-medium">Add Practice</span>
+                    </button>
                       {selectedWeek >= 3 && (
                         <button
                           onClick={startAddingImage}
@@ -1905,18 +2229,18 @@ const WeeklyPractice: React.FC = () => {
 
           {!isWeekTransitioning && (
             <>
-              {weeklyPractice.length === 0 && !addingPractice ? (
-                <div className="text-center py-12">
-                  <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-gray-900 mb-2">
-                    No practice examples available
-                  </h3>
-                  <p className="text-gray-600">
-                    Practice examples for Week {selectedWeek} haven't been set up yet.
-                  </p>
-                </div>
-              ) : (
-                weeklyPractice.map((practice) => (
+          {weeklyPractice.length === 0 && !addingPractice ? (
+            <div className="text-center py-12">
+              <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                No practice examples available
+              </h3>
+              <p className="text-gray-600">
+                Practice examples for Week {selectedWeek} haven't been set up yet.
+              </p>
+            </div>
+          ) : (
+            weeklyPractice.map((practice) => (
               <div key={practice._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
                 <div className="mb-6">
                   <div className="flex items-center justify-between mb-4">
@@ -2034,74 +2358,54 @@ const WeeklyPractice: React.FC = () => {
                     ) : (
                       <div>
                         {practice.imageUrl ? (
-                          // Check if this is an image-only practice (created via "Add Image" function)
-                          practice.content === 'Image-based practice' ? (
-                            // Image-only layout with dynamic sizing and alignment
-                            <div className={`flex flex-col md:flex-row gap-6 items-start ${
-                              practice.imageAlignment === 'left' ? 'md:flex-row' : 
-                              practice.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
-                              'md:flex-col'
-                            }`}>
-                              {/* Image section */}
-                              <div className={`${
-                                practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
-                                practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
-                                'w-full'
-                              } flex ${
-                                practice.imageAlignment === 'left' ? 'justify-start' :
-                                practice.imageAlignment === 'right' ? 'justify-end' :
-                                'justify-center'
-                              }`}>
+                          selectedWeek >= 4 && practice.imageAlignment === 'portrait-split' ? (
+                            // Portrait split layout
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                              <div className="w-full flex justify-center">
                                 <div className="inline-block rounded-lg shadow-md overflow-hidden">
-                                  <img 
-                                    src={practice.imageUrl} 
-                                    alt={practice.imageAlt || 'Uploaded image'}
-                                    className="w-full h-auto"
-                                    style={{ 
-                                      height: `${practice.imageSize || 200}px`, 
-                                      width: 'auto', 
-                                      objectFit: 'contain' 
-                                    }}
-                                    onError={(e) => {
-                                      console.error('Image failed to load:', e);
-                                      e.currentTarget.style.display = 'none';
-                                    }}
-                                    onLoad={() => {
-                                      console.log('🔧 Debug - Practice image loaded:', {
-                                        imageUrl: practice.imageUrl,
-                                        imageSize: practice.imageSize,
-                                        content: practice.content,
-                                        weekNumber: practice.weekNumber
-                                      });
-                                    }}
-                                  />
-                                  {practice.imageAlt && (
-                                    <div className="text-xs text-gray-500 mt-2 text-center">Alt: {practice.imageAlt}</div>
-                                  )}
+                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ maxHeight: '520px', objectFit: 'contain' }} />
+                                </div>
+                              </div>
+                              <div className="w-full">
+                                <div className="bg-orange-50 rounded-lg p-4 mb-4 border border-orange-200">
+                                  <h5 className="text-orange-900 font-semibold mb-2">Source Text (from image)</h5>
+                                  <div className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
+                                </div>
+                                {localStorage.getItem('token') && (
+                                  <div className="bg-white rounded-lg p-4 border border-purple-200">
+                                    <h5 className="text-purple-900 font-semibold mb-2">Your Translation</h5>
+                                    <div className="flex items-center justify-end space-x-2 mb-2">
+                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded">B</button>
+                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded italic">I</button>
+                                      <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded">Link</button>
+                                    </div>
+                                    <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="w-full px-4 py-3 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white" rows={4} placeholder="Enter your translation here..." />
+                                    <div className="flex justify-end mt-2">
+                                      <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} className="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[practice._id] ? 'Submitting...' : 'Submit Translation'}</button>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          ) : practice.content === 'Image-based practice' ? (
+                            // Image-only layout
+                            <div className={`flex flex-col md:flex-row gap-6 items-start ${practice.imageAlignment === 'left' ? 'md:flex-row' : practice.imageAlignment === 'right' ? 'md:flex-row-reverse' : 'md:flex-col'}`}>
+                              <div className={`${practice.imageAlignment === 'left' || practice.imageAlignment === 'right' ? 'w-full md:w-1/2' : 'w-full'} flex ${practice.imageAlignment === 'left' ? 'justify-start' : practice.imageAlignment === 'right' ? 'justify-end' : 'justify-center'}`}>
+                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="h-auto" style={{ height: `${practice.imageSize || 200}px`, width: 'auto', maxWidth: '100%', objectFit: 'contain', imageRendering: 'auto' }} onError={(e) => { console.error('Error loading image:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
+                                  {practice.imageAlt && (<div className="text-xs text-gray-500 mt-2 text-center">Alt: {practice.imageAlt}</div>)}
                                 </div>
                               </div>
                             </div>
                           ) : (
-                            // Regular practice layout (original side-by-side for ALL weeks)
+                            // Regular layout
                             <div className="flex flex-col md:flex-row gap-6 items-start">
-                              {/* Image on the left - 50% width */}
                               <div className="w-full md:w-1/2 flex justify-center">
                                 {practice.imageUrl.startsWith('data:') ? (
-                                  // Show actual image if it's a data URL
                                   <div className="inline-block rounded-lg shadow-md overflow-hidden">
-                                    <img 
-                                      src={practice.imageUrl} 
-                                      alt={practice.imageAlt || 'Uploaded image'}
-                                      className="w-full h-auto"
-                                      style={{ height: '200px', width: 'auto', objectFit: 'contain' }} // Fixed height for consistency
-                                      onError={(e) => {
-                                        console.error('Image failed to load:', e);
-                                        e.currentTarget.style.display = 'none';
-                                      }}
-                                    />
+                                    <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ height: '200px', width: 'auto', objectFit: 'contain' }} onError={(e) => { console.error('Error loading image:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
                                   </div>
                                 ) : (
-                                  // Show placeholder if it's not a data URL
                                   <div className="inline-block rounded-lg shadow-md bg-green-500 text-white p-6 text-center">
                                     <div className="text-3xl mb-2">📷</div>
                                     <div className="font-semibold">Image Uploaded</div>
@@ -2109,7 +2413,6 @@ const WeeklyPractice: React.FC = () => {
                                   </div>
                                 )}
                               </div>
-                              {/* Text on the right - 50% width */}
                               <div className="w-full md:w-1/2">
                                 <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>
                               </div>
@@ -2166,7 +2469,7 @@ const WeeklyPractice: React.FC = () => {
                             </div>
                             {getStatusIcon(submission.status)}
                     </div>
-                          <p className="text-stone-800 leading-relaxed text-base mb-2 font-smiley">{submission.transcreation}</p>
+                  <p className="text-stone-800 leading-relaxed text-base mb-2 font-smiley whitespace-pre-wrap">{renderFormatted(submission.transcreation || '')}</p>
                           <div className="flex items-center space-x-4 text-xs text-stone-700 mt-auto">
                       <div className="flex items-center space-x-1">
                               <span className="font-medium">By:</span>
@@ -2180,7 +2483,7 @@ const WeeklyPractice: React.FC = () => {
                                 {(submission.voteCounts?.['1'] || 0) + (submission.voteCounts?.['2'] || 0) + (submission.voteCounts?.['3'] || 0)}
                         </span>
                       </div>
-                            {submission.isOwner && (
+                            {(submission.isOwner || (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
                               <button
                                 onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
                                 className="text-purple-600 hover:text-purple-800 text-sm font-medium"
@@ -2203,8 +2506,8 @@ const WeeklyPractice: React.FC = () => {
                   </div>
                 )}
 
-                {/* Translation Input (only show if user is logged in and has no submission, but hide for image-only content) */}
-                {localStorage.getItem('token') && (!userSubmissions[practice._id] || userSubmissions[practice._id].length === 0) && practice.content !== 'Image-based practice' && (
+                {/* Translation Input (always show for logged-in users on weeks 3–6; keep hidden for image-only and portrait-split variants) */}
+                {localStorage.getItem('token') && selectedWeek !== 2 && practice.content !== 'Image-based practice' && !(selectedWeek >= 4 && practice.imageAlignment === 'portrait-split') && (
                   <div className="bg-gradient-to-r from-purple-50 to-violet-50 rounded-xl p-6 border border-purple-200">
                     <div className="flex items-center space-x-2 mb-4">
                       <div className="bg-purple-100 rounded-full p-1">
@@ -2213,7 +2516,12 @@ const WeeklyPractice: React.FC = () => {
                       <h4 className="text-purple-900 font-semibold text-lg">Your Translation</h4>
                     </div>
                     <div className="mb-4">
-                      <textarea
+                      <div className="flex items-center justify-end space-x-2 mb-2">
+                        <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded">B</button>
+                        <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded">Link</button>
+                      </div>
+                      <textarea id={`weekly-translation-${practice._id}`}
                         value={translationText[practice._id] || ''}
                         onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })}
                         className="w-full px-4 py-3 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white"
@@ -2233,17 +2541,14 @@ const WeeklyPractice: React.FC = () => {
                           })}
                           className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                         />
-                        <span className="text-purple-700 font-medium">Submit anonymously</span>
+                        <span className="text-sm text-stone-700">Submit anonymously</span>
                       </label>
-                      <p className="text-sm text-purple-600 mt-1">
-                        Check this box to submit without showing your name
-                      </p>
                     </div>
 
                     <button
                       onClick={() => handleSubmitTranslation(practice._id)}
                       disabled={submitting[practice._id]}
-                      className="bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 disabled:from-gray-400 disabled:to-gray-500 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105"
+                      className="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200"
                     >
                       {submitting[practice._id] ? (
                         <>
@@ -2253,7 +2558,6 @@ const WeeklyPractice: React.FC = () => {
                       ) : (
                         <>
                           Submit Translation
-                          <ArrowRightIcon className="h-4 w-4 ml-2" />
                         </>
                       )}
                     </button>
@@ -2285,7 +2589,7 @@ const WeeklyPractice: React.FC = () => {
             ))
           )}
         </>
-        )}
+          )}
         </div>
         )}
       </div>