AI Story Writer Backend Migration Complete, Frontend UI Components Added

frontend/src/components/StoryWriter/Phases/StoryOutlineParts/EditSectionModal.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Paper, TextField, Typography } from '@mui/material';
+
+interface EditSectionModalProps {
+  open: boolean;
+  sceneNumber: number;
+  editText: string;
+  onChangeEditText: (val: string) => void;
+  aiFeedback: string;
+  onChangeAiFeedback: (val: string) => void;
+  aiLoading: boolean;
+  onGenerateSuggestions: () => void;
+  suggestions: string[];
+  onPickSuggestion: (index: number) => void;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+const EditSectionModal: React.FC<EditSectionModalProps> = ({
+  open,
+  sceneNumber,
+  editText,
+  onChangeEditText,
+  aiFeedback,
+  onChangeAiFeedback,
+  aiLoading,
+  onGenerateSuggestions,
+  suggestions,
+  onPickSuggestion,
+  onClose,
+  onSave,
+}) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{
+        sx: {
+          backgroundColor: '#fff',
+          borderRadius: 2,
+          boxShadow: '0 24px 64px rgba(0,0,0,0.18)',
+          border: '1px solid rgba(0,0,0,0.06)',
+        },
+      }}
+    >
+      <DialogTitle>Edit Section (Scene {sceneNumber})</DialogTitle>
+      <DialogContent dividers>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <TextField
+            label="Section Text"
+            value={editText}
+            onChange={(e) => onChangeEditText(e.target.value)}
+            multiline
+            minRows={6}
+            fullWidth
+          />
+          <TextField
+            label="Tell Alwrity what to improve (optional)"
+            value={aiFeedback}
+            onChange={(e) => onChangeAiFeedback(e.target.value)}
+            multiline
+            minRows={3}
+            fullWidth
+            helperText="Describe desired changes (tone, pacing, details). Generate to get 2 suggestions."
+          />
+          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+            <Button variant="outlined" onClick={onGenerateSuggestions} disabled={aiLoading}>
+              {aiLoading ? 'Generating...' : 'Generate AI Suggestions'}
+            </Button>
+          </Box>
+          {suggestions.length > 0 && (
+            <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2 }}>
+              {suggestions.map((s, i) => (
+                <Paper key={i} sx={{ p: 2, border: '1px solid rgba(120,90,60,0.2)' }}>
+                  <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                    Suggestion {i + 1}
+                  </Typography>
+                  <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+                    {s}
+                  </Typography>
+                  <Box sx={{ mt: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                    <Button size="small" variant="text" onClick={() => onPickSuggestion(i)}>
+                      Use this
+                    </Button>
+                  </Box>
+                </Paper>
+              ))}
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={onSave}>
+          Save & Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default EditSectionModal;
+