feat: wrap assets step components in collapsible sections and remove draft ID display

This commit is contained in:
Ender 2025-10-24 21:04:53 +02:00
parent cdbc5062ca
commit 5efc6c690e
3 changed files with 19 additions and 20 deletions

View File

@ -249,14 +249,13 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
/>
<Stack direction="row" spacing={1}>
<Button variant="contained" disabled>Generate Draft (Coming Soon)</Button>
<Button variant="outlined" onClick={() => setActiveStep(3)}>Skip to Edit</Button>
</Stack>
</StepContainer>
)}
{activeStep === 3 && (
<StepContainer>
<StepEdit editorRef={editorRef as any} draftHtml={draft} onChangeDraft={setDraft} draftId={draftId} />
<StepEdit editorRef={editorRef as any} draftHtml={draft} onChangeDraft={setDraft} />
</StepContainer>
)}

View File

@ -1,6 +1,7 @@
import { Box, Stack, Typography } from '@mui/material';
import Recorder from '../../features/recorder/Recorder';
import MediaLibrary from '../MediaLibrary';
import CollapsibleSection from './CollapsibleSection';
export type Clip = { id: string; bucket: string; key: string; mime: string; transcript?: string; createdAt: string };
@ -26,21 +27,25 @@ export default function StepAssets({
<Typography variant="subtitle1">Assets (Audio & Images)</Typography>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems="stretch">
<Box sx={{ flex: 1 }}>
<Recorder
postId={draftId ?? undefined}
onInsertAtCursor={onInsertAtCursor}
initialClips={postClips}
/>
<CollapsibleSection title="Audio Recorder">
<Recorder
postId={draftId ?? undefined}
onInsertAtCursor={onInsertAtCursor}
initialClips={postClips}
/>
</CollapsibleSection>
</Box>
<Box sx={{ flex: 1 }}>
<MediaLibrary
onInsert={onInsertImage}
onSetFeature={onSetFeature}
showSetFeature
selectionMode
selectedKeys={selectedKeys}
onToggleSelect={onToggleSelect}
/>
<CollapsibleSection title="Media Library">
<MediaLibrary
onInsert={onInsertImage}
onSetFeature={onSetFeature}
showSetFeature
selectionMode
selectedKeys={selectedKeys}
onToggleSelect={onToggleSelect}
/>
</CollapsibleSection>
</Box>
</Stack>
</Box>

View File

@ -6,12 +6,10 @@ export default function StepEdit({
editorRef,
draftHtml,
onChangeDraft,
draftId,
}: {
editorRef: ForwardedRef<RichEditorHandle> | any;
draftHtml: string;
onChangeDraft: (html: string) => void;
draftId?: string | null;
}) {
return (
<Box>
@ -24,9 +22,6 @@ export default function StepEdit({
}}>
<RichEditor ref={editorRef} value={draftHtml} onChange={onChangeDraft} placeholder="Write your post..." />
</Box>
{draftId && (
<Typography variant="caption" sx={{ mt: 1, display: 'block' }}>ID: {draftId}</Typography>
)}
</Box>
);
}