T21: Add Print button and PrintPreview modal to RibbonBar.tsx

frontend/src/components/RibbonBar.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback } from 'react';
 import type { YjsDocument } from '../crdt/YjsDocument';
 import { exportDrawing, type ExportFormat } from '../services/exportService';
 import { importDrawing, type ImportFormat, type ImportResult } from '../services/importService';
+import PrintPreview from './PrintPreview/PrintPreview';
 import './RibbonBar.css';
 
 interface RibbonBarProps {
@@ -14,6 +15,7 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
   const [showExportMenu, setShowExportMenu] = useState(false);
   const [showImportMenu, setShowImportMenu] = useState(false);
   const [importStatus, setImportStatus] = useState<string | null>(null);
+  const [showPrintPreview, setShowPrintPreview] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const pendingImportFormat = useRef<ImportFormat>('json');
 
@@ -75,7 +77,6 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
       setImportStatus(`Import error: ${(err as Error).message}`);
     }
     setTimeout(() => setImportStatus(null), 5000);
-    // Reset input so same file can be selected again
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
     }
@@ -96,7 +97,6 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
         </button>
       ))}
 
-      {/* Export/Import section */}
       <div className="ribbon-divider" aria-hidden="true" />
 
       <div className="ribbon-dropdown-wrapper">
@@ -112,18 +112,10 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
         </button>
         {showExportMenu && (
           <div className="ribbon-dropdown" role="menu">
-            <button className="ribbon-dropdown-item" onClick={() => handleExport('json')} role="menuitem">
+            <button className="ribbon-dropdown-item" onClick={() => handleExport('json')} role="menuitem">JSON</button>
-              JSON
+            <button className="ribbon-dropdown-item" onClick={() => handleExport('svg')} role="menuitem">SVG</button>
-            </button>
+            <button className="ribbon-dropdown-item" onClick={() => handleExport('dxf')} role="menuitem">DXF</button>
-            <button className="ribbon-dropdown-item" onClick={() => handleExport('svg')} role="menuitem">
+            <button className="ribbon-dropdown-item" onClick={() => handleExport('pdf')} role="menuitem">PDF</button>
-              SVG
-            </button>
-            <button className="ribbon-dropdown-item" onClick={() => handleExport('dxf')} role="menuitem">
-              DXF
-            </button>
-            <button className="ribbon-dropdown-item" onClick={() => handleExport('pdf')} role="menuitem">
-              PDF
-            </button>
           </div>
         )}
       </div>
@@ -141,20 +133,26 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
         </button>
         {showImportMenu && (
           <div className="ribbon-dropdown" role="menu">
-            <button className="ribbon-dropdown-item" onClick={() => triggerImport('json')} role="menuitem">
+            <button className="ribbon-dropdown-item" onClick={() => triggerImport('json')} role="menuitem">JSON</button>
-              JSON
+            <button className="ribbon-dropdown-item" onClick={() => triggerImport('dxf')} role="menuitem">DXF</button>
-            </button>
-            <button className="ribbon-dropdown-item" onClick={() => triggerImport('dxf')} role="menuitem">
-              DXF
-            </button>
           </div>
         )}
       </div>
 
+      <div className="ribbon-divider" aria-hidden="true" />
+
+      <button
+        className="ribbon-tab"
+        onClick={() => setShowPrintPreview(true)}
+        role="menuitem"
+        aria-label="Print Preview"
+      >
+        <span className="tab-icon" aria-hidden="true">🖨️</span>
+        <span className="tab-label">Print</span>
+      </button>
+
       {importStatus && (
-        <span className="ribbon-status" role="status" aria-live="polite">
+        <span className="ribbon-status" role="status" aria-live="polite">{importStatus}</span>
-          {importStatus}
-        </span>
       )}
 
       <input
@@ -163,6 +161,10 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
         style={{ display: 'none' }}
         onChange={handleFileSelected}
       />
+
+      {showPrintPreview && (
+        <PrintPreview yjsDoc={yjsDoc ?? null} onClose={() => setShowPrintPreview(false)} />
+      )}
     </div>
   );
 };