จาก Pages มาปรับต่อบนจอมือถือ

ของฝั่งผมพร้อมแล้ว — เหลือขั้นตอนเดียวที่ต้องเป็นคุณกดเอง (ต้องใช้บัญชี Cloudflare ของคุณ ผมกดแทนไม่ได้) Task 1 เสร็จ: npm test 84/84 · npm run build ผ่าน · dist/ มีครบ (JS/CSS + manifest + sw + icons 5 ไฟล์) Task 2 — ให้คุณกด deploy (5 นาที):

1. เปิด Cloudflare Dashboard → Workers & Pages → Create → Pages → Connect to Git
2. เลือก repo sabayjai-pantry (ถ้าถาม permission ให้อนุญาต repo นี้)
3. ตั้งค่า build:

• Build command: npm run build
  • Build output directory: dist
  • ที่เหลือปล่อยค่าเริ่มต้น (Node อ่าน .nvmrc = 22 ให้เอง)

1. กด Save and Deploy → รอจนขึ้น Success → จะได้ URL https://<ชื่อ>.pages.dev

ไม่ต้องตั้ง _redirects หรือโดเมนเอง — แอปใช้ hash routing วางบน Pages ได้เลย เสร็จแล้วส่ง URL กลับมา ผมจะตรวจ Task 3 ต่อ (เปิดครบ 8 จอบน URL จริง · SW + ออฟไลน์ · console) แล้วพาตรวจ S2 ปิดโปรเจกต์ R009 เริ่มแล้ว — สรุปสถานะรอคุณ: ยืนยันแล้ว (ฝั่งผมทำได้)

• docs/work/R009/01-plan.md เขียนแล้ว (S1 Deploy + S2 ตรวจรวม)
• npm test 84/84 · npm run build ผ่าน · dist/ ครบ — ขั้นตอนกด deploy บน Cloudflare ใช้บัญชีคุณ ผมทำแทนไม่ได้
• แก้ถ้อยคำในแผนให้ตรงจริง (ตรวจบน working tree ที่ commit แล้ว ไม่ได้รัน npm ci)

ทำไม่ได้ตอนนี้ (รอคุณ — บอกไว้ชัด ไม่นับว่าผ่าน)

• Task 2 กด deploy + Task 3 ตรวจบน URL จริง + S2 ทั้งหมด

ส่ง URL *.pages.dev กลับมาเมื่อ deploy เสร็จ ผมตรวจต่อทันที

ดี — งั้นใช้วิธี Connect to Git (deploy อัตโนมัติทุกครั้งที่ push) ทำตามนี้ครับ:

1. เปิด dash.cloudflare.com → เมนูซ้าย Workers & Pages → ปุ่ม Create
2. แท็บ Pages → Connect to Git → เชื่อมบัญชี GitHub (ถ้ายังไม่เคย) → เลือก repo sabayjai-pantry
3. หน้า Set up builds and deployments:

• Project name: sabayjai-pantry (จะได้ URL sabayjai-pantry.pages.dev)
  • Production branch: main
  • Framework preset: เลือก Vite (มันจะกรอก Build command = npm run build, Output = dist ให้เอง — ถ้าไม่ตรงแก้ให้ตรง)
  • Build command: npm run build
  • Build output directory: dist
  • Environment variables: ไม่ต้องใส่อะไร (Node อ่าน .nvmrc = 22 ให้เอง)

1. กด Save and Deploy → รอประมาณ 1–2 นาทีจนขึ้น Success (มี Confetti 🎉)

ถ้าติดตรงไหน (เช่น หา repo ไม่เจอ → ต้องกด Configure บน GitHub App ให้อนุญาต repo นี้ก่อน) แคปมาบอกได้เลย เสร็จแล้วส่ง URL มา ผมตรวจ Task 3 ต่อทันที

ยังก่อนครับ — หน้านี้ผิดที่เดียว: มันคือหน้าตั้งค่า Worker (ดูจากหัวข้อ "Worker project" + Deploy command npx wrangler deploy) แต่แอปเราเป็นเว็บ static ต้องใช้ Pages แก้แบบนี้ครับ:

