Consolidate header and nav layouts

app/assets/stylesheets/card-perma.css

@@ -17,6 +17,7 @@
       "notch-bottom notch-bottom notch-bottom";
     grid-template-columns: 48px minmax(0, 1120px) 48px;
     inline-size: fit-content;
+    margin-block-start: 2rem;
     max-inline-size: 100%;
     margin-inline: auto;
 
@@ -105,18 +106,6 @@
     }
   }
 
-  .card-perma__collection-header {
-    margin-block-end: var(--block-space);
-
-    #main:has(.card-perma__notch--top) & {
-      margin-block-end: 4ch;
-
-      @media (max-width: 639px) {
-        margin-block-end: 2ch;
-      }
-    }
-  }
-
   /* Child items
   /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/events.css

@@ -2,9 +2,9 @@
   /* Events header
   /* ------------------------------------------------------------------------ */
 
-  .header.events-header {
+  .header--events {
     @media (min-width: 640px) {
-      --header-actions-width: 7rem;
+      --header-actions-width: 7rem !important;
     }
   }
 
@@ -28,7 +28,7 @@
     text-align: start;
     z-index: 2;
 
-    .events section:first-of-type & { 
+    .events section:first-of-type & {
       border-radius: 0.5em 0.5em 0 0;
     }
 

app/assets/stylesheets/header.css

@@ -7,14 +7,28 @@
     --header-button-count: 0;
     --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));
 
-    align-items: center;
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);
+    grid-template-areas:
+      "menu menu menu"
+      "actions-start title actions-end";
+    max-inline-size: 100dvw;
     padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space);
