Task #514: Align note composer with folders rail
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` ONLY when `showTopComposer` is true. In hidden-composer views (Inbox / Sent / Archived / Shared-with-me) no order classes are applied, so the rail/content stacking order on mobile stays exactly as it was before this task. Result: composer stacks ABOVE the rail on mobile in My Notes (preserving the original mobile reading order) and sits beside it on md+, with zero behavior change in the other views. 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.
This commit is contained in:
@@ -794,10 +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"
|
||||
className={showTopComposer ? "order-2 md:order-1" : undefined}
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-w-0 order-1 md:order-2">
|
||||
<div className={`flex-1 min-w-0${showTopComposer ? " order-1 md:order-2" : ""}`}>
|
||||
{showTopComposer && (
|
||||
<div className="mb-4" data-testid="notes-top-composer">
|
||||
<Composer
|
||||
|
||||
Reference in New Issue
Block a user