lostcoords-ui 0.4.1

data/app/helpers/lostcoords/ui/tailwind_helper.rb

@@ -0,0 +1,14 @@
+module Lostcoords::Ui
+  module TailwindHelper
+    CONTROL_SIZES = {
+      sm: "min-h-11 py-2",
+      base: "min-h-12 py-2.5",
+      lg: "min-h-14 py-3.5"
+    }.freeze
+
+    def lc_tw(*classes)
+      @tailwind_merger ||= TailwindMerge::Merger.new
+      @tailwind_merger.merge(classes.flatten.compact.join(" "))
+    end
+  end
+end

data/app/helpers/lostcoords/ui/translation_helper.rb

@@ -0,0 +1,13 @@
+module Lostcoords::Ui
+  module TranslationHelper
+    private
+
+    def lc_t(key, **options)
+      I18n.translate(key, **options, locale: lc_locale)
+    end
+
+    def lc_locale
+      I18n.locale
+    end
+  end
+end

data/app/helpers/lostcoords/ui/typography_helper.rb

@@ -0,0 +1,28 @@
+module Lostcoords::Ui
+  module TypographyHelper
+    HEADING_SIZES = { page: "ui-heading-page", section: "ui-heading-section", card: "ui-heading-card" }.freeze
+    TEXT_SIZES = { body: "ui-text-body", small: "ui-text-small", caption: "ui-text-caption" }.freeze
+    TEXT_TONES = { default: "text-ink", muted: "text-ink-2", subtle: "text-ink-3" }.freeze
+
+    def lc_heading_class(size: :section, extra: nil)
+      size = lc_option!(:size, size, HEADING_SIZES.keys)
+      lc_tw("ui-heading m-0 text-ink", HEADING_SIZES.fetch(size), extra)
+    end
+
+    def lc_text_class(size: :body, tone: :default, extra: nil)
+      size = lc_option!(:size, size, TEXT_SIZES.keys)
+      tone = lc_option!(:tone, tone, TEXT_TONES.keys)
+      lc_tw("ui-text m-0", TEXT_SIZES.fetch(size), TEXT_TONES.fetch(tone), extra)
+    end
+
+    def lc_heading(content = nil, level: 2, size: :section, **attributes, &block)
+      raise ArgumentError, "Invalid level: #{level.inspect}. Expected an integer from 1 to 6" unless (1..6).include?(level) && level.is_a?(Integer)
+
+      tag.public_send("h#{level}", content, **lc_attributes({ class: lc_heading_class(size: size) }, attributes), &block)
+    end
+
+    def lc_text(content = nil, size: :body, tone: :default, **attributes, &block)
+      tag.p(content, **lc_attributes({ class: lc_text_class(size: size, tone: tone) }, attributes), &block)
+    end
+  end
+end

data/app/javascript/lostcoords/ui/controllers/confirm_dialog_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+import { showContextDialog } from "helpers/context_dialog"
+import { registerDialog } from "helpers/dialog"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  disconnect() {
+    this.unregisterDialog?.()
+  }
+
+  open(event) {
+    event.preventDefault()
+
+    const dialog = this.findDialog(event.params.name)
+    if (!dialog || dialog.open) return
+
+    this.activeDialog = dialog
+    if (dialog.matches(".context-dialog")) {
+      showContextDialog(dialog, this.element.querySelector("[data-row-menu-target='popover']"))
+    } else {
+      dialog.showModal()
+    }
+    this.unregisterDialog?.()
+    this.unregisterDialog = registerDialog(dialog)
+  }
+
+  close(event) {
+    event?.preventDefault()
+    const dialog = event?.target?.closest("dialog") || this.activeDialog
+    dialog?.close()
+  }
+
+  findDialog(name) {
+    if (!name) return this.dialogTarget
+
+    return this.dialogTargets.find((dialog) => dialog.dataset.confirmDialogName === name)
+  }
+}

data/app/javascript/lostcoords/ui/controllers/disclosure_controller.js

