From 8308151500cbbb6bbf2466107231cf2fb1d7d54f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 26 Jun 2025 14:54:27 -0500
Subject: [PATCH] Use header component everywhere

---
 .../stylesheets/{nav.css => header.css}       | 11 +++++++++-
 app/views/accounts/settings/show.html.erb     | 20 ++++++++++---------
 app/views/cards/index/_header.html.erb        |  2 +-
 app/views/collections/edit.html.erb           | 12 +++++------
 app/views/collections/new.html.erb            |  7 +++++--
 app/views/events/index.html.erb               |  4 ++--
 app/views/notifications/index.html.erb        | 16 +++++++++------
 .../notifications/settings/show.html.erb      | 10 ++++++----
 app/views/searches/show.html.erb              | 12 +++++------
 app/views/users/edit.html.erb                 |  7 +++++--
 app/views/users/new.html.erb                  | 11 ++++++----
 app/views/users/show.html.erb                 | 18 ++++++++++-------
 app/views/workflows/index.html.erb            | 20 ++++++++++---------
 app/views/workflows/new.html.erb              | 12 +++++++----
 14 files changed, 99 insertions(+), 63 deletions(-)
 rename app/assets/stylesheets/{nav.css => header.css} (82%)

diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/header.css
similarity index 82%
rename from app/assets/stylesheets/nav.css
rename to app/assets/stylesheets/header.css
index f73f42fdb..bcbb90662 100644
--- a/app/assets/stylesheets/nav.css
+++ b/app/assets/stylesheets/header.css
@@ -14,6 +14,14 @@
     &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
     &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; }
     &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; }
+
+    &:not(:has(.header__title)) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    &:not(:has(.header__actions)) {
+      grid-template-columns: 1fr;
+    }
   }
 
   .header__actions {
@@ -28,6 +36,7 @@
   .header__title {
     font-size: var(--text-large);
     font-weight: 900;
-    margin: 0;
+    margin: 0 auto;
+    text-align: center;
   }
 }
diff --git a/app/views/accounts/settings/show.html.erb b/app/views/accounts/settings/show.html.erb
index 7df94999c..9614946e0 100644
--- a/app/views/accounts/settings/show.html.erb
+++ b/app/views/accounts/settings/show.html.erb
@@ -1,17 +1,19 @@
 <% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: root_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: root_path %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "bolt" %>
-      <span class="for-screen-reader">Workflows</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
+        <%= icon_tag "bolt" %>
+        <span class="for-screen-reader">Workflows</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 
diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb
index 1376e3667..a9e0a9229 100644
--- a/app/views/cards/index/_header.html.erb
+++ b/app/views/cards/index/_header.html.erb
@@ -1,4 +1,4 @@
-<nav class="align-start">
+<nav class="header">
   <header class="flex flex-inline flex-column center flex-shrink">
     <div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
       <%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow",
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index d10da28db..8daef8762 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -1,14 +1,14 @@
 <% @page_title = "Collection Settings" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 
diff --git a/app/views/collections/new.html.erb b/app/views/collections/new.html.erb
index 0b391b4e2..66e0af251 100644
--- a/app/views/collections/new.html.erb
+++ b/app/views/collections/new.html.erb
@@ -1,8 +1,11 @@
 <% @page_title = "Create a new collection" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_home icon: "arrow-left", label: "Go back", class: "flex-item-justify-start" %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_home icon: "arrow-left", label: "Go back" %>
+    </div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 6d1521d45..5abc7115e 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -1,8 +1,8 @@
 <% @page_title = "Home" %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <header class="flex flex-inline flex-column center flex-shrink">
+  <nav class="header">
+    <header class="header__title">
       <%= render "events/filter", filter: @filter %>
     </header>
   </nav>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 4451238a1..a73e943c5 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -2,14 +2,18 @@
 <% @hide_footer_frames = true %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <%= link_to_home class: "flex-item-justify-start" %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_home class: "flex-item-justify-start" %>
+    </div>
 
-    <h1 class="txt-x-large"><%= @page_title %></h1>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <%= link_to settings_notifications_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to settings_notifications_path, class: "btn" do %>
+        <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 
diff --git a/app/views/notifications/settings/show.html.erb b/app/views/notifications/settings/show.html.erb
index 63f18e193..89ee03f45 100644
--- a/app/views/notifications/settings/show.html.erb
+++ b/app/views/notifications/settings/show.html.erb
@@ -1,12 +1,14 @@
 <% @page_title = "Notifications settings" %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <%= link_to_back fallback_path: notifications_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: notifications_path %>
+    </div>
 
-    <h1 class="txt-x-large"><%= @page_title %></h1>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 
diff --git a/app/views/searches/show.html.erb b/app/views/searches/show.html.erb
index 3aa1df8b4..e734a4391 100644
--- a/app/views/searches/show.html.erb
+++ b/app/views/searches/show.html.erb
@@ -1,14 +1,14 @@
 <% @page_title = "Search" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: root_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: root_path %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 536c7d370..ceeac0e31 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,8 +1,11 @@
 <% @page_title = "Edit your profile" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: user_path(@user) %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: user_path(@user) %>
+    </div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 847782db8..2542072c3 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -1,10 +1,13 @@
 <% @page_title = "Create your account" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to new_session_path, class: "btn flex-item-justify-end", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="for-screen-reader">Sign in instead</span>
-    <% end %>
+  <nav class="header">
+    <div class="header__actions header__actions--start"></div>
+    <div class="header__actions header__actions--end">
+      <%= link_to new_session_path, class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+        <span class="for-screen-reader">Sign in instead</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index eeca42733..409f3f46e 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,15 +1,19 @@
 <% @page_title = @user.name %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back %>
+    </div>
 
-    <% if Current.user == @user %>
-      <%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
-        <%= icon_tag "pencil" %>
-        <span class="for-screen-reader">Edit</span>
+    <div class="header__actions header__actions--end">
+      <% if Current.user == @user %>
+        <%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
+          <%= icon_tag "pencil" %>
+          <span class="for-screen-reader">Edit</span>
+        <% end %>
       <% end %>
-    <% end %>
+    </div>
   </nav>
 <% end %>
 
diff --git a/app/views/workflows/index.html.erb b/app/views/workflows/index.html.erb
index 6920f27de..4788b42a6 100644
--- a/app/views/workflows/index.html.erb
+++ b/app/views/workflows/index.html.erb
@@ -1,17 +1,19 @@
 <% @page_title = "Workflows" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: users_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: users_path %>
+    </div>
 
-    <span class="btn btn--placeholder"></span>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <h1 class="txt-large"><%= @page_title %></h1>
-
-    <%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "add" %>
-      <span class="for-screen-reader">Create a new workflow</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
+        <%= icon_tag "add" %>
+        <span class="for-screen-reader">Create a new workflow</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 
diff --git a/app/views/workflows/new.html.erb b/app/views/workflows/new.html.erb
index 5a409443f..f1ca00dbf 100644
--- a/app/views/workflows/new.html.erb
+++ b/app/views/workflows/new.html.erb
@@ -1,10 +1,14 @@
 <% @page_title = "Create a new Workflow" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: workflows_path %>
-    <h1 class="txt-large center"><%= @page_title %></h1>
-    <span class="btn btn--placeholder flex-item-justify-end"></span>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: workflows_path %>
+    </div>
+
+    <h1 class="header__title"><%= @page_title %></h1>
+
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>