From e9d7b8dc7647ae1574c593cd28343f5f3d5d598d Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Sat, 16 May 2026 10:18:07 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20service=20images=20+=20Arabic=20=D9=8A=20?=
 =?UTF-8?q?dots=20on=20home=20tiles=20(Task=20#552)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two visible bugs reported from the iPad after Task #551 deploy:

1) Only "قهوة سعودي" showed its image on /services. Three other
   seeded services (شاي، بلاك كوفي، عصير طازج) showed a broken-image
   placeholder because the seed only set `imageUrl` for Saudi Coffee.

2) The dots under final ي in the home-grid tile label "خدماتي"
   didn't render on iOS Safari. The label `<span>` didn't pin a
   font-family, so iOS fell back to a Latin face that lacks proper
   Arabic glyphs.

Changes:

- scripts/src/seed.ts:
  • Added `imageUrl` for tea/black-coffee/juice in the insert array
    (covers fresh installs).
  • Added a backfill loop AFTER the insert that fills `imageUrl` on
    existing rows only when the value is currently NULL. Admin-
    customized image URLs are never overwritten — matches the
    existing legacy-rename pattern at lines 395-423.

- artifacts/tx-os/src/pages/home.tsx (AppIconContent label):
  • Added `lang` and `dir` attributes on the tile `<span>`.
  • Pinned an explicit font stack: DIN Next LT Arabic → Helvetica
    Neue LT Arabic → Tajawal for Arabic; Helvetica Neue → system-ui
    for English. The three Arabic faces are already declared in
    custom-fonts.css.

No schema changes, no new dependencies. Verified typecheck passes
and HMR reloaded both files cleanly in the dev server.

Push to Gitea is a separate follow-up (git commit is restricted in
the main agent; platform commits this task's changes on completion,
and the push task can then mirror them to the Mac).
---
 artifacts/tx-os/src/pages/home.tsx | 10 ++++++++++
 scripts/src/seed.ts                | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/artifacts/tx-os/src/pages/home.tsx b/artifacts/tx-os/src/pages/home.tsx
index 9231f43d..c0df9c3a 100644
--- a/artifacts/tx-os/src/pages/home.tsx
+++ b/artifacts/tx-os/src/pages/home.tsx
@@ -135,8 +135,18 @@ function AppIconContent({
         )}
       </div>
       <span
+        lang={lang === "ar" ? "ar" : "en"}
+        dir={lang === "ar" ? "rtl" : "ltr"}
         className="text-[11px] text-foreground/85 font-medium text-center max-w-[78px] block"
         style={{
+          // Pin an Arabic-capable face so iOS Safari doesn't fall back
+          // to a Latin font (which drops the dots under final ي in
+          // labels like "خدماتي"). Falls back to the Latin face for
+          // English labels via the second family in the stack.
+          fontFamily:
+            lang === "ar"
+              ? '"DIN Next LT Arabic", "Helvetica Neue LT Arabic", "Tajawal", sans-serif'
+              : '"Helvetica Neue", system-ui, sans-serif',
           lineHeight: 1.6,
           paddingTop: 2,
           overflow: "hidden",
diff --git a/scripts/src/seed.ts b/scripts/src/seed.ts
index 690eaac0..3301e4fb 100644
--- a/scripts/src/seed.ts
+++ b/scripts/src/seed.ts
@@ -426,6 +426,7 @@ async function main() {
       categoryId: beveragesCat?.id ?? null,
       nameAr: "شاي",
       nameEn: "Tea",
+      imageUrl: "service-images/tea.png",
       price: "0.00",
       isAvailable: true,
       sortOrder: 1,
@@ -443,6 +444,7 @@ async function main() {
       categoryId: beveragesCat?.id ?? null,
       nameAr: "بلاك كوفي",
       nameEn: "Black Coffee",
+      imageUrl: "service-images/black-coffee.png",
       price: "0.00",
       isAvailable: true,
       sortOrder: 3,
@@ -451,6 +453,7 @@ async function main() {
       categoryId: beveragesCat?.id ?? null,
       nameAr: "عصير طازج",
       nameEn: "Fresh Juice",
+      imageUrl: "service-images/juice.png",
       price: "5.00",
       isAvailable: true,
       sortOrder: 5,
@@ -460,6 +463,23 @@ async function main() {
   await db.insert(servicesTable).values(services).onConflictDoNothing({ target: servicesTable.nameEn });
   console.log("Services created");
 
+  // Backfill default imageUrl on existing rows that have a NULL imageUrl
+  // (the insert above is onConflictDoNothing, so existing rows aren't
+  // touched). Only fills NULL — admin-customized URLs are never
+  // overwritten. Re-reads the table so newly-inserted rows are included.
+  const allServicesAfterInsert = await db.select().from(servicesTable);
+  for (const seed of services) {
+    if (!seed.imageUrl) continue;
+    const existing = allServicesAfterInsert.find((s) => s.nameEn === seed.nameEn);
+    if (existing && !existing.imageUrl) {
+      await db
+        .update(servicesTable)
+        .set({ imageUrl: seed.imageUrl })
+        .where(eq(servicesTable.id, existing.id));
+    }
+  }
+  console.log("Service images backfilled for NULL rows");
+
   // ----- Groups: idempotent migration -----
   await db
     .insert(groupsTable)