From c1ecdff729efd863b3bcd4f7dc4500fe5fc4e73b Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Wed, 10 Jun 2026 23:36:19 +0330
Subject: [PATCH] Mobile: remove floating MusicToggle overlay (overlapped
 cards/tiles)

The fixed-position music button covered content on mobile. Removed it from
the global overlay; mute now lives in the TopBar icon group (Home), and the
in-game HUD + Profile settings already have their own audio controls.
Tightened the TopBar icon row (p-1.5, gap-1, profile max-w-44%) so the extra
button still fits 360px phones.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/page.tsx                 |  2 --
 src/components/online/TopBar.tsx | 28 +++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8e69f73..ef08b51 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,7 +20,6 @@ import { DailyRewardModal } from "@/components/online/DailyRewardModal";
 import { NotificationToaster } from "@/components/online/NotificationToaster";
 import { ResumeGameBar } from "@/components/online/ResumeGameBar";
 import { CelebrationOverlay } from "@/components/online/CelebrationOverlay";
-import { MusicToggle } from "@/components/online/MusicToggle";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { PublicProfileModal } from "@/components/online/PublicProfileModal";
 import { CapacitorBack } from "@/components/CapacitorBack";
@@ -202,7 +201,6 @@ export default function Page() {
         <NotificationToaster />
         <ResumeGameBar />
         <CelebrationOverlay />
-        <MusicToggle />
         <PublicProfileModal />
       </ErrorBoundary>
       <CapacitorBack />
diff --git a/src/components/online/TopBar.tsx b/src/components/online/TopBar.tsx
index 52335f2..07aa05b 100644
--- a/src/components/online/TopBar.tsx
+++ b/src/components/online/TopBar.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Bell, Crown, Gift, Store } from "lucide-react";
+import { Bell, Crown, Gift, Music, Store } from "lucide-react";
 import { useSessionStore } from "@/lib/session-store";
+import { useSoundStore } from "@/lib/sound-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useNotifStore } from "@/lib/notification-store";
 import { useI18n } from "@/lib/i18n";
@@ -14,6 +15,8 @@ export function TopBar() {
   const go = useUIStore((s) => s.go);
   const openDaily = useUIStore((s) => s.openDaily);
   const unread = useNotifStore((s) => s.unread);
+  const music = useSoundStore((s) => s.music);
+  const toggleMusic = useSoundStore((s) => s.toggleMusic);
   const { t } = useI18n();
   if (!profile) return null;
 
@@ -25,7 +28,7 @@ export function TopBar() {
     <div className="flex items-center justify-between gap-2">
       <button
         onClick={() => go("profile")}
-        className="glass rounded-full ltr:pr-3 rtl:pl-3 ltr:pl-1 rtl:pr-1 py-1 flex items-center gap-2 min-w-0 max-w-[46%] hover:bg-navy-800/80 transition"
+        className="glass rounded-full ltr:pr-3 rtl:pl-3 ltr:pl-1 rtl:pr-1 py-1 flex items-center gap-2 min-w-0 max-w-[44%] hover:bg-navy-800/80 transition"
       >
         <span className="relative size-9 shrink-0 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
           <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
@@ -50,7 +53,22 @@ export function TopBar() {
         </span>
       </button>
 
-      <div className="flex items-center gap-1.5 shrink-0">
+      <div className="flex items-center gap-1 shrink-0">
+        <button
+          onClick={toggleMusic}
+          className="glass rounded-full p-1.5 hover:bg-navy-800/80 transition"
+          title={t("settings.music")}
+          aria-label={t("settings.music")}
+        >
+          {music ? (
+            <Music className="size-4 text-gold-400" />
+          ) : (
+            <span className="relative grid place-items-center">
+              <Music className="size-4 text-cream/40" />
+              <span className="absolute block h-0.5 w-5 rotate-45 rounded bg-rose-400" />
+            </span>
+          )}
+        </button>
         <button
           onClick={() => go("notifications")}
           className="glass rounded-full p-2 hover:bg-navy-800/80 transition relative"
@@ -65,14 +83,14 @@ export function TopBar() {
         </button>
         <button
           onClick={openDaily}
-          className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
+          className="glass rounded-full p-1.5 hover:bg-navy-800/80 transition"
           title={t("daily.title")}
         >
           <Gift className="size-4 text-gold-400" />
         </button>
         <button
           onClick={() => go("shop")}
-          className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
+          className="glass rounded-full p-1.5 hover:bg-navy-800/80 transition"
           title={t("menu.shop")}
         >
           <Store className="size-4 text-gold-400" />