From 84b6a1291fd41051077a103ac54a172993659116 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 19 May 2025 17:08:00 -0500
Subject: [PATCH] Fizzy do with AI polish

---
 app/assets/stylesheets/_global.css            |   3 +
 app/assets/stylesheets/animation.css          |   6 +
 app/assets/stylesheets/terminals.css          | 112 +++++++++++-------
 .../controllers/terminal_controller.js        |   2 +-
 app/models/command/assign.rb                  |   2 +-
 app/models/command/composite.rb               |   4 +-
 app/views/commands/_form.html.erb             |   2 +-
 app/views/commands/_help.html.erb             |  32 ++---
 app/views/commands/_terminal.html.erb         |   2 +-
 app/views/commands/index.html.erb             |   7 +-
 10 files changed, 104 insertions(+), 68 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 37af77acf..a2ba4d925 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -163,6 +163,7 @@
   --color-marker: oklch(var(--lch-red-medium));
   --color-terminal-bg: oklch(var(--lch-blue-darkest));
   --color-terminal-text: oklch(var(--lch-green-medium));
+  --color-terminal-text-light: oklch(var(--lch-green-light));
 
   /* Colors: Cards */
   --color-card-default: oklch(var(--lch-blue-dark));
@@ -268,6 +269,8 @@
     --lch-pink-lighter: 30% 0.03 346;
     --lch-pink-lightest: 25% 0.011 348;
 
+    --color-terminal-text-light: oklch(var(--lch-green-dark));
+
     --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
               0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
               0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 025189d5a..5fa47f1c4 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -8,6 +8,12 @@
     5%,60%  { opacity: 1; }
   }
 
+  @keyframes pulse {
+    0%   { opacity: 1; }
+    50%  { opacity: 0.6; }
+    100% { opacity: 1; }
+  }
+
   /* Keyframes */
   @keyframes react {
     0%   { transform: scale(0.85);  opacity: 0; }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 2532bd7b4..0d23d000b 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -7,7 +7,7 @@
     font-family: var(--font-mono);
     font-size: var(--text-normal);
     inset: auto 0 0 0;
-    padding: var(--block-space) calc(var(--tray-size) + var(--inline-space) * 3);
+    padding: var(--block-space) calc(var(--tray-size) + var(--inline-space-double));
     position: fixed;
     z-index: var(--z-terminal);
 
@@ -15,24 +15,6 @@
       background-color: var(--color-black);
       border-block-start: 1px solid var(--color-ink-lighter);
     }
-
-    .terminal__input {
-      --input-border-color: transparent;
-      --input-border-radius: 0.3em;
-      --hover-color: transparent;
-      --input-color: var(--color-terminal-text);
-      --outline-size: 0;
-      --outline-color: transparent;
-
-      accent-color: var(--color-terminal-text);
-      caret-color: var(--color-terminal-text);
-      font-family: inherit;
-
-      &::placeholder {
-        color: oklch(var(--lch-green-light));
-        opacity: 0.5;
-      }
-    }
   }
 
   .terminal__button {
@@ -62,17 +44,9 @@
     transition: unset;
   }
 
-  .terminal__menu {
-    display: none;
-    list-style: none;
-
-    .terminal--open & {
-      display: flex;
-    }
-
-    .terminal--showing-help & {
-      display: none;
-    }
+  .terminal__container {
+    max-block-size: calc(100vh - var(--btn-size) - var(--block-space));
+    overflow: auto;
   }
 
   .terminal__help {
@@ -119,6 +93,57 @@
     }
   }
 
