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:
- Switched the folders+content row in
`artifacts/tx-os/src/pages/notes.tsx` from flex to CSS grid:
`grid md:grid-cols-[14rem_minmax(0,1fr)]`. Composer is placed in
col 2 row 1, FoldersRail in col 1 (row-span-2 when composer is
shown), content in col 2 row 2. Result: composer's top edge aligns
with the rail's top edge on desktop and the empty gap is gone.
- On mobile (`grid-cols-1`), `order-1 / order-2 / order-3` give the
exact original mobile reading order: composer → rail → content.
- 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 grid placement
classes.
- Hidden-composer views (Inbox / Sent / Archived / Shared-with-me)
collapse cleanly via conditional `md:row-span-2` on the rail and
conditional `md:row-start-1 / md:row-start-2` on the content
column — desktop becomes a simple two-cell row and mobile stays
rail → content, matching the original behavior.
Behavior preserved:
- `showTopComposer` gating unchanged.
- `data-testid="notes-top-composer"` preserved.
- FoldersRail's existing internal classes unchanged; new className
prop is purely additive.
- Mobile reading order in active/non-shared view: composer → rail →
content (same as before this task, when composer was a standalone
block above the row).
- Mobile reading order in hidden-composer views: rail → content
(unchanged).
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.
riyadhafraa
cb6b067386