From c118490643114abbdb52f9ab8d916a2ff59cfd65 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Tue, 21 Apr 2026 18:04:17 +0000
Subject: [PATCH] Move the ability to hide the top bar clock into the clock
 settings menu

Integrates the top bar clock's visibility toggle into the ClockStylePicker component and removes the standalone eye button. Updates locale files for Arabic and English to reflect the new string for showing the top bar clock.
---
 .../src/components/clock-style-picker.tsx     | 32 +++++++++++++++++++
 artifacts/teaboy-os/src/locales/ar.json       |  1 +
 artifacts/teaboy-os/src/locales/en.json       |  1 +
 artifacts/teaboy-os/src/pages/home.tsx        | 14 +-------
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/artifacts/teaboy-os/src/components/clock-style-picker.tsx b/artifacts/teaboy-os/src/components/clock-style-picker.tsx
index c16514db..25bd4f3f 100644
--- a/artifacts/teaboy-os/src/components/clock-style-picker.tsx
+++ b/artifacts/teaboy-os/src/components/clock-style-picker.tsx
@@ -21,6 +21,7 @@ import {
   resolveClockHour12,
   useNow,
   useHomeClockVisibility,
+  useTopbarClockVisibility,
 } from "@/components/clock";
 
 type Props = {
@@ -40,6 +41,7 @@ export function ClockStylePicker({ currentStyle, currentHour12 }: Props) {
   const active = resolveClockStyle(currentStyle);
   const activeHour12 = resolveClockHour12(currentHour12);
   const [homeClockVisible, setHomeClockVisible] = useHomeClockVisibility();
+  const [topbarClockVisible, setTopbarClockVisible] = useTopbarClockVisibility();
 
   const choose = (style: ClockStyleType) => {
     const previous = queryClient.getQueryData<AuthUser>(getGetMeQueryKey());
@@ -135,6 +137,36 @@ export function ClockStylePicker({ currentStyle, currentHour12 }: Props) {
             />
           </span>
         </button>
+        <button
+          type="button"
+          onClick={() => setTopbarClockVisible(!topbarClockVisible)}
+          className="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-lg text-start hover:bg-foreground/5 transition-colors mb-1"
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {topbarClockVisible ? (
+              <Eye size={16} className="text-primary shrink-0" />
+            ) : (
+              <EyeOff size={16} className="text-muted-foreground shrink-0" />
+            )}
+            <span className="text-xs text-foreground font-medium truncate">
+              {t("home.clockStyle.showTopbar")}
+            </span>
+          </div>
+          <span
+            className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
+              topbarClockVisible ? "bg-primary" : "bg-foreground/15"
+            }`}
+            aria-hidden="true"
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
+                topbarClockVisible
+                  ? "translate-x-[18px] rtl:-translate-x-[18px]"
+                  : "translate-x-0.5 rtl:-translate-x-0.5"
+              }`}
+            />
+          </span>
+        </button>
         <div className="h-px bg-foreground/10 mx-1 mb-1" />
         <div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           {t("home.clockStyle.hourFormat.label")}
diff --git a/artifacts/teaboy-os/src/locales/ar.json b/artifacts/teaboy-os/src/locales/ar.json
index 4918ed85..b88e5893 100644
--- a/artifacts/teaboy-os/src/locales/ar.json
+++ b/artifacts/teaboy-os/src/locales/ar.json
@@ -81,6 +81,7 @@
     "clockStyle": {
       "label": "نمط الساعة",
       "showWidget": "إظهار ساعة الحائط في الشاشة الرئيسية",
+      "showTopbar": "إظهار الساعة في الشريط العلوي",
       "hideWidget": "إخفاء الساعة",
       "hourFormat": {
         "label": "صيغة الساعة",
diff --git a/artifacts/teaboy-os/src/locales/en.json b/artifacts/teaboy-os/src/locales/en.json
index 24cd07a7..8129bd5c 100644
--- a/artifacts/teaboy-os/src/locales/en.json
+++ b/artifacts/teaboy-os/src/locales/en.json
@@ -81,6 +81,7 @@
     "clockStyle": {
       "label": "Clock style",
       "showWidget": "Show wall clock on home screen",
+      "showTopbar": "Show clock in top bar",
       "hideWidget": "Hide clock",
       "hourFormat": {
         "label": "Hour format",
diff --git a/artifacts/teaboy-os/src/pages/home.tsx b/artifacts/teaboy-os/src/pages/home.tsx
index 36fd1d91..a3a90257 100644
--- a/artifacts/teaboy-os/src/pages/home.tsx
+++ b/artifacts/teaboy-os/src/pages/home.tsx
@@ -21,8 +21,6 @@ import {
   Bell,
   LogOut,
   Globe,
-  Eye,
-  EyeOff,
   Grid2X2,
   Coffee,
   MessageSquare,
@@ -319,7 +317,7 @@ export default function HomePage() {
 
   const gridCols = useGridCols();
   const [homeClockVisible, setHomeClockVisible] = useHomeClockVisibility();
-  const [topbarClockVisible, setTopbarClockVisible] = useTopbarClockVisibility();
+  const [topbarClockVisible] = useTopbarClockVisibility();
   const [clockSize, setClockSize] = useHomeClockSize(user?.id);
   const [clockPos, setClockPos] = useHomeClockPosition(user?.id);
   const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
@@ -468,16 +466,6 @@ export default function HomePage() {
             currentStyle={user?.clockStyle ?? null}
             currentHour12={user?.clockHour12 ?? null}
           />
-          <button
-            type="button"
-            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"
-          >
-            {topbarClockVisible ? <Eye size={18} /> : <EyeOff size={18} />}
-          </button>
           <button
             onClick={toggleLanguage}
             aria-label="Toggle language"