From 5efc6c690ead5c1247e735c6a4567e85b666f25b Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 21:04:53 +0200
Subject: [PATCH] feat: wrap assets step components in collapsible sections and
 remove draft ID display

---
 apps/admin/src/components/EditorShell.tsx     |  3 +-
 .../admin/src/components/steps/StepAssets.tsx | 31 +++++++++++--------
 apps/admin/src/components/steps/StepEdit.tsx  |  5 ---
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/apps/admin/src/components/EditorShell.tsx b/apps/admin/src/components/EditorShell.tsx
index 9575f3d..cab3c37 100644
--- a/apps/admin/src/components/EditorShell.tsx
+++ b/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>
           )}
 
diff --git a/apps/admin/src/components/steps/StepAssets.tsx b/apps/admin/src/components/steps/StepAssets.tsx
index d389e05..2dd810d 100644
--- a/apps/admin/src/components/steps/StepAssets.tsx
+++ b/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,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>
diff --git a/apps/admin/src/components/steps/StepEdit.tsx b/apps/admin/src/components/steps/StepEdit.tsx
index ea50551..3a3502d 100644
--- a/apps/admin/src/components/steps/StepEdit.tsx
+++ b/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>
   );
 }