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 ? : }