livechat 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77c8f578ea3bb8e56ae6e93c3ffc3194bbec65a1952d7e7f3e2152986bc12388
-  data.tar.gz: bb5e62c493d8aef5e20a82884ed43213f2671543bee6e06d2aa1a352a55f9d25
+  metadata.gz: 63ba0ec549bbfac094a6a507ac4e3525c01b9b8926dbbf4e7822e7db05c2472d
+  data.tar.gz: 7afeeacda8689b6335c87a06a9fe0fecb50388379fc32d7255ab0fec16afe04e
 SHA512:
-  metadata.gz: f77110e02430ef730ac85ad64be4a05f4fd588035c384284e14374ebebbb40b3c5537df63e3d6128d20db2f1891836f54c90f223a087f123fa946893b8ea63d1
-  data.tar.gz: da4da0a2cfa71838e93434cdf3d0d88fd5a6fc15a24754369977d7e3064d5052b28cf6d29055db044b3132acbaf50d832f97a4eb6ef2a565d58edd37e27bbd84
+  metadata.gz: 26d8a59095979df9546eaa12aee10d828b50677a2b32e199c2b25a9820cfa7d3e8a4b24f9ec53e4f19c286f49948ab8bb4ea1756bfea3818d849240b8221f080
+  data.tar.gz: e287d3e63e218974245e0c5e495603aee5ae4ddd3b3b9c91af2ebc6ca103aa2d0ffdea731f39003ad79e10c52101bf9f187afba64cb4ded94e07c17ab6bb8cd0

data/AGENTS.md

@@ -176,6 +176,6 @@ Conventions this codebase holds to — follow them rather than the first thing t
 - **The widget is plain ES5-style JS served by the engine**, no build step, no framework, config read from a JSON block so a Turbo visit re-reads the current page's settings.
 - **Visitor scoping is never by conversation id.** The widget's endpoints resolve the thread from the signed-in id or the guest cookie, so no id in a request can address someone else's conversation. Keep it that way.
 - **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a file enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
