Add responsive branded header and sound controls

2026-03-09 06:54:47 +01:00
parent a65037e3b3
commit 9d76eabb39
16 changed files with 616 additions and 136 deletions
@@ -3,6 +3,7 @@
 import { useTranslations } from "next-intl";

 import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { cn } from "@/lib/utils";

@@ -21,6 +22,12 @@ export function FloatingPreferences({
    <div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
      <div className="mx-auto flex w-full justify-center">
        <div className="inline-flex items-center justify-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 shadow-panel backdrop-blur-chrome">
+          <SoundToggle
+            ariaLabel={t("soundMute")}
+            mutedAriaLabel={t("soundUnmute")}
+            variant="ghost"
+            className="h-9 w-9 rounded-pill border border-transparent bg-transparent text-foreground/80 hover:bg-accent hover:text-foreground"
+          />
          <ThemeToggle
            ariaLabel={t("themeToggle")}
            variant="ghost"