baton-notify

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Input, Text } = $.ui.resolve(e)
    const s = await read($, settings)
    const sent = await read($, lastSent)
    const toggle = (key: 'enabled' | 'sound' | 'speak' | 'notifyPermission') => () => void save($, now => ({ ...now, [key]: !now[key] }))
    const onOff = (flag: boolean) => (flag ? 'ON' : 'OFF')

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" gap={1}>
          <Button key="enabled" label={`通知：${onOff(s.enabled)}`} hotkey="o" variant={s.enabled ? 'primary' : 'secondary'} onPress={toggle('enabled')} />
          <Button key="permission" label={`許可待ちも通知：${onOff(s.notifyPermission)}`} hotkey="p" variant={s.notifyPermission ? 'primary' : 'secondary'} onPress={toggle('notifyPermission')} />
          <Button key="test" label="テスト通知" hotkey="t" plain onPress={() => void notify($, 'test')} />
        </Box>

        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Button key="sound" label={`音：${onOff(s.sound)}`} hotkey="s" variant={s.sound ? 'primary' : 'secondary'} onPress={toggle('sound')} />
            <Text dimColor>音量</Text>
            {VOLUMES.map(v => (
              <Button
                key={`vol-${v * 100}`}
                label={`${v * 100}%`}
                variant={s.volume === v ? 'primary' : 'secondary'}
                onPress={async () => playSound($, await save($, now => ({ ...now, volume: v })))}
              />
            ))}
          </Box>
          <Text dimColor>音の種類（押すと試聴できます）</Text>
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {SOUNDS.map(name => (
              <Button
                key={`snd-${name}`}
                label={name}
                variant={s.soundName === name ? 'primary' : 'secondary'}
                onPress={async () => playSound($, await save($, now => ({ ...now, soundName: name })))}
              />
            ))}
          </Box>
        </Box>

        <Box flexDirection="column">
          <Button key="speak" label={`読み上げ：${onOff(s.speak)}`} hotkey="v" variant={s.speak ? 'primary' : 'secondary'} onPress={toggle('speak')} />
          <Input key="speakDone" label="完了のときの一言" value={s.speakDone} submitLabel="保存" onSubmit={value => void save($, now => ({ ...now, speakDone: value }))} />
          <Input key="speakAsk" label="質問・許可待ちのときの一言" value={s.speakAsk} submitLabel="保存" onSubmit={value => void save($, now => ({ ...now, speakAsk: value }))} />
          <Text dimColor>読み上げは「フォルダ名、一言」の形でしゃべります。</Text>
        </Box>

        {sent && <Text dimColor>{`最後の通知：${sent}`}</Text>}
        <Text dimColor>/baton on・/baton off ですぐ切り替えられます。設定は全セッション共通です。</Text>
      </Box>
    )
  })