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:
- 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.
- Grid-cols template, `md:col-start-2` on composer, and
  `md:col-start-2`/`md:row-start-*` on the content column are all
  GATED on `showFolders`. In views where the folders rail is hidden
  (Received/Inbox, Sent), the wrapper is a single-column grid with
  no left gutter and content takes the full width — preserving the
  original full-width layout for those views.

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.
This commit is contained in:
riyadhafraa
2026-05-12 11:31:37 +00:00
parent cb6b067386
commit b7b8c395f4
+12 -4
View File
@@ -790,10 +790,16 @@ export default function NotesPage() {
(Inbox / Sent / Archived / Shared-with-me) collapse cleanly
to the original two-cell layout via conditional row-span
/ row-start. */}
<div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto grid gap-4 md:gap-x-6 md:gap-y-4 md:grid-cols-[14rem_minmax(0,1fr)]">
<div
className={`flex-1 px-4 py-6 max-w-6xl w-full mx-auto grid gap-4 md:gap-x-6 md:gap-y-4${
showFolders ? " md:grid-cols-[14rem_minmax(0,1fr)]" : ""
}`}
>
{showTopComposer && (
<div
className="order-1 md:order-none md:col-start-2 md:row-start-1"
className={`order-1 md:order-none md:row-start-1${
showFolders ? " md:col-start-2" : ""
}`}
data-testid="notes-top-composer"
>
<Composer
@@ -818,8 +824,10 @@ export default function NotesPage() {
/>
)}
<div
className={`min-w-0 order-3 md:order-none md:col-start-2 ${
showTopComposer ? "md:row-start-2" : "md:row-start-1"
className={`min-w-0 order-3 md:order-none${
showFolders
? ` md:col-start-2 ${showTopComposer ? "md:row-start-2" : "md:row-start-1"}`
: ""
}`}
>
{view === "active" && folderSelection.kind === "shared-folder" && (