cache-timer

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => {
    // The mobile app has no Select; it has not drawn mod UI so far either.
    if (e.props.hasSurvey || e.surface === 'mobile') {
      return next(e)
    }

    const isDesktop = e.surface === 'desktop'
    const { Box, Button, Select, Text } = $.ui.resolve(e)
    const Svg = isDesktop ? $.ui.resolve(e).Svg : undefined
    const auto = isAutoCompact()
    const notify = isNotify()
    const thresholdNow = thresholdK()
    const leadNow = notifyLeadMin()
    const thresholds = THRESHOLD_PRESETS_K.includes(thresholdNow) ? THRESHOLD_PRESETS_K : [...THRESHOLD_PRESETS_K, thresholdNow]
    const leads = NOTIFY_LEAD_PRESETS_MIN.includes(leadNow) ? NOTIFY_LEAD_PRESETS_MIN : [...NOTIFY_LEAD_PRESETS_MIN, leadNow]
    const filled = view.left === null ? 0 : Math.round(BAR_CELLS * view.left)

    const state = (paths: string, isOn: boolean, word: string, alt: string) =>
      Svg !== undefined ? (
        <Svg source={icon(paths, isOn ? ON : OFF)} alt={`${alt} ${isOn ? 'on' : 'off'}`} width={14} height={14} />
      ) : (
        <Text color={isOn ? 'success' : 'inactive'}>{word}</Text>
      )

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between" gap={2}>
          <Box flexDirection="row" alignItems="center" gap={1}>
            {Svg !== undefined ? <Svg source={icon(CLOCK, OFF)} alt="cache" width={14} height={14} /> : <Text dimColor>cache</Text>}
            <Text bold>{view.time}</Text>
            {view.left === null ? null : Svg !== undefined ? (
              <Svg source={bar(view.left)} alt={`${Math.round(view.left * 100)}% left`} width={80} height={4} />
            ) : (
              <Text>
                <Text color={view.left > 0.2 ? 'success' : 'warning'}>{'━'.repeat(filled)}</Text>
                <Text dimColor>{'─'.repeat(BAR_CELLS - filled)}</Text>
              </Text>
            )}
            <Text dimColor>{view.detail}</Text>
          </Box>
          <Box flexDirection="row" alignItems="center" gap={1}>
            {state(COMPRESS, auto, 'compact', 'auto-compact')}
            {state(BELL, notify, 'notify', 'notify')}
            <Button key="settings" label="⚙" plain dimColor={!isExpanded} onPress={() => {
              isExpanded = !isExpanded
              $.ui.invalidate('ui.render')
            }} />
          </Box>
        </Box>
        {isExpanded ? (
          <Box flexDirection="row" alignItems="center" gap={1}>
            <Button key="auto" label="compact" variant={auto ? 'primary' : 'secondary'} onPress={() => setOption($, 'auto_compact', !auto)} />
            <Select
              key="threshold"
              options={thresholds.map(k => ({ value: String(k), label: `≥${k}k` }))}
              value={String(thresholdNow)}
              onSelect={(value: string) => setOption($, 'threshold_k', Number(value))}
            />
            <Text dimColor>│</Text>
            <Button key="notify" label="notify" variant={notify ? 'primary' : 'secondary'} onPress={() => setOption($, 'notify', !notify)} />
            <Select
              key="notify_lead"
              options={leads.map(m => ({ value: String(m), label: `${m}m before` }))}
              value={String(leadNow)}
              onSelect={(value: string) => setOption($, 'notify_lead_minutes', Number(value))}
            />
          </Box>
        ) : null}
      </Box>
    )
  })