From cad5ba6ea3512b1db36b81feb095258a69f2ca9a Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Sun, 21 Jun 2026 22:10:29 +0330
Subject: [PATCH] fix(pos): make the per-item note obvious with an explicit
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The note control was an unlabeled icon next to the trash on each cart line, so
cashiers couldn't tell where to add a note. Replaced it with a clear
"افزودن یادداشت" (add note) text button under each item; clicking it reveals the
note input, which collapses again on blur when left empty. Existing notes still
show the editable field.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/pos2/pos2-screen.tsx       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/dashboard/src/components/pos2/pos2-screen.tsx b/web/dashboard/src/components/pos2/pos2-screen.tsx
index 43f40f1..839607e 100644
--- a/web/dashboard/src/components/pos2/pos2-screen.tsx
+++ b/web/dashboard/src/components/pos2/pos2-screen.tsx
@@ -767,15 +767,6 @@ function Ticket({
                       <Plus className="size-4" />
                     </button>
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => setNoteFor((cur) => (cur === l.menuItem.id ? null : l.menuItem.id))}
-                    className={`flex size-9 items-center justify-center rounded-lg hover:bg-accent active:scale-95 ${l.notes ? "text-primary" : "text-muted-foreground"}`}
-                    aria-label="یادداشت"
-                    title="یادداشت آیتم"
-                  >
-                    <StickyNote className="size-4" />
-                  </button>
                   <button type="button" onClick={() => onRemove(l.menuItem.id)} className="flex size-9 items-center justify-center rounded-lg text-red-500 hover:bg-red-50" aria-label="حذف">
                     <Trash2 className="size-4" />
                   </button>
@@ -784,13 +775,22 @@ function Ticket({
                   <input
                     value={l.notes ?? ""}
                     onChange={(e) => onNote(l.menuItem.id, e.target.value)}
+                    onBlur={() => { if (!l.notes) setNoteFor((cur) => (cur === l.menuItem.id ? null : cur)); }}
                     placeholder="یادداشت برای آشپزخانه (مثلاً بدون شکر)"
                     autoFocus={noteFor === l.menuItem.id}
                     maxLength={200}
                     dir="rtl"
                     className="mt-2 w-full rounded-lg border border-border/70 bg-background px-2.5 py-1.5 text-sm outline-none focus:border-primary"
                   />
-                ) : null}
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setNoteFor(l.menuItem.id)}
+                    className="mt-1.5 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10"
+                  >
+                    <StickyNote className="size-3.5" /> افزودن یادداشت
+                  </button>
+                )}
               </li>
             ))}
           </ul>