@@ -0,0 +1,163 @@
+import { Controller } from "@hotwired/stimulus"
+import { prefersReducedMotion } from "helpers/viewport"
+
+// Animates a <details> both ways and keeps what it reveals on screen. Only
+// user toggles go through here: programmatic opens (validation) already scroll
+// to the field they care about. Durations live in ui/disclosure.css.
+export default class extends Controller {
+  // Where the panel's height can't ease to `auto` in CSS (Safari), ease the
+  // <details> itself between measured heights.
+  static easesHeightInCss = CSS.supports("interpolate-size: allow-keywords")
+
+  disconnect() {
+    this.stopFollowing()
+    this.stopClosing()
+  }
+
+  toggle(event) {
+    if (event.target.closest("summary")?.parentElement !== this.element) return
+
+    if (this.element.hasAttribute("data-closing")) {
+      event.preventDefault()
+      this.stopClosing()
+    } else if (this.element.open) {
+      event.preventDefault()
+      this.close()
+    } else {
+      if (!this.constructor.easesHeightInCss) {
+        event.preventDefault()
+        this.openWithHeight()
+      }
+      this.reveal()
+    }
+  }
+
+  openWithHeight() {
+    const from = this.element.offsetHeight
+    const duration = this.transitionDurations()[0]
+    this.element.open = true
+    const animation = this.animateHeight(
+      from,
+      this.element.offsetHeight,
+      duration,
+      "--ease-out-expo",
+    )
+    animation.finished.then(
+      () => animation.cancel(),
+      () => {},
+    )
+  }
+
+  // Removing [open] hides the content at once, so play the exit
+  // ([data-closing]) while it's still open, then close.
+  close() {
+    this.stopFollowing()
+    this.element.toggleAttribute("data-closing", true)
+    const duration = Math.max(...this.transitionDurations())
+    if (!this.constructor.easesHeightInCss) {
+      this.animateHeight(this.element.offsetHeight, this.closedHeight(), duration, "--ease-out")
+    }
+    this.closeTimeout = setTimeout(() => {
+      this.element.open = false
+      this.stopClosing()
+    }, duration)
+  }
+
+  stopClosing() {
+    clearTimeout(this.closeTimeout)
+    this.element.removeAttribute("data-closing")
+    this.heightAnimation?.cancel()
+  }
+
+  animateHeight(from, to, duration, easingProperty) {
+    this.heightAnimation?.cancel()
+    const easing =
+      getComputedStyle(this.element).getPropertyValue(easingProperty).trim() || "ease-out"
+    this.heightAnimation = this.element.animate(
+      { height: [`${from}px`, `${to}px`], overflow: ["clip", "clip"] },
+      { duration, easing, fill: "forwards" },
+    )
+    return this.heightAnimation
+  }
+
+  closedHeight() {
+    const style = getComputedStyle(this.element)
+    const chrome = ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"].reduce(
+      (sum, property) => sum + parseFloat(style[property]),
+      0,
+    )
+    return this.element.querySelector(":scope > summary").offsetHeight + chrome
+  }
+
+  transitionDurations() {
+    return getComputedStyle(this.element, "::details-content")
+      .transitionDuration.split(",")
+      .map((duration) => parseFloat(duration) * 1000)
+  }
+
+  // Opening near the bottom of a scroller grows content off-screen, so the
+  // user sees nothing happen. Scroll just enough to show it, never so far that
+  // the summary leaves the top.
+  reveal() {
+    this.stopFollowing()
+    // A native toggle applies [open] after this handler; measure next frame.
+    requestAnimationFrame(() => {
+      if (!this.element.open) return
+
+      const scroller = this.scrollParent()
+      const distance = this.distanceToReveal(scroller)
+      if (distance <= 0) return
+
+      this.followGrowth(scroller, scroller.scrollTop + distance)
+    })
+  }
+
+  // The scroller can only go as far as the panel has grown, so a single
+  // smooth scroll would stop short. Follow each frame of growth instead; the
+  // scroll then rides the panel's own easing.
+  followGrowth(scroller, target) {
+    const reduceMotion = prefersReducedMotion()
+    if (scroller.scrollHeight - scroller.clientHeight >= target) {
+      scroller.scrollTo({ top: target, behavior: reduceMotion ? "instant" : "smooth" })
+      return
+    }
+
+    this.follower = new ResizeObserver(() => {
+      const reachable = scroller.scrollHeight - scroller.clientHeight
+      scroller.scrollTo({ top: Math.min(reachable, target), behavior: "instant" })
+      if (reachable >= target) this.stopFollowing()
+    })
+    this.follower.observe(this.element)
+    this.followTimeout = setTimeout(() => this.stopFollowing(), 800)
+  }
+
+  stopFollowing() {
+    this.follower?.disconnect()
+    this.follower = null
+    clearTimeout(this.followTimeout)
+  }
+
+  // The content lays out at full size even while its height animates from 0,
+  // so its last child already marks where the open panel will end.
+  distanceToReveal(scroller) {
+    const content = this.element.querySelector(":scope > :last-child")
+    const style = getComputedStyle(scroller)
+    const view =
+      scroller === document.scrollingElement
+        ? { top: 0, bottom: window.innerHeight }
+        : scroller.getBoundingClientRect()
+    const visibleTop = view.top + (parseFloat(style.scrollPaddingBlockStart) || 0)
+    const visibleBottom = view.bottom - (parseFloat(style.scrollPaddingBlockEnd) || 0)
+
+    const overflow = content.getBoundingClientRect().bottom + 12 - visibleBottom
+    const room = this.element.getBoundingClientRect().top - visibleTop
+    return Math.min(overflow, room)
+  }
+
+  scrollParent() {
+    for (let node = this.element.parentElement; node; node = node.parentElement) {
+      if (/(auto|scroll)/.test(getComputedStyle(node).overflowY)) return node
+    }
+    return document.scrollingElement
+  }
+}

