From f214b0ac4d58171958e57d5f66ba66e50055e323 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Mon, 15 Jun 2026 19:49:00 +0200
Subject: [PATCH] feat: add frame reordering and improve file upload
 accessibility

- Add Up/Down reorder controls to Frame component
- Add handleReOrderFrames hook using splice swap
- Improve FileUpload: keyboard support, aria attributes, fix accept=image/* typo
- Extract component-level CSS for Frame, Step, FileUpload
- Update focus-visible styles; scope border style to .file-upload
---
 src/features/guides/components/FileUpload.css | 19 ++++++++++++++++
 src/features/guides/components/FileUpload.tsx | 22 +++++++++++++++----
 src/features/guides/components/Frame.css      |  0
 src/features/guides/components/Frame.tsx      | 12 ++++++++++
 src/features/guides/components/Step.css       |  0
 src/features/guides/components/Step.tsx       |  1 +
 src/features/guides/hooks/useNewGuide.ts      | 10 +++++++++
 src/features/guides/routes/NewGuide.tsx       |  5 ++++-
 src/styles/App.css                            |  7 +++++-
 src/styles/reset.css                          |  2 +-
 10 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/features/guides/components/FileUpload.css
 create mode 100644 src/features/guides/components/Frame.css
 create mode 100644 src/features/guides/components/Step.css

diff --git a/src/features/guides/components/FileUpload.css b/src/features/guides/components/FileUpload.css
new file mode 100644
index 0000000..54de590
--- /dev/null
+++ b/src/features/guides/components/FileUpload.css
@@ -0,0 +1,19 @@
+.file-upload {
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    border-style: dashed;
+    padding: 2rem;
+    font-weight: bold;
+
+    &:hover,
+    &:focus-visible {
+        border-color: #ff770080;
+        color: #ff7700;
+        background-color: #ff770010;
+    }
+}
+
+.file-upload input {
+    display: none;
+}
diff --git a/src/features/guides/components/FileUpload.tsx b/src/features/guides/components/FileUpload.tsx
index a587aa0..01f8870 100644
--- a/src/features/guides/components/FileUpload.tsx
+++ b/src/features/guides/components/FileUpload.tsx
@@ -1,17 +1,31 @@
+import "./FileUpload.css";
+
 export default function FileUpload({
   onChange,
 }: {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   return (
-    <label>
-      <span>File</span>
+    <label
+      className="file-upload"
+      role="button"
+      tabIndex={0}
+      aria-label="Upload images"
+      aria-describedby="upload-hint"
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.currentTarget.querySelector("input")?.click();
+        }
+      }}
+    >
+      <span aria-hidden="true">Click to upload images</span>
       <input
         type="file"
         name="file"
-        accept="images/*"
+        accept="image/*"
         multiple
-        onChange={(e) => onChange(e)}
+        onChange={onChange}
       />
     </label>
   );
diff --git a/src/features/guides/components/Frame.css b/src/features/guides/components/Frame.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/guides/components/Frame.tsx b/src/features/guides/components/Frame.tsx
index 1c6a7c6..020d900 100644
--- a/src/features/guides/components/Frame.tsx
+++ b/src/features/guides/components/Frame.tsx
@@ -1,23 +1,35 @@
+import "./Frame.css";
 import type { FrameType, StepType } from "../../../lib/schemas";
 import Step from "./Step";
 
 export default function Frame({
   frame,
+  frameIndex,
   onRemove,
   addStep,
   removeStep,
   updateStep,
   updateTitle,
+  reOrder,
 }: {
   frame: FrameType;
+  frameIndex: number;
   onRemove: (frameId: string) => void;
   addStep: (frameId: string) => void;
   removeStep: (stepId: string) => void;
   updateStep: (stepId: string, text: string) => void;
   updateTitle: (frameId: string, title: string) => void;
+  reOrder: (startIndex: number, endIndex: number) => void;
 }) {
   return (
     <div>
+      <button type="button" onClick={() => reOrder(frameIndex, frameIndex - 1)}>
+        Up
+      </button>
+      <button type="button" onClick={() => reOrder(frameIndex, frameIndex + 1)}>
+        Down
+      </button>
+
       <button type="button" onClick={() => onRemove(frame.id)}>
         Remove Frame
       </button>
diff --git a/src/features/guides/components/Step.css b/src/features/guides/components/Step.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/guides/components/Step.tsx b/src/features/guides/components/Step.tsx
index d944037..a535df8 100644
--- a/src/features/guides/components/Step.tsx
+++ b/src/features/guides/components/Step.tsx
@@ -1,3 +1,4 @@
+import "./Step.css";
 import type { StepType } from "../../../lib/schemas";
 
 export default function Step({
diff --git a/src/features/guides/hooks/useNewGuide.ts b/src/features/guides/hooks/useNewGuide.ts
index c7a5acf..ed8daf2 100644
--- a/src/features/guides/hooks/useNewGuide.ts
+++ b/src/features/guides/hooks/useNewGuide.ts
@@ -54,6 +54,15 @@ export default function useNewGuide() {
     setFrames((prev) => prev.filter((frame) => frame.id !== frameId));
   };
 
+  const handleReOrderFrames = (startIndex: number, endIndex: number) => {
+    setFrames((prev) => {
+      const newOrder = [...prev];
+      const [movedFrame] = newOrder.splice(startIndex, 1);
+      newOrder.splice(endIndex, 0, movedFrame);
+      return newOrder;
+    });
+  };
+
   const handleAddSteps = (frameId: string) => {
     setFrames((prev) =>
       prev.map((frame) =>
@@ -123,6 +132,7 @@ export default function useNewGuide() {
     handleUpdateDescription,
     handleAddFrames,
     handleUpdateFrameTitle,
+    handleReOrderFrames,
     handleAddSteps,
     handleRemoveFrame,
     handleUpdateStep,
diff --git a/src/features/guides/routes/NewGuide.tsx b/src/features/guides/routes/NewGuide.tsx
index d5eac16..fb5055d 100644
--- a/src/features/guides/routes/NewGuide.tsx
+++ b/src/features/guides/routes/NewGuide.tsx
@@ -12,6 +12,7 @@ export default function NewGuide() {
     handleUpdateFrameTitle,
     handleAddSteps,
     handleRemoveFrame,
+    handleReOrderFrames,
     handleRemoveStep,
     handleUpdateStep,
     handleSaveGuide,
@@ -42,16 +43,18 @@ export default function NewGuide() {
           frames.map((frame, index) => (
             <Frame
               key={index}
+              frameIndex={index}
               frame={frame}
               onRemove={handleRemoveFrame}
               addStep={handleAddSteps}
               updateStep={handleUpdateStep}
               removeStep={handleRemoveStep}
               updateTitle={handleUpdateFrameTitle}
+              reOrder={handleReOrderFrames}
             />
           ))}
 
-        {frames.length === 0 && <p>No frames added yet.</p>}
+        {frames.length === 0 && <p>No images added yet.</p>}
 
         {frames.length > 0 && <FileUpload onChange={handleAddFrames} />}
 
diff --git a/src/styles/App.css b/src/styles/App.css
index 969b29e..8715e74 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -70,7 +70,8 @@ textarea {
 }
 
 input,
-textarea {
+textarea,
+.file-upload {
     border: 3px solid var(--color-border);
     border-radius: 4px;
     padding: 0.25rem;
@@ -80,3 +81,7 @@ textarea {
     resize: none;
     height: 5rem;
 }
+
+:focus-visible {
+    border-color: #ff7700 !important;
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
index 7d8eca9..3c26aee 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -136,6 +136,6 @@
     }
 
     :focus-visible {
-        outline-offset: 0.2rem;
+        outline: none;
     }
 }