From c0f842427df16114c4e2d9cc109c5820ab99cf73 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 5 Feb 2025 17:14:05 -0600
Subject: [PATCH] Rework navigation

---
 app/assets/images/activity.svg          |  1 +
 app/assets/images/home.svg              |  1 +
 app/views/accounts/users/index.html.erb | 14 ++++++++----
 app/views/bubbles/_filters.html.erb     |  4 ++--
 app/views/bubbles/index.html.erb        | 30 ++++++++++---------------
 app/views/bubbles/show.html.erb         | 19 ++++++++--------
 app/views/buckets/index.html.erb        | 19 +++++++++-------
 app/views/events/_day.html.erb          |  2 +-
 app/views/events/index.html.erb         | 19 ++++++----------
 9 files changed, 54 insertions(+), 55 deletions(-)
 create mode 100644 app/assets/images/activity.svg
 create mode 100644 app/assets/images/home.svg

diff --git a/app/assets/images/activity.svg b/app/assets/images/activity.svg
new file mode 100644
index 000000000..8c58e62ec
--- /dev/null
+++ b/app/assets/images/activity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z" /></svg>
\ No newline at end of file
diff --git a/app/assets/images/home.svg b/app/assets/images/home.svg
new file mode 100644
index 000000000..8fcbf2376
--- /dev/null
+++ b/app/assets/images/home.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z"/></svg>
\ No newline at end of file
diff --git a/app/views/accounts/users/index.html.erb b/app/views/accounts/users/index.html.erb
index 1980efb1f..f95fe6994 100644
--- a/app/views/accounts/users/index.html.erb
+++ b/app/views/accounts/users/index.html.erb
@@ -1,15 +1,21 @@
 <% @page_title = "People on the account" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to root_path, class: "btn flex-item-justify-start" do %>
+  <nav class="align-start">
+    <%= link_to root_path, class: "btn borderless flex-item-justify-start" do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Go back</span>
     <% end %>
 
-    <h1 class="txt-large"><%= @page_title %></h1>
+    <header class="flex flex-column center">
+      <div class="flex align-center gap justify-center">
+        <%= link_to "Projects", root_path %>
+        <%= link_to "Activity", events_path %>
+      </div>
+      <h1 class="txt-x-large"><%= @page_title %></h1>
+    </header>
 
-    <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
+    <%= link_to workflows_path, class: "btn flex-item-justify-end borderless" do %>
       <%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Workflows</span>
     <% end %>
diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb
index eb1c64ed2..c9e677051 100644
--- a/app/views/bubbles/_filters.html.erb
+++ b/app/views/bubbles/_filters.html.erb
@@ -1,12 +1,12 @@
 <div class="flex flex-column gap-half align-center" data-controller="dialog filter-form"
     data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside turbo:before-cache@document->dialog#close">
-  <h1 class="txt-large flex align-center gap-half">
+  <h1 class="txt-x-large margin-none-block-end">
     <% if filter.buckets.none? %>
       All projects
     <% elsif filter.buckets.one? %>
       <%= filter.buckets.first.name %>
     <% else %>
-      <%= pluralize(filter.buckets.size, "project") %>
+        <%= pluralize(filter.buckets.size, "project") %>
     <% end %>
   </h1>
 
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index b1e62f862..24367f146 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -5,29 +5,23 @@
 
 <% content_for :header do %>
   <nav class="align-start">
-    <%= link_to root_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Go back</span>
+    <% bucket = @filter.buckets.first %>
+    <%= link_to edit_bucket_path(bucket), class: "btn borderless flex-item-justify-start" do %>
+      <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Settings for <%= bucket.name %></span>
     <% end %>
 
-    <header class="txt-align-center">
+    <header class="flex flex-column center">
+      <div class="flex align-center gap justify-center">
+        <%= link_to "Projects", root_path %>
+        <%= link_to "Activity", events_path %>
+      </div>
       <%= render "bubbles/filters", filter: @filter %>
     </header>
 
