From 2fb6fd2f3e9abf59596fa68d4ccb0fbc4376f694 Mon Sep 17 00:00:00 2001
From: Erik <erik.nihlen@gmail.com>
Date: Fri, 19 Jun 2026 09:26:45 +0200
Subject: [PATCH] feat(midsummer): sidebar frog toggle + jingle toggle (sound
 stubbed)

---
 .../src/components/midsummer/FrogToggle.tsx   | 34 +++++++++++++++++++
 .../sidebar/SidebarWindowButtons.tsx          |  2 ++
 frontend/src/hooks/useMidsummerSound.ts       |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 frontend/src/components/midsummer/FrogToggle.tsx
 create mode 100644 frontend/src/hooks/useMidsummerSound.ts

diff --git a/frontend/src/components/midsummer/FrogToggle.tsx b/frontend/src/components/midsummer/FrogToggle.tsx
new file mode 100644
index 00000000..c408ef03
--- /dev/null
+++ b/frontend/src/components/midsummer/FrogToggle.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useMidsummer } from '../../hooks/useMidsummer';
+import { playSmaGrodorna } from '../../hooks/useMidsummerSound';
+
+/** 🐸 theme toggle + 🔊 jingle toggle, rendered among the sidebar tool links. */
+export const FrogToggle: React.FC = () => {
+  const { enabled, toggle, soundOn, toggleSound } = useMidsummer();
+  return (
+    <>
+      <span
+        className="ml-tool-link"
+        style={{ cursor: 'pointer' }}
+        title={enabled ? 'Turn off the midsummer theme' : 'Turn on the midsummer theme'}
+        onClick={toggle}
+      >
+        🐸 Midsommar {enabled ? 'on' : 'off'}
+      </span>
+      {enabled && (
+        <span
+          className="ml-tool-link"
+          style={{ cursor: 'pointer' }}
+          title={soundOn ? 'Mute the Små grodorna jingle' : 'Unmute the Små grodorna jingle'}
+          onClick={() => {
+            const turningOn = !soundOn;
+            toggleSound();
+            if (turningOn) playSmaGrodorna(); // this click is a user gesture
+          }}
+        >
+          {soundOn ? '🔊' : '🔇'} Jingle
+        </span>
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/components/sidebar/SidebarWindowButtons.tsx b/frontend/src/components/sidebar/SidebarWindowButtons.tsx
index 5344c42d..0f5e43dc 100644
--- a/frontend/src/components/sidebar/SidebarWindowButtons.tsx
+++ b/frontend/src/components/sidebar/SidebarWindowButtons.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useWindowManager } from '../../contexts/WindowManagerContext';
 import { useCurrentUser } from '../../hooks/useCurrentUser';
 import { logout } from '../../api/endpoints';
+import { FrogToggle } from '../midsummer/FrogToggle';
 
 export const SidebarWindowButtons: React.FC = () => {
   const { openWindow } = useWindowManager();
@@ -15,6 +16,7 @@ export const SidebarWindowButtons: React.FC = () => {
 
   return (
     <div className="ml-tool-links">
+      <FrogToggle />
       <span className="ml-tool-link" style={{ cursor: 'pointer' }}
         onClick={() => openWindow('agent', 'Overlord Assistant')}>🤖 Assistant</span>
       <span className="ml-tool-link" style={{ cursor: 'pointer' }}
diff --git a/frontend/src/hooks/useMidsummerSound.ts b/frontend/src/hooks/useMidsummerSound.ts
new file mode 100644
index 00000000..6e4ffe30
--- /dev/null
+++ b/frontend/src/hooks/useMidsummerSound.ts
@@ -0,0 +1,2 @@
+// Stub — replaced with the full WebAudio synth in Task 8.
+export function playSmaGrodorna(): void {}