fizzy/app/views/bubbles/index.html.erb

<% @page_title = @filter.summary %>

<% turbo_refreshes_with method: :morph, scroll: :preserve %>
<%= render "filters/broadcasts", filter: @filter %>

<% content_for :header do %>
  <nav class="align-start">
    <%= link_to root_path, class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <%= icon_tag "home" %>
      <span class="for-screen-reader">Home</span>
    <% end %>

    <div class="btn btn--placeholder flex-item-justify-start"></div>

    <header class="flex flex-inline flex-column center flex-shrink">
      <div class="card-bucket__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
        <button class="txt-align-center input input--select borderless center txt-medium" data-action="click->dialog#open:stop">
          <h1 class="txt-large overflow-ellipsis margin-none">
            <% if @filter.buckets.none? %>
              All collections
            <% elsif @filter.buckets.one? %>
              <%= @filter.buckets.first.name %>
            <% else %>
              <%= @filter.buckets.map(&:name).to_sentence %>
            <% end %>
          </h1>
        </button>

        <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
          <strong class="popup__title margin-block-start-half pad-inline-half">In Collection</strong>
          <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
                data: { controller: "form" } do |form| %>
            <% @filter.as_params.except(:bucket_ids).each do |key, value| %>
              <%= filter_hidden_field_tag key, value %>
            <% end %>

            <%= link_to bubbles_path(@filter.as_params.except(:bucket_ids)), class: "btn popup__item" do %>
              <span class="overflow-ellipsis">All collections</span>
            <% end %>
            
            <% Current.user.buckets.order(:name).each do |bucket| %>
              <div class="btn popup__item">
                <%= form.check_box "bucket_ids[]", { 
                  checked: @filter.buckets.include?(bucket),
                  data: { action: "change->form#submit" },
                  include_hidden: false,
                }, bucket.id %>

                <%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %>
                <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
              </div>
            <% end %>
          <% end %>
        </dialog>
      </div>

      <div class="card-sorting__filter flex-inline">
        <%= form_with url: bubbles_path, method: :get do |form| %>
          <% @filter.as_params.except(:indexed_by).each do |key, value| %>
            <%= filter_hidden_field_tag key, value %>
          <% end %>
          
          <%= form.hidden_field :indexed_by, value: @filter.indexed_by == "oldest" ? "newest" : "oldest" %>
          
          <button class="btn borderless txt-medium">
            <%= icon_tag @filter.indexed_by == "oldest" ? "sort-ascending" : "sort-descending", size: 24, aria: { hidden: true } %>
            <span class="for-screen-reader">Sort by <%= @filter.indexed_by == "oldest" ? "newest" : "oldest" %></span>
          </button>
        <% end %>
      </div> 
    </header>

    <% if (bucket = @filter.buckets.first) && @filter.buckets.one? %>
      <%= link_to edit_bucket_path(bucket), class: "btn flex-item-justify-end" do %>
        <%= icon_tag "settings" %>
        <span class="for-screen-reader">Settings for <%= bucket.name %></span>
      <% end %>

      <%= button_to bucket_bubbles_path(bucket), method: :post, class: "btn" do %>
        <%= icon_tag "add" %>
        <span class="for-screen-reader">Create a new bubble</span>
      <% end %>
    <% else %>
      <div class="btn btn--placeholder flex-item-justify-end"></div>
      <div class="btn btn--placeholder"></div>
    <% end %>
  </nav>
<% end %>

<div class="cards--columns">
  <section class="cards" style="align-items: center; border-inline-end: 1px solid var(--color-subtle);">
    <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
      Considering
    </h2>
    <% if (unstaged_bubbles = Filter.from_params(@filter.as_params.except(:stage_ids)).tap { |f| f.creator = Current.user }.bubbles.where(stage: nil)).any? %>
      <%= render partial: "bubbles/card_mini", collection: unstaged_bubbles, as: :bubble, cached: true %>
    <% else %>
      <p class="txt-medium translucent">Nothing here</p>
    <% end %>
  </section>
  <section class="cards gap position-relative" style="align-items: center; view-transition-name: cards-container;" data-controller="bubble-size" data-action="turbo:morph@window->bubble-size#resize">
    <% if workflow = @filter.buckets.first&.workflow %>
      <div class="card-column__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
        <button class="txt-align-center input input--select borderless center txt-uppercase txt-medium margin-none-block-start margin-block-end" data-action="click->dialog#open:stop">
          <strong class="overflow-ellipsis">
            <% if @filter.stages.any? %>
              <%= @filter.stages.map(&:name).to_sentence %>
            <% else %>
              Doing
            <% end %>
          </strong>
        </button>

        <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
            aria-label="In stage…" aria-description="In stage…"
            data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
          <strong class="popup__title margin-block-start-half pad-inline-half">In stage(s)…</strong>
          <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
                data: { controller: "form" } do |form| %>
            <% @filter.as_params.except(:stage_ids).each do |key, value| %>
              <%= filter_hidden_field_tag key, value %>
            <% end %>

            <%= link_to bubbles_path(@filter.as_params.except(:stage_ids)), class: "btn popup__item" do %>
              <span class="overflow-ellipsis">All stages</span>
            <% end %>
                
            <% workflow.stages.each do |stage| %>
              <div class="btn popup__item">
                <%= form.check_box :stage_ids, {
                  multiple: true,
                  checked: @filter.stages.include?(stage),
                  data: { action: "change->form#submit" },
                  include_hidden: false,
                  }, stage.id %>

                <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
                <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
              </div>
            <% end %>
          <% end %>
        </dialog>
      </div>
    <% else %>
      <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
        Doing
      </h2>
    <% end %>

    <% if (staged_bubbles = @bubbles.where.not(stage: nil)).any? %>
      <%= render partial: "bubbles/card", collection: staged_bubbles, as: :bubble, cached: true %>
    <% else %>
      <p class="txt-medium translucent">Nothing here</p>
    <% end %>
  </section>
</div>

<div class="margin-block">
  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
    Recently closed
  </h2>
  <section class="cards--grid">
    <% if (popped_bubbles = Filter.from_params(@filter.as_params.except(:stage_ids).merge(indexed_by: "popped")).tap { |f| f.creator = Current.user }.bubbles).any? %>
      <%= render partial: "bubbles/card", collection: popped_bubbles, as: :bubble, cached: true %>
    <% else %>
      <p class="txt-medium translucent">Nothing here</p>
    <% end %>
  </section>
</div>