From 0ef6f8a8221ec8c0ba1a411a0de854585f7bec43 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 3 Dec 2025 14:11:08 -0600
Subject: [PATCH 1/2] Nicer blank slates

---
 app/assets/stylesheets/card-columns.css       | 41 +++++++++++++------
 .../boards/columns/closeds/show.html.erb      |  6 +--
 .../boards/columns/not_nows/show.html.erb     |  6 +--
 app/views/boards/columns/show.html.erb        |  6 +--
 .../boards/columns/streams/show.html.erb      |  4 +-
 .../boards/show/_filtered_cards.html.erb      |  1 +
 app/views/cards/index.html.erb                |  1 +
 .../boards/columns/closeds/show.html.erb      |  4 +-
 .../boards/columns/not_nows/show.html.erb     |  4 +-
 app/views/public/boards/columns/show.html.erb |  4 +-
 .../boards/columns/streams/show.html.erb      |  4 +-
 11 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3b2faca60..766229d4d 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -402,27 +402,44 @@
     }
   }
 
-  .blank-slate--card {
+  .blank-slate--drag {
     box-shadow: none !important;
     color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas));
 
+    p {
+      font-size: var(--text-small);
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .cards--considering & {
       background-color: var(--card-bg-color) !important;
     }
 
-    p {
-      font-size: var(--text-small);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .cards--grid & {
+      display: none;
+    }
+  }
 
-      &.blank-slate-for-grid {
-        display: none;
+  .blank-slate--empty {
+    border: 2px dashed var(--color-ink-light);
+    border-radius: 1ch;
+    color: var(--color-ink-dark);
+    margin-block-start: 5dvh;
+    padding: 1ch 2ch;
+    rotate: -3deg;
+    font-weight: 500;
 
-        .cards--grid & {
-          display: initial;
-        }
-      }
+    .cards:not(.cards--grid) & {
+      display: none;
+    }
+  }
+
+  .blank-slate--filters {
+    .cards--grid:has(.card) & {
+      display: none;
     }
   }
 
diff --git a/app/views/boards/columns/closeds/show.html.erb b/app/views/boards/columns/closeds/show.html.erb
index 412d15183..fc8aaddfb 100644
--- a/app/views/boards/columns/closeds/show.html.erb
+++ b/app/views/boards/columns/closeds/show.html.erb
@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/boards/columns/not_nows/show.html.erb b/app/views/boards/columns/not_nows/show.html.erb
index 04ef7dd2e..2f6623b02 100644
--- a/app/views/boards/columns/not_nows/show.html.erb
+++ b/app/views/boards/columns/not_nows/show.html.erb
@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/boards/columns/show.html.erb b/app/views/boards/columns/show.html.erb
index 83931aaff..9aafae01f 100644
--- a/app/views/boards/columns/show.html.erb
+++ b/app/views/boards/columns/show.html.erb
@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/boards/columns/streams/show.html.erb b/app/views/boards/columns/streams/show.html.erb
index 141584283..b1bb7919e 100644
--- a/app/views/boards/columns/streams/show.html.erb
+++ b/app/views/boards/columns/streams/show.html.erb
@@ -17,9 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>
diff --git a/app/views/boards/show/_filtered_cards.html.erb b/app/views/boards/show/_filtered_cards.html.erb
index 9b37eb850..5cfcd39b7 100644
--- a/app/views/boards/show/_filtered_cards.html.erb
+++ b/app/views/boards/show/_filtered_cards.html.erb
@@ -2,4 +2,5 @@
   <%= with_automatic_pagination :filtered_cards_paginated_container, page do %>
     <%= render "cards/display/previews", cards: page.records, draggable: true %>
   <% end %>
+  <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
 </section>
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index f021c8728..c11876e16 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -22,5 +22,6 @@
     <%= with_automatic_pagination :cards_paginated_container, @page do %>
       <%= render "cards/display/previews", cards: @page.records, draggable: true %>
     <% end %>
+    <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
   </section>
 <% end %>
diff --git a/app/views/public/boards/columns/closeds/show.html.erb b/app/views/public/boards/columns/closeds/show.html.erb
index 6b6106dbc..0986b06fc 100644
--- a/app/views/public/boards/columns/closeds/show.html.erb
+++ b/app/views/public/boards/columns/closeds/show.html.erb
@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>
diff --git a/app/views/public/boards/columns/not_nows/show.html.erb b/app/views/public/boards/columns/not_nows/show.html.erb
index dfdc7365c..c92c6bce4 100644
--- a/app/views/public/boards/columns/not_nows/show.html.erb
+++ b/app/views/public/boards/columns/not_nows/show.html.erb
@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>
diff --git a/app/views/public/boards/columns/show.html.erb b/app/views/public/boards/columns/show.html.erb
index bb5010b51..68d3b168d 100644
--- a/app/views/public/boards/columns/show.html.erb
+++ b/app/views/public/boards/columns/show.html.erb
@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>
diff --git a/app/views/public/boards/columns/streams/show.html.erb b/app/views/public/boards/columns/streams/show.html.erb
index 225e0f711..77902570a 100644
--- a/app/views/public/boards/columns/streams/show.html.erb
+++ b/app/views/public/boards/columns/streams/show.html.erb
@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>

From bb149da532fb771439973d1dc9bdcba018ba43d5 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 3 Dec 2025 14:13:04 -0600
Subject: [PATCH 2/2] Move blank slates to its own file

---
 app/assets/stylesheets/blank-slates.css | 42 +++++++++++++++++++++++++
 app/assets/stylesheets/card-columns.css | 41 ------------------------
 2 files changed, 42 insertions(+), 41 deletions(-)
 create mode 100644 app/assets/stylesheets/blank-slates.css

diff --git a/app/assets/stylesheets/blank-slates.css b/app/assets/stylesheets/blank-slates.css
new file mode 100644
index 000000000..188f4926b
--- /dev/null
+++ b/app/assets/stylesheets/blank-slates.css
@@ -0,0 +1,42 @@
+@layer components {
+  .blank-slate--drag {
+    box-shadow: none !important;
+    color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas));
+
+    p {
+      font-size: var(--text-small);
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cards--considering & {
+      background-color: var(--card-bg-color) !important;
+    }
+
+    .cards--grid & {
+      display: none;
+    }
+  }
+
+  .blank-slate--empty {
+    border: 2px dashed var(--color-ink-light);
+    border-radius: 1ch;
+    color: var(--color-ink-dark);
+    margin-block-start: 5dvh;
+    padding: 1ch 2ch;
+    rotate: -3deg;
+    font-weight: 500;
+
+    .cards:not(.cards--grid) & {
+      display: none;
+    }
+  }
+
+  .blank-slate--filters {
+    .cards--grid:has(.card) & {
+      display: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 766229d4d..ac690ac30 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -402,47 +402,6 @@
     }
   }
 
-  .blank-slate--drag {
-    box-shadow: none !important;
-    color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas));
-
-    p {
-      font-size: var(--text-small);
-      overflow: hidden;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .cards--considering & {
-      background-color: var(--card-bg-color) !important;
-    }
-
-    .cards--grid & {
-      display: none;
-    }
-  }
-
-  .blank-slate--empty {
-    border: 2px dashed var(--color-ink-light);
-    border-radius: 1ch;
-    color: var(--color-ink-dark);
-    margin-block-start: 5dvh;
-    padding: 1ch 2ch;
-    rotate: -3deg;
-    font-weight: 500;
-
-    .cards:not(.cards--grid) & {
-      display: none;
-    }
-  }
-
-  .blank-slate--filters {
-    .cards--grid:has(.card) & {
-      display: none;
-    }
-  }
-
   /* TODO: I think this is legacy now? */
   .cards__heading {
     display: flex;