Set clock to the far left by default in Arabic mode

Modify the home page component to allow the clock tile to be pinned to the leftmost grid column in RTL layouts when its position is unset.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1bb970e6-955c-4abc-a859-c78241c792f1
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/PwtbShH
Replit-Helium-Checkpoint-Created: true

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

@@ -155,12 +155,14 @@ function SortableClockTile({
   hour12,
   size,
   onToggleSize,
+  pinColumn,
 }: {
   time: Date;
   lang: string;
   hour12: boolean | null | undefined;
   size: HomeClockSize;
   onToggleSize: () => void;
+  pinColumn?: number;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: CLOCK_TILE_ID,
@@ -171,6 +173,9 @@ function SortableClockTile({
     opacity: isDragging ? 0.6 : 1,
     zIndex: isDragging ? 20 : "auto",
     touchAction: "none",
+    ...(pinColumn && !isDragging
+      ? { gridColumnStart: pinColumn, gridRowStart: 1 }
+      : {}),
   };
 
   const longPressTimer = useRef<number | null>(null);
@@ -314,18 +319,22 @@ export default function HomePage() {
   const [clockPos, setClockPos] = useHomeClockPosition(user?.id);
   const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
 
+  const isClockUnset = clockPos < 0;
   const combinedIds = useMemo(() => {
     const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`);
     if (!homeClockVisible) return appIds;
-    const cols = gridCols;
-    const lastOfFirstRow = Math.min(appIds.length, Math.max(cols - 1, 0));
-    const defaultPos = lang === "ar" ? lastOfFirstRow : 0;
-    const resolvedPos = clockPos < 0 ? defaultPos : clockPos;
-    const safePos = Math.min(Math.max(resolvedPos, 0), appIds.length);
+    if (isClockUnset) {
+      // Default placement: LTR -> visually leftmost (front of array);
+      // RTL -> appended to end and CSS-pinned to the last column of row 1
+      // (truly far-left in RTL, even if there are fewer apps than columns).
+      return lang === "ar" ? [...appIds, CLOCK_TILE_ID] : [CLOCK_TILE_ID, ...appIds];
+    }
+    const safePos = Math.min(Math.max(clockPos, 0), appIds.length);
     const out: string[] = [...appIds];
     out.splice(safePos, 0, CLOCK_TILE_ID);
     return out;
-  }, [orderedApps, clockPos, homeClockVisible, lang, gridCols]);
+  }, [orderedApps, clockPos, homeClockVisible, lang, isClockUnset]);
+  const clockPinColumn = isClockUnset && lang === "ar" ? Math.max(gridCols, 1) : undefined;
   const sortableIds = combinedIds;
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -525,6 +534,7 @@ export default function HomePage() {
                           hour12={user?.clockHour12 ?? null}
                           size={clockSize}
                           onToggleSize={toggleClockSize}
+                          pinColumn={clockPinColumn}
                         />
                       );
                     }