Zum Inhalt

src/hooks/useAspect.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// src/hooks/useAspect.ts
import { createEffect } from 'solid-js';
import { uiState } from '~/stores/uiStore';

// Sets data-aspect on <html> based on context.
// - cinema   → shugo (default)
// - panel="editor" → gunshi
// - recording.active → kantoku
// - audio.active → sensei
// Priority order: recording > audio > editor > shugo.
export function useAspect(): void {
  createEffect(() => {
    let aspect: 'shugo' | 'gunshi' | 'kantoku' | 'sensei' = 'shugo';
    if (uiState.recording.active) aspect = 'kantoku';
    else if (uiState.audio.active) aspect = 'sensei';
    else if (uiState.panel === 'editor') aspect = 'gunshi';
    document.documentElement.dataset.aspect = aspect;
  });
}