notes: file-manager layout, folders section header, kill grid gap (#578)

Cleans up the Notes page after a user creates their first folder:

1. FoldersRail: in `rail` mode (every view except "All notes"), insert a
   small "My folders" / "مجلداتي" section header above the user's folder
   list so it no longer visually nests under the dark "Unfiled" pill.
   New i18n key `notes.folders.myFolders` in en.json and ar.json.

2. notes.tsx filteredNotes: when `folderSelection.kind === "all"`, hide
   notes whose `folderId !== null`. Combined with the existing
   FoldersBrowser cards this gives a file-manager feel — notes inside a
   folder are reachable by opening the folder card and no longer appear
   in the flat list, so users stop thinking move = copy. Counts on the
   "All notes" rail entry stay as the total (totalCount prop unchanged).

3. notes.tsx grid: replaced the two separate grid cells for
   composer/content with a single wrapper that uses `display: contents`
   on mobile (children flow into the outer grid honoring order-1/2/3)
   and `flex flex-col gap-4` on md+ (composer and content stack in the
   same cell, no empty grid-row gap when the FoldersRail is taller than
   the composer). Removed unused conditional row-start/row-span on the
   inner content div.

Out of scope per plan: dnd-kit behavior, shared-with-me logic, composer
or folder card redesign.

Validation: `pnpm --filter @workspace/tx-os exec tsc --noEmit` clean.
Vite HMR successful after fix; no babel/JSX errors.
This commit is contained in:
riyadhafraa
2026-05-18 08:00:28 +00:00
parent b220e57d7f
commit 3d3a4ba972
4 changed files with 37 additions and 21 deletions
@@ -293,6 +293,11 @@ export function FoldersRail({
})}
<div className="contents md:block md:pt-1">
{mode === "rail" && folders.length > 0 && (
<div className="hidden md:block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground px-2 mb-1 mt-3">
{t("notes.folders.myFolders", "My folders")}
</div>
)}
{mode === "rail" && folders.map((f) => {
const isEditing = editingId === f.id;
const isSel = selected.kind === "folder" && selected.id === f.id;