Stick-to-Bottom

<%# Stick-to-bottom demo: the scrollable log follows new messages while you're at the
    bottom, but holds and shows the "new messages" jump button if you've scrolled up. This
    catalog has no Action Cable / Turbo Stream, so the Add button appends a <li> — exactly
    the mutation a Turbo Stream broadcast would make — and the controller reacts. The jump
    button lives inside the log (a descendant, wired with a plain data-action) and CSS
    reveals it only while data-has-new. demo.js starts the log scrolled to the bottom. The
    library only follows/flags and reflects data-pinned / data-has-new; demo.css owns the look. %>
<div class="stb-demo">
  <div
    class="stb-demo__log"
    data-controller="stimeo--stick-to-bottom"
    data-stimeo--stick-to-bottom-behavior-value="smooth">
    <ul class="stb-demo__messages" data-stimeo--stick-to-bottom-target="content">
      <% (1..8).each do |i| %>
        <li><%= t("components.stick_to_bottom.demo.message") %> <%= i %></li>
      <% end %>
    </ul>
    <button
      type="button"
      class="stb-demo__jump"
      data-action="click->stimeo--stick-to-bottom#scrollToBottom">
      <%= t("components.stick_to_bottom.demo.jump") %>
    </button>
  </div>
  <button
    type="button"
    class="demo-trigger"
    data-stb-demo-add
    data-message-label="<%= t("components.stick_to_bottom.demo.message") %>">
    <%= t("components.stick_to_bottom.demo.add") %>
  </button>
</div>

/*
 * Presentation-only styles for the stick-to-bottom demo. The library follows/flags new
 * content and reflects data-pinned / data-has-new; this CSS gives the log a fixed height
 * so it scrolls, and reveals the floating jump button only while data-has-new is set.
 */

.stb-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 24rem;
  align-items: flex-start;
}

.stb-demo__log {
  position: relative;
  width: 100%;
  height: 9rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.stb-demo__messages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stb-demo__messages li {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--surface-subtle);
}

/* The "new messages" button floats at the bottom, shown only while scrolled up. */
.stb-demo__jump {
  position: sticky;
  bottom: 0;
  display: none;
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--white);
  cursor: pointer;
}

.stb-demo__log[data-has-new] .stb-demo__jump {
  display: block;
}

// Stick-to-bottom demo (consumer-side JS).
//
// No Action Cable / Turbo Stream here, so the Add button appends a <li> to the log —
// the same mutation a broadcast would make — and the controller follows it (while pinned)
// or flags it (while scrolled up). We also start the log scrolled to the bottom so the
// follow behavior is visible from the first message.
document.querySelectorAll(".stb-demo").forEach((root) => {
  const log = root.querySelector('[data-controller~="stimeo--stick-to-bottom"]');
  const list = root.querySelector('[data-stimeo--stick-to-bottom-target="content"]');
  const add = root.querySelector("[data-stb-demo-add]");
  if (!log || !list || !add) return;

  // Start at the bottom (pinned); the scroll fires the controller's pinned recompute.
  log.scrollTop = log.scrollHeight;

  let count = list.children.length;
  const label = add.dataset.messageLabel ?? "Message";
  add.addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = `${label} ${(count += 1)}`;
    list.appendChild(li);
  });
});