Task #61: Add quick hide-clock toggle to home top bar

Added a dedicated Eye/EyeOff icon button next to the existing
ClockStylePicker in the home top bar. Clicking it instantly hides or
shows the home wall-clock widget without opening any popover.

- Wired to the existing useHomeClockVisibility hook so it stays in
  sync with the toggle inside the clock-style popover (same storage
  key + custom event).
- Reuses existing locale keys home.clockStyle.hideWidget /
  home.clockStyle.showWidget for aria-label and title (flips with
  state).
- aria-pressed reflects hidden state for accessibility.
- No new locale keys, no changes to default position behavior, and
  the popover toggle is left intact as requested.

Files:
- artifacts/teaboy-os/src/pages/home.tsx (added Eye/EyeOff imports
  and the new icon button between ClockStylePicker and the language
  toggle).

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 ? <Eye size={18} /> : <EyeOff size={18} />}