+  .terminal__input:is(.input) {
+    --input-border-color: transparent;
+    --input-border-radius: 0.3em;
+    --hover-color: transparent;
+    --input-color: var(--color-terminal-text);
+    --outline-size: 0;
+    --outline-color: transparent;
+
+    accent-color: var(--color-terminal-text);
+    caret-color: var(--color-terminal-text);
+    font-family: inherit;
+
+    &::placeholder {
+      color: var(--color-terminal-text-light);
+      opacity: 0.5;
+    }
+
+    &:focus::placeholder {
+      opacity: 0.7;
+    }
+    
+    .terminal--confirmation & {
+      color: var(--color-terminal-text-light);
+    }
+
+    .terminal--error & {
+      accent-color: var(--color-negative);
+      caret-color: var(--color-negative);
+      color: var(--color-negative);
+    }
+  }
+
+  .terminal__label {
+    .terminal--busy:is(:not(.terminal--confirmation)) & {
+      animation: pulse 1s infinite;
+    }
+  }
+
+  .terminal__menu {
+    display: none;
+    list-style: none;
+
+    .terminal--open & {
+      display: flex;
+    }
+
+    .terminal--showing-help & {
+      display: none;
+    }
+  }
+
   .terminal__item {
     &[aria-current] {
       --btn-color: var(--color-terminal-bg);
@@ -139,24 +164,25 @@
     }
   }
 
-  .terminal--error .terminal__input {
-    accent-color: var(--color-negative);
-    caret-color: var(--color-negative);
-    color: var(--color-negative);
-  }
-
-  /* @TODO: Review these. */
-  .terminal--output {
-    overflow: scroll;
-    max-height: 400px;
+  .terminal__output {
     display: none;
 
+    .terminal--confirmation & {
+      color: var(--color-terminal-text-light);
+    }
+
     .terminal--showing-output & {
       display: block;
     }
-  }
 
-  .terminal--busy {
-    border: 5px solid orange;
+    p {
+      + ul {
+        margin-block-start: 0;
+      }
+
+      &:has(+ ul) {
+        margin-block-end: 0;
+      }
+    }
   }
 }
diff --git a/app/javascript/controllers/terminal_controller.js b/app/javascript/controllers/terminal_controller.js
index 83494de8a..2cefd5765 100644
--- a/app/javascript/controllers/terminal_controller.js
+++ b/app/javascript/controllers/terminal_controller.js
@@ -149,7 +149,7 @@ export default class extends Controller {
   #showConfirmationPrompt(confirmationPrompt) {
     if (isMultiLineString(confirmationPrompt)) {
       this.#showOutput(confirmationPrompt)
-      this.inputTarget.value = `Do you confirm? [Y/n] `
+      this.inputTarget.value = `Apply these changes? [Y/n] `
     } else {
       this.inputTarget.value = `${confirmationPrompt}? [Y/n] `
     }
diff --git a/app/models/command/assign.rb b/app/models/command/assign.rb
index 69c4a06dd..b6c22221a 100644
--- a/app/models/command/assign.rb
+++ b/app/models/command/assign.rb
@@ -8,7 +8,7 @@ class Command::Assign < Command
   def title
     assignee_description = assignees.collect(&:first_name).join(", ")
 
-    "Assign #{assignee_description} to #{cards_description}"
+    "Assign #{cards_description} to #{assignee_description}"
   end
 
   def execute
diff --git a/app/models/command/composite.rb b/app/models/command/composite.rb
index 7595e52b9..59256b773 100644
--- a/app/models/command/composite.rb
+++ b/app/models/command/composite.rb
@@ -21,10 +21,10 @@ class Command::Composite < Command
   end
 
   def confirmation_prompt
-    confirmations = commands_excluding_redirections.collect(&:confirmation_prompt).collect { "- #{it}" }.join("\n")
+    confirmations = commands_excluding_redirections.collect(&:confirmation_prompt).collect { "- #{it}." }.join("\n")
 
     <<~MD
-      This will:
+      You are about to:
 
       #{confirmations}
     MD
diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb
index f13de4d5c..d10a919d8 100644
--- a/app/views/commands/_form.html.erb
+++ b/app/views/commands/_form.html.erb
@@ -17,7 +17,7 @@
           terminal_target: "input",
           action: "keydown.up->toggle-class#add:prevent keydown.up->navigable-list#selectCurrentOrLast terminal#hideError"
         },
-        placeholder: "Press ⌘+K to search or type /commands…",
+        placeholder: "Press ⌘+K to search or type commands…",
         spellcheck: "false" %>
 
   <%=  hidden_field_tag "confirmed", nil, data: { terminal_target: "confirmation" } %>
