Finish desktop styles

app/assets/stylesheets/events.css

@@ -1,49 +1,61 @@
 @layer components {
   .events {
     --events-gap: 1ch;
-    --events-border: 1px solid var(--color-ink-lighter)
+    --events-border: 1px solid var(--color-ink-lighter);
   }
 
   /* Day
   /* ------------------------------------------------------------------------ */
 
   .events__day {
-    align-items: end;
-    column-gap: var(--events-gap);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    margin-block-end: var(--events-gap);
     position: relative;
-  }
 
-  .events__day-header {
-    background-color: gold;
-    grid-column: 1 / -1;
-    inset-block-start: 0;
-    padding-block-start: 0.5ch;
-    position: sticky;
-
-    &:before {
-      content: "";
+    /* Don't put borders around empty days */
+    &:has(*) {
       border-block-start: var(--events-border);
-      position: absolute;
-      inset: 50% 0 auto 0;
-      translate: 0 -50%;
-      z-index: -1;
+      border-inline: var(--events-border);
     }
   }
 
-  .events__day-header-content {
+  .events__day-header,
+  .events__column-header {
+    font-size: var(--text-small);
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .events__day-header {
     background-color: var(--color-ink-lighter);
     border-radius: 0.2em;
     display: block;
-    font-size: var(--text-small);
     inline-size: fit-content;
     line-height: 1.5;
     margin-inline: auto;
-    padding: 0.2em 1.3em;
-    text-align: center;
-    text-transform: uppercase;
+    padding: 0.5ch 1.3em;
+    position: absolute;
+    inset: 0 auto auto 50%;
+    translate: -50% -50%;
+    z-index: 3;
+  }
+
+  .events__columns {
+    align-items: end;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    position: relative;
+
+    /* Pseudo column borders since .events__column is display: contents */
+    &:before,
+    &:after {
+      border-inline-start: var(--events-border);
+      content: "";
+      inset-block: 0;
+      position: absolute;
+      z-index: 3;
+    }
+
+    &:before { inset-inline-start: calc(100% / 3); }
+    &:after { inset-inline-end: calc(100% / 3); }
   }
 
   .events__column {
@@ -51,10 +63,12 @@
   }
 
   .events__column-header {
-    background: tomato;
+    background-color: var(--color-canvas);
     grid-row-start: 2;
+    inset-block-start: calc(var(--events-gap) * -2);
+    padding-block: calc(var(--events-gap) * 3) var(--events-gap);
     position: sticky;
-    inset-block-start: 1lh;
+    z-index: 2;
   }
 
   .events__time-block {
@@ -62,10 +76,9 @@
     display: grid;
     gap: var(--events-gap);
     justify-items: center;
-    padding: 0;
     margin: 0;
-    /* margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines);
-    padding: var(--block-space) var(--inline-space-double); */
+    padding-block-end: calc(var(--events-gap) * 3);
+    padding-inline: calc(var(--events-gap) * 2);
 
     .event {
       grid-column-start: unset !important;

app/helpers/events_helper.rb

@@ -1,4 +1,36 @@
 module EventsHelper
+
+  def event_column_info(event_type, day_timeline)
+    case event_type
+    when "added"
+      events = day_timeline.events.where(action: "card_published")
+      {
+        title: events.count > 0 ? "Added (#{events.count})" : "Added",
+        index: 1,
+        events: events
+      }
+    when "closed"
+      events = day_timeline.events.where(action: "card_closed")
+      {
+        title: events.count > 0 ? "Closed (#{events.count})" : "Closed",
+        index: 3,
+        events: events
+      }
+    else
+      {
+        title: "Updated",
+        index: 2,
+        events: day_timeline.events.where.not(action: ["card_published", "card_closed"])
+      }
+    end
+  end
+
+
+
+
+
+
+
   def event_column(event)
     case event.action
     when "card_closed"

app/views/events/_day.html.erb

@@ -1,34 +1,18 @@
-<div class="events__day" data-controller="related-element"
+<section class="events__day" data-controller="related-element"
   data-related-element-highlight-class="event--related">
   <% if day_timeline.has_activity? %>
     <h2 class="events__day-header">
-      <span class="events__day-header-content">
-        <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
-      </span>
+      <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>
     </h2>
 
-
-    <%= render "events/day_timeline_columns", day_timeline: day_timeline %>
-
-
-
-
-
-
-
-
-
-
-
-
-    <div class="center events" hidden>
-      <%= render_column_headers(day_timeline) %>
-      <%= render_event_grid_cells %>
-      <%= render "events/day_timeline", day_timeline: day_timeline  %>
+    <div class="events__columns">
+      <%= render "events/day_timeline_column", event_type: "added", day_timeline: day_timeline %>
+      <%= render "events/day_timeline_column", event_type: "updated", day_timeline: day_timeline %>
+      <%= render "events/day_timeline_column", event_type: "closed", day_timeline: day_timeline %>
     </div>
 
     <%= render "events/empty_days", day_timeline: day_timeline %>
   <% else %>
     <%= render "events/empty_days", day_timeline: day_timeline %>
   <% end %>
-</div>
+</section>

app/views/events/_day_timeline_column.html.erb

@@ -0,0 +1,11 @@
+<% column = event_column_info(event_type, day_timeline) %>
+
+<div class="events__column">
+  <h3 class="events__column-header"><%= column[:title] %></h3>
+  <% column[:events].group_by { it.created_at.hour }.each do |hour, events| %>
+    <%= event_cluster_tag(hour, column[:index]) do %>
+      <%= render partial: "events/event", collection: events %>
+      <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
+    <% end %>
+  <% end %>
+</div>