How to make the iPhone Duo fold counter widget: free Scriptable script and 10 minute setup

// Duo Folds: a fold counter widget for iPhone Duo, made with Scriptable.
// Written for vaelolab.com. Free to copy, change and share.
//
// How it works
// 1. A Shortcuts automation ("Opened or Closed", set to Opened) runs this
//    script with the text "fold" every time you open the phone.
// 2. The script adds one to today's count and saves it on your phone.
// 3. The Home Screen widget reads the saved counts and draws the chart.
//
// Commands you can send from Shortcuts (Run Script, Parameter):
//   fold   add one fold (use this in the automation)
//   undo   remove the last fold
//   reset  clear every count
// Tap the play button in Scriptable to preview the widget or fix the count.
//
// Nothing leaves your phone. The script never uses the internet.

// ---------- settings you can change ----------
const TITLE = "DUO FOLDS"
const ACCENT = new Color("#6fcf9f")      // today's bar
const BAR = new Color("#3b404c")         // other days
const BG_TOP = new Color("#20232b")
const BG_BOTTOM = new Color("#14161b")
const TEXT = Color.white()
const MUTED = new Color("#9aa0ab")
const MIN_GAP_SECONDS = 3                // ignore a second trigger within 3 seconds
const KEEP_DAYS = 120                    // how many days of history to keep
const FILE_NAME = "duo-folds.json"

// ---------- storage ----------
const fm = FileManager.local()
const path = fm.joinPath(fm.documentsDirectory(), FILE_NAME)

function load() {
  if (!fm.fileExists(path)) return { total: 0, days: {}, last: 0 }
  try {
    const d = JSON.parse(fm.readString(path))
    return { total: d.total || 0, days: d.days || {}, last: d.last || 0 }
  } catch (e) {
    return { total: 0, days: {}, last: 0 }
  }
}

function save(d) {
  fm.writeString(path, JSON.stringify(d))
}

function dayKey(date) {
  const y = date.getFullYear()
  const m = String(date.getMonth() + 1).padStart(2, "0")
  const day = String(date.getDate()).padStart(2, "0")
  return y + "_" + m + "_" + day
}

function prune(d) {
  const cutoff = new Date()
  cutoff.setDate(cutoff.getDate() - KEEP_DAYS)
  const oldest = dayKey(cutoff)
  for (const k of Object.keys(d.days)) {
    if (k < oldest) delete d.days[k]
  }
}

function addFold(d) {
  const now = Date.now()
  if (now - d.last < MIN_GAP_SECONDS * 1000) return false
  const k = dayKey(new Date())
  d.days[k] = (d.days[k] || 0) + 1
  d.total += 1
  d.last = now
  prune(d)
  save(d)
  return true
}

function undoFold(d) {
  const k = dayKey(new Date())
  if (!d.days[k] || d.total === 0) return
  d.days[k] -= 1
  d.total -= 1
  save(d)
}

function lastSevenDays(d) {
  const out = []
  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    out.push({
      letter: "SMTWTFS"[date.getDay()],
      count: d.days[dayKey(date)] || 0,
      today: i === 0
    })
  }
  return out
}

// ---------- drawing ----------
function addLabel(stack, text, font, color) {
  const t = stack.addText(text)
  t.font = font
  t.textColor = color
  t.lineLimit = 1
  t.minimumScaleFactor = 0.6
  return t
}

function header(stack) {
  const row = stack.addStack()
  row.layoutHorizontally()
  row.centerAlignContent()
  const icon = row.addImage(SFSymbol.named("iphone").image)
  icon.imageSize = new Size(13, 13)
  icon.tintColor = MUTED
  row.addSpacer(6)
  addLabel(row, TITLE, Font.semiboldSystemFont(13), MUTED)
}

function chart(stack, days, height) {
  const max = Math.max(1, ...days.map(x => x.count))
  const barMax = height - 34
  const row = stack.addStack()
  row.layoutHorizontally()
  row.bottomAlignContent()
  row.spacing = 6
  for (const day of days) {
    const col = row.addStack()
    col.layoutVertically()
    col.size = new Size(20, height)
    col.addSpacer()
    const num = col.addStack()
    num.addSpacer()
    addLabel(num, String(day.count), Font.mediumSystemFont(11), day.today ? TEXT : MUTED)
    num.addSpacer()
    col.addSpacer(3)
    const bar = col.addStack()
    bar.size = new Size(20, Math.max(5, Math.round(barMax * day.count / max)))
    bar.cornerRadius = day.count === 0 ? 2.5 : 6
    bar.backgroundColor = day.today ? ACCENT : BAR
    col.addSpacer(5)
    const letter = col.addStack()
    letter.addSpacer()
    addLabel(letter, day.letter, Font.semiboldSystemFont(11), day.today ? TEXT : MUTED)
    letter.addSpacer()
  }
}

