Merge branch 'knobs' into entropy-settings-ui

* knobs:
  Add comment
  Properly parameterize the field name
  Remove leftover console.log
  Correct the reserved area math
  Better a11y
  Connect the range slider
  Basic radio input working
  Expose button so you can delete drafts
  Save button should match card color
  `x` interferes with string entry, try `SHIFT+ENTER` to toggle checkboxes
  Remove unnecessary param and update condition

app/assets/stylesheets/knobs.css

@@ -139,4 +139,4 @@
     margin-block-start: 1ch;
     text-transform: uppercase;
   }
-}
+}

app/controllers/cards_controller.rb

@@ -28,9 +28,7 @@ class CardsController < ApplicationController
   def update
     @card.update! card_params
 
-    if params[:card][:collection_id].present?
-      redirect_to collection_card_path(@card.collection, @card)
-    elsif @card.published?
+    if @card.published?
       render_card_replacement
     else
       redirect_to @card
@@ -56,7 +54,7 @@ class CardsController < ApplicationController
     end
 
     def card_params
-      params.expect(card: [ :collection_id, :status, :title, :description, :image, tag_ids: [] ])
+      params.expect(card: [ :status, :title, :description, :image, tag_ids: [] ])
     end
 
     def render_card_replacement

app/javascript/controllers/knob_controller.js

@@ -25,4 +25,4 @@ export default class extends Controller {
 
     option.checked = true;
   }
-}
+}

app/javascript/controllers/navigable_list_controller.js

@@ -125,10 +125,11 @@ export default class extends Controller {
       this.#handleArrowKey(event, this.#selectPrevious.bind(this))
     },
     Enter(event) {
-      this.#clickCurrentItem(event)
+      if (event.shiftKey) {
+        this.#toggleCurrentItem(event)
+      } else {
+        this.#clickCurrentItem(event)
+      }
     },
-    x(event) {
-      this.#toggleCurrentItem(event)
-    }
   }
 }

app/views/cards/_messages.html.erb

@@ -1,23 +1,25 @@
 <%= messages_tag(card) do %>
-  <%= render partial: "cards/comments/comment", collection: card.comments.chronologically, cached: true %>
-  <%= render "cards/comments/new", card: card %>
+  <% if card.published? %>
+    <%= render partial: "cards/comments/comment", collection: card.comments.chronologically, cached: true %>
+    <%= render "cards/comments/new", card: card %>
 
-  <div class="comments__subscribers flex flex-column margin-block txt-align-start full-width">
-    <strong class="txt-uppercase">Subscribers</strong>
+    <div class="comments__subscribers flex flex-column margin-block-start txt-align-start full-width">
+      <strong class="txt-uppercase">Subscribers</strong>
 
-    <p class="margin-none-block-start margin-block-end-half">
-      <%= pluralize(@card.watchers.without(User.system).count, "person") %> will be notified when someone comments on this.
-    </p>
+      <p class="margin-none-block-start margin-block-end-half">
+        <%= pluralize(@card.watchers.without(User.system).count, "person") %> will be notified when someone comments on this.
+      </p>
 
-    <div class="flex align-center flex-wrap gap-half max-width txt-normal">
-      <% prepend_current_user_to(@card.watchers.without(User.system).alphabetically).each do |watcher| %>
-        <%= avatar_tag watcher %>
-      <% end %>
+      <div class="flex align-center flex-wrap gap-half max-width txt-normal">
+        <% prepend_current_user_to(@card.watchers.without(User.system).alphabetically).each do |watcher| %>
+          <%= avatar_tag watcher %>
+        <% end %>
+      </div>
     </div>
+  <% end %>
 
-    <div class="txt-align-center full-width flex flex-column margin-block-start-double">
-      <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
-      <%= button_to_delete_card(@card) %>
-    </div>
+  <div class="txt-align-center full-width flex flex-column margin-block-start-double">
+    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
+    <%= button_to_delete_card(@card) %>
   </div>
 <% end %>

app/views/cards/edit.html.erb

@@ -12,7 +12,7 @@
           placeholder: "Add some notes, context, pictures, or video about this…",
           data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %>
     </div>
-    <%= form.button "Save changes", type: :submit, class: "btn" %>
+    <%= form.button "Save changes", type: :submit, class: "btn btn--reversed", style: "--btn-background: #{@card.color}" %>
     <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %>
   <% end %>
 <% end %>

app/views/cards/index/_header.html.erb

@@ -31,7 +31,7 @@
           <%= render "cards/index/collections_filter", filter: filter %>
         </menu>
         <p class="txt-small txt-align-center margin-block-half full-width">
-          Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">x</kbd> to select.
+          Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
         </p>
       <% end %>
     </div>

app/views/cards/show.html.erb

@@ -32,7 +32,7 @@
 <div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
   <%= render "cards/container", card: @card %>
 
-  <% if @card.published? %>
+  <% if @card.published? || @card.drafted? %>
     <%= render "cards/messages", card: @card %>
   <% end %>
 </div>

app/views/collections/edit/_knob.html.erb

@@ -0,0 +1,35 @@
+<% name = label.parameterize %>
+
+<fieldset class="knob" data-controller="knob" data-knob-target="field" style="--knob-options: <%= knob_options.length %>; --knob-index: <%= default_index %>;">
+
+  <div class="position-relative" role="radiogroup" aria-labelledby="<%= name %>">
+    <% knob_options.each_with_index do |value, i| %>
+      <label class="knob__option" style="--i: <%= i %>">
+        <input
+          <%= "checked" if value == knob_options[default_index] %>
+          data-action="change->knob#optionChanged"
+          data-index="<%= i %>"
+          data-knob-target="option"
+          name="<%= name %>"
+          type="radio"
+          value="<%= value %>"
+        />
+        <span><%= value %></span>
+      </label>
+    <% end %>
+    <input
+      aria-hidden
+      class="knob__slider"
+      data-action="input->knob#sliderChanged"
+      data-knob-target="slider"
+      max="<%= knob_options.length - 1 %>"
+      min="0"
+      type="range"
+      value="<%= default_index %>"
+    />
+
+    <div class="knob__knob" aria-hidden></div>
+  </div>
+
+  <div id="<%= name %>" class="knob__label">Days</div>
+</fieldset>

app/views/events/_filter.html.erb

@@ -36,7 +36,7 @@
 		<% end %>
 
 		<p class="txt-small txt-align-center margin-block-half full-width">
-			Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">x</kbd> to select.
+			Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
 		</p>
 	<% end %>
 </div>