Add CSS to show column name on hover

app/assets/stylesheets/card-columns.css

@@ -79,8 +79,31 @@
     &.drag-and-drop__hover-container {
       --dnd-bg-color: transparent;
       --dnd-border-color: transparent;
+
+      &.show-column-name-on-hover {
+        &:after {
+          color: var(--card-color);
+          content: attr(data-column-name);
+          font-size: var(--text-x-small);
+          font-weight: 500;
+          line-height: var(--column-width-collapsed);
+          padding-inline: 1ch;
+          position: fixed;
+          text-transform: uppercase;
+          top: 0;
+          translate: -50%;
+          border-radius: 99rem;
+        }
+
+        &.is-collapsed {
+          &:after {
+            writing-mode: vertical-rl;
+          }
+        }
+      }
     }
 
+
     @media (any-hover: hover) {
       .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
         filter: blur(3px) brightness(1.2);

app/views/collections/show/_closed.html.erb

@@ -2,6 +2,7 @@
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"
   data-collapsible-columns-target="column"
+  data-column-name="Done"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
   data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
 >

app/views/collections/show/_column.html.erb

@@ -4,6 +4,7 @@
   data-drag-and-strum-target="container"
   data-collapsible-columns-target="column"
   data-controller="clicker"
+  data-column-name="<%= column.name %>"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState"
   data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
 >

app/views/collections/show/_not_now.html.erb

@@ -2,6 +2,7 @@
   data-collapsible-columns-target="column"
   data-drag-and-drop-target="container"
   data-drag-and-strum-target="container"
+  data-column-name="Not Now"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
   data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
 >

app/views/collections/show/_stream.html.erb

@@ -1,5 +1,6 @@
 <section id="the-stream" class="cards cards--considering"
   data-drag-and-drop-target="container"
+  data-column-name="Maybe?"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
   data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>">
   <div>