popup.js

import { BLOCKED_DOMAINS } from './blocklist.js'

// Cross-browser API handle — see background.js for the rationale. Firefox needs
// the promise-based `browser` namespace; everyone else uses promise-based `chrome`.
const chrome = globalThis.browser ?? globalThis.chrome

const KEY_ACTIVE = 'focusActive'
const KEY_DOMAINS = 'domains'
const KEY_CONNECTED = 'appConnected'

const titleEl = document.getElementById('status-title')
const subEl = document.getElementById('status-sub')
const quoteText = document.getElementById('quote-text')
const quoteAuthor = document.getElementById('quote-author')

// Bundled quotes — no network. The extension stays fully local (it talks only to
// the Vitreous app over 127.0.0.1), so the popup shows a random bundled quote.
const QUOTES = [
  { text: 'Starve your distractions, feed your focus.', author: 'Unknown' },
  { text: 'Where focus goes, energy flows.', author: 'Tony Robbins' },
  { text: 'It is not enough to be busy; the question is what are we busy about?', author: 'Henry David Thoreau' },
  { text: 'Concentrate all your thoughts upon the work at hand.', author: 'Alexander Graham Bell' },
  { text: 'Either you run the day or the day runs you.', author: 'Jim Rohn' },
  { text: 'The successful warrior is the average man, with laser-like focus.', author: 'Bruce Lee' },
  { text: 'Discipline is choosing between what you want now and what you want most.', author: 'Abraham Lincoln' },
  { text: 'You will never reach your destination if you stop to throw stones at every barking dog.', author: 'Winston Churchill' },
  { text: 'Focus is a matter of deciding what things you’re not going to do.', author: 'John Carmack' },
  { text: 'Do the hard jobs first. The easy jobs will take care of themselves.', author: 'Dale Carnegie' },
  { text: 'The way to get started is to quit talking and begin doing.', author: 'Walt Disney' },
  { text: 'Deep work is the ability to focus without distraction on a demanding task.', author: 'Cal Newport' }
]

// The app is the source of truth — the popup only reflects state, no manual toggle.
function render({ active, connected, count }) {
  document.body.classList.toggle('active', active)
  document.body.classList.toggle('connected', connected)
  if (active) {
    titleEl.textContent = 'Focus on'
    subEl.textContent = `${count} ${count === 1 ? 'site' : 'sites'} blocked`
  } else if (connected) {
    titleEl.textContent = 'Connected'
    subEl.textContent = 'Vitreous app is running'
  } else {
    titleEl.textContent = 'Not connected'
    subEl.textContent = 'Open the Vitreous app to connect'
  }
}

async function read() {
  const r = await chrome.storage.local.get([KEY_ACTIVE, KEY_DOMAINS, KEY_CONNECTED])
  const domains = Array.isArray(r[KEY_DOMAINS]) && r[KEY_DOMAINS].length ? r[KEY_DOMAINS] : BLOCKED_DOMAINS
  return { active: r[KEY_ACTIVE] === true, connected: r[KEY_CONNECTED] === true, count: domains.length }
}

async function refresh() { render(await read()) }

// Live-update while the popup is open (app pushes, connection drops, etc.)
chrome.storage.onChanged.addListener((_changes, area) => {
  if (area === 'local') refresh()
})

refresh()
const q = QUOTES[Math.floor(Math.random() * QUOTES.length)]
quoteText.textContent = `“${q.text}”`
quoteAuthor.textContent = q.author