1. กด Back กลับไปหน้า Create
2. คราวนี้เลือกแท็บ Pages (ไม่ใช่ Workers) → Connect to Git → เลือก repo Sabayjai/sabayjai-pantry-demo เหมือนเดิม
3. หน้าตั้งค่าของ Pages จะมีแค่:

• Project name: sabayjai-pantry-demo (ตามที่มันเติมให้ ใช้ได้เลย)
  • Production branch: main
  • Framework preset: เลือก Vite
  • Build command: npm run build
  • Build output directory: dist
  • (ไม่มี Deploy/Preview command — ถ้ายังเห็น แปลว่ายังอยู่ฝั่ง Worker)

1. กด Save and Deploy

สั้น ๆ: ถ้าหน้าไหนมีช่อง Deploy command ให้ถอยออก — ของเราต้องเป็นหน้าที่มีแค่ Build command + Output directory ครับ

ถูกแล้วครับ — repo sabayjai-pantry-demo มีติ๊กถูกแล้ว กด Next → ได้เลย แล้วจะเข้าหน้าตั้งค่า build (อย่าลืมเช็กว่าเป็นฝั่ง Pages: ต้องมีแค่ Build command + Output directory ถ้าเจอ Deploy command แปลว่าผิดแท็บ)

หน้านี้คือจุดเริ่มต้น กด Continue with GitHub (ปุ่มแรก จุดเขียวแปลว่าเชื่อมบัญชีแล้ว) แล้วมันจะพากลับไปหน้าเลือกร repo — เลือก sabayjai-pantry-demo เหมือนเดิม สำคัญตอนถึงหน้าเลือกประเภท: ต้องเป็น Pages นะครับ ไม่ใช่ Workers (รอบก่อนหลุดไปฝั่ง Worker)

Deploy สำเร็จครับ — S1 ผมตรวจบน URL จริงผ่านหมดแล้ว 🎉 ผลตรวจบน sabayjai-pantry-demo.pages.dev

• ครบ 8 จอ (items 8 ใบ · add · locations 5 · categories 4 · expiring แดง 1/เหลือง 2 · used-up 2 · shopping 2 · settings) · overflow 0
• manifest + sw.js + icons 5 ไฟล์ 200 ครบ · SW active · console ไม่มี error · เรนเดอร์จอแรก 572ms

เหลือ S2 — ต้องใช้มือถือคุณ (ผมทำแทนไม่ได้):

1. เปิด URL บนมือถือ/แท็บเล็ต/คอม ทำภารกิจหลักดู
2. Add to Home Screen → เปิดจากไอคอน (ต้องเต็มจอ) → ปิดเน็ต → รีเฟรช (ต้องยังใช้ได้)
3. ติ๊ก DoD ใน 02-result.md §2 แล้วบอกผมปิดโปรเจกต์

ตรวจสุดท้ายครบ — สรุปตามจริง: ยืนยันแล้ว

• Deploy สำเร็จ: sabayjai-pantry-demo.pages.dev เปิดได้ HTTPS
• ครบ 8 จอบน URL จริง (นับการ์ดตรง seed ทุกจอ) · overflow 0 · manifest/sw/icons 200 ครบ · SW active · console ไม่มี error · เรนเดอร์ 572ms
• 01-plan.md + 02-result.md ตรงสถานะจริง (ติ๊กเฉพาะที่เสร็จ)

ทำไม่ได้ / ค้าง (ต้องใช้อุปกรณ์คุณ — รายงานเป็นค้าง ไม่นับว่าผ่าน)

• ติดตั้งลงโฮม + เปิดเต็มจอ + ปิดเน็ตใช้ได้ (ต้องมือถือจริง)
• ติ๊ก DoD S2 + ปิด R009/ปิดโปรเจกต์

วิธีติดตั้งลงโฮมครับ (ทำบนมือถือ): Android (Chrome)

1. เปิด https://sabayjai-pantry-demo.pages.dev ใน Chrome
2. แตะจุด 3 จุด ⋮ มุมขวาบน → เพิ่มลงในหน้าจอหลัก / Install app
3. กด ติดตั้ง → ไอคอนโถเขียวจะโผล่ในลิ้นชักแอป เปิดแล้วเต็มจอไม่มีแถบเบราว์เซอร์

