Task #59: Clean home clock tile and tighten My Apps header.

Original ask (Arabic):
- Why does a small "4" appear on the left of the home page?
- Make the clock movable to all positions, default to the visual-left,
  remove its frame, and keep it parallel/aligned with the app icons.

Changes:
- artifacts/teaboy-os/src/pages/home.tsx
  - My Apps header: replaced `justify-between` with `gap-2`, prefixed
    the count with "·" so it now reads "تطبيقاتي · 5" / "MY APPS · 5"
    inline with the title. The standalone count badge that floated to
    the opposite edge in RTL is gone.
  - SortableClockTile inner box: removed the `bg-white/85
    dark:bg-white/10 backdrop-blur-md` and the `icon-tile` rounded card
    classes. The analog clock face now renders directly on the
    wallpaper. Outer width/height (78px compact, 168px large) and the
    hover/active scale animation are preserved so grid alignment with
    the app icons is unchanged.
  - Default clock position is now language-aware: when no per-user
    saved position exists, the clock defaults to the visually-leftmost
    cell of the first row — last DOM index in RTL (Arabic),
    first DOM index in LTR (English).

- artifacts/teaboy-os/src/components/clock.tsx
  - `readHomeClockPosition` now returns -1 as the "unset" sentinel
    instead of 0, so home.tsx can apply a language-aware default
    without overwriting saved positions.

Verification:
- Manual e2e: confirmed header has the inline count, clock has no
  frame, RTL default position is on the visual-left, drag-and-drop
  still persists across reload, long-press still toggles compact ↔
  large. All passed.

Out of scope: no server-side persistence; no changes to the topbar
clock, the dock, or the clock-style picker.

artifacts/teaboy-os/src/components/clock.tsx

@@ -438,14 +438,14 @@ function homeClockPosKey(userId: number | string | null | undefined): string {
 }
 
 function readHomeClockPosition(userId: number | string | null | undefined): number {
-  if (typeof window === "undefined") return 0;
+  if (typeof window === "undefined") return -1;
   try {
     const v = window.localStorage.getItem(homeClockPosKey(userId));
-    if (v === null) return 0;
+    if (v === null) return -1;
     const n = Number(v);
-    return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;
+    return Number.isFinite(n) && n >= 0 ? Math.floor(n) : -1;
   } catch {
-    return 0;
+    return -1;
   }
 }
 

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

@@ -217,7 +217,7 @@ function SortableClockTile({
       onPointerCancel={onPointerUp}
     >
       <div
-        className={`relative icon-tile flex items-center justify-center bg-white/85 dark:bg-white/10 backdrop-blur-md text-foreground group-hover:scale-105 group-active:scale-95 ${
+        className={`relative flex items-center justify-center text-foreground group-hover:scale-105 group-active:scale-95 transition-transform ${
           isLarge ? "w-[168px] h-[168px]" : "w-[78px] h-[78px]"
         }`}
         aria-label="Clock"
@@ -323,11 +323,13 @@ export default function HomePage() {
   const combinedIds = useMemo(() => {
     const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`);
     if (!homeClockVisible) return appIds;
-    const safePos = Math.min(Math.max(clockPos, 0), appIds.length);
+    const defaultPos = lang === "ar" ? appIds.length : 0;
+    const resolvedPos = clockPos < 0 ? defaultPos : clockPos;
+    const safePos = Math.min(Math.max(resolvedPos, 0), appIds.length);
     const out: string[] = [...appIds];
     out.splice(safePos, 0, CLOCK_TILE_ID);
     return out;
-  }, [orderedApps, clockPos, homeClockVisible]);
+  }, [orderedApps, clockPos, homeClockVisible, lang]);
   const sortableIds = combinedIds;
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -521,13 +523,13 @@ export default function HomePage() {
 
         {/* Apps Grid */}
         <div className="mb-4">
-          <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2 mb-4">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               {t("home.myApps")}
             </h3>
             {orderedApps && orderedApps.length > 0 && (
               <span className="text-[11px] text-muted-foreground tabular-nums">
-                {formatNumber(orderedApps.length, lang)}
+                · {formatNumber(orderedApps.length, lang)}
               </span>
             )}
           </div>