endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin/src/components/EditorShell.tsx
View File

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

31
apps/admin/src/components/steps/StepAssets.tsx
View File

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

5
apps/admin/src/components/steps/StepEdit.tsx
View File

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