Fix service images + Arabic ي dots on home tiles (Task #552)

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).
This commit is contained in:
Riyadh
2026-05-16 10:18:07 +00:00
parent 723ae1006b
commit 4157bd00b4
2 changed files with 30 additions and 0 deletions
+10
View File
@@ -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",