publish to wp

frontend/src/components/WordPressPublish/ContentActionsMenu.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Divider
+} from '@mui/material';
+import {
+  MoreVert as MoreVertIcon,
+  Publish as PublishIcon,
+  Edit as EditIcon,
+  Image as ImageIcon,
+  GetApp as ExportIcon,
+  Delete as DeleteIcon
+} from '@mui/icons-material';
+import { WordPressPublish } from './WordPressPublish';
+
+interface ContentActionsMenuProps {
+  contentId: string;
+  contentTitle: string;
+  imageGenerationStatus: 'pending' | 'generating' | 'complete' | 'failed';
+  wordpressStatus: 'draft' | 'publishing' | 'published' | 'failed';
+  onEdit?: () => void;
+  onGenerateImage?: () => void;
+  onExport?: () => void;
+  onDelete?: () => void;
+  onWordPressStatusChange?: (status: string) => void;
+}
+
+export const ContentActionsMenu: React.FC<ContentActionsMenuProps> = ({
+  contentId,
+  contentTitle,
+  imageGenerationStatus,
+  wordpressStatus,
+  onEdit,
+  onGenerateImage,
+  onExport,
+  onDelete,
+  onWordPressStatusChange
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [showWordPressDialog, setShowWordPressDialog] = useState(false);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handlePublishClick = () => {
+    setShowWordPressDialog(true);
+    handleClose();
+  };
+
+  const handleMenuAction = (action: () => void) => {
+    action();
+    handleClose();
+  };
+
+  // Check if WordPress publishing is available
+  const canPublishToWordPress = imageGenerationStatus === 'complete' && 
+                               wordpressStatus !== 'published' && 
+                               wordpressStatus !== 'publishing';
+
+  return (
+    <>
+      <IconButton
+        aria-label="more actions"
+        id="content-actions-button"
+        aria-controls={open ? 'content-actions-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+        size="small"
+      >
+        <MoreVertIcon />
+      </IconButton>
+      
+      <Menu
+        id="content-actions-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'content-actions-button',
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        {/* WordPress Publishing - Only show if images are ready */}
+        {canPublishToWordPress && (
+          <>
+            <MenuItem onClick={handlePublishClick}>
+              <ListItemIcon>
+                <PublishIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>Publish to WordPress</ListItemText>
+            </MenuItem>
+            <Divider />
+          </>
+        )}
+        
+        {/* Edit Action */}
+        {onEdit && (
+          <MenuItem onClick={() => handleMenuAction(onEdit)}>
+            <ListItemIcon>
+              <EditIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Edit</ListItemText>
+          </MenuItem>
+        )}
+        
+        {/* Generate Image Action */}
+        {onGenerateImage && (
+          <MenuItem onClick={() => handleMenuAction(onGenerateImage)}>
+            <ListItemIcon>
+              <ImageIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Generate Image Prompts</ListItemText>
+          </MenuItem>
+        )}
+        
+        {/* Export Action */}
+        {onExport && (
+          <MenuItem onClick={() => handleMenuAction(onExport)}>
+            <ListItemIcon>
+              <ExportIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Export</ListItemText>
+          </MenuItem>
+        )}
+        
+        {/* Delete Action */}
+        {onDelete && (
+          <>
+            <Divider />
+            <MenuItem onClick={() => handleMenuAction(onDelete)} sx={{ color: 'error.main' }}>
+              <ListItemIcon>
+                <DeleteIcon fontSize="small" color="error" />
+              </ListItemIcon>
+              <ListItemText>Delete</ListItemText>
+            </MenuItem>
+          </>
+        )}
+      </Menu>
+      
+      {/* WordPress Publish Dialog */}
+      {showWordPressDialog && (
+        <WordPressPublish
+          contentId={contentId}
+          contentTitle={contentTitle}
+          currentStatus={wordpressStatus}
+          imageGenerationStatus={imageGenerationStatus}
+          onStatusChange={onWordPressStatusChange}
+          showOnlyIfImagesReady={true}
+          size="medium"
+        />
+      )}
+    </>
+  );
+};