rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow clock to be pinned to the far left in RTL mode

Browse Source 
Update home component logic to correctly pin the clock to the far-left position in RTL layouts when it's unset or dragged to the end of the app list, ensuring it occupies the first two columns.
This commit is contained in:
Riyadh
2026-04-21 17:53:16 +00:00
parent d2250b99d1
commit c173ee28d1
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/teaboy-os/src/pages/home.tsx
+12 -6
View File
@@ -320,22 +320,28 @@ export default function HomePage() {
const [clockPos, setClockPos] = useHomeClockPosition(user?.id);
const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
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;
const combinedIds = useMemo(() => {
const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`);
if (!homeClockVisible) return appIds;
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).
if (isClockUnset || isClockAtEnd) {
// Default / dragged-to-end placement: LTR -> front of array;
// 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];
}
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]);
const clockPinColumn = isClockUnset && lang === "ar" ? Math.max(gridCols, 1) : undefined;
}, [orderedApps, clockPos, homeClockVisible, lang, isClockUnset, isClockAtEnd]);
const clockPinColumn = shouldPinFarLeft ? Math.max(gridCols, 1) : undefined;
const sortableIds = combinedIds;
const handleDragEnd = (event: DragEndEvent) => {