function buildWidget(d, family) {
  const days = lastSevenDays(d)
  const week = days.reduce((s, x) => s + x.count, 0)
  const today = days[6].count
  const w = new ListWidget()
  w.refreshAfterDate = new Date(Date.now() + 15 * 60 * 1000)

  // Lock Screen sizes
  if (family === "accessoryCircular") {
    w.addAccessoryWidgetBackground = true
    const t = addLabel(w, String(today), Font.boldRoundedSystemFont(20), TEXT)
    t.centerAlignText()
    const s = addLabel(w, "today", Font.systemFont(9), TEXT)
    s.centerAlignText()
    return w
  }
  if (family === "accessoryInline") {
    addLabel(w, "Folds today " + today + ", all time " + d.total, Font.systemFont(12), TEXT)
    return w
  }
  if (family === "accessoryRectangular") {
    addLabel(w, "Duo folds", Font.semiboldSystemFont(12), TEXT)
    addLabel(w, String(d.total), Font.boldRoundedSystemFont(22), TEXT)
    addLabel(w, "Today " + today + "  Week " + week, Font.systemFont(11), TEXT)
    return w
  }

  const g = new LinearGradient()
  g.colors = [BG_TOP, BG_BOTTOM]
  g.locations = [0, 1]
  w.backgroundGradient = g

  if (family === "small") {
    w.setPadding(14, 14, 14, 14)
    header(w)
    w.addSpacer()
    addLabel(w, String(d.total), Font.boldRoundedSystemFont(40), TEXT)
    addLabel(w, "all time", Font.mediumSystemFont(12), MUTED)
    w.addSpacer(8)
    const row = w.addStack()
    row.spacing = 4
    addLabel(row, "Today", Font.mediumSystemFont(13), MUTED)
    addLabel(row, String(today), Font.boldSystemFont(13), ACCENT)
    return w
  }

  // Medium (and large): numbers on the left, last 7 days on the right
  w.setPadding(16, 18, 16, 18)
  const body = w.addStack()
  body.layoutHorizontally()
  body.bottomAlignContent()
  const left = body.addStack()
  left.layoutVertically()
  header(left)
  left.addSpacer()
  addLabel(left, String(d.total), Font.boldRoundedSystemFont(44), TEXT)
  addLabel(left, "all time", Font.mediumSystemFont(13), MUTED)
  left.addSpacer()
  const wk = left.addStack()
  wk.spacing = 4
  addLabel(wk, "This week", Font.mediumSystemFont(14), MUTED)
  addLabel(wk, String(week), Font.boldSystemFont(14), TEXT)
  body.addSpacer()
  chart(body, days, 120)
  return w
}

// ---------- run ----------
const data = load()
const param = (args.shortcutParameter || (args.plainTexts && args.plainTexts[0]) || "")
  .toString().trim().toLowerCase()

if (param === "fold" || param === "open") {
  addFold(data)
  Script.setShortcutOutput(data.total)
} else if (param === "undo") {
  undoFold(data)
  Script.setShortcutOutput(data.total)
} else if (param === "reset") {
  save({ total: 0, days: {}, last: 0 })
  Script.setShortcutOutput(0)
} else if (config.runsInWidget) {
  Script.setWidget(buildWidget(data, config.widgetFamily))
} else if (config.runsInApp) {
  const a = new Alert()
  a.title = "Duo Folds"
  a.message = "All time: " + data.total + ". Today: " + (data.days[dayKey(new Date())] || 0) + "."
  a.addAction("Preview widget")
  a.addAction("Add one fold")
  a.addAction("Undo last fold")
  a.addDestructiveAction("Reset to zero")
  a.addCancelAction("Close")
  const choice = await a.presentAlert()
  if (choice === 1) addFold(data)
  if (choice === 2) undoFold(data)
  if (choice === 3) save({ total: 0, days: {}, last: 0 })
  if (choice >= 0 && choice <= 3) {
    await buildWidget(load(), "medium").presentMedium()
  }
} else {
  Script.setWidget(buildWidget(data, config.widgetFamily))
}
Script.complete()