Task #509: Redesign Edit App modal + verify responsive sizing

User asked for the Edit App modal to match the new professional Edit
Service design and confirmed responsiveness for iPad / mobile.

Changes — admin.tsx only:

1. New shell matching Edit Service modal:
   - bg-slate-950/50 backdrop-blur-md overlay, click-outside-to-close,
     fade + zoom-in animations.
   - White rounded-2xl container, max-w-2xl (wider than Service modal
     because of the additional fields + permissions list), max-h-[90vh],
     flex column with sticky-feeling header / footer.
   - Header tile is now LIVE — its gradient color comes from the
     editing app's color field, and the icon comes from the app's
     iconName via a new resolveAppIcon() helper. So the header
     previews the app as you edit.
   - X close button in header.

2. Form layout:
   - Names row (sm:grid-cols-2): nameAr (RTL, ع badge) | nameEn (LTR,
     EN badge).
   - Identifier row (sm:grid-cols-2): slug | route, both font-mono.
   - Visuals row (sm:grid-cols-2):
     - Icon picker: 40x40 preview tile + text input. Tile shows the
       resolved Lucide icon, or a dashed HelpCircle when the name
       doesn't resolve. Hint text under the field.
     - Color picker: clickable color swatch wrapping a hidden native
       <input type=color> + hex text input. Both stay in sync.
   - Permissions wrapped in a bordered card with its own header strip.

3. Footer: Cancel (outline) + Save (gradient indigo→blue, shadow),
   each flex-1 h-10 rounded-lg.

4. New helper resolveAppIcon() above the imports — does a safe lookup
   into the lucide-react namespace and returns null when the name is
   invalid. Mirrors the pattern already used in pages/home.tsx.

Responsiveness verified by reasoning over breakpoints:
- Mobile (≤414px): sm: never kicks in, so all rows stack into one
  column; outer p-4 keeps gutters; max-h-[90vh] + scroll handles tall
  permissions.
- iPad portrait (768px) and up: sm:grid-cols-2 activates, two-column
  layout fits comfortably inside max-w-2xl (672px).
- Desktop: same max-w-2xl cap looks well-proportioned, not cramped.
- Edit Service modal already uses the same primitives, no changes
  needed.

No behavioral changes — all state wiring (editingApp, handleSaveApp,
permission flows, history sections) is unchanged. Pure presentational
refactor.

Code review: skipped — presentational refactor with no logic / data
flow changes.
Follow-ups: none proposed — request fully addressed; the other admin
modals are deliberately out of scope per the plan.

artifacts/tx-os/src/pages/admin.tsx

@@ -138,7 +138,17 @@ import { useQueryClient, useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUpload, type UploadResponse } from "@workspace/object-storage-web";
 import { resolveServiceImageUrl } from "@/lib/image-url";