-    <% if @filter.buckets.one? %>
-      <% bucket = @filter.buckets.first %>
-
-      <%= link_to edit_bucket_path(bucket), class: "btn flex-item-justify-end" do %>
-        <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">Settings for <%= bucket.name %></span>
-      <% end %>
-
-      <%= button_to bucket_bubbles_path(bucket), method: :post, class: "btn" do %>
-        <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">Create a new bubble</span>
-      <% end %>
-    <% else %>
-      <span class="btn btn--placeholder flex-item-justify-end"></span>
+    <%= button_to bucket_bubbles_path(bucket), method: :post, class: "btn borderless", form_class: "flex-item-justify-end" do %>
+      <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Create a new bubble</span>
     <% end %>
   </nav>
 <% end %>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index bcc9bc396..0bf4ea139 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -10,18 +10,17 @@
   <% end %>
 
   <nav class="align-start">
-    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "hotkey back-navigation", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bucket) } do %>
-      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Back</span>
-    <% end %>
-
-    <header class="txt-align-center">
-      <h1 class="txt-large flex align-center gap-half">
-        <%= link_to @bucket.name, bubbles_path(bucket_ids: [ @bucket ]), class: "txt-ink txt-undecorated upad" %>
+    <header class="flex flex-column center">
+      <div class="flex align-center gap justify-center">
+        <%= link_to "Projects", root_path %>
+        <%= link_to "Activity", events_path %>
+      </div>
+      <h1 class="txt-x-large breadcrumbs">
+        <%= link_to @bucket.name, bubbles_path(bucket_ids: [ @bucket ]) %>
+        <span class="flex-item-no-shrink">▸</span>
+        <strong><%= @page_title %></strong>
       </h1>
     </header>
-
-    <span class="btn btn--placeholder flex-item-justify-end"></span>
   </nav>
 <% end %>
 
diff --git a/app/views/buckets/index.html.erb b/app/views/buckets/index.html.erb
index 97353daaf..e3770ca47 100644
--- a/app/views/buckets/index.html.erb
+++ b/app/views/buckets/index.html.erb
@@ -1,18 +1,21 @@
-<% @page_title = "Projects" %>
+<% @page_title = "All projects" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to account_users_path, class: "btn" do %>
+  <nav class="align-start">
+    <%= link_to account_users_path, class: "btn borderless flex-item-justify-start" do %>
       <%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Account settings</span>
     <% end %>
 
-    <%= link_to events_path, class: "btn flex-item-justify-start" do %>
-      <%= image_tag "history.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Latest activity</span>
-    <% end %>
+    <header class="flex flex-column center">
+      <div class="flex align-center gap justify-center">
+        <%= link_to "Projects", root_path %>
+        <%= link_to "Activity", events_path %>
+      </div>
+      <h1 class="txt-x-large"><%= @page_title %></h1>
+    </header>
 
-    <%= link_to new_bucket_path, class: "btn flex-item-justify-end", style: "view-transition-name: new-bucket" do %>
+    <%= link_to new_bucket_path, class: "btn flex-item-justify-end borderless", style: "view-transition-name: new-bucket" do %>
       <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Add a new project</span>
     <% end %>
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index 296be70ea..4fad45f30 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,7 +1,7 @@
 <div class="events--day" data-controller="related-element"
      data-related-element-highlight-class="event--related">
   <% if events.any? %>
-    <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
+    <h2 class="txt-large margin-block-end-half"><%= event_day_title(activity_day) %></h2>
 
     <div class="center events">
       <%= render_column_headers %>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 4a88264c1..809ca6cba 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -1,19 +1,14 @@
 <% @page_title = "Latest Activity" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to root_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Go back</span>
-    <% end %>
-
-    <header class="txt-align-center">
-      <h1 class="txt-large flex align-center gap-half">
-        <%= @page_title %>
-      </h1>
+  <nav class="align-start">
+    <header class="flex flex-column center">
+      <div class="flex align-center gap justify-center">
+        <%= link_to "Projects", root_path %>
+        <%= link_to "Activity", events_path %>
+      </div>
+      <h1 class="txt-x-large"><%= @page_title %></h1>
     </header>
-
-    <span class="btn btn--placeholder flex-item-justify-end"></span>
   </nav>
 <% end %>