tasks to published refactor

frontend/src/pages/Writer/Content.tsx

@@ -20,6 +20,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
+import ContentViewerModal from '../../components/common/ContentViewerModal';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
@@ -49,6 +50,10 @@ export default function Content() {
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
   const [showContent, setShowContent] = useState(false);
 
+  // Content viewer modal state
+  const [isViewerModalOpen, setIsViewerModalOpen] = useState(false);
+  const [viewerContent, setViewerContent] = useState<ContentType | null>(null);
+
   // Progress modal for AI functions
   const progressModal = useProgressModal();
   const hasReloadedRef = useRef(false);
@@ -133,6 +138,12 @@ export default function Content() {
     setCurrentPage(1);
   };
 
+  // Handle view content
+  const handleViewContent = useCallback((row: ContentType) => {
+    setViewerContent(row);
+    setIsViewerModalOpen(true);
+  }, []);
+
   // Create page config
   const pageConfig = useMemo(() => {
     return createContentPageConfig({
@@ -142,11 +153,13 @@ export default function Content() {
       statusFilter,
       setStatusFilter,
       setCurrentPage,
+      onViewContent: handleViewContent,
     });
   }, [
     activeSector,
     searchTerm,
     statusFilter,
+    handleViewContent,
   ]);
 
   // Calculate header metrics
@@ -286,6 +299,17 @@ export default function Content() {
         }}
       />
 
+      {/* Content Viewer Modal */}
+      <ContentViewerModal
+        isOpen={isViewerModalOpen}
+        onClose={() => {
+          setIsViewerModalOpen(false);
+          setViewerContent(null);
+        }}
+        title={viewerContent?.title || 'Content'}
+        contentHtml={viewerContent?.content_html || ''}
+      />
+
       {/* Progress Modal for AI Functions */}
       <ProgressModal
         isOpen={progressModal.isOpen}