From d627bc80651d3f9fef6b989a5291d1f6e2563e99 Mon Sep 17 00:00:00 2001
From: Pranav-IIITM <jogdandpranav2007@gmail.com>
Date: Sat, 23 May 2026 08:46:59 +0530
Subject: [PATCH] feat: add collapsible accordion sections to editor layout
 (#895)

---
 src/components/VideoEditor.tsx | 141 +++++++++++++++++++++++++++++----
 1 file changed, 126 insertions(+), 15 deletions(-)

diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 6e297539..d7a69231 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -48,6 +48,72 @@ function Section({ icon, title, children, delay = 0 }: SectionProps) {
   );
 }
 
+/** Accordion section with collapsible content. */
+function AccordionSection({
+  id,
+  icon,
+  title,
+  children,
+  isOpen,
+  onToggle,
+  delay = 0,
+}: {
+  id: string;
+  icon: React.ReactNode;
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  delay?: number;
+}) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    if (isOpen) {
+      contentRef.current.style.maxHeight = `${contentRef.current.scrollHeight}px`;
+    } else {
+      contentRef.current.style.maxHeight = `0px`;
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="animate-fade-in" style={{ animationDelay: `${delay}ms` }}>
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        aria-controls={`${id}-panel`}
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-[var(--border)] transition-colors duration-150"
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-film-500 opacity-80">{icon}</span>
+          <span className="text-sm font-heading font-bold uppercase tracking-widest text-[var(--muted)]">{title}</span>
+        </div>
+        <svg
+          aria-hidden="true"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          className={cn("text-[var(--muted)] transition-transform duration-200", isOpen && "rotate-180")}
+        >
+          <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      <div
+        id={`${id}-panel`}
+        ref={contentRef}
+        className="overflow-hidden transition-all duration-200"
+        style={{ maxHeight: isOpen ? undefined : 0 }}
+      >
+        <div className="px-3 pt-3 pb-0">{children}</div>
+      </div>
+    </div>
+  );
+}
+
 /** Inline keyboard hint badge. */
 function Kbd({ children }: { children: React.ReactNode }) {
   return (
@@ -123,6 +189,16 @@ export default function VideoEditor() {
   } = useVideoEditor();
   const [copied, setCopied] = useState(false);
   const [shareCopied, setShareCopied] = useState(false);
+  const [openSections, setOpenSections] = useState({
+    resize: true,
+    trim: false,
+    rotation: false,
+    audio: false,
+    export: false,
+  });
+
+  const toggleSection = (key: keyof typeof openSections) =>
+    setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const downloadRef = useRef<HTMLDivElement>(null);
 
   const handleCopyLink = () => {
@@ -229,22 +305,44 @@ export default function VideoEditor() {
                 isProcessing && "pointer-events-none opacity-50"
               )}>
                 <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">
-                  <Section icon={<Scissors size={12} />} title="Trim" delay={50}>
+                  <AccordionSection
+                    id="trim"
+                    icon={<Scissors size={12} />}
+                    title="Trim"
+                    isOpen={openSections.trim}
+                    onToggle={() => toggleSection("trim")}
+                    delay={50}
+                  >
                     <TrimControl
                       recipe={recipe}
                       onChange={updateRecipe}
                       duration={duration}
-                      file={file} 
+                      file={file}
                     />
-                  </Section>
-                  <Section icon={<RotateCw size={12} />} title="Rotate" delay={100}>
+                  </AccordionSection>
+
+                  <AccordionSection
+                    id="rotation"
+                    icon={<RotateCw size={12} />}
+                    title="Rotation"
+                    isOpen={openSections.rotation}
+                    onToggle={() => toggleSection("rotation")}
+                    delay={100}
+                  >
                     <RotateControl recipe={recipe} onChange={updateRecipe} />
-                  </Section>
+                  </AccordionSection>
                 </div>
                 <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">
-                  <Section icon={<Volume2 size={12} />} title="Audio & Speed" delay={150}>
+                  <AccordionSection
+                    id="audio"
+                    icon={<Volume2 size={12} />}
+                    title="Audio & Speed"
+                    isOpen={openSections.audio}
+                    onToggle={() => toggleSection("audio")}
+                    delay={150}
+                  >
                     <AudioSpeedControl recipe={recipe} onChange={updateRecipe} />
-                  </Section>
+                  </AccordionSection>
                   <Section
                     icon={<SlidersHorizontal size={12} />}
                     title="Adjustments"
@@ -331,9 +429,16 @@ export default function VideoEditor() {
                   <Section icon={<SlidersHorizontal size={12} />} title="Output format" delay={190}>
                     <FormatSelector recipe={recipe} onChange={updateRecipe} />
                   </Section>
-                  <Section icon={<SlidersHorizontal size={12} />} title="Export quality" delay={200}>
+                  <AccordionSection
+                    id="export"
+                    icon={<SlidersHorizontal size={12} />}
+                    title="Export"
+                    isOpen={openSections.export}
+                    onToggle={() => toggleSection("export")}
+                    delay={200}
+                  >
                     <ExportSettings recipe={recipe} duration={duration} onChange={updateRecipe} />
-                  </Section>
+                  </AccordionSection>
                   <Section icon={<Layers size={12} />} title="Image overlay" delay={120}>
                     <ImageOverlay
                       overlayFile={overlayFile}
@@ -397,7 +502,14 @@ export default function VideoEditor() {
             isProcessing && "pointer-events-none opacity-50"
           )}>
             <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6 animate-fade-in" style={{ animationDelay: "50ms" }}>
-              <Section icon={<Layers size={12} />} title="Output size">
+              <AccordionSection
+                id="resize"
+                icon={<Layers size={12} />}
+                title="Resize & Aspect Ratio"
+                isOpen={openSections.resize}
+                onToggle={() => toggleSection("resize")}
+                delay={50}
+              >
                 {recommendedPreset && (
                   <div className="mb-4 rounded-2xl border border-film-200 bg-film-50 p-3 text-sm text-film-700">
                     <p>
@@ -406,11 +518,10 @@ export default function VideoEditor() {
                   </div>
                 )}
                 <PresetSelector recipe={recipe} onChange={updateRecipe} />
-              </Section>
-
-              <Section icon={<Crop size={12} />} title="Framing" delay={100}>
-                <FramingControl recipe={recipe} onChange={updateRecipe} />
-              </Section>
+                <div className="mt-3">
+                  <FramingControl recipe={recipe} onChange={updateRecipe} />
+                </div>
+              </AccordionSection>
 
               <div className="pt-2 flex justify-between items-center">
                 <button