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

<% @page_title = bubble_title(@bubble) %>

<% content_for :header do %>
  <% if @bubble.creating? && @bubble.can_recover_abandoned_creation? %>
    <div class="fill-selected position-sticky flex align-center gap-half justify-center border-block margin-block-end"
          style="view-transition-name: draft-banner; --bubble-color: <%= @bubble.color %>;">
      You have an unsaved work. Would you like to continue where you left off?
      <%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
        <span>Restore</span>
      <% end %>
    </div>
  <% end %>

  <% if @bubble.drafted? %>
    <div class="fill-selected position-sticky flex align-center gap-half fill-highlight justify-center border-block margin-block-end"
          style="view-transition-name: draft-banner;">
      This is a draft, it’s only visible to you.
      <%= render "bubbles/publish", bubble: @bubble %>
    </div>
  <% end %>

  <nav class="align-start max-width">
    <%= link_to_home %>

    <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "back-navigation hotkey", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
      <%= icon_tag "arrow-left" %>
      <span class="for-screen-reader">Go Back</span>
    <% end %>

    
    <div class="card__actions-container card__actions-container--top center border-radius flex-inline align-center justify-center gap"  style="--bubble-color: <%= @bubble.color %>;">
      <span>Considering</span>
      <% if @bubble.doing? %>
        <%= form_with url: bucket_bubble_engagement_path(@bubble.bucket, @bubble), method: :delete, data: { controller: "form" }, class: "flex" do %>
          <label class="switch flex-item-no-shrink">
            <input type="checkbox" class="switch__input" data-action="form#submit" checked>
            <span class="switch__btn round"></span>
            <span class="for-screen-reader">Switch to Considering</span>
          </label>
        <% end %>
      <% else %>
        <%= form_with url: bucket_bubble_engagement_path(@bubble.bucket, @bubble), method: :post, data: { controller: "form" }, class: "flex" do %>
          <label class="switch flex-item-no-shrink">
            <input type="checkbox" class="switch__input" data-action="form#submit">
            <span class="switch__btn round"></span>
            <span class="for-screen-reader">Switch to Doing</span>
          </label>
        <% end %>
      <% end %>
      <span>Doing</span>
    </div>

    <div class="btn btn--placeholder flex-item-justify-end"></div>
    <div class="btn btn--placeholder"></div>
  </nav>
<% end %>

<div data-controller="beacon" data-beacon-url-value="<%= bucket_bubble_readings_url(@bubble.bucket, @bubble) %>">
  <div class="card__container position-relative <%= "card__container--pointing" unless @bubble.published? %>" style="--bubble-color: <%= @bubble.color %>;">
    <%= render "bubbles/cards/perma", bubble: @bubble %>

    <div class="card__actions flex flex-column gap-half">
      <button class="car__star-button btn">
        <%= icon_tag "star" %>
        <span class="for-screen-reader">Star this card</span>
        <input type="checkbox" class="card__star-input">
      </button>

      <%= render "bubbles/color", bubble: @bubble %>
      <%= render "bubbles/image", bubble: @bubble %>
      <%= button_to bucket_bubble_path(@bubble.bucket, @bubble),
            method: :delete,
            class: "btn",
            data: { turbo_confirm: "Are you sure you want to delete this?" } do %>
        <%= icon_tag "trash" %>
        <span class="for-screen-reader">Delete</span>
      <% end %>
    </div>


    <% if @bubble.published? %>
      <div class="card__actions card__actions--right flex flex-column gap-half">
        <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble), refresh: :morph %>
        <%= turbo_frame_tag dom_id(@bubble, :pin), src: bucket_bubble_pin_path(@bubble.bucket, @bubble), refresh: :morph %>
      </div>
    <% end %>
  </div>

  <% unless @bubble.drafted? || @bubble.creating? %>
    <div class="card__actions-wrapper">
      <%= render "bubbles/pop_toggle", bubble: @bubble %>
    </div>
  <% end %>

  <% if @bubble.published? %>
    <%= render "bubbles/messages", bubble: @bubble %>
  <% else %>
    <div class="comments pad-block">
      <div class="comment comment--new flex-inline align-start full-width">
        <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
          <%= avatar_tag Current.user, hidden_for_screen_reader: true, loading: :lazy %>
        </figure>

        <div class="comment__content flex-inline flex-column full-width">
          <div class="comment__body txt-align-start">
            <form data-controller="outlet-auto-save paste"
                class="flex flex-column gap full-width"
                data-outlet-auto-save-auto-save-outlet="#bubble_form"
                data-action="paste->paste#pasteFiles">
              <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input",
                    form: "bubble_form",
                    placeholder: new_comment_placeholder(@bubble),
                    data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
            </form>

            <% if @bubble.creating? %>
              <div class="margin-block-start flex align-center gap">
                <%= button_to "Create card", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
                <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn" %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>