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

apps/admin/src/components/EditorShell.tsx

@@ -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>
           )}
 

apps/admin/src/components/steps/StepAssets.tsx

@@ -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,13 +27,16 @@ 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 }}>
+          <CollapsibleSection title="Audio Recorder">
             <Recorder
               postId={draftId ?? undefined}
               onInsertAtCursor={onInsertAtCursor}
               initialClips={postClips}
             />
+          </CollapsibleSection>
         </Box>
         <Box sx={{ flex: 1 }}>
+          <CollapsibleSection title="Media Library">
             <MediaLibrary
               onInsert={onInsertImage}
               onSetFeature={onSetFeature}
@@ -41,6 +45,7 @@ export default function StepAssets({
               selectedKeys={selectedKeys}
               onToggleSelect={onToggleSelect}
             />
+          </CollapsibleSection>
         </Box>
       </Stack>
     </Box>

apps/admin/src/components/steps/StepEdit.tsx

@@ -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>
   );
 }