From 944a894a888f875ffea2a0f52e688806acff8aac Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Tue, 12 May 2026 11:25:45 +0000
Subject: [PATCH] Task #514: Align note composer with folders rail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Original task: On the Notes page the "اكتب ملاحظة" composer sat alone
in a full-width row above the content row, while the "المجلدات"
FoldersRail started in the row below. Composer appeared high, rail
visibly lower with empty space between them.

Change:
- Moved the top composer out of its standalone full-width block and
  into the left content column (`flex-1 min-w-0`) of the existing
  folders+content row in `artifacts/tx-os/src/pages/notes.tsx`. Both
  now share the same row, so the composer's top edge aligns with the
  rail's top edge on desktop.
- Added a `className?: string` prop to `FoldersRail`
  (`artifacts/tx-os/src/components/notes/folders-rail.tsx`) appended
  to its root <aside>, so the page can pass `order-*` classes.
- On narrow widths (`flex-col`) the composer column gets
  `order-1 md:order-2` and the rail gets `order-2 md:order-1`. Result:
  composer stacks ABOVE the rail on mobile (preserving the original
  mobile reading order) and sits beside it on md+.

Behavior preserved:
- `showTopComposer` gating unchanged — still hidden on Inbox / Sent /
  Archived / Shared-with-me.
- `data-testid="notes-top-composer"` preserved.
- FoldersRail's existing width/scroll classes unchanged; new className
  is purely additive.
- Stale comment about composer being "above the folders area" updated
  to describe the new in-column placement and the order-* mobile
  behavior.

Verification: `pnpm --filter @workspace/tx-os exec tsc --noEmit`
passes. No test files reference the composer block by structural
selectors that the move would break.

No deviations from the plan.
---
 .../src/components/notes/folders-rail.tsx     |  7 +++++-
 artifacts/tx-os/src/pages/notes.tsx           | 25 +++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/artifacts/tx-os/src/components/notes/folders-rail.tsx b/artifacts/tx-os/src/components/notes/folders-rail.tsx
index 1d2a69f2..5089c207 100644
--- a/artifacts/tx-os/src/components/notes/folders-rail.tsx
+++ b/artifacts/tx-os/src/components/notes/folders-rail.tsx
@@ -124,6 +124,10 @@ interface Props {
   //                 chips. Folder rows are owned by the FoldersBrowser in the
   //                 main content so test ids don't collide.
   mode?: "rail" | "chips-only";
+  // Extra classes appended to the root <aside>. Used by the Notes page
+  // to control flex `order-*` so the composer stacks above the rail on
+  // narrow widths (Task #514).
+  className?: string;
 }
 
 export function FoldersRail({
@@ -134,6 +138,7 @@ export function FoldersRail({
   totalCount,
   onShareFolder,
   mode = "rail",
+  className,
 }: Props) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -261,7 +266,7 @@ export function FoldersRail({
     <aside
       // Mobile: horizontal chip row above the notes grid.
       // Desktop (md+): fixed sidebar to the start of the grid.
-      className="w-full md:w-56 shrink-0 flex md:block gap-1 md:gap-0 md:space-y-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0"
+      className={`w-full md:w-56 shrink-0 flex md:block gap-1 md:gap-0 md:space-y-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0${className ? ` ${className}` : ""}`}
       data-testid="notes-folders-rail"
     >
       <div className="hidden md:block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground px-2 mb-1">
diff --git a/artifacts/tx-os/src/pages/notes.tsx b/artifacts/tx-os/src/pages/notes.tsx
index ddcbd5ef..437dd360 100644
--- a/artifacts/tx-os/src/pages/notes.tsx
+++ b/artifacts/tx-os/src/pages/notes.tsx
@@ -515,10 +515,13 @@ export default function NotesPage() {
   const pinned = filteredNotes.filter((n) => n.isPinned);
   const others = filteredNotes.filter((n) => !n.isPinned);
 
-  // Composer is rendered above the folders area so the user can capture
-  // a quick note from anywhere on the active "My Notes" view without
-  // first drilling into a folder. It is hidden on read-only / non-owner
-  // views (Inbox, Sent, Archived, Shared-with-me).
+  // Composer is rendered inside the main content column of the
+  // folders+content row so its top edge aligns with the FoldersRail
+  // (Task #514). On narrow widths the row stacks (`flex-col`) and the
+  // composer is forced above the rail via `order-*` classes so the
+  // user can still capture a quick note without scrolling past the
+  // rail. It is hidden on read-only / non-owner views (Inbox, Sent,
+  // Archived, Shared-with-me).
   const showTopComposer =
     view === "active" && folderSelection.kind !== "shared-folder";
 
@@ -775,11 +778,12 @@ export default function NotesPage() {
       <div className="flex-1 flex flex-col">
 
       {/* Task #514: composer moved INSIDE the main content column so it
-          shares the same row (and same top edge) as the FoldersRail.
-          Previously it was a standalone full-width block above this
-          row, which made the rail visibly start lower than the
-          composer. Hidden conditions (Inbox/Sent/Archived/Shared) are
-          unchanged — see `showTopComposer`. */}
+          shares the same row (and same top edge) as the FoldersRail on
+          desktop. On narrow widths the row stacks (`flex-col`); the
+          `order-*` classes keep the composer ABOVE the folders rail in
+          that case so the original mobile reading order is preserved.
+          Hidden conditions (Inbox/Sent/Archived/Shared) are unchanged
+          — see `showTopComposer`. */}
       <div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto flex flex-col md:flex-row gap-6">
         {showFolders && (
           <FoldersRail
@@ -790,9 +794,10 @@ export default function NotesPage() {
             totalCount={notes.length}
             onShareFolder={(f) => setFolderShareFor(f)}
             mode={view === "active" && folderSelection.kind === "all" ? "chips-only" : "rail"}
+            className="order-2 md:order-1"
           />
         )}
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 order-1 md:order-2">
         {showTopComposer && (
           <div className="mb-4" data-testid="notes-top-composer">
             <Composer