feat(midsummer): sidebar frog toggle + jingle toggle (sound stubbed)
This commit is contained in:
parent
580fd6fbc5
commit
2fb6fd2f3e
3 changed files with 38 additions and 0 deletions
34
frontend/src/components/midsummer/FrogToggle.tsx
Normal file
34
frontend/src/components/midsummer/FrogToggle.tsx
Normal file
|
|
@ -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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
|
||||||
import { useWindowManager } from '../../contexts/WindowManagerContext';
|
import { useWindowManager } from '../../contexts/WindowManagerContext';
|
||||||
import { useCurrentUser } from '../../hooks/useCurrentUser';
|
import { useCurrentUser } from '../../hooks/useCurrentUser';
|
||||||
import { logout } from '../../api/endpoints';
|
import { logout } from '../../api/endpoints';
|
||||||
|
import { FrogToggle } from '../midsummer/FrogToggle';
|
||||||
|
|
||||||
export const SidebarWindowButtons: React.FC = () => {
|
export const SidebarWindowButtons: React.FC = () => {
|
||||||
const { openWindow } = useWindowManager();
|
const { openWindow } = useWindowManager();
|
||||||
|
|
@ -15,6 +16,7 @@ export const SidebarWindowButtons: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ml-tool-links">
|
<div className="ml-tool-links">
|
||||||
|
<FrogToggle />
|
||||||
<span className="ml-tool-link" style={{ cursor: 'pointer' }}
|
<span className="ml-tool-link" style={{ cursor: 'pointer' }}
|
||||||
onClick={() => openWindow('agent', 'Overlord Assistant')}>🤖 Assistant</span>
|
onClick={() => openWindow('agent', 'Overlord Assistant')}>🤖 Assistant</span>
|
||||||
<span className="ml-tool-link" style={{ cursor: 'pointer' }}
|
<span className="ml-tool-link" style={{ cursor: 'pointer' }}
|
||||||
|
|
|
||||||
2
frontend/src/hooks/useMidsummerSound.ts
Normal file
2
frontend/src/hooks/useMidsummerSound.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
// Stub — replaced with the full WebAudio synth in Task 8.
|
||||||
|
export function playSmaGrodorna(): void {}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue