mod-manager

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface === 'mobile' || e.props.hasSurvey) {
      return next(e)
    }
    // Hidden until the person types /mods.
    if (await read($, isHidden)) {
      return next(e)
    }
    const list = await read($, mods)
    if (list.length === 0) {
      return next(e)
    }
    const off = await read($, disabled)
    const waiting = await read($, pending)
    const dirty = await read($, isDirty)
    const { Box, Text, Button, Select } = $.ui.resolve(e)
    const onCount = list.filter(m => !off.includes(m.name) && !waiting.includes(m.name)).length

    const options = [
      { value: MENU, label: `Mods ▾  ${onCount}/${list.length} on` },
      ...list.map(m => ({
        value: m.name,
        label:
          m.name === SELF
            ? `🔒 ${m.name} · always on`
            : waiting.includes(m.name)
              ? `✦ ${m.name} · new, awaiting your choice`
              : `${off.includes(m.name) ? '○' : '●'} ${m.name} v${m.version}${off.includes(m.name) ? ' · off' : ''} · ${m.source}`,
      })),
      { value: ALL_ON, label: '✓ Enable all' },
      { value: ALL_OFF, label: '✕ Disable all' },
    ]

    return (
      <Box flexDirection="column">
        {waiting.slice(0, 3).map(name => {
          const info = list.find(m => m.name === name)
          return (
            <Box key={`new:${name}`} paddingX={1} gap={1} borderStyle="round" borderColor="magenta">
              <Text bold color="magenta">
                ✦ NEW MOD
              </Text>
              <Text>
                {name}
                {info ? ` v${info.version}` : ''}
              </Text>
              <Text dimColor>enable it for this session?</Text>
              <Button key={`yes:${name}`} variant="primary" label="Enable" onPress={() => decide($, name, true)} />
              <Button key={`no:${name}`} label="Keep off" onPress={() => decide($, name, false)} />
            </Box>
          )
        })}
        <Box paddingX={1} gap={1} borderStyle="round" borderColor={dirty ? 'yellow' : 'cyan'}>
          <Text bold color="cyan">
            ⬢ MODS
          </Text>
          <Select
            key="menu"
            options={options}
            value={MENU}
            onSelect={async v => {
              if (v === MENU) return
              if (v === ALL_ON) return setAll($, true)
              if (v === ALL_OFF) return setAll($, false)
              if (waiting.includes(v)) return decide($, v, true)
              return toggle($, v)
            }}
          />
          {dirty && <Text color="yellow">● pending</Text>}
          {dirty && <Button key="apply" variant="primary" label="↻ Apply" hotkey="a" onPress={() => apply($)} />}
          <Button
            key="panel"
            label="⚙ Manage"
            plain
            dimColor
            hotkey="m"
            onPress={() => $.ui.open({ id: PANE, title: 'Mods' })}
          />
          <Button key="hide" label="✕ Hide" plain dimColor hotkey="h" onPress={() => update($, isHidden, () => true)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const list = await read($, mods)
    const off = await read($, disabled)
    const waiting = await read($, pending)
    const dirty = await read($, isDirty)

    return (
      <Box flexDirection="column" gap={1} padding={1}>
        <Box justifyContent="space-between">
          <Text bold color="cyan">
            ⬢ Mod Manager
          </Text>
          <Text dimColor>
            {list.filter(m => !off.includes(m.name) && !waiting.includes(m.name)).length}/{list.length} on in this
            session
          </Text>
        </Box>
        <Box flexDirection="column">
          {list.map(m => {
            const isNew = waiting.includes(m.name)
            const isOff = off.includes(m.name) || isNew
            const isSelf = m.name === SELF
            return (
              <Box
                key={`row:${m.name}`}
                borderStyle="round"
                borderColor={isNew ? 'magenta' : isOff ? 'gray' : 'green'}
                paddingX={1}
                justifyContent="space-between"
              >
                <Box flexDirection="column">
                  <Text bold dimColor={isOff && !isNew}>
                    {isNew ? '✦' : isOff ? '○' : '●'} {m.name} v{m.version}
                    {isNew ? '  NEW' : ''}
                  </Text>
                  <Text dimColor>{m.source}</Text>
                </Box>
                <Box gap={1}>
                  {isNew && <Button key={`keep:${m.name}`} label="Keep off" onPress={() => decide($, m.name, false)} />}
                  <Button
                    key={`t:${m.name}`}
                    variant={isOff ? 'primary' : 'secondary'}
                    label={isSelf ? '🔒 locked' : isNew ? 'Enable' : isOff ? 'Enable' : 'Disable'}
                    onPress={() => (isNew ? decide($, m.name, true) : toggle($, m.name))}
                  />
                </Box>
              </Box>
            )
          })}
        </Box>
        <Box gap={1}>
          <Button key="on" label="✓ All on" onPress={() => setAll($, true)} />
          <Button key="off" label="✕ All off" onPress={() => setAll($, false)} />
          <Button
            key="default"
            label="★ Save as default"
            onPress={async () => {
              await $.store.set('defaults', await loadOff($))
              $.ui.toast('Saved as the default for new sessions')
            }}
          />
          {dirty && <Button key="apply" variant="primary" label="↻ Apply" onPress={() => apply($)} />}
        </Box>
        {dirty && <Text color="yellow">Changes load when you press Apply (the mods reload).</Text>}
      </Box>
    )
  })