From 4a1b60e575a7d1fd40cc50dc258fcaf2507f88f4 Mon Sep 17 00:00:00 2001 From: sepehr Date: Sat, 24 Jan 2026 20:02:38 +0100 Subject: [PATCH] Fix syntax error and finalize robust note resizing --- keep-notes/components/masonry-grid.css | 6 ------ keep-notes/components/masonry-grid.tsx | 17 +++++++++++------ keep-notes/components/note-actions.tsx | 2 +- keep-notes/components/note-card.tsx | 20 +++++++++++++------- keep-notes/playwright-report/index.html | 2 +- keep-notes/prisma/dev.db | Bin 2904064 -> 2904064 bytes 6 files changed, 26 insertions(+), 21 deletions(-) diff --git a/keep-notes/components/masonry-grid.css b/keep-notes/components/masonry-grid.css index 20d5f72..2c9f00f 100644 --- a/keep-notes/components/masonry-grid.css +++ b/keep-notes/components/masonry-grid.css @@ -48,19 +48,16 @@ .masonry-item[data-size="small"], .note-card[data-size="small"] { min-height: 150px; - height: auto !important; } .masonry-item[data-size="medium"], .note-card[data-size="medium"] { min-height: 200px; - height: auto !important; } .masonry-item[data-size="large"], .note-card[data-size="large"] { min-height: 300px; - height: auto !important; } /* Drag State Styles - Clean and flat behavior requested by user */ @@ -133,19 +130,16 @@ .masonry-item[data-size="small"], .masonry-item-content .note-card[data-size="small"] { min-height: 120px; - height: auto !important; } .masonry-item[data-size="medium"], .masonry-item-content .note-card[data-size="medium"] { min-height: 160px; - height: auto !important; } .masonry-item[data-size="large"], .masonry-item-content .note-card[data-size="large"] { min-height: 240px; - height: auto !important; } /* Reduced drag effect on mobile */ diff --git a/keep-notes/components/masonry-grid.tsx b/keep-notes/components/masonry-grid.tsx index 7713e37..f7a28ad 100644 --- a/keep-notes/components/masonry-grid.tsx +++ b/keep-notes/components/masonry-grid.tsx @@ -26,18 +26,23 @@ interface MasonryItemProps { isDragging?: boolean; } -const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) { +const MasonryItem = function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) { const resizeRef = useResizeObserver(onResize); + useEffect(() => { + onResize(); + const timer = setTimeout(onResize, 300); + return () => clearTimeout(timer); + }, [note.size, onResize]); + return (
-
+
); -}); +}; export function MasonryGrid({ notes, onEdit }: MasonryGridProps) { const { t } = useLanguage(); @@ -354,7 +359,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
{pinnedNotes.map(note => ( {othersNotes.map(note => ( ( { + onSelect={(e) => { onSizeChange?.(size); }} className={cn( diff --git a/keep-notes/components/note-card.tsx b/keep-notes/components/note-card.tsx index 219e464..c759d09 100644 --- a/keep-notes/components/note-card.tsx +++ b/keep-notes/components/note-card.tsx @@ -237,15 +237,21 @@ export function NoteCard({ } const handleSizeChange = async (size: 'small' | 'medium' | 'large') => { - // Notify parent of size change so it can update its state - onSizeChange?.(size) + startTransition(async () => { + // Instant visual feedback for the card itself + addOptimisticNote({ size }) - // Trigger layout refresh - onResize?.() - setTimeout(() => onResize?.(), 300) + // Notify parent so it can update its local state + onSizeChange?.(size) - // Update server in background - updateSize(note.id, size) + // Trigger layout refresh + onResize?.() + setTimeout(() => onResize?.(), 300) + + // Update server in background + await updateSize(note.id, size) + router.refresh() + }) } const handleCheckItem = async (checkItemId: string) => { diff --git a/keep-notes/playwright-report/index.html b/keep-notes/playwright-report/index.html index 7713416..02b45af 100644 --- a/keep-notes/playwright-report/index.html +++ b/keep-notes/playwright-report/index.html @@ -82,4 +82,4 @@ Error generating stack: `+n.message+`
- \ No newline at end of file + \ No newline at end of file diff --git a/keep-notes/prisma/dev.db b/keep-notes/prisma/dev.db index fd1f8e95f82b504d718a04470d4ba7e49ad4eeaa..708e288c38cbadf3d81aa3acc550ad6e97b5af09 100644 GIT binary patch delta 2803 zcmb7FeQXrR72nyr-Mh2BJL}K$*}gm5XUrKJ*xlQ&BP8cEgeFxZoKUwZ7H|kCfdp`< zXrl%S=fILi1TG=TCbduwkr2{SYy{i{(kiAwMGdqyA1ze_Rr#nuRZy_s2`+lSVJWb4uRD-92!@qOuCv(~MNihstp@J)Oje}=E%i}*Y~ zD1I(p#Uic~k7HIG7I%psiDTkF#6#i@T!sIDkBDo;*YJmU0Kbo0a2Ed<@5I~1+v3l~ zKKuY)CmzM!Vh&qa#XaH{yiy#*Gw@6JtoR~cfIIL~@o#t*bNAc-k~}7?<2(qlO|<2j zX7d%STl31+;V8p3wO7*rshAEWCs19+-vT>b!ZU&AXf{YLu}Ajw$oPdOmMyO@-6PtzFHhO#&B+=c-z+b z-$v34=jM}h^HE#2jlar3THe7MaU2K4e~HIS9u;3Mc}kSUa^Z$>S~wuQF8oONo)B`Z z5u}#j$4WNwSAC6T7s#>^^i$q>aty_s#sO4?s+{Z?YH}h2s0KP$|NFJ}8nSf^T|j7z zJo^Omh!(8T6G~A3-c{E8f@!}Zy^A)ny_FzUgzc@qzA`8R;Mw<17XSjdfIQDJp6B*wOII%^&(8>EO1Tb(VSkVxsV+$y=qMl; z!9pK{tq1hY(C-7;1o8~X43L!|b3g`R{2S0e>~wb3MA1wq-BmM9MZX2}3RvP3kmE4C z4Eoogp9InlV>a}QL0}tpA;?4IL|4s6Eb1VeXV;uUEIQ((yK82)qHQpkfCX4_%vXV4)#V{25 z1KU1sj|B50wR|t(b9KD8Hj{CBLd~gYCV3CrK_|8-^s2M=Xmbe}S`>Pqlx4Qqy&=1| zF5g?v$(-*d9*W2oAxftv} zJwI5_cY2eICkfN1dLo&(rZzXH*1iz9cmKXUPrI{wN9#A2g*8*@m<$2vM$#~>gsUr> ztShi$+kuABl)%Bk$Za1eQrOwR4zcJI;nF^+aTW4-nsB{Thmt{O2)DjyXBg09*RbG$ zBjn$F>F)gSXjG6;|L%&7TM8yS9k$aEI~}#tjrnvFJHo=$u-xz$j5w!$0EGZubf72x zU2v(*sw?~`KsuWwkuD0Nb*O8yWoQrv%_Bsr$cmxU13ZmH z(iAjBRxQI+Wj#TeQgp*GG&NZ)+xtj#h+F9;FK_Vturwm;F2qnwL%qv|Zkeh{4;^zb z5(c-ucirA`Y{47U?TRC?+5O;={~~TR6Q+@L7guCMGpr)>vX&HJ1(qG=*kN%TD)cDp z$-G(Pe10(&DnTiZqZ=@c^El>1r0r7dWNBj|Aj{G;RWCS`Pz@6nHDI9!Ge3FbS}ceH zPVKeWS-4qu96LTRMpVUywt){pbK{t0XA*Cht2{`&ouCjl-Euu8 z1R(S24pi_cpKD>$Ec*nB48_4A)6gwQ2F;hM8JY%kyR=*M)XgT5K?<@8PRg=HFB?i^Yl}9_nG7!`Z_Eg`Z_Eg{y$ly_g0a`hBLs^VZsk_ OFBZ=Zl6MWZ=l%zd-Rsi; delta 14418 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