+    view-transition-name: header;
 
     /* 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; }
+
+    &:has(nav) {
+      row-gap: var(--block-space-half);
+    }
+
+    nav {
+      grid-area: menu;
+      margin-inline: auto;
+    }
   }
 
   .header__actions {
@@ -26,20 +40,37 @@
   }
 
   .header__actions--start {
+    grid-area: actions-start;
     margin-inline-end: auto;
   }
 
   .header__actions--end {
-    margin-inline-start: auto;
+    grid-area: actions-end;
     justify-content: flex-end;
+    margin-inline-start: auto;
   }
 
   .header__title {
     color: inherit;
     font-size: var(--text-large);
     font-weight: 900;
+    grid-area: title;
     margin: 0 auto;
     min-inline-size: 0;
     text-align: center;
   }
+
+  .header__skip-navigation {
+    --left-offset: -999em;
+
+    inset-block-start: 4rem;
+    inset-inline-start: var(--left-offset);
+    position: absolute;
+    white-space: nowrap;
+    z-index: 11;
+
+    &:focus {
+      --left-offset: var(--inline-space);
+    }
+  }
 }

app/assets/stylesheets/layout.css

@@ -32,61 +32,6 @@
 
   :where(#footer) {
     max-inline-size: 100dvw;
-
-    > nav {
-      padding-inline: var(--inline-space);
-    }
-  }
-
-  :where(#header) {
-    max-inline-size: 100dvw;
-    view-transition-name: header;
-
-    > nav {
-      view-transition-name: nav;
-
-      header {
-        h1 {
-          font-weight: 800;
-          margin-block-start: 0.2em;
-          text-align: center;
-
-          a:not([class]) {
-            background-color: transparent;
-            font-weight: inherit;
-            text-decoration: underline;
-          }
-        }
-
-        a:not([class]) {
-          background-color: var(--color-ink-lightest);
-          border-radius: 2em;
-          color: var(--color-ink);
-          font-weight: 500;
-          padding: 0.2em 0.8em;
-          text-decoration: none;
-
-          @media (hover: hover) {
-            &:hover {
-              background-color: var(--color-ink-lighter);
-              text-decoration: none;
-            }
-          }
-        }
-      }
-    }
-
-    > * {
-      align-items: center;
-      display: flex;
-      gap: 1ch;
-      justify-content: center;
-      padding: var(--block-space-half) var(--inline-space);
-    }
-
-    .btn {
-      flex-shrink: 0;
-    }
   }
 
   :is(#header, #footer) {
@@ -95,19 +40,3 @@
     }
   }
 }
-
-@layer components {
-  .skip-navigation {
-    --left-offset: -999em;
-
-    inset-block-start: 4rem;
-    inset-inline-start: var(--left-offset);
-    position: absolute;
-    white-space: nowrap;
-    z-index: 11;
-
-    &:focus {
-      --left-offset: var(--inline-space);
-    }
-  }
-}

app/controllers/accounts/settings_controller.rb

@@ -1,4 +1,8 @@
 class Accounts::SettingsController < ApplicationController
+  include FilterScoped
+
+  enable_collection_filtering only: :show
+
   def show
     @account = Account.sole
     @users = User.active

app/views/accounts/settings/show.html.erb

@@ -1,20 +1,18 @@
 <% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back fallback_path: root_path %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: root_path %>
+  </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title"><%= @page_title %></h1>
 
-    <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>
+  <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>
 <% end %>
 
 <section class="settings">

app/views/cards/index.html.erb

@@ -10,10 +10,9 @@
 
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
-<% end %>
 
-<header class="header" style="--header-actions-width: 7rem;">
   <div class="header__actions header__actions--start"></div>
+
   <h1 class="header__title overflow-ellipsis" style="view-transistion-name: card-collection-title">
     <%= @user_filtering.selected_collections_label %>
   </h1>
@@ -23,7 +22,7 @@
       <%= render "cards/collection_settings", collection: collection %>
     <% end %>
   </div>
-</header>
+<% end %>
 
 <%= render "filters/settings", user_filtering: @user_filtering %>
 

app/views/cards/show.html.erb

@@ -31,16 +31,14 @@
   <% end %>
 
   <%= render "filters/menu", user_filtering: @user_filtering %>
-<% end %>
 
-<header class="header card-perma__collection-header">
   <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
     <span class="overflow-ellipsis">
       &larr;
       <strong class="font-black"><%= @card.collection.name %></strong>
     </span>
   <% end %>
-</header>
+<% end %>
 
 <div data-controller="beacon lightbox" data-beacon-url-value="<%= card_reading_url(@card) %>">
   <%= render "cards/container", card: @card %>

app/views/collections/edit.html.erb

@@ -1,15 +1,13 @@
 <% @page_title = "Collection Settings" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
+  </div>
 
-    <h1 class="header__title overflow-ellipsis"><%= @page_title %></h1>
+  <h1 class="header__title overflow-ellipsis"><%= @page_title %></h1>
 
-    <div class="header__actions header__actions--end"></div>
-  </nav>
+  <div class="header__actions header__actions--end"></div>
 <% end %>
 
 <section class="settings">

app/views/collections/new.html.erb

@@ -1,12 +1,10 @@
 <% @page_title = "Create a new collection" %>
 
 <% content_for :header do %>
-  <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>
+  <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>
 <% end %>
 
 <div class="panel shadow center" style="--panel-size: 55ch; view-transition-name: new-collection">

app/views/events/index.html.erb

@@ -1,11 +1,11 @@
 <% @page_title = "Home" %>
+<% @header_class = "header--events" %>
+
 <%= turbo_stream_from :activity_summaries %>
 
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
-<% end %>
 
-<header class="events-header header margin-block-end">
   <%= render "filters/menu/add_card_button", user_filtering: @user_filtering %>
 
   <h1 class="header__title overflow-ellipsis">
@@ -13,9 +13,8 @@
       Activity in <%= @user_filtering.selected_collections_label %>
     </div>
   </h1>
+<% end %>
 
-  <div class="header__actions header__actions--end"></div>
-</header>
 <div class="events" id="activity">
   <%= render "events/day", day_timeline: @day_timeline %>
 </div>

app/views/filters/_menu.html.erb

@@ -1,4 +1,4 @@
-<nav class="header" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<nav data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
   <%= render "filters/menu/button" %>
 
   <%= tag.dialog class: "fizzy-menu filter popup popup--animated panel margin-block-start-half",

app/views/layouts/application.html.erb

@@ -3,8 +3,8 @@
   <%= render "layouts/shared/head" %>
 
   <body data-controller="local-time timezone-cookie" data-action="turbo:morph@window->local-time#refreshAll">
-    <header id="header">
-      <a href="#main" class="skip-navigation btn" data-turbo="false">Skip to main content</a>
+    <header class="header <%= @header_class %>" id="header">
+      <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
       <%= yield :header %>
     </header>
 

app/views/layouts/public.html.erb

@@ -3,8 +3,8 @@
   <%= render "layouts/shared/head" %>
 
   <body class="public" data-controller="local-time timezone-cookie" data-action="turbo:morph@window->local-time#refreshAll">
-    <header id="header">
-      <a href="#main" class="skip-navigation btn" data-turbo="false">Skip to main content</a>
+    <header class="header" id="header">
+      <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
       <%= yield :header %>
     </header>
 

app/views/notifications/index.html.erb

@@ -2,19 +2,17 @@
 <% @hide_footer_frames = true %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_home class: "flex-item-justify-start" %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_home class: "flex-item-justify-start" %>
+  </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title"><%= @page_title %></h1>
 
-    <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>
+  <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>
 <% end %>
 
 <div data-controller="badge navigable-list" data-badge-unread-class="unread" data-action="keydown@document->navigable-list#navigate" data-navigable-list-actionable-items-value="true"

app/views/notifications/settings/show.html.erb

@@ -1,15 +1,13 @@
 <% @page_title = "Notifications settings" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back fallback_path: notifications_path %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: notifications_path %>
+  </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="header__actions header__actions--end"></div>
-  </nav>
+  <div class="header__actions header__actions--end"></div>
 <% end %>
 
 <div class="notifications__status panel fill-shade center margin-block-start margin-block-end-double" data-controller="notifications" data-notifications-subscriptions-url-value="<%= user_push_subscriptions_path(Current.user) %>" data-notifications-enabled-class="notifications--on">

app/views/public/cards/show.html.erb

@@ -13,14 +13,12 @@
 <% end %>
 
 <% content_for :header do %>
-  <header class="header card-perma__collection-header">
   <%= link_to published_collection_url(@card.collection), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
     <span class="overflow-ellipsis">
       &larr;
       <strong class="font-black"><%= @card.collection.name %></strong>
     </span>
   <% end %>
-</header>
 <% end %>
 
 <section id="<%= dom_id(@card, :card_container) %>"

app/views/public/collections/show.html.erb

@@ -13,16 +13,14 @@
 <% end %>
 
 <% content_for :header do %>
-  <div class="flex-column margin-block unpad gap-none">
-    <h1 class="txt-large overflow-ellipsis margin-none">
-      <strong class="font-black"><%= @page_title %></strong>
-    </h1>
+  <h1 class="header__title">
+    <%= @page_title %>
+  </h1>
+<% end %>
 
-    <% if @collection.public_description.present? %>
-      <div class="card__collection-public-description txt-align-center">
-        <%= @collection.public_description %>
-      </div>
-    <% end %>
+<% if @collection.public_description.present? %>
+  <div class="card__collection-public-description txt-align-center center margin-block-end">
+    <%= @collection.public_description %>
   </div>
 <% end %>
 

app/views/users/edit.html.erb

@@ -1,12 +1,10 @@
 <% @page_title = "Edit your profile" %>
 
 <% content_for :header do %>
-  <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>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: user_path(@user) %>
+  </div>
+  <div class="header__actions header__actions--end"></div>
 <% end %>
 
 <div class="panel shadow center">

app/views/users/new.html.erb

@@ -1,14 +1,12 @@
 <% @page_title = "Create your account" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start"></div>
-    <div class="header__actions header__actions--end">
-      <%= link_to login_url, class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-        <span class="for-screen-reader">Sign in instead</span>
-      <% end %>
-    </div>
-  </nav>
+  <div class="header__actions header__actions--start"></div>
+  <div class="header__actions header__actions--end">
+    <%= link_to login_url, class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+      <span class="for-screen-reader">Sign in instead</span>
+    <% end %>
+  </div>
 <% end %>
 
 <div class="panel shadow center">

app/views/users/show.html.erb

@@ -1,20 +1,18 @@
 <% @page_title = @user.name %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back %>
+  </div>
 
-    <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 %>
+  <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 %>
-    </div>
-  </nav>
+    <% end %>
+  </div>
 <% end %>
 
 <div class="panel shadow center txt-align-center margin-block-end-double">

app/views/workflows/index.html.erb

@@ -1,20 +1,18 @@
 <% @page_title = "Workflows" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back fallback_path: users_path %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: users_path %>
+  </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title"><%= @page_title %></h1>
 
-    <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>
+  <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>
 <% end %>
 
 <%= turbo_frame_tag :workflows do %>

app/views/workflows/new.html.erb

@@ -1,15 +1,13 @@
 <% @page_title = "Create a new Workflow" %>
 
 <% content_for :header do %>
-  <nav class="header">
-    <div class="header__actions header__actions--start">
-      <%= link_to_back fallback_path: workflows_path %>
-    </div>
+  <div class="header__actions header__actions--start">
+    <%= link_to_back fallback_path: workflows_path %>
+  </div>
 
-    <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="header__actions header__actions--end"></div>
-  </nav>
+  <div class="header__actions header__actions--end"></div>
 <% end %>
 
 <%= turbo_frame_tag :workflows do %>