data/app/javascript/lostcoords/ui/controllers/emoji_picker_controller.js

@@ -0,0 +1,366 @@
+import { CatalogPicker } from "helpers/catalog_picker"
+import { prefersReducedMotion } from "helpers/viewport"
+
+const TONE_MODIFIERS = ["", "\u{1F3FB}", "\u{1F3FC}", "\u{1F3FD}", "\u{1F3FE}", "\u{1F3FF}"]
+const TONE_STORAGE_KEY = "lostcoords_ui:emoji-picker:tone"
+
+function markCurrent(element, current) {
+  element.setAttribute("aria-current", String(current))
+}
+
+export default class extends CatalogPicker {
+  static targets = [
+    "input",
+    "recent",
+    "previewEmoji",
+    "previewName",
+    "tones",
+    "toneToggle",
+    "toneMenu",
+  ]
+  static values = {
+    autoSubmit: Boolean,
+    recentLimit: { type: Number, default: 12 },
+    recentScope: String,
+  }
+
+  static optionKey = "emoji"
+  static catalogClass = "emoji-picker__catalog"
+  static previewTargets = ["previewEmoji", "previewName"]
+
+  connect() {
+    super.connect()
+    this.tone = this.readTone()
+    this.syncTones()
+    this.preloadCatalog()
+  }
+
+  disconnect() {
+    this.clearPopover()
+    super.disconnect()
+  }
+
+  show() {
+    this.refreshRecent()
+    super.show()
+  }
+
+  afterClose() {
+    super.afterClose()
+    this.closeTones()
+  }
+
+  select(event) {
+    const button = event.target.closest("button[data-emoji]")
+    if (!button || !this.element.contains(button)) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.value = this.tonedValue(button)
+    this.rememberRecent(this.value)
+    this.defaultPreview = [this.value, button.dataset.searchName || this.value]
+    this.syncOptions()
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+    this.dispatch("changed", { detail: { value: this.value, button } })
+    this.close()
+
+    if (this.autoSubmitValue) {
+      this.runAfterSheetClose(() => this.element.closest("form")?.requestSubmit())
+    }
+  }
+
+  syncOptions() {
+    this.inputTarget.value = this.value
+    this.element.querySelectorAll("button[data-emoji]").forEach((button) => {
+      markCurrent(button, this.tonedValue(button) === this.value)
+    })
+
+    const quickButton = this.quickButtons.find((button) => button.dataset.emoji === this.value)
+    this.triggerTarget.textContent = quickButton
+      ? this.triggerTarget.dataset.defaultLabel
+      : this.value
+    this.triggerTarget.dataset.value = this.value
+    markCurrent(this.triggerTarget, !quickButton)
+  }
+
+  resultButton(entry) {
+    const button = document.createElement("button")
+    button.type = "button"
+    button.dataset.emoji = entry.key
+    if (entry.tone) button.dataset.tone = "true"
+    button.dataset.searchName = entry.button.dataset.searchName || entry.key
+    button.textContent = entry.tone ? this.applyTone(entry.key, this.tone) : entry.key
+    button.title = button.dataset.searchName
+    button.setAttribute("aria-label", button.dataset.searchName)
+    markCurrent(button, this.tonedValue(button) === this.value)
+    return button
+  }
+
+  activateCatalog(catalog) {
+    super.activateCatalog(catalog)
+    if (!this.isSheet && this.isOpen) this.positionPopover()
+  }
+
+  indexCatalog(catalog) {
+    super.indexCatalog(catalog)
+    this.applyToneToCatalog()
+  }
+
+  indexOption(button) {
+    return {
+      ...super.indexOption(button),
+      name: (button.dataset.searchName || "").toLocaleLowerCase(),
+      tone: button.dataset.tone === "true",
+    }
+  }
+
+  clearPopover() {
+    this.catalogElement?.remove()
+    this.entries = []
+  }
+
+  observeSections() {
+    this.disconnectObserver()
+    if (!("IntersectionObserver" in window)) return
+
+    this.sectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) this.activeSection = entry.target.dataset.section
+        }
+        if (this.activeSection) this.setActiveTab(this.activeSection)
+      },
+      { root: this.bodyTarget, rootMargin: "0px 0px -80% 0px", threshold: 0 },
+    )
+
+    this.bodyTarget.querySelectorAll("[data-section]").forEach((section) => {
+      this.sectionObserver.observe(section)
+    })
+  }
+
+  disconnectObserver() {
+    this.sectionObserver?.disconnect()
+    this.sectionObserver = null
+  }
+
+  setActiveTab(key) {
+    if (!this.hasTabTarget) return
+    this.tabTargets.forEach((tab) => {
+      markCurrent(tab, tab.dataset.targetSection === key)
+    })
+  }
+
+  toggleTones(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const open = this.toneMenuTarget.hidden
+    this.toneMenuTarget.hidden = !open
+    this.toneToggleTarget.setAttribute("aria-expanded", String(open))
+    if (open) this.syncTones()
+  }
+
+  selectTone(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.tone = Number(event.currentTarget.dataset.toneIndex) || 0
+    this.storeTone(this.tone)
+    this.syncTones()
+    this.applyToneToCatalog()
+    this.retoneResults()
+    this.syncOptions()
+    this.closeTones()
+  }
+
+  closeTones() {
+    if (!this.hasToneMenuTarget) return
+    this.toneMenuTarget.hidden = true
+    this.toneToggleTarget.setAttribute("aria-expanded", "false")
+  }
+
+  syncTones() {
+    if (this.hasToneToggleTarget) {
+      this.toneToggleTarget.textContent = `✋${TONE_MODIFIERS[this.tone]}`
+    }
+    if (this.hasToneMenuTarget) {
+      this.toneMenuTarget.querySelectorAll("[data-tone-index]").forEach((button) => {
+        markCurrent(button, Number(button.dataset.toneIndex) === this.tone)
+      })
+    }
+  }
+
+  applyToneToCatalog() {
+    for (const entry of this.entries) {
+      if (entry.tone) entry.button.textContent = this.applyTone(entry.key, this.tone)
+    }
+  }
+
+  retoneResults() {
+    if (!this.hasResultsGridTarget) return
+    this.resultsGridTarget.querySelectorAll("button[data-tone='true']").forEach((button) => {
+      button.textContent = this.applyTone(button.dataset.emoji, this.tone)
+    })
+  }
+
+  tonedValue(button) {
+    return this.tone && button.dataset.tone === "true"
+      ? this.applyTone(button.dataset.emoji, this.tone)
+      : button.dataset.emoji
+  }
+
+  applyTone(emoji, tone) {
+    if (!tone) return emoji
+
+    const codepoints = Array.from(emoji)
+    const base = codepoints[0]
+    const rest = codepoints.slice(1).filter((point) => point !== "️")
+    return base + TONE_MODIFIERS[tone] + rest.join("")
+  }
+
+  readTone() {
+    try {
+      return Number(window.localStorage.getItem(TONE_STORAGE_KEY)) || 0
+    } catch {
+      return 0
+    }
+  }
+
+  storeTone(tone) {
+    try {
+      window.localStorage.setItem(TONE_STORAGE_KEY, String(tone))
+    } catch {}
+  }
+
+  previewFor(button) {
+    const emoji = button.textContent.trim()
+    return [emoji, button.dataset.searchName || emoji]
+  }
+
+  rememberRecent(emoji) {
+    if (!this.recentStorageKey) return
+
+    const recent = [emoji, ...this.recentEmojis.filter((value) => value !== emoji)].slice(
+      0,
+      this.recentLimitValue,
+    )
+    this.storeRecent(recent)
+    this.renderRecent(recent)
+  }
+
+  refreshRecent() {
+    if (!this.hasRecentTarget) return
+    this.renderRecent(this.recentEmojis)
+  }
+
+  renderRecent(emojis) {
+    if (!this.hasRecentTarget) return
+
+    const grid = this.recentTarget.querySelector(".emoji-picker__grid")
+    const count = this.recentTarget.querySelector(".count")
+    if (!grid) return
+
+    grid.replaceChildren(...emojis.map((emoji) => this.recentButton(emoji)))
+    if (count) count.textContent = emojis.length
+  }
+
+  recentButton(emoji) {
+    const button = document.createElement("button")
+    button.type = "button"
+    button.dataset.emoji = emoji
+    button.dataset.search = emoji
+    button.dataset.searchName = emoji
+    button.title = emoji
+    button.setAttribute("aria-label", emoji)
+    button.textContent = emoji
+    markCurrent(button, emoji === this.value)
+    return button
+  }
+
+  storeRecent(emojis) {
+    try {
+      window.localStorage.setItem(this.recentStorageKey, JSON.stringify(emojis))
+    } catch {}
+  }
+
+  positionPopover() {
+    const margin = 16
+    const anchorRect = this.popoverTarget.offsetParent?.getBoundingClientRect()
+    if (!anchorRect) return
+
+    const popoverWidth = this.popoverTarget.offsetWidth
+    let inlineOffset = 0
+    const desiredLeft = anchorRect.left
+    const desiredRight = desiredLeft + popoverWidth
+
+    if (desiredLeft < margin) inlineOffset += margin - desiredLeft
+    if (desiredRight > window.innerWidth - margin)
+      inlineOffset -= desiredRight - (window.innerWidth - margin)
+
+    this.popoverTarget.style.insetInlineStart = `${inlineOffset}px`
+    this.popoverTarget.style.insetInlineEnd = "auto"
+  }
+
+  resetPopoverPosition() {
+    this.popoverTarget.style.insetInlineStart = ""
+    this.popoverTarget.style.insetInlineEnd = ""
+  }
+
+  get value() {
+    return this.inputTarget.value
+  }
+
+  set value(value) {
+    this.inputTarget.value = value
+  }
+
+  get catalogAnchor() {
+    return this.hasRecentTarget ? this.recentTarget : null
+  }
+
+  get sheetMotion() {
+    const duration = prefersReducedMotion() ? 0 : 260
+    return {
+      duration,
+      settle: duration && 280,
+      transition: "transform 260ms var(--ease-out-expo, ease-out)",
+      offscreen: "translateY(100%)",
+    }
+  }
+
+  get quickButtons() {
+    return Array.from(this.element.querySelectorAll(":scope > button[data-emoji]"))
+  }
+
+  get recentEmojis() {
+    return [...this.storedRecent, ...this.initialRecent]
+      .filter((emoji, index, emojis) => emoji && emojis.indexOf(emoji) === index)
+      .slice(0, this.recentLimitValue)
+  }
+
+  get initialRecent() {
+    if (!this.initialRecentValue) {
+      this.initialRecentValue = this.hasRecentTarget
+        ? Array.from(this.recentTarget.querySelectorAll("button[data-emoji]")).map(
+            (button) => button.dataset.emoji,
+          )
+        : []
+    }
+    return this.initialRecentValue
+  }
+
+  get storedRecent() {
+    if (!this.recentStorageKey) return []
+
+    try {
+      const parsed = JSON.parse(window.localStorage.getItem(this.recentStorageKey) || "[]")
+      return Array.isArray(parsed) ? parsed.filter((value) => typeof value === "string") : []
+    } catch {
+      return []
+    }
+  }
+
+  get recentStorageKey() {
+    if (!this.hasRecentScopeValue || !this.recentScopeValue) return null
+    return `lostcoords_ui:emoji-picker:${this.recentScopeValue}`
+  }
+}

data/app/javascript/lostcoords/ui/controllers/modal_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+import { registerDialog } from "helpers/dialog"
+
+// Opens a dialog whose body is a Turbo frame fetched on open. It reloads on every
+// open, so what it shows is never staler than the page that opened it.
+export default class extends Controller {
+  static targets = ["dialog", "frame"]
+
+  disconnect() {
+    this.unregisterDialog?.()
+  }
+
+  open(event) {
+    event?.preventDefault()
+    if (this.hasFrameTarget) {
+      if (this.frameTarget.src) this.frameTarget.reload()
+      else this.frameTarget.src = this.frameTarget.dataset.src
+    }
+    if (!this.dialogTarget.open) this.dialogTarget.showModal()
+
+    this.unregisterDialog = registerDialog(this.dialogTarget)
+  }
+
+  close() {
+    if (this.dialogTarget.open) this.dialogTarget.close()
+  }
+}