Add ability to hide the top bar clock display independently

Introduced a new hook `useTopbarClockVisibility` in `artifacts/teaboy-os/src/components/clock.tsx` to manage the visibility of the top bar clock, separate from the home clock widget. Updated `artifacts/teaboy-os/src/pages/home.tsx` to utilize this new hook, allowing the eye icon to toggle the top bar clock's visibility.

artifacts/teaboy-os/src/components/clock.tsx

@@ -384,6 +384,50 @@ export function useHomeClockVisibility(): [boolean, (next: boolean) => void] {
   return [visible, setVisible];
 }
 
+const TOPBAR_CLOCK_STORAGE_KEY = "teaboy:topbar-clock-visible";
+const TOPBAR_CLOCK_EVENT = "teaboy:topbar-clock-changed";
+
+function readTopbarClockVisible(): boolean {
+  if (typeof window === "undefined") return true;
+  try {
+    const v = window.localStorage.getItem(TOPBAR_CLOCK_STORAGE_KEY);
+    return v === null ? true : v === "1";
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Visibility for the small clock displayed in the home page top bar.
+ * Independent of useHomeClockVisibility, which controls the large
+ * grid widget on the home screen.
+ */
+export function useTopbarClockVisibility(): [boolean, (next: boolean) => void] {
+  const [visible, setVisibleState] = useState<boolean>(readTopbarClockVisible);
+
+  useEffect(() => {
+    const onChange = () => setVisibleState(readTopbarClockVisible());
+    window.addEventListener(TOPBAR_CLOCK_EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+      window.removeEventListener(TOPBAR_CLOCK_EVENT, onChange);
+      window.removeEventListener("storage", onChange);
+    };
+  }, []);
+
+  const setVisible = (next: boolean) => {
+    try {
+      window.localStorage.setItem(TOPBAR_CLOCK_STORAGE_KEY, next ? "1" : "0");
+    } catch {
+      /* ignore */
+    }
+    setVisibleState(next);
+    window.dispatchEvent(new Event(TOPBAR_CLOCK_EVENT));
+  };
+
+  return [visible, setVisible];
+}
+
 const HOME_CLOCK_SIZE_EVENT = "teaboy:home-clock-size-changed";
 export type HomeClockSize = "compact" | "large";
 

artifacts/teaboy-os/src/pages/home.tsx

@@ -58,6 +58,7 @@ import {
   useNow,
   AnalogClockWidget,
   useHomeClockVisibility,
+  useTopbarClockVisibility,
   useHomeClockSize,
   useHomeClockPosition,
   type HomeClockSize,
@@ -318,6 +319,7 @@ export default function HomePage() {
 
   const gridCols = useGridCols();
   const [homeClockVisible, setHomeClockVisible] = useHomeClockVisibility();
+  const [topbarClockVisible, setTopbarClockVisible] = useTopbarClockVisibility();
   const [clockSize, setClockSize] = useHomeClockSize(user?.id);
   const [clockPos, setClockPos] = useHomeClockPosition(user?.id);
   const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
@@ -449,7 +451,7 @@ export default function HomePage() {
         </div>
 
         {/* Clock + dates */}
-        {homeClockVisible && (
+        {topbarClockVisible && (
           <div className="px-2 shrink-0">
             <Clock
               style={user?.clockStyle ?? null}
@@ -468,13 +470,13 @@ export default function HomePage() {
           />
           <button
             type="button"
-            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}
+            onClick={() => setTopbarClockVisible(!topbarClockVisible)}
+            aria-label={t(topbarClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")}
+            title={t(topbarClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")}
+            aria-pressed={topbarClockVisible}
             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} />}
+            {topbarClockVisible ? <Eye size={18} /> : <EyeOff size={18} />}
           </button>
           <button
             onClick={toggleLanguage}