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.
Riyadh
85aa9a0015