iPhone (Safari — ต้องใช้ Safari เท่านั้น)

1. เปิด URL ใน Safari
2. แตะปุ่ม แชร์ (สี่เหลี่ยมมีลูกศรชี้ขึ้น ตรงกลางล่าง)
3. เลื่อนหา เพิ่มไปยังหน้าจอโฮม / Add to Home Screen → กด เพิ่ม มุมขวาบน
4. เปิดจากไอคอน → เต็มจอ

เสร็จแล้วลอง 2 อย่างนี้ต่อเลย (คือข้อที่เหลือใน S2):

• เปิดจากไอคอนแล้วปิดเน็ต (โหมดเครื่องบิน) → รีเฟรช — ต้องยังเห็นของครบ (ข้อมูลอยู่เครื่อง + shell ถูกแคช)
• ลองกดปุ่มต่าง ๆ ดูว่ากดสะดวกไหมบนจอเล็ก

ผลเป็นไงบอกมาได้เลย ถ้าผ่านหมดผมปิด R009 + ปิดโปรเจกต์ให้

wrote file: docs/work/R009/02-result.md Deploy สำเร็จครับ — S1 ผมตรวจบน URL จริงผ่านหมดแล้ว 🎉 ผลตรวจบน sabayjai-pantry-demo.pages.dev

• ครบ 8 จอ (items 8 ใบ · add · locations 5 · categories 4 · expiring แดง 1/เหลือง 2 · used-up 2 · shopping 2 · settings) · overflow 0
• manifest + sw.js + icons 5 ไฟล์ 200 ครบ · SW active · console ไม่มี error · เรนเดอร์จอแรก 572ms

เหลือ S2 — ต้องใช้มือถือคุณ (ผมทำแทนไม่ได้):

1. เปิด URL บนมือถือ/แท็บเล็ต/คอม ทำภารกิจหลักดู
2. Add to Home Screen → เปิดจากไอคอน (ต้องเต็มจอ) → ปิดเน็ต → รีเฟรช (ต้องยังใช้ได้)
3. ติ๊ก DoD ใน 02-result.md §2 แล้วบอกผมปิดโปรเจกต์

code search for "\[ \]" (-n) ตรวจสุดท้ายครบ — สรุปตามจริง: ยืนยันแล้ว

• Deploy สำเร็จ: sabayjai-pantry-demo.pages.dev เปิดได้ HTTPS
• ครบ 8 จอบน URL จริง (นับการ์ดตรง seed ทุกจอ) · overflow 0 · manifest/sw/icons 200 ครบ · SW active · console ไม่มี error · เรนเดอร์ 572ms
• 01-plan.md + 02-result.md ตรงสถานะจริง (ติ๊กเฉพาะที่เสร็จ)

ทำไม่ได้ / ค้าง (ต้องใช้อุปกรณ์คุณ — รายงานเป็นค้าง ไม่นับว่าผ่าน)

• ติดตั้งลงโฮม + เปิดเต็มจอ + ปิดเน็ตใช้ได้ (ต้องมือถือจริง)
• ติ๊ก DoD S2 + ปิด R009/ปิดโปรเจกต์

วิธีติดตั้งลงโฮมครับ (ทำบนมือถือ): Android (Chrome)

1. เปิด https://sabayjai-pantry-demo.pages.dev ใน Chrome
2. แตะจุด 3 จุด ⋮ มุมขวาบน → เพิ่มลงในหน้าจอหลัก / Install app
3. กด ติดตั้ง → ไอคอนโถเขียวจะโผล่ในลิ้นชักแอป เปิดแล้วเต็มจอไม่มีแถบเบราว์เซอร์

iPhone (Safari — ต้องใช้ Safari เท่านั้น)

1. เปิด URL ใน Safari
2. แตะปุ่ม แชร์ (สี่เหลี่ยมมีลูกศรชี้ขึ้น ตรงกลางล่าง)
3. เลื่อนหา เพิ่มไปยังหน้าจอโฮม / Add to Home Screen → กด เพิ่ม มุมขวาบน
4. เปิดจากไอคอน → เต็มจอ

เสร็จแล้วลอง 2 อย่างนี้ต่อเลย (คือข้อที่เหลือใน S2):

