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.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a6f7b52f-d48d-41b0-9435-36a5f4524394
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
This commit is contained in:
riyadhafraa
2026-04-21 17:53:16 +00:00
parent 4d78628fa1
commit 8b0c5b3984
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 [clockPos, setClockPos] = useHomeClockPosition(user?.id);
const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large"); const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
const appCount = (orderedApps ?? []).length;
const isClockUnset = clockPos < 0; 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 combinedIds = useMemo(() => {
const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`); const appIds = (orderedApps ?? []).map((a) => `app-${a.id}`);
if (!homeClockVisible) return appIds; if (!homeClockVisible) return appIds;
if (isClockUnset) { if (isClockUnset || isClockAtEnd) {
// Default placement: LTR -> visually leftmost (front of array); // Default / dragged-to-end placement: LTR -> front of array;
// RTL -> appended to end and CSS-pinned to the last column of row 1 // 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]; return lang === "ar" ? [...appIds, CLOCK_TILE_ID] : [CLOCK_TILE_ID, ...appIds];
} }
const safePos = Math.min(Math.max(clockPos, 0), appIds.length); const safePos = Math.min(Math.max(clockPos, 0), appIds.length);
const out: string[] = [...appIds]; const out: string[] = [...appIds];
out.splice(safePos, 0, CLOCK_TILE_ID); out.splice(safePos, 0, CLOCK_TILE_ID);
return out; return out;
}, [orderedApps, clockPos, homeClockVisible, lang, isClockUnset]); }, [orderedApps, clockPos, homeClockVisible, lang, isClockUnset, isClockAtEnd]);
const clockPinColumn = isClockUnset && lang === "ar" ? Math.max(gridCols, 1) : undefined; const clockPinColumn = shouldPinFarLeft ? Math.max(gridCols, 1) : undefined;
const sortableIds = combinedIds; const sortableIds = combinedIds;
const handleDragEnd = (event: DragEndEvent) => { const handleDragEnd = (event: DragEndEvent) => {