From eabba2260778487137332df599e9d55bb5f79ce9 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 2 Oct 2024 17:24:20 -0500
Subject: [PATCH] First stab at filter button + popup component

---
 app/assets/stylesheets/filters.css | 41 ++++++++++++++
 app/assets/stylesheets/inputs.css  |  6 ++
 app/assets/stylesheets/panels.css  |  2 +-
 app/views/bubbles/index.html.erb   | 90 +++++++++++++++++++++++++++---
 4 files changed, 129 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/stylesheets/filters.css

diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
new file mode 100644
index 000000000..116578e9f
--- /dev/null
+++ b/app/assets/stylesheets/filters.css
@@ -0,0 +1,41 @@
+.filter {
+  display: inline-flex;
+  position: relative;
+
+  #header:has(&) {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.filter__button {
+  --hover-size: 0;
+
+  color: var(--color-link);
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+}
+
+.filter__menu {
+  li {
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.filter__popup {
+  --panel-padding: 1em;
+  --panel-size: 20ch;
+
+  inset: calc(var(--btn-size) * 0.6) 0 auto 50%;
+  max-inline-size: 60ch !important;
+  position: absolute;
+  transform: translateX(-50%);
+  transform-origin: top left;
+  z-index: 1;
+
+  &[open] {
+    display: inline-flex;
+  }
+}
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 967811c2e..28fc68bb4 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -71,6 +71,12 @@
   }
 }
 
+.input--select {
+  --input-padding: 0.5em 0em 0.5em 0.7em;
+
+  text-align: start;
+}
+
 .input--textara {
   --input-padding: 0;
 
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 2ca61bd17..edc47b9cd 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -5,7 +5,7 @@
   border-radius: var(--panel-border-radius, 1em);
   inline-size: var(--panel-size, 60ch);
   max-inline-size: 100%;
-  padding: calc(var(--block-space) * 2);
+  padding: var(--panel-padding, calc(var(--block-space) * 2));
 
   @media (prefers-color-scheme: dark) {
     --panel-border-color: var(--color-subtle-dark);
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index 03693c9fd..b33f03a99 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -7,18 +7,90 @@
       <span class="for-screen-reader">Buckets</span>
     <% end %>
 
-    <h1 class="txt-xx-large margin-none flex align-center gap-half">
-      Bubbled up in <%= @bucket.name %>
+    <header class="txt-align-center">
+      <h1 class="txt-large">
+        <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+          <button class="btn btn--plain filter__button"
+              data-action="click->dialog#toggle"
+              data-dialog-modal-value="true">Most active</button>
+          <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
+            <menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
+              <li><button class="btn btn--plain filter__button">Most active</button></li>
+              <li><button class="btn btn--plain filter__button">Most discussed</button></li>
+              <li><button class="btn btn--plain filter__button">Most boosted</button></li>
+              <li><button class="btn btn--plain filter__button">Newest</button></li>
+              <li><button class="btn btn--plain filter__button">Oldest</button></li>
+              <li><button class="btn btn--plain filter__button">Popped</button></li>
+            </menu>
+          </dialog>
+        </div>
+        in
+        <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+          <button class="btn btn--plain filter__button"
+              data-action="click->dialog#toggle"
+              data-dialog-modal-value="true"><%= @bucket.name %></button>
+          <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
+            <menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
+              <% Bucket.all.each do |bucket| %>
+                <li><button class="btn btn--plain filter__button"><%= bucket.name %></button></li>
+              <% end %>
+            </menu>
+          </dialog>
+        </div>
+      </h1>
 
-      <% if @tag %>
-        tagged <%= @tag.title %>
+      <h2 class="txt-medium txt-normal margin-none flex align-center gap-half">
+        <% if @tag %>
+          Tagged
 
-        <%= link_to bucket_bubbles_path(@bucket), class: "btn txt-small" do %>
-          <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
-          <span class="for-screen-reader">Clear</span>
+          <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+            <button class="btn btn--plain filter__button"
+                data-action="click->dialog#toggle"
+                data-dialog-modal-value="true"><%= @tag.title %></button>
+            <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
+              <menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
+                <% Tag.all.each do |tag| %>
+                  <li><button class="btn btn--plain filter__button"><%= tag.title %></button></li>
+                <% end %>
+              </menu>
+            </dialog>
+          </div>
+
+          <%= link_to bucket_bubbles_path(@bucket), class: "btn", style: "font-size: 0.4em;" do %>
+            <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Clear</span>
+          <% end %>
+        <% else %>
+          with
+
+          <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+            <button class="btn btn--plain filter__button"
+                data-action="click->dialog#toggle"
+                data-dialog-modal-value="true">any tag</button>
+            <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
+              <menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
+                <% Tag.all.each do |tag| %>
+                  <li><button class="btn btn--plain filter__button"><%= tag.title %></button></li>
+                <% end %>
+              </menu>
+            </dialog>
+          </div>
         <% end %>
-      <% end %>
-    </h1>
+        and
+        <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+          <button class="btn btn--plain filter__button"
+              data-action="click->dialog#toggle"
+              data-dialog-modal-value="true">assigned to anyone</button>
+          <dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
+            <menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
+              <% User.all.each do |user| %>
+                <li><button class="btn btn--plain filter__button"><%= user.name %></button></li>
+              <% end %>
+            </menu>
+          </dialog>
+        </div>
+      </h2>
+    </header>
 
     <%= button_to bucket_bubbles_path(@bucket), method: :post, params: { bubble: { title: "Untitled"} }, class: "btn btn--plain", form_class: "flex-item-justify-end" do %>
       <%= image_tag "bubble-add.svg", aria: { hidden: true }, size: 24 %>