feat(midsummer): sidebar frog toggle + jingle toggle (sound stubbed)

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>
+      )}
+    </>
+  );
+};