From eba749a1932189d049c8e9f74ca623623b7f76e3 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 19 Nov 2025 12:48:36 -0600
Subject: [PATCH] Expand activity columns

---
 app/assets/stylesheets/events.css             | 44 +++++++++++++++++++
 .../events/day_timeline/columns_controller.rb | 22 ++++++++++
 app/models/user/day_timeline/column.rb        |  4 +-
 .../events/day_timeline/_column.html.erb      | 11 ++++-
 .../events/day_timeline/columns/show.html.erb | 25 +++++++++++
 config/routes.rb                              |  3 ++
 6 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 app/controllers/events/day_timeline/columns_controller.rb
 create mode 100644 app/views/events/day_timeline/columns/show.html.erb

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 20fb53217..1dbdf0997 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -19,6 +19,33 @@
     --events-day-header-height: 1.75rem;
   }
 
+  .events--grid {
+    --events-grid-gap: 1rem;
+    --events-grid-columns: 1;
+
+    container-type: inline-size;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--events-grid-gap);
+    justify-content: center;
+    margin: var(--block-space) auto;
+    max-inline-size: var(--main-width);
+
+    @media (min-width: 640px) {
+      --events-grid-columns: 2;
+    }
+
+    @media (min-width: 960px) {
+      --events-grid-columns: 3;
+    }
+
+    .event {
+      inline-size: calc((100% - var(--events-grid-gap) * (var(--events-grid-columns) - 1) ) / var(--events-grid-columns)) !important;
+      margin: 0 !important;
+    }
+  }
+
   .events__activity-summary {
     border: solid var(--color-ink-lighter);
     border-width: 1px 1px 0 1px;
@@ -206,6 +233,23 @@
     padding: var(--block-space-half) var(--inline-space);
   }
 
+  .events__maximize-button {
+    inset: calc(var(--events-gap) * 3) 0 auto auto;
+    outline-offset: -2px;
+    position: absolute;
+    transform: translateY(-10%);
+    z-index: 1;
+
+    @media (any-hover: hover ) {
+      opacity: 0;
+
+      .events__column-header:hover &,
+      &:focus-visible {
+        opacity: 1;
+      }
+    }
+  }
+
   .events__time-block {
     align-content: end;
     display: grid;
diff --git a/app/controllers/events/day_timeline/columns_controller.rb b/app/controllers/events/day_timeline/columns_controller.rb
new file mode 100644
index 000000000..362521634
--- /dev/null
+++ b/app/controllers/events/day_timeline/columns_controller.rb
@@ -0,0 +1,22 @@
+class Events::DayTimeline::ColumnsController < ApplicationController
+  include DayTimelinesScoped
+
+  def show
+    @column = column_for_id(params[:id])
+    fresh_when @day_timeline
+  end
+
+  private
+    def column_for_id(id)
+      case id.to_s.downcase
+      when "added", "1"
+        @day_timeline.added_column
+      when "updated", "2"
+        @day_timeline.updated_column
+      when "closed", "3"
+        @day_timeline.closed_column
+      else
+        head :not_found
+      end
+    end
+end
diff --git a/app/models/user/day_timeline/column.rb b/app/models/user/day_timeline/column.rb
index fe42c68dc..0331a83ff 100644
--- a/app/models/user/day_timeline/column.rb
+++ b/app/models/user/day_timeline/column.rb
@@ -1,7 +1,7 @@
 class User::DayTimeline::Column
   include ActionView::Helpers::TagHelper, ActionView::Helpers::OutputSafetyHelper, TimeHelper
 
-  attr_reader :index
+  attr_reader :index, :base_title, :day_timeline, :events
 
   def initialize(day_timeline, base_title, index, events)
     @day_timeline = day_timeline
@@ -30,8 +30,6 @@ class User::DayTimeline::Column
   end
 
   private
-    attr_reader :base_title, :day_timeline, :events
-
     def limited_events
       @limited_events ||= events.limit(100).load
     end
diff --git a/app/views/events/day_timeline/_column.html.erb b/app/views/events/day_timeline/_column.html.erb
index 6e036a412..a9e14c558 100644
--- a/app/views/events/day_timeline/_column.html.erb
+++ b/app/views/events/day_timeline/_column.html.erb
@@ -1,5 +1,14 @@
 <div class="events__column">
-  <h3 class="events__column-header"><%= column.title %></h3>
+  <h3 class="events__column-header">
+    <%= column.title %>
+
+    <% if column.events_by_hour.any? %>
+      <%= link_to events_day_timeline_column_path(id: column.index, day: column.day_timeline.day.iso8601), class: "events__maximize-button btn btn--circle txt-x-small borderless" do %>
+        <%= icon_tag "grid", class: "translucent" %>
+        <span class="for-screen-reader">Expand column</span>
+      <% end %>
+    <% end %>
+  </h3>
   <% column.events_by_hour.each do |hour, events| %>
     <%= events_at_hour_container(column, hour) do %>
       <%= render partial: "events/event", collection: events, cached: true %>
diff --git a/app/views/events/day_timeline/columns/show.html.erb b/app/views/events/day_timeline/columns/show.html.erb
new file mode 100644
index 000000000..56a7d3c4c
--- /dev/null
+++ b/app/views/events/day_timeline/columns/show.html.erb
@@ -0,0 +1,25 @@
+<% @page_title = @column.base_title %>
+
+<% content_for :header do %>
+  <div class="header__actions header__actions--start">
+    <%= link_to events_path, class: "btn btn--back", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <%= icon_tag "arrow-left" %>
+        <strong>Back to Actvity</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
+    <% end %>
+  </div>
+
+  <h1 class="header__title">
+    <%= @column.title %>
+  </h1>
+<% end %>
+
+<div class="events--grid">
+  <% @column.events_by_hour.each do |hour, events| %>
+    <% if events.any? %>
+      <%= render partial: "events/event", collection: events, cached: true %>
+    <% end %>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index e165802e0..85b26c17a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -130,6 +130,9 @@ Rails.application.routes.draw do
   resources :events, only: :index
   namespace :events do
     resources :days
+    namespace :day_timeline do
+      resources :columns, only: :show
+    end
   end
 
   resources :qr_codes