• เปิดจากไอคอนแล้วปิดเน็ต (โหมดเครื่องบิน) → รีเฟรช — ต้องยังเห็นของครบ (ข้อมูลอยู่เครื่อง + shell ถูกแคช)
• ลองกดปุ่มต่าง ๆ ดูว่ากดสะดวกไหมบนจอเล็ก

ผลเป็นไงบอกมาได้เลย ถ้าผ่านหมดผมปิด R009 + ปิดโปรเจกต์ให้ ทำความสะอาด process dev ที่ผมเปิดไว้ เสร็จเรียบร้อยครับ ต่อไปผมจะ stage และ commit การแก้ไข เรียบร้อยครับ ตรวจทานไฟล์สุดท้ายแล้วยืนยัน ปรับปุ่มแถวกิจกรรมให้อยู่บรรทัดเดียวกันเรียบร้อยครับ ปรับปุ่มแถวกิจกรรมให้อยู่บรรทัดเดียวกันเรียบร้อยครับ — จากภาพหน้าจอคุณ ปุ่ม ประวัติ ตกไปอยู่บรรทัดที่สอง ผมเบียดขนาดปุ่มกิจกรรมลงเล็กน้อยเพื่อให้ทั้ง 4 ปุ่ม (ย้าย ทิ้ง หมด ประวัติ) อยู่บรรทัดเดียวกันได้ที่จอกว้าง 360px สิ่งที่แก้ (src/styles/main.css)

• .btn-activity: padding เหลือ 0 8px, ฟอนต์ 13px
• .card-actions: gap เหลือ 6px
• ปุ่มยังสูง 44px ตามเกณฑ์แตะง่าย (ข้อ 4.2) แค่เบียดแนวนอน ไม่ได้ลดความสูง

ผลตรวจที่ยืนยันแล้ว

• เปิดจอ items ด้วยเบราว์เซอร์กว้าง 360px: การ์ดผักกาดขาวแสดง ย้าย/ทิ้ง/หมด/ประวัติ ครบ 4 ปุ่มในแถวเดียว ไม่มีปุ่มตกบรรทัด
• npm test 84/84 ผ่าน, npm run build ผ่าน
• commit bf443d4 แล้ว (รวมบันทึกผลใน docs/work/R009/02-result.md)

ขั้นตอนที่เหลือ: ผมยังไม่ได้ push ขึ้น remote — พอ push แล้ว Cloudflare Pages จะ deploy ใหม่ให้อัตโนมัติ จากนั้นเปิด https://sabayjai-pantry-demo.pages.dev บนมือถืออีกครั้งจะเห็นปุ่มเรียงแถวเดียวครับFinal check — ครบตามที่ขอครับ คำขอ: ปุ่มแถวกิจกรรม (ย้าย/ทิ้ง/หมด/ประวัติ) ตกบรรทัดบนจอมือถือ → ขอให้อยู่บรรทัดเดียวกัน

ข้อจำกัดที่เหลือ (ทำไม่ได้จากฝั่งผม):

• ยังไม่ได้ push ขึ้น remote → sabayjai-pantry-demo.pages.dev ยังเป็นเวอร์ชันเก่าที่ปุ่มตกบรรทัด ต้อง push ก่อน Pages จึงจะ deploy ใหม่
• การตรวจบนมือถือจริงของคุณ (เปิดจากไอคอน, ปิดเน็ต) ยังค้างอยู่

ผมขอค้นโค้ด toast ก่อน ผมเห็นปัญหาแล้ว สาเหตุเจอแล้วครับ: toast ถูกวางแบบ left:50% โดยไม่มีความกว้างคงที่ ข้อความไทยที่ไม่มีช่องว่างเลยบีบแคบจนขึ้นเป็นก้อนกลมบังปุ่ม ผมแก้ให้เป็นแถบบาร์กว้างเต็มจอพร้อมปุ่ม Esc ปิด Toast หายไปก่อนจับภาพทัน (หมดเวลา 5 วิ) ผมกดทิ้งอีกใบแล้วจับภาพทันที ตรวจผ่านครบ แก้ toast undo ที่รับไม่ได้เรียบร้อยครับ สาเหตุ: toast ไม่มีกำหนดความกว้างคงที่ ข้อความไทยที่ไม่มีช่องว่างเลยโดน flex บีบจนแคบ กลายเป็นก้อนกลมสีดำบังปุ่มการ์ดอย่างในภาพของคุณ สิ่งที่แก้ (commit 589dfac)

