diff --git a/artifacts/teaboy-os/src/pages/home.tsx b/artifacts/teaboy-os/src/pages/home.tsx index fe01f8c5..c56d904f 100644 --- a/artifacts/teaboy-os/src/pages/home.tsx +++ b/artifacts/teaboy-os/src/pages/home.tsx @@ -324,25 +324,30 @@ export default function HomePage() { const appCount = (orderedApps ?? []).length; const isClockUnset = clockPos < 0; - const isClockAtEnd = clockPos >= appCount; - // Pin to the actual far-left cell of row 1 (in RTL) whenever the clock - // is at the end of the order — either by default or because the user - // dragged it past the last app. This lets users reach the absolute - // leftmost cell even when there are fewer apps than columns. - const shouldPinFarLeft = (isClockUnset || isClockAtEnd) && lang === "ar" && homeClockVisible; + // Only meaningful in RTL: when the user drags the clock past the last + // app, treat it as "pin to the absolute far-left cell" so they can + // reach that cell even when there are fewer apps than columns. + // In LTR the far-right is already reachable naturally so we don't + // hijack the saved index there. + const isRtlClockAtEnd = lang === "ar" && clockPos >= appCount; + const shouldPinFarLeft = (isClockUnset || isRtlClockAtEnd) && lang === "ar" && homeClockVisible; const combinedIds = useMemo(() => { const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`); if (!homeClockVisible) return appIds; - if (isClockUnset || isClockAtEnd) { - // Default / dragged-to-end placement: LTR -> front of array; + if (isClockUnset) { + // Default placement: LTR -> front of array (visually leftmost); // RTL -> appended to end and CSS-pinned to the last column of row 1. return lang === "ar" ? [...appIds, CLOCK_TILE_ID] : [CLOCK_TILE_ID, ...appIds]; } + if (isRtlClockAtEnd) { + // RTL only: user dragged clock to / past the end -> pin far-left. + return [...appIds, CLOCK_TILE_ID]; + } 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, isClockUnset, isClockAtEnd]); + }, [orderedApps, clockPos, homeClockVisible, lang, isClockUnset, isRtlClockAtEnd]); const clockPinColumn = shouldPinFarLeft ? Math.max(gridCols, 1) : undefined; const sortableIds = combinedIds; @@ -464,7 +469,7 @@ export default function HomePage() { onClick={() => setHomeClockVisible(!homeClockVisible)} aria-label={t(homeClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")} title={t(homeClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")} - aria-pressed={!homeClockVisible} + aria-pressed={homeClockVisible} className="text-muted-foreground hover:text-foreground transition-colors p-1.5 rounded-lg hover:bg-foreground/5" > {homeClockVisible ? : }