From 35b8ec6790822c89f86aae327ac4e036c66360ae Mon Sep 17 00:00:00 2001
From: Stefan <atanasovstefan@hotmail.com>
Date: Tue, 29 Sep 2026 22:13:03 +0300
Subject: [PATCH] fix: scroling

---
 src/App.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cc3c344..f3f27ea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import {
 import { useApp } from './hailer/use-app';
 
 // ── Version ───────────────────────────────────────────────────────────────────
-const VERSION = 'v2.1';
+const VERSION = 'v2.2';
 
 // Synchronous mobile check — must run before first render so we never
 // put touch-action:none (desktop canvas) in the DOM on a mobile device.
@@ -56,7 +56,7 @@ function fmtDate(iso: string): string {
 }
 
 // insight row: [_id, name, date_sec, content, color, pos_x, pos_y, done]
-interface Note { _id: string; name: string; content: string; color: string; date: string; x: number; y: number; done: boolean; }
+interface Note { _id: string; name: string; content: string; color: string; date: string; ts: number; x: number; y: number; done: boolean; }
 
 function rowToNote(row: unknown[]): Note {
   const x = parseFloat((row[5] as string) ?? '80');
@@ -65,6 +65,7 @@ function rowToNote(row: unknown[]): Note {
     _id:     row[0] as string,
     name:    (row[1] as string) || 'Note',
     date:    secToLocal(row[2]),
+    ts:      Number(row[2]) || 0,
     content: (row[3] as string) ?? '',
     color:   (row[4] as string) || 'Yellow',
     x: isFinite(x) ? x : 80,
@@ -443,6 +444,7 @@ export default function App() {
         _id: id, name, content,
         color: effectiveColor,
         date: noteDate,
+        ts: Math.floor(dt/1000),
         x: isFinite(cx) ? cx : 80,
         y: isFinite(cy) ? cy : 80,
         done: false,
@@ -507,6 +509,9 @@ export default function App() {
   };
 
   const onWheel=(e:React.WheelEvent)=>{
+    // Over a note's text that can scroll: let the text scroll, don't zoom the board.
+    const ta=(e.target as HTMLElement).closest('textarea');
+    if (ta && ta.scrollHeight>ta.clientHeight) return;
     e.preventDefault();
     const f=e.deltaY<0?1.1:0.9;
     const r=cvs.current!.getBoundingClientRect();
@@ -955,7 +960,8 @@ export default function App() {
 
         {/* Notes */}
         <Box position="absolute" style={{transform:`translate(${offset.x}px,${offset.y}px) scale(${scale})`,transformOrigin:'0 0'}}>
-          {notes.map(n=>(
+          {/* Oldest first, so the newest note is drawn last and sits on top */}
+          {[...notes].sort((a,b)=>a.ts-b.ts).map(n=>(
             <Box key={n._id} data-card>
               <CanvasCard note={n} selected={selId===n._id} scale={scale}
                 onSelect={setSelId} onDragEnd={dragEnd} onEdit={editNote}