-import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power } from "lucide-react";
+import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power, HelpCircle, Palette, Link2, Hash, type LucideIcon } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+
+function resolveAppIcon(name: string): LucideIcon | null {
+  if (!name) return null;
+  const Candidate = (LucideIcons as Record<string, unknown>)[name];
+  if (typeof Candidate === "function" || (typeof Candidate === "object" && Candidate !== null)) {
+    return Candidate as LucideIcon;
+  }
+  return null;
+}
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -1183,76 +1193,250 @@ export default function AdminPage() {
       </div>
 
       {/* Edit App Modal */}
-      {editingApp && (
-        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4 max-h-[90vh] overflow-y-auto">
-            <h2 className="font-semibold text-foreground">
-              {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
-            </h2>
-            {(
-              [
-                { field: "nameAr", label: t("admin.appNameAr") },
-                { field: "nameEn", label: t("admin.appNameEn") },
-                { field: "slug", label: t("admin.appSlug") },
-                { field: "iconName", label: t("admin.appIcon") },
-                { field: "route", label: t("admin.appRoute") },
-                { field: "color", label: t("admin.appColor") },
-              ] as { field: keyof AppForm; label: string }[]
-            ).map(({ field, label }) => (
-              <div key={field} className="space-y-1">
-                <Label>{label}</Label>
-                <Input
-                  value={String(editingApp.form[field])}
-                  onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, [field]: e.target.value } })}
-                  className="bg-white/70 border-slate-200"
-                />
+      {editingApp && (() => {
+        const PreviewIcon = resolveAppIcon(editingApp.form.iconName);
+        const previewColor = /^#[0-9a-fA-F]{6}$/.test(editingApp.form.color)
+          ? editingApp.form.color
+          : "#6366f1";
+        return (
+        <div
+          className="fixed inset-0 bg-slate-950/50 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-150"
+          onClick={(e) => { if (e.target === e.currentTarget) setEditingApp(null); }}
+        >
+          <div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] flex flex-col shadow-2xl border border-slate-200/80 overflow-hidden animate-in zoom-in-95 duration-150">
+            {/* Header */}
+            <div className="flex items-start justify-between gap-3 px-5 sm:px-6 pt-5 pb-4 border-b border-slate-100">
+              <div className="flex items-center gap-3 min-w-0">
+                <div
+                  className="shrink-0 w-10 h-10 rounded-xl text-white flex items-center justify-center shadow-md"
+                  style={{
+                    background: `linear-gradient(135deg, ${previewColor}, ${previewColor}cc)`,
+                    boxShadow: `0 6px 18px ${previewColor}40`,
+                  }}
+                >
+                  {PreviewIcon ? <PreviewIcon size={18} /> : <LayoutDashboard size={18} />}
+                </div>
+                <div className="min-w-0">
+                  <h2 className="font-semibold text-slate-900 text-base leading-tight truncate">
+                    {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
+                  </h2>
+                  <p className="text-xs text-slate-500 mt-0.5 truncate">
+                    {editingApp.id
+                      ? (lang === "ar" ? "حدّث تفاصيل التطبيق وأذوناته" : "Update app details and permissions")
+                      : (lang === "ar" ? "أضف تطبيقاً جديداً للوحة" : "Add a new app to the launcher")}
+                  </p>
+                </div>
               </div>
-            ))}
-            {editingApp.id !== undefined ? (
-              <AppPermissionsEditor appId={editingApp.id} />
-            ) : (
-              <NewAppPermissionsPicker
-                selectedIds={editingApp.form.permissionIds}
-                onChange={(next) =>
-                  setEditingApp({
-                    ...editingApp,
-                    form: { ...editingApp.form, permissionIds: next },
-                  })
-                }
-              />
-            )}
-            {editingApp.id !== undefined && (
-              <PermissionAuditHistory
-                targetKind="app"
-                targetId={editingApp.id}
-                enabled={true}
-                language={lang}
-                scopeI18nKey="admin.apps.history"
-                changeKindLabel={null}
-                labelResolver={(_ck, id) => {
-                  const p = (permissionsList ?? []).find((x) => x.id === id);
-                  return p ? p.name : `#${id}`;
-                }}
-              />
-            )}
-            {editingApp.id !== undefined && (
-              <RecentActivityForTarget
-                targetType="app"
-                targetId={editingApp.id}
-                enabled={true}
-                lang={lang}
-                onViewFullHistory={() =>
-                  openAuditLogForTarget("app", editingApp.id!)
-                }
-              />
-            )}
-            <div className="flex gap-2">
-              <Button variant="outline" className="flex-1" onClick={() => setEditingApp(null)}>{t("common.cancel")}</Button>
-              <Button className="flex-1" onClick={handleSaveApp}>{t("common.save")}</Button>
+              <button
+                type="button"
+                onClick={() => setEditingApp(null)}
+                className="shrink-0 -m-1 p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
+                aria-label={t("common.cancel")}
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            {/* Body */}
+            <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
+              {/* Names row */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">ع</span>
+                    {t("admin.appNameAr")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.nameAr}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameAr: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="rtl"
+                    placeholder="الملاحظات"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">EN</span>
+                    {t("admin.appNameEn")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.nameEn}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameEn: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="Notes"
+                  />
+                </div>
+              </div>
+
+              {/* Identifier row */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Hash size={12} className="text-slate-500" />
+                    {t("admin.appSlug")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.slug}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, slug: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="notes"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Link2 size={12} className="text-slate-500" />
+                    {t("admin.appRoute")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.route}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, route: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="/notes"
+                  />
+                </div>
+              </div>
+
+              {/* Visuals row — icon + color with live previews */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {/* Icon picker */}
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Grid2X2 size={12} className="text-slate-500" />
+                    {t("admin.appIcon")}
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={cn(
+                        "shrink-0 w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                        PreviewIcon
+                          ? "border-slate-200 bg-white text-slate-700"
+                          : "border-dashed border-slate-300 bg-slate-50 text-slate-300"
+                      )}
+                      title={PreviewIcon ? editingApp.form.iconName : (lang === "ar" ? "اسم أيقونة غير معروف" : "Unknown icon name")}
+                    >
+                      {PreviewIcon ? <PreviewIcon size={18} /> : <HelpCircle size={18} />}
+                    </div>
+                    <Input
+                      value={editingApp.form.iconName}
+                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, iconName: e.target.value } })}
+                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                      dir="ltr"
+                      placeholder="StickyNote"
+                    />
+                  </div>
+                  <p className="text-[11px] text-slate-400 leading-snug">
+                    {lang === "ar" ? "اسم أيقونة من Lucide (مثل: StickyNote, Coffee, Users)" : "Lucide icon name (e.g. StickyNote, Coffee, Users)"}
+                  </p>
+                </div>
+
+                {/* Color picker */}
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Palette size={12} className="text-slate-500" />
+                    {t("admin.appColor")}
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <label
+                      className="shrink-0 relative w-10 h-10 rounded-lg border border-slate-200 cursor-pointer overflow-hidden shadow-sm hover:ring-2 hover:ring-indigo-500/30 transition"
+                      style={{ backgroundColor: previewColor }}
+                      title={lang === "ar" ? "اختر اللون" : "Pick color"}
+                    >
+                      <input
+                        type="color"
+                        value={previewColor}
+                        onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
+                        className="absolute inset-0 opacity-0 cursor-pointer"
+                      />
+                    </label>
+                    <Input
+                      value={editingApp.form.color}
+                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
+                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono uppercase focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                      dir="ltr"
+                      placeholder="#6366F1"
+                    />
+                  </div>
+                  <p className="text-[11px] text-slate-400 leading-snug">
+                    {lang === "ar" ? "كود اللون السداسي (مثل #6366F1)" : "Hex color code (e.g. #6366F1)"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Permissions section in a bordered card */}
+              <div className="rounded-xl border border-slate-200 bg-slate-50/40 overflow-hidden">
+                <div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-200 bg-white/60">
+                  <Shield size={14} className="text-slate-500" />
+                  <span className="text-xs font-semibold text-slate-700">
+                    {lang === "ar" ? "الأذونات" : "Permissions"}
+                  </span>
+                </div>
+                <div className="p-3">
+                  {editingApp.id !== undefined ? (
+                    <AppPermissionsEditor appId={editingApp.id} />
+                  ) : (
+                    <NewAppPermissionsPicker
+                      selectedIds={editingApp.form.permissionIds}
+                      onChange={(next) =>
+                        setEditingApp({
+                          ...editingApp,
+                          form: { ...editingApp.form, permissionIds: next },
+                        })
+                      }
+                    />
+                  )}
+                </div>
+              </div>
+
+              {editingApp.id !== undefined && (
+                <PermissionAuditHistory
+                  targetKind="app"
+                  targetId={editingApp.id}
+                  enabled={true}
+                  language={lang}
+                  scopeI18nKey="admin.apps.history"
+                  changeKindLabel={null}
+                  labelResolver={(_ck, id) => {
+                    const p = (permissionsList ?? []).find((x) => x.id === id);
+                    return p ? p.name : `#${id}`;
+                  }}
+                />
+              )}
+              {editingApp.id !== undefined && (
+                <RecentActivityForTarget
+                  targetType="app"
+                  targetId={editingApp.id}
+                  enabled={true}
+                  lang={lang}
+                  onViewFullHistory={() =>
+                    openAuditLogForTarget("app", editingApp.id!)
+                  }
+                />
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex gap-2 px-5 sm:px-6 py-4 border-t border-slate-100 bg-slate-50/40">
+              <Button
+                variant="outline"
+                className="flex-1 h-10 rounded-lg border-slate-200 hover:bg-slate-100"
+                onClick={() => setEditingApp(null)}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                className="flex-1 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 shadow-md shadow-indigo-500/20"
+                onClick={handleSaveApp}
+              >
+                {t("common.save")}
+              </Button>
             </div>
           </div>
         </div>
-      )}
+        );
+      })()}
 
       {/* Edit Service Modal */}
       {editingService && (