Hide using display:none instead of hidden

This is more consistent and actually removes the elements from the layout.

The commit also hides the conditional elements by default, which should
be a more natural loading experience.

app/javascript/controllers/session_controller.js

 import { Controller } from "@hotwired/stimulus"
 
+function hide(elem, hide) {
+  if (hide) {
+    elem.classList.add("hidden");
+  } else {
+    elem.classList.remove("hidden");
+  }
+}
+
 export default class extends Controller {
   static targets = ["candidates"];
 
@@ -8,19 +16,17 @@ export default class extends Controller {
     const isCandidate = this.candidatesTarget.querySelector(`a.candidate[data-candidate-uid="${uid}"]`);
 
     this.element.querySelectorAll('.only-loggedin').forEach(el => {
-      el.hidden = !uid;
+      hide(el, !uid);
     });
     this.element.querySelectorAll('.only-loggedout').forEach(el => {
-      el.hidden = uid;
+      hide(el, uid);
     });
     this.element.querySelectorAll('.only-candidate').forEach(el => {
-      el.hidden = !isCandidate;
+      hide(el, !isCandidate);
     });
     this.element.querySelectorAll('.only-no-candidate').forEach(el => {
-      el.hidden = isCandidate;
+      hide(el, isCandidate);
     });
-
-
   }
 
   submitWithPrompt(event) {

app/views/sessions/_session.html.erb

@@ -20,15 +20,15 @@
         </svg>
         <%= session.stage.name %>
       </span>
-      <span class="absolute top-0 right-0 text-3xl only-loggedin">
-        <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-candidate", title: "Withdraw", aria_label: "Withdraw", data: { turbo_method: :delete, turbo_frame: dom_id(session) }, method: :delete do %>
+      <span class="absolute top-0 right-0 text-3xl only-loggedin hidden">
+        <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-candidate hidden", title: "Withdraw", aria_label: "Withdraw", data: { turbo_method: :delete, turbo_frame: dom_id(session) }, method: :delete do %>
           🙅
         <% end %>
-        <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-no-candidate", title: "Volunteer Myself", aria_label: "Volunteer Myself", data: { turbo_method: :post, turbo_frame: dom_id(session) } do %>
+        <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-no-candidate hidden", title: "Volunteer Myself", aria_label: "Volunteer Myself", data: { turbo_method: :post, turbo_frame: dom_id(session) } do %>
           🙋
         <% end %>
         <%= form_with url: conference_session_candidates_path(session.conference, session), method: :post, class: "inline", data: { turbo_frame: dom_id(session) } do |form| %>
-          <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-no-candidate", title: "Volunteer (with special skills)", aria_label: "Volunteer (with special skills)", data: { action: "session#submitWithPrompt", prompt: "Why are you especially qualified? (Please keep it short, thanks)", turbo_prefetch:"false" } do %>
+          <%= link_to conference_session_candidates_path(session.conference, session), class: "pr-1 only-no-candidate hidden", title: "Volunteer (with special skills)", aria_label: "Volunteer (with special skills)", data: { action: "session#submitWithPrompt", prompt: "Why are you especially qualified? (Please keep it short, thanks)", turbo_prefetch:"false" } do %>
               🙌
           <% end %>
         <% end %>
@@ -58,8 +58,8 @@
         </li>
       <% end %>
     </ul>
-    <hr>
     <% if @assignment&.errors&.any? %>
+      <hr>
       <div class="alert alert-danger bg-red-600 border-red-800 text-white border p-2 shadow z-30 rounded-md" onclick="this.parentNode.removeChild(this)">
         <div class="float-right"><span class="sr-only">Close</span>
           <svg viewBox="0 0 14 14" class="size-3.5 stroke-white">
@@ -70,16 +70,21 @@
         <%= @assignment.errors.full_messages.join(", ") %>
       </div>
     <% end %>
+    <div data-session-target="candidates">
+    <% if session.candidates.length > 0 %>
+    <hr>
     <small>candidates (<%= session.candidates.length %>)</small>
-    <ul class="inline-flex flex-wrap gap-1 my-1" data-session-target="candidates">
+    <ul class="inline-flex flex-wrap gap-1 my-1">
       <% session.candidates.sort_by { |cand| cand.note.nil? ? 1:0 }.each do |candidate| %>
         <li class="inline-flex items-end">
           <span class="assigned-user"><%= render partial: 'candidates/user_avatar', locals: { candidate: } %></span>
         </li>
       <% end %>
     </ul>
-    <hr>
-    <small>unassigned (<%= unassigned_users.length %>)</small>
-    <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
+    <% end %>
+    </div>
+    <small class="hidden">unassigned (<%= unassigned_users.length %>)</small>
+    <hr class="hidden">
+    <%# render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
   </div>
 <% end %>