heyquilt 0.0.1 → 0.3.90

package/src/ui/releases.js

@@ -0,0 +1,182 @@
+// What's new and the update check: a bar across the top when a newer Quilt is out, and the
+// release notes in a quilted pop-up (shown by itself the first time a new version runs, and
+// again when a newer release appears). In the desktop app, "Update Quilt" installs it.
+import { I, state, $, esc, api, remember, recall, toast } from './common.js'
+import { quiltMark } from './mark.js'
+
+const RECHECK_MS = 10 * 60 * 1000
+let shownUnseen = false
+let hiddenBar = false
+
+/** Asks the app about versions, shows the update bar, and opens the notes after an update or a new release. */
+export async function checkRelease () {
+  try { state.release = await api('GET', '/api/version') } catch { return }
+  const r = state.release
+  // Each newer release is announced once per computer: when it is cut while the app is open, or at the next launch.
+  // Not one you said not to show again.
+  if (r.outOfDate && !r.barHidden && recall('announced-release') !== r.latest.version) {
+    remember('announced-release', r.latest.version)
+    hiddenBar = false
+    openReleaseNotes()
+  } else if (r.unseen && !shownUnseen) {
+    openReleaseNotes()
+  }
+  if (r.unseen && !shownUnseen) {
+    shownUnseen = true
+    api('POST', '/api/version/seen').catch(() => {})
+    r.unseen = false
+  }
+  renderUpdateBar()
+  if (!checkRelease.timer) checkRelease.timer = setInterval(() => checkRelease().catch(() => {}), RECHECK_MS)
+}
+
+// ------------------------------------------------------------- update --
+const desktop = () => window.quiltDesktop?.installUpdate ? window.quiltDesktop : null
+let update = null // { phase: 'downloading' | 'installing' | 'restarting' | 'failed', received, total, error }
+
+/** Downloads and installs the newest Quilt from inside the desktop app. */
+async function startUpdate () {
+  const d = desktop()
+  if (!d || (update && update.phase !== 'failed')) return
+  if (!startUpdate.listening) { startUpdate.listening = true; d.onUpdateProgress?.((p) => { update = { ...update, ...p }; refreshUpdateControls() }) }
+  update = { phase: 'downloading', received: 0, total: 0 }
+  refreshUpdateControls()
+  try {
+    await d.installUpdate()
+    update = { phase: 'restarting' }
+  } catch (err) {
+    update = { phase: 'failed', error: String(err?.message || err).replace(/^Error invoking remote method '[^']*': (Error: )?/, '') }
+  }
+  refreshUpdateControls()
+}
+
+/** The button that gets the newer Quilt: installs it in the desktop app, downloads it elsewhere. */
+export function updateControl () {
+  const r = state.release
+  const download = `<a class="btn sm primary" href="${esc(r.downloadUrl)}" target="_blank" rel="noopener">${I.down}<span>Download</span></a>`
+  if (!desktop()) return `<span class="update-ctl">${download}</span>`
+  const phase = update?.phase
+  if (!phase) return `<span class="update-ctl"><button class="btn sm primary" type="button" data-update>${I.down}<span>Update Quilt</span></button></span>`
+  if (phase === 'failed') {
+    return `<span class="update-ctl update-failed"><span class="update-err" title="${esc(update.error)}">${esc(update.error)}</span><button class="btn sm primary" type="button" data-update>${I.refresh}<span>Try again</span></button>${download}</span>`
+  }
+  const pct = phase === 'downloading' && update.total ? ` ${Math.min(99, Math.floor(update.received / update.total * 100))}%` : ''
+  const label = phase === 'downloading' ? `Downloading…${pct}` : phase === 'installing' ? 'Installing…' : 'Restarting…'
+  return `<span class="update-ctl"><button class="btn sm primary update-busy" type="button" disabled>${quiltMark({ word: false, loop: true, cls: 'qm-inline' })}<span>${esc(label)}</span></button></span>`
+}
+
+/** Redraws every update button (the bar's and the pop-up's) in place. */
+function refreshUpdateControls () {
+  if (!state.release) return
+  for (const el of document.querySelectorAll('.update-ctl')) el.outerHTML = updateControl()
+}
+
+/** The bar at the top of the window: this version is out of date. */
+export function renderUpdateBar () {
+  const r = state.release
+  let bar = $('#update-bar')
+  const show = !!r?.outOfDate && !hiddenBar && !r.barHidden
+  document.body.classList.toggle('has-update', show)
+  if (!show) { bar?.remove(); return }
+  if (!bar) {
+    bar = document.createElement('div')
+    bar.id = 'update-bar'
+    bar.setAttribute('role', 'status')
+    document.body.prepend(bar)
+  }
+  bar.innerHTML = `
+    <span class="ub-dot"></span>
+    <span class="ub-text"><b>Quilt ${esc(r.latest.version)} is out.</b> You have ${esc(r.version)}.</span>
+    <button class="btn sm ghost" type="button" data-release-notes>What's new</button>
+    ${updateControl()}
+    <label class="ub-never" title="Hide this bar until a newer Quilt than ${esc(r.latest.version)} is out"><input type="checkbox" data-update-never><span class="ub-long">Don't show this again</span><span class="ub-short">Don't show again</span></label>
+    <button class="btn sm ghost icon ub-x" type="button" data-hide-update aria-label="Hide until next time" title="Hide until Quilt starts again">${I.x}</button>`
+}
+
+/** Bold and code only; everything else is text. */
+export function inline (md) {
+  return esc(md)
+    .replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>')
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+}
+
+const PATCHES = ['a', 'b', 'c', 'd']
+const when = (d) => {
+  if (!d) return ''
+  const t = new Date(`${d}T12:00:00Z`)
+  return isNaN(t) ? d : t.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' })
+}
+
+function releaseHtml (rel, i, { current = false, latest = false } = {}) {
+  return `
+  <section class="rn-rel${latest ? ' rn-latest' : ''}" aria-labelledby="rn-v-${esc(rel.version)}">
+    <header class="rn-rel-head">
+      <span class="rn-patch rn-patch-${PATCHES[i % PATCHES.length]}" id="rn-v-${esc(rel.version)}">${esc(rel.version)}</span>
+      <span class="rn-when">${esc(when(rel.date))}</span>
+      ${current ? '<span class="rn-tag">You have this</span>' : ''}
+      ${latest ? updateControl() : ''}
+    </header>
+    ${rel.summary ? `<p class="rn-sum">${inline(rel.summary)}</p>` : ''}
+    ${rel.items.length ? `<ul class="rn-list">${rel.items.map((it) => `<li>${inline(it)}</li>`).join('')}</ul>` : ''}
+  </section>`
+}
+
+/** The release notes pop-up: the logo, then every version newest first (and a newer one from GitHub, if any). */
+export function openReleaseNotes () {
+  const r = state.release
+  if (!r) return
+  $('#rn-back')?.remove()
+  const back = document.createElement('div')
+  back.id = 'rn-back'
+  back.className = 'modal-back rn-back'
+  const newer = r.outOfDate ? [{ ...r.latest, items: r.latest.items.length ? r.latest.items : ['**A newer Quilt is ready.** Download it to see what changed.'] }] : []
+  const rels = r.releases || []
+  back.innerHTML = `
+  <div class="rn quilt-patch" role="dialog" aria-modal="true" aria-labelledby="rn-title">
+    <span class="quilt-stitch" aria-hidden="true"></span>
+    <div class="rn-card">
+      <header class="rn-head">
+        <div class="rn-logo">${quiltMark({ sew: true })}</div>
+        <h2 id="rn-title">What's new</h2>
+        <p class="rn-lead">${r.outOfDate ? `Quilt <b>${esc(r.latest.version)}</b> is out; you have ${esc(r.version)}.${desktop() ? ' Update takes a minute and restarts Quilt.' : ''}` : `You have the newest Quilt, <b>${esc(r.version)}</b>.`}</p>
+        <button class="btn icon ghost rn-close" type="button" data-rn-close aria-label="Close">${I.x}</button>
+      </header>
+      <div class="rn-body">
+        ${newer.map((rel) => releaseHtml(rel, 0, { latest: true })).join('')}
+        ${rels.map((rel, i) => releaseHtml(rel, i + newer.length, { current: rel.version === r.version })).join('')}
+        <footer class="rn-foot">All releases live on <a href="https://github.com/DanielCarmichaelGit/heyquilt/releases" target="_blank" rel="noopener">GitHub</a>.</footer>
+      </div>
+    </div>
+  </div>`
+  document.body.appendChild(back)
+  const close = () => back.remove()
+  back.addEventListener('mousedown', (e) => { if (e.target === back) close() })
+  back.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
+  back.querySelector('[data-rn-close]').onclick = close
+  back.querySelector('[data-rn-close]').focus()
+}
+
+document.addEventListener('click', (e) => {
+  if (e.target.closest('[data-release-notes]')) {
+    if (state.release) openReleaseNotes()
+    else checkRelease().then(openReleaseNotes)
+  }
+  if (e.target.closest('[data-hide-update]')) { hiddenBar = true; renderUpdateBar() }
+  if (e.target.closest('[data-update]')) startUpdate()
+})
+
+// "Don't show this again": hides the bar now, and for good for this release (a newer one shows it again).
+document.addEventListener('change', async (e) => {
+  const never = e.target.closest?.('[data-update-never]')
+  if (!never || !never.checked || !state.release?.latest) return
+  const version = state.release.latest.version
+  try {
+    await api('POST', '/api/version/hide-bar', { version })
+    state.release.barHidden = true
+    renderUpdateBar()
+    toast(`Hidden until a newer Quilt than ${version} is out. What's New in Quilt still has it.`)
+  } catch (err) {
+    never.checked = false
+    toast(err.message)
+  }
+})

package/src/ui/schedule.js

@@ -0,0 +1,156 @@
+// Repeat schedules for task cards. Phrases become 5-field cron; the card shows
+// the phrase back in words. No DOM, so the session server can import it too.
+
+const INVISIBLE = /[\u0000-\u001f\u007f\u200b-\u200f\u202a-\u202e\u2066-\u2069\ufeff]/g
+const RANGES = [[0, 59], [0, 23], [1, 31], [1, 12], [0, 7]]
+const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+const DOW = {
+  sunday: 0, sun: 0, monday: 1, mon: 1, tuesday: 2, tue: 2, tues: 2,
+  wednesday: 3, wed: 3, thursday: 4, thu: 4, thur: 4, thurs: 4,
+  friday: 5, fri: 5, saturday: 6, sat: 6
+}
+
+function pieceOk (part, min, max) {
+  const m = /^(?:(\*)|(\d+)|(\d+-\d+))(?:\/(\d+))?$/.exec(part)
+  if (!m) return false
+  if (m[4] != null) {
+    const step = Number(m[4])
+    if (!Number.isInteger(step) || step < 1 || step > max) return false
+  }
+  if (m[1]) return true
+  if (m[2]) {
+    const n = Number(m[2])
+    return n >= min && n <= max
+  }
+  const [a, b] = m[3].split('-').map(Number)
+  return a >= min && b <= max && a <= b
+}
+
+function fieldOk (field, min, max) {
+  if (!field || field.length > 40) return false
+  return field.split(',').every((part) => pieceOk(part, min, max))
+}
+
+/** True for a 5-field cron expression (numbers, lists, ranges, stars). */
+export function isCron (value) {
+  const parts = String(value ?? '').trim().split(/\s+/)
+  if (parts.length !== 5) return false
+  return parts.every((field, i) => fieldOk(field, RANGES[i][0], RANGES[i][1]))
+}
+
+function clock (hour, minute, ampm) {
+  let h = Number(hour)
+  const m = minute == null || minute === '' ? 0 : Number(minute)
+  if (!Number.isInteger(h) || !Number.isInteger(m) || m < 0 || m > 59) return null
+  if (ampm) {
+    const ap = ampm.toLowerCase()
+    if (h > 12 || h < 1) return null
+    if (ap === 'pm' && h < 12) h += 12
+    if (ap === 'am' && h === 12) h = 0
+  } else if (h > 23 || h < 0) return null
+  return { h, m }
+}
+
+function phraseToCron (raw) {
+  const s = raw.toLowerCase()
+  if (s === 'every minute' || s === 'minutely') return '* * * * *'
+  if (s === 'hourly' || s === 'every hour') return '0 * * * *'
+  if (s === 'daily' || s === 'every day') return '0 0 * * *'
+  if (s === 'weekly' || s === 'every week') return '0 0 * * 1'
+  if (s === 'monthly' || s === 'every month') return '0 0 1 * *'
+  if (s === 'weekdays' || s === 'every weekday') return '0 0 * * 1-5'
+  if (s === 'weekends' || s === 'every weekend') return '0 0 * * 0,6'
+
+  let m = s.match(/^every (\d{1,2}) minutes?$/)
+  if (m) {
+    const n = Number(m[1])
+    if (n < 1 || n > 59) return null
+    return n === 1 ? '* * * * *' : `*/${n} * * * *`
+  }
+  m = s.match(/^every (\d{1,2}) hours?$/)
+  if (m) {
+    const n = Number(m[1])
+    if (n < 1 || n > 23) return null
+    return n === 1 ? '0 * * * *' : `0 */${n} * * *`
+  }
+
+  m = s.match(/^(every day|daily|weekdays|every weekday|weekends|every weekend|weekly|every week|monthly|every month) at (\d{1,2})(?::(\d{2}))?\s*(am|pm)?$/)
+  if (m) {
+    const c = clock(m[2], m[3], m[4])
+    if (!c) return null
+    const kind = m[1]
+    if (kind === 'monthly' || kind === 'every month') return `${c.m} ${c.h} 1 * *`
+    const dow = kind === 'weekdays' || kind === 'every weekday' ? '1-5'
+      : kind === 'weekends' || kind === 'every weekend' ? '0,6'
+        : kind === 'weekly' || kind === 'every week' ? '1'
+          : '*'
+    return `${c.m} ${c.h} * * ${dow}`
+  }
+
+  m = s.match(/^(?:every|on)\s+(sunday|sun|monday|mon|tuesday|tue|tues|wednesday|wed|thursday|thu|thur|thurs|friday|fri|saturday|sat)(?: at (\d{1,2})(?::(\d{2}))?\s*(am|pm)?)?$/)
+  if (m) {
+    const c = m[2] != null ? clock(m[2], m[3], m[4]) : { h: 0, m: 0 }
+    if (!c) return null
+    return `${c.m} ${c.h} * * ${DOW[m[1]]}`
+  }
+  return null
+}
+
+/**
+ * A stored schedule or a phrase ("daily at 9", "weekdays at 9:30", "every monday").
+ * Empty clears it. Throws when it is neither a phrase nor 5-field cron.
+ */
+export function parseSchedule (input) {
+  const raw = String(input ?? '').replace(INVISIBLE, ' ').replace(/\s+/g, ' ').trim()
+  if (!raw) return ''
+  if (raw.length > 80) throw new Error('schedule is too long')
+  const phrase = phraseToCron(raw)
+  if (phrase) return phrase
+  if (!isCron(raw)) throw new Error('use 5-field cron, or a phrase like "daily at 9" or "weekdays at 9:30"')
+  return raw
+}
+
+/** The cron as stored, or null when it is not already in canonical form. Missing is empty. */
+export function canonicalCron (value) {
+  if (value == null || value === '') return ''
+  if (typeof value !== 'string' || value.length > 80) return null
+  try {
+    const parsed = parseSchedule(value)
+    return parsed === value ? value : null
+  } catch {
+    return null
+  }
+}
+
+function clockLabel (hour, minute) {
+  const h = Number(hour)
+  const m = Number(minute)
+  const ap = h >= 12 ? 'pm' : 'am'
+  const h12 = h % 12 || 12
+  return m === 0 ? `${h12}${ap}` : `${h12}:${String(m).padStart(2, '0')}${ap}`
+}
+
+/** English for the schedules the card knows. Anything else is the cron itself. */
+export function cronToText (cron) {
+  const c = String(cron || '').trim()
+  if (!c) return ''
+  const parts = c.split(/\s+/)
+  if (parts.length !== 5 || !isCron(c)) return c
+  const [min, hour, dom, mon, dow] = parts
+  if (mon !== '*') return c
+  if (c === '* * * * *') return 'Every minute'
+  const everyMin = /^\*\/(\d+)$/.exec(min)
+  if (everyMin && hour === '*' && dom === '*' && dow === '*') return `Every ${everyMin[1]} minutes`
+  if (min === '0' && hour === '*' && dom === '*' && dow === '*') return 'Every hour'
+  const everyHour = /^\*\/(\d+)$/.exec(hour)
+  if (min === '0' && everyHour && dom === '*' && dow === '*') return `Every ${everyHour[1]} hours`
+  if (!/^\d+$/.test(min) || !/^\d+$/.test(hour)) return c
+  const when = clockLabel(hour, min)
+  if (dom === '*' && dow === '*') return `Every day at ${when}`
+  if (dom === '*' && dow === '1-5') return `Weekdays at ${when}`
+  if (dom === '*' && dow === '0,6') return `Weekends at ${when}`
+  if (dom === '1' && dow === '*') return `Monthly on the 1st at ${when}`
+  if (dom === '*' && /^\d$/.test(dow)) return `Every ${DAYS[Number(dow)]} at ${when}`
+  return c
+}
+