Add header component

app/assets/stylesheets/nav.css

@@ -0,0 +1,33 @@
+@layer components {
+  /* Centered title with space for two buttons on either side */
+  .header {
+    --header-gap: 0.5rem;
+    --header-btn-size: 2.65em;
+    --header-button-count: 0;
+    --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));
+
+    display: grid;
+    grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);
+    padding: var(--block-space-half) var(--inline-space);
+
+    /* Change the grid size depending on how many buttons are present */
+    &: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; }
+  }
+
+  .header__actions {
+    display: flex;
+    gap: var(--header-gap);
+  }
+
+  .header__actions--end {
+    justify-content: flex-end;
+  }
+
+  .header__title {
+    font-size: var(--text-large);
+    font-weight: 900;
+    margin: 0;
+  }
+}

app/views/cards/index.html.erb

@@ -6,10 +6,26 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<header class="margin-block-end">
-  <span class="txt-large overflow-ellipsis margin-none font-black" style="view-transistion-name: card-collection-title">
+<header class="header">
+  <div class="header__actions header__actions--start">
+    <%= link_to_home %>
+  </div>
+
+  <h1 class="header__title overflow-ellipsis" style="view-transistion-name: card-collection-title">
     <span><%= filter_title @filter %></span>
-  </span>
+  </h1>
+
+  <div class="header__actions header__actions--end">
+    <% if collection = @filter.single_collection %>
+      <%= access_involvement_advance_button collection, Current.user %>
+
+      <%= link_to edit_collection_path(collection), class: "btn" do %>
+        <%= icon_tag "settings" %>
+        <span class="for-screen-reader">Settings for <%= collection.name %></span>
+      <% end %>
+    <% end %>
+  </div>
+
   <%= render "filters/settings", filter: @filter %>
 </header>
 

app/views/cards/index/_header.html.erb

@@ -1,8 +1,4 @@
 <nav class="align-start">
-  <%= link_to_home %>
-
-  <div class="btn btn--placeholder flex-item-justify-start"></div>
-
   <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",
@@ -53,18 +49,4 @@
       <% end %>
     </div>
   </header>
-
-  <% if collection = filter.single_collection %>
-    <div class="flex-item-justify-end">
-      <%= access_involvement_advance_button collection, Current.user %>
-    </div>
-
-    <%= link_to edit_collection_path(collection), class: "btn" do %>
-      <%= icon_tag "settings" %>
-      <span class="for-screen-reader">Settings for <%= collection.name %></span>
-    <% end %>
-  <% else %>
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
-    <div class="btn btn--placeholder"></div>
-  <% end %>
 </nav>