diff --git a/app/views/commands/_help.html.erb b/app/views/commands/_help.html.erb
index 8c18abcf3..45d9db64c 100644
--- a/app/views/commands/_help.html.erb
+++ b/app/views/commands/_help.html.erb
@@ -1,28 +1,28 @@
 <section class="terminal__help" aria-labelledby="help-menu-title">
-  <h2 id="help-menu-title">Commands you can use in Fizzy:</h2>
+  <h2 id="help-menu-title"><strong>Commands you can use in Fizzy:</strong></h2>
   <dl>
     <h3>Navigation</h3>
     <dt><code>@username</code></dt>
-    <dd>Navigate to a someone's profile</dd>
-    <dt><code>[card id]</code></dt>
-    <dd>Navigate to a specific card by its id</dd>
+    <dd>Go to to a someone's profile</dd>
+    <dt><code>[id]</code></dt>
+    <dd>Jump to a card by ID</dd>
 
     <h3>Filtering</h3>
-    <dt><code>#tag_name</code></dt>
-    <dd>Filter cards by tag</dd>
-    <dt><code>[card id 1] [card id 2]...</code></dt>
-    <dd>Filter multiple cards by their IDs</dd>
-    <dt><code>search_term</code></dt>
-    <dd>Search for cards containing the term</dd>
+    <dt><code>#tag</code></dt>
+    <dd>Just show cards taggged [tag]</dd>
+    <dt><code>[id] [id]…</code></dt>
+    <dd>Show multiple cards by ID</dd>
+    <dt><code>[search term]</code></dt>
+    <dd>Keyword search</dd>
     <dt><code>/clear</code></dt>
-    <dd>Clear all the filters</dd>
+    <dd>Clear all filters</dd>
 
     <h3>Cards</h3>
-    <dt><code>/assign [username 1] [username 2]...</code></dt>
-    <dd>Assign selected cards to specified people(s)</dd>
+    <dt><code>/assign [person] [person]…</code></dt>
+    <dd>Assign visible card(s)</dd>
     <dt><code>/close [reason]</code></dt>
-    <dd>Close selected card(s) with an optional reason</dd>
-    <dt><code>/tag [tag name]</code></dt>
-    <dd>Add a tag to selected cards</dd>
+    <dd>Close visible card(s)</dd>
+    <dt><code>/tag [tag]</code></dt>
+    <dd>Tag visible card(s)</dd>
   </dl>
 </section>
diff --git a/app/views/commands/_terminal.html.erb b/app/views/commands/_terminal.html.erb
index 14688463a..3ab9006cb 100644
--- a/app/views/commands/_terminal.html.erb
+++ b/app/views/commands/_terminal.html.erb
@@ -11,7 +11,7 @@
         toggle_class_toggle_class: "terminal--open",
         action: "keydown->terminal#handleKeyPress keydown->navigable-list#navigate focusin->navigable-list#select keydown.esc->toggle-class#remove:stop keydown.esc->terminal#focus keydown.esc->navigable-list#selectLast keydown.esc@document->terminal#hideMenus" } do %>
   <%= turbo_frame_tag :recent_commands, src: commands_path, data: { terminal_target: "recentCommands" } %>
-  <div class="terminal--output" data-terminal-target="output"></div>
+  <div class="terminal__output" data-terminal-target="output"></div>
 
   <%= render "commands/form" %>
 <% end %>
diff --git a/app/views/commands/index.html.erb b/app/views/commands/index.html.erb
index 3b14f3338..7b86b89ed 100644
--- a/app/views/commands/index.html.erb
+++ b/app/views/commands/index.html.erb
@@ -1,5 +1,6 @@
 <%= turbo_frame_tag :recent_commands do %>
-  <ul class="terminal__menu flex-column txt-align-start margin-none margin-block-end unpad" aria-label="Recent commands"><%= render partial: "commands/command", collection: @commands %></ul>
-
-  <%= render "commands/help" %>
+  <div class="terminal__container">
+    <ul class="terminal__menu flex-column txt-align-start margin-none margin-block-end unpad" aria-label="Recent commands"><%= render partial: "commands/command", collection: @commands %></ul>
+    <%= render "commands/help" %>
+  </div>
 <% end %>