Show day name with Hijri and Gregorian dates in home status bar

Task #6: Display today's day name plus Hijri and Gregorian dates in
the home page status bar so users see both calendars at a glance.

Changes (artifacts/teaboy-os/src/pages/home.tsx):
- Compute three values from the existing `time` state via
  Intl.DateTimeFormat:
    * dayName        -> weekday: "long" (ar-SA / en-US)
    * hijriDate      -> ar-SA-u-ca-islamic-umalqura
                        / en-US-u-ca-islamic-umalqura
    * gregorianDate  -> ar-SA-u-ca-gregory / en-US
- Replaced the single time line in the topbar with a 3-row stack:
    Row 1: time (existing bold mono)
    Row 2: day · hijri (small muted)
    Row 3: gregorian   (small muted)
- Added `min-w-0`, `truncate`, and `gap-2` on the topbar flex so
  the date column shrinks gracefully on narrow widths and never
  pushes the username/controls off-screen. Username max-width
  reduced from max-w-32 to max-w-24 to give the centre slot room.

Auto-refresh:
- The existing 1-second `setInterval` already drives the `time`
  state, so all three values naturally roll over at midnight.

Localization:
- ar mode -> ar-SA = Arabic-Indic numerals on all three values.
- en mode -> en-US = Latin numerals.
- No new i18n keys required (separator is a neutral middle dot).

Out of scope (untouched): time format, other status-bar controls,
calendar view, calendar toggle.

Verification: tsc --noEmit passes for teaboy-os. Layout reviewed for
both LTR and RTL: each row truncates within the centre slot and the
flex gap prevents collisions with neighbouring elements.

Re-review fix: previous attempt used a single whitespace-nowrap row
which could overflow on narrow widths; switched to stacked rows with
truncation per the code-review feedback.

Replit-Task-Id: 7c9442ee-4a8d-403a-8bea-1ce8c6d859e9

artifacts/teaboy-os/src/pages/home.tsx

@@ -71,6 +71,17 @@ export default function HomePage() {
     return () => clearInterval(timer);
   }, []);
 
+  const dateLocale = lang === "ar" ? "ar-SA" : "en-US";
+  const dayName = new Intl.DateTimeFormat(dateLocale, { weekday: "long" }).format(time);
+  const hijriDate = new Intl.DateTimeFormat(
+    lang === "ar" ? "ar-SA-u-ca-islamic-umalqura" : "en-US-u-ca-islamic-umalqura",
+    { day: "numeric", month: "long", year: "numeric" },
+  ).format(time);
+  const gregorianDate = new Intl.DateTimeFormat(
+    lang === "ar" ? "ar-SA-u-ca-gregory" : "en-US",
+    { day: "numeric", month: "long", year: "numeric" },
+  ).format(time);
+
   const unreadCount = notifications?.filter((n) => !n.isRead).length ?? stats?.unreadNotifications ?? 0;
 
   const displayName = lang === "ar"
@@ -102,16 +113,26 @@ export default function HomePage() {
   return (
     <div className="min-h-screen os-bg flex flex-col overflow-hidden relative">
       {/* Status Bar */}
-      <div className="topbar-glass px-4 py-3 flex items-center justify-between z-10 sticky top-0">
-        <div className="flex items-center gap-3">
-          <span className="text-foreground font-medium text-sm truncate max-w-32">{displayName}</span>
+      <div className="topbar-glass px-4 py-3 flex items-center justify-between gap-2 z-10 sticky top-0">
+        <div className="flex items-center gap-3 min-w-0 shrink">
+          <span className="text-foreground font-medium text-sm truncate max-w-24">{displayName}</span>
         </div>
 
-        <div className="text-foreground font-mono text-sm font-bold">
-          {time.toLocaleTimeString(lang === "ar" ? "ar-SA" : "en-US", {
-            hour: "2-digit",
-            minute: "2-digit",
-          })}
+        <div className="flex flex-col items-center text-foreground leading-tight min-w-0 px-2">
+          <div className="font-mono text-sm font-bold">
+            {time.toLocaleTimeString(dateLocale, {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </div>
+          <div className="text-[10px] text-muted-foreground flex items-center gap-1 mt-0.5 max-w-full truncate">
+            <span className="truncate">{dayName}</span>
+            <span aria-hidden="true">·</span>
+            <span className="truncate">{hijriDate}</span>
+          </div>
+          <div className="text-[10px] text-muted-foreground max-w-full truncate">
+            {gregorianDate}
+          </div>
         </div>
 
         <div className="flex items-center gap-2">