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.

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")}

artifacts/teaboy-os/src/locales/ar.json

@@ -81,6 +81,7 @@
     "clockStyle": {
       "label": "نمط الساعة",
       "showWidget": "إظهار ساعة الحائط في الشاشة الرئيسية",
+      "showTopbar": "إظهار الساعة في الشريط العلوي",
       "hideWidget": "إخفاء الساعة",
       "hourFormat": {
         "label": "صيغة الساعة",

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",

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"