• src/styles/main.css — .toast / .undo-toast เปลี่ยนเป็นแถบบาร์กว้าง min(480px, 100vw−32px) มุม 16px มีเงา รองรับ safe-area มือถือ ข้อความกับปุ่มอยู่แถวเดียวกัน
• src/ui/components.js — กด Esc ปิด toast ได้ (นับว่าหมดสิทธิ์ undo เหมือนปล่อยหมดเวลา) และกัน event listener เก่าค้างตอน toast อันใหม่มาแทน (ของเดิมมีบั๊กแฝง: Esc ครั้งหลังจะไปล้างสิทธิ์ undo ของอันใหม่)

ผลตรวจที่ยืนยันแล้ว (จอ 360px)

• บาร์ขนาด 328×68 ข้อความ ทิ้ง "โยเกิร์ต" 4 ถ้วย อ่านได้เต็ม ปุ่ม ย้อนกลับ (5) อยู่แถวเดียวกัน สูง 44px
• กด Esc แล้ว toast หายจริง
• npm test 84/84 ผ่าน, npm run build ผ่าน

เหลือ: push ขึ้น remote เพื่อให้ Pages deploy ใหม่ (ตอนนี้เว็บจริงยังเป็นเวอร์ชันเก่าอยู่) แล้วเปิดบนมือถือดูอีกครั้งครับFinal check — ครบตามที่ขอครับ คำขอ: toast undo (ก้อนดำ ย้อนกลับ (4)) รับไม่ได้ — บังการ์ด อ่านไม่ออก

ข้อจำกัดที่เหลือ (ต้องใช้คุณ):

• ยังไม่ได้ push → sabayjai-pantry-demo.pages.dev ยังเป็นเวอร์ชันเก่า ต้อง push ก่อน Pages จึง deploy ใหม่
• ตรวจบนมือถือจริงหลัง deploy ใหม่

โทนใหม่ขึ้นแล้ว — แถบสว่างขอบเขียว แยกจากการ์ดขาวชัดเจน ผมปิด toast ทดสอบแล้วรันเช็กสุดท้าย

ปรับกรอบ toast ให้เบาลงแล้วครับ (commit ab68633) สิ่งที่เปลี่ยนรอบนี้: พื้นขาวทึบเหมือนเดิม (อ่านชัด ไม่โปร่งใส) แต่กรอบจากเขียวทึบ → เขียวจาง (color-mix primary 35% คำนวณจากสีหลักของแอปเอง ไม่มีสีใหม่) + เงาเบาลงนิดหน่อย ปุ่ม ย้อนกลับ ยังเขียวทึบเด่นเหมือนเดิม ยืนยันแล้ว: เปิดจอจริง 360px ดูแล้วกรอบบางแยกตัวจากการ์ดได้โดยไม่ตะโกน · npm test 84/84 · build ผ่าน · ปิด dev server แล้ว พอ push ขึ้น remote แล้วเปิดบนมือถือดูอีกทีนะครับ ถ้าโทนนี้โอเคแล้วค่อยปิด R009Final check — ครบทุกคำขอครับ

ยืนยันแล้ว: จอจริง 360px ทุกรอบ (ขนาดบาร์ ข้อความครบ ปุ่มแถวเดียวกัน สูง 44px, Esc ปิดได้, computed style ขาว+ขอบเขียวจาง) · npm test 84/84 exit 0 · npm run build exit 0 — รันหลังไฟล์นิ่งครั้งสุดท้ายแล้ว ไม่มีการแก้ต่อจึงไม่รันซ้ำ · commit 4 ตัวอยู่บน main เรียบร้อย ข้อจำกัดที่เหลือ: ยังไม่ได้ push → เว็บจริงยังเป็นเวอร์ชันเก่า ต้อง push ให้ Pages deploy ใหม่ก่อน แล้วตรวจบนมือถือจริงอีกครั้งก่อนปิด R009