Use header component everywhere

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;
   }
 }

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 %>
 

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",

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 %>
 

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 %>
 

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>

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 %>
 

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 %>
 

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 %>
 

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 %>
 

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 %>
 

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 %>
 

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 %>
 

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 %>