-- **`lib/livechat/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `lvc` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
+- **`lib/livechat/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`/`.status-switch`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `lvc` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
 - Every user-facing change bumps `lib/livechat/version.rb` and adds a `CHANGELOG.md` entry that says what it costs, not only what it adds.
 - Commit messages are prose that explains the tradeoff — read `git log` before writing one.

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.10.0
+
+- **The open/resolved switch is now the family's shared component.** It looks the
+  same and sits where it sat, but it is `.status-switch` in the shared core of
+  `dashboard.css` rather than this gem's own `.status-toggle`, so ideasbugs could
+  adopt it for its three statuses instead of growing a second near-identical
+  control. `.status-toggle`, `.status-toggle-form`, `.is-open` and `.is-resolved`
+  are gone — that is the breaking change if you styled them.
+- Each half is now its own target: `Open` reopens, `Resolved` resolves, via
+  `formaction` on two submit buttons in one form. Before, the whole pill was one
+  button that flipped whichever way it was not. The half that is already current
+  is inert, so clicking it can no longer log a reopen of an open chat. The
+  sliding highlight went with the rewrite — it never animated anyway, since
+  resolving reloads the page and the pill arrives already in its new position.
+  `POST /:id/resolve` and `POST /:id/reopen` are unchanged.
+
 ## 0.9.1
 
 - **The conversation heading reads as one block.** The visitor's email and locale

data/app/views/livechat/conversations/_thread_panel.html.erb

@@ -12,21 +12,24 @@
         <%= safe_join(context, ' · ') %>
       </p>
     </div>
-    <% if conversation.open? %>
-      <%= button_to resolve_conversation_path(conversation), method: :post,
-                    form_class: 'status-toggle-form',
-                    class: 'status-toggle is-open',
-                    aria: { label: t('livechat.dashboard.resolve', default: 'Resolve') } do %>
-        <span><%= t('livechat.statuses.open', default: 'Open') %></span>
-        <span><%= t('livechat.statuses.resolved', default: 'Resolved') %></span>
-      <% end %>
-    <% else %>
-      <%= button_to reopen_conversation_path(conversation), method: :post,
-                    form_class: 'status-toggle-form',
-                    class: 'status-toggle is-resolved',
-                    aria: { label: t('livechat.dashboard.reopen', default: 'Reopen') } do %>
-        <span><%= t('livechat.statuses.open', default: 'Open') %></span>
-        <span><%= t('livechat.statuses.resolved', default: 'Resolved') %></span>
+    <%# The shared status switch: the state it is in is lit and inert, the other
+        one submits to its own route via `formaction`. One form, no JS, and
+        clicking the lit half cannot log a reopen of an already-open chat. %>
+    <%= form_with url: resolve_conversation_path(conversation), method: :post, class: 'status-switch' do %>
+      <% if conversation.open? %>
+        <button type="button" class="status-open current" aria-current="true">
+          <%= t('livechat.statuses.open', default: 'Open') %>
+        </button>
+        <button formaction="<%= resolve_conversation_path(conversation) %>" class="status-resolved">
+          <%= t('livechat.statuses.resolved', default: 'Resolved') %>
+        </button>
+      <% else %>
+        <button formaction="<%= reopen_conversation_path(conversation) %>" class="status-open">
+          <%= t('livechat.statuses.open', default: 'Open') %>
+        </button>
+        <button type="button" class="status-resolved current" aria-current="true">
+          <%= t('livechat.statuses.resolved', default: 'Resolved') %>
+        </button>
       <% end %>
     <% end %>
   </div>

data/lib/livechat/dashboard.css

@@ -144,6 +144,19 @@
   & .actions form { display: inline; }
   & .form-actions { padding-top: 12px; }
 
+  /* Status switch: one pill holding every state a record can be in, the state it
+     is in now lit. Each other segment is a submit button, so moving a record
+     takes one click and no JavaScript; the current segment is a `type="button"`
+     so clicking it cannot re-file the record it is already filed under. Two
+     states or five, the pill sizes itself. A gem tints the lit segment with its
+     own status colour — see the `GEM-SPECIFIC` section. */
+  & .status-switch { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 3px; border: 1px solid var(--lvc-border); border-radius: 999px; background: var(--lvc-bg); }
+  & .status-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--lvc-muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .16s ease, color .16s ease; }
+  & .status-switch button:hover { border: 0; background: color-mix(in srgb, var(--lvc-muted) 12%, transparent); color: var(--lvc-text); }
+  & .status-switch button.current { background: var(--lvc-surface); color: var(--lvc-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); cursor: default; }
+  & .status-switch button.current:hover { background: var(--lvc-surface); }
+  & .panel-head .status-switch { margin-left: auto; }
+
   & .card { overflow: hidden; border: 1px solid var(--lvc-border); border-radius: 12px; background: var(--lvc-surface); }
   & .card.pad { padding: 16px; overflow: visible; }
   & table { width: 100%; border-collapse: collapse; }
@@ -266,6 +279,7 @@
     & .dashboard-detail .detail-panel { min-height: calc(100vh - 64px); }
     & .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
     & .panel-head h1 { font-size: 18px; }
+    & .status-switch button { padding: 0 9px; font-size: 12px; }
     & dl { grid-template-columns: 1fr; gap: 3px; }
     & dd { margin-bottom: 8px; }
   }
@@ -291,22 +305,12 @@
   & .record-side .avatars { min-height: 26px; }
 
   /* The panel heading: the name with the visitor's context directly under it,
-     and the switch pushed to the far right of the row whatever the name's
-     length. `margin-left: auto` rather than the row's `space-between`, so a
-     third element in the row could never pull the switch back in. */
+     and the shared status switch pushed to the far right of the row whatever the
+     name's length. */
   & .panel-titles { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
   & .context-line { margin: 0; overflow-wrap: anywhere; }
-
-  /* One switch reading open|resolved, sliding to the side it is on. */
-  & .status-toggle-form { flex: 0 0 auto; margin-left: auto; }
-  & .status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px; min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--lvc-border); background: var(--lvc-bg); color: var(--lvc-muted); overflow: hidden; }
-  & .status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--lvc-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
-  & .status-toggle.is-open::before { left: 3px; }
-  & .status-toggle.is-resolved::before { left: 50%; }
-  & .status-toggle span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
-  & .status-toggle.is-open span:first-child { color: var(--lvc-open); }
-  & .status-toggle.is-resolved span:last-child { color: var(--lvc-text); }
-  & .status-toggle:hover { text-decoration: none; color: var(--lvc-text); }
+  /* An open conversation is the one that wants an answer, so say so in green. */
+  & .status-switch button.current.status-open { color: var(--lvc-open); }
 
   & .avatars { display: inline-flex; }
   & .avatars .avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--lvc-surface); cursor: default; }
@@ -387,8 +391,6 @@
 @media (max-width: 760px) {
   .lvc-dashboard {
     & .detail-panel .panel-head h1 { font-size: 18px; }
-    & .status-toggle { width: 152px; min-height: 34px; }
-    & .status-toggle span { padding: 0 7px; font-size: 12px; }
     & .thread .msg { max-width: 88%; }
   }
 }

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.9.1'
+  VERSION = '0.10.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Yaroslav Shmarov