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 ( + <> + + 🐸 Midsommar {enabled ? 'on' : 'off'} + + {enabled && ( + { + const turningOn = !soundOn; + toggleSound(); + if (turningOn) playSmaGrodorna(); // this click is a user gesture + }} + > + {soundOn ? '🔊' : '🔇'} Jingle + + )} + + ); +}; 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 (
+ openWindow('agent', 'Overlord Assistant')}>🤖 Assistant