Merge branch 'main' into session-description-links

app/controllers/attendees_controller.rb

@@ -2,17 +2,17 @@ class AttendeesController < ApplicationController
   before_action :set_session
 
   def create
-    @session.attendees.push(current_user)
-    flash[:notice] = I18n.t("controllers.attendees.add_user.notice")
-
-    redirect_back_or_to(sessions_path, params: params[:starts_at])
+    @session.attendees.push(current_user) if @session.attendees.exclude?(current_user)
+    @user_session_ids = current_user.sessions.pluck(:id)
   end
 
   def destroy
-    @session.attendees.delete(current_user)
-    flash[:notice] = I18n.t("controllers.attendees.remove_user.notice")
-
-    redirect_back_or_to(sessions_path, params: params[:starts_at])
+    @session.attendees.delete(current_user) if @session.attendees.include?(current_user)
+    @user_session_ids = current_user.sessions.pluck(:id)
+    if URI(request.referer).path == schedule_path
+      flash[:notice] = I18n.t("controllers.attendees.remove_user.notice")
+      redirect_back_or_to(sessions_path, params: params[:starts_at])
+    end
   end
 
   private

app/controllers/sessions_controller.rb

@@ -8,6 +8,7 @@ def index
   end
 
   def show
+    @user_session_ids = current_user.sessions.pluck(:id)
     @session = sessions.friendly.includes(:location, :tags, speakers: [profile: :image_attachment]).find(params[:id])
   end
 

app/helpers/navigation_helper.rb

@@ -32,6 +32,12 @@ def show_back_button?
       resource_show_page?("sessions")
   end
 
+  def show_bookmark_button?(session)
+    return true if controller_name == "schedules"
+
+    !session.past?
+  end
+
   def back_title
     if controller_name.include?("_")
       controller_name.humanize

app/javascript/controllers/index.js

@@ -5,9 +5,11 @@ import { application } from 'controllers/application'
 // Eager load all controllers defined in the import map under controllers/**/*_controller
 import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading'
 import Dropdown from '@stimulus-components/dropdown'
+import PasswordVisibility from '@stimulus-components/password-visibility'
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
 // lazyLoadControllersFrom("controllers", application)
 eagerLoadControllersFrom('controllers', application)
 application.register('dropdown', Dropdown)
+application.register('password-visibility', PasswordVisibility)

app/views/attendees/create.turbo_stream.erb

@@ -0,0 +1,18 @@
+<%= turbo_stream.replace dom_id(@session, "bookmark") do %>
+  <%= render(
+    partial: 'sessions/bookmark',
+    locals: {
+      session: @session,
+      user_is_an_attendee: @user_session_ids.include?(@session.id)
+    }
+  ) %>
+<% end %>
+
+<%= turbo_stream.append "flash_message" do %>
+  <%= render(
+    partial: "layouts/flash_message",
+    locals:  {
+      message: I18n.t("controllers.attendees.add_user.notice")
+    }
+  )%>
+<% end %>

app/views/attendees/destroy.turbo_stream.erb

@@ -0,0 +1,20 @@
+<%= turbo_stream.replace dom_id(@session, "bookmark") do %>
+  <%= render(
+      partial: 'sessions/bookmark',
+      locals: {
+        session: @session,
+        user_is_an_attendee: @user_session_ids.include?(@session.id)
+      }
+    ) %>
+<% end %>
+
+<%= turbo_stream.remove dom_id(@session, "schedule")%>
+
+<%= turbo_stream.append "flash_message" do %>
+  <%= render(
+    partial: "layouts/flash_message",
+    locals:  {
+      message: I18n.t("controllers.attendees.remove_user.notice")
+    }
+  )%>
+<% end %>

app/views/layouts/_flash_message.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (message:) %>
 
-<div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-20 px-5">
+<div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-30 px-5">
   <div data-controller="closable" class="bg-black/70 shadow-simple backdrop-blur-[25px] rounded-lg px-5 py-4 transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
     <%= message %>
   </div>

app/views/layouts/application.html.erb

@@ -39,11 +39,13 @@
         <%= render partial: "layouts/header" %>
       <% end %>
 
-      <% flash.each do |type, message| %>
-        <% if message.present? && message.is_a?(String) %>
-          <%= render partial: "layouts/flash_message", locals: { message: message } %>
+      <div id="flash_message">
+        <% flash.each do |type, message| %>
+          <% if message.present? && message.is_a?(String) %>
+            <%= render partial: "layouts/flash_message", locals: { message: message } %>
+          <% end %>
         <% end %>
-      <% end %>
+      </div>
 
       <%= yield %>
 

app/views/notifications/_notification.html.erb

@@ -22,8 +22,12 @@
 
     <div class="flex flex-col items-start">
       <div class="flex flex-row items-center justify-start mb-1">
-        <p class="text-base font-bold text-black"><%= notification.title %></p>
-        <span class="text-[13px] text-gray-6">&nbsp; · <%= notification.delivered_at %></span>
+        <p class="text-base font-bold text-black">
+          <%= notification.title %>
+          <span class="text-[13px] text-gray-6">
+            &nbsp; · <%= notification.delivered_at %>
+          </span>
+        </p>
       </div>
       <p class="text-base text-gray-400 line-clamp-2"><%= notification.record.title %></p>
     </div>

app/views/profiles/show.html.erb

@@ -3,8 +3,8 @@
 <%= title "#{profile_name}'s Profile - Rails World 2024" %>
 
 <div class="relative flex flex-col items-center justify-between flex-1 bg-grey-50">
-  <div class="flex flex-col items-center bg-cover bg-bottom bg-no-repeat max-h-[430px] w-full pt-6 px-5 pb-12" style="background-image: url(<%= asset_path 'background_design.svg' %>)">
-    <div class="z-10 flex flex-col items-start max-w-screen-sm">
+  <div class="flex flex-col items-center bg-cover bg-bottom bg-no-repeat max-h-[430px] w-full" style="background-image: url(<%= asset_path 'background_design.svg' %>)">
+    <div class="z-10 flex flex-col items-start w-full max-w-screen-sm px-5 pt-6 pb-12">
       <div class="flex flex-row items-center">
         <% if @profile.image.attached? %>
           <div class="flex flex-col items-center justify-center relative w-[120px] bg-cover bg-no-repeat bg-center h-[120px] rounded-full" style="background-image: url(<%= url_for(@profile.image) %>)">
@@ -24,12 +24,12 @@
       <% if @profile.bio.present? %>
         <p class="mt-6 text-base"><%= @profile.bio %></p>
       <% end %>
-      <div class="flex flex-row items-center justify-center w-full gap-4">
+      <div class="flex flex-row items-center justify-between w-full gap-4">
         <%= link_to(
           @profile.github_url,
           target: "_blank",
           class: [
-            "flex flex-row grow items-center justify-center w-28 h-14 rounded-lg mt-6",
+            "flex flex-row grow items-center justify-center max-w-28 w-full h-14 rounded-lg mt-6",
             "bg-red": @profile.github_url.present?,
             "bg-grey-300 cursor-not-allowed": @profile.github_url.blank?
           ]
@@ -40,7 +40,7 @@
           @profile.twitter_url,
           target: "_blank",
           class: [
-            "flex flex-row grow items-center justify-center w-28 h-14 rounded-lg mt-6",
+            "flex flex-row grow items-center justify-center max-w-28 w-full h-14 rounded-lg mt-6",
             "bg-red": @profile.twitter_url.present?,
             "bg-grey-300 cursor-not-allowed": @profile.twitter_url.blank?
           ]
@@ -51,7 +51,7 @@
           @profile.linkedin_url,
           target: "_blank",
           class: [
-            "flex flex-row grow items-center justify-center w-28 h-14 rounded-lg mt-6",
+            "flex flex-row grow items-center justify-center max-w-28 w-full h-14 rounded-lg mt-6",
             "bg-red": @profile.linkedin_url.present?,
             "bg-grey-300 cursor-not-allowed": @profile.linkedin_url.blank?
           ]

app/views/schedules/show.html.erb

@@ -39,7 +39,8 @@
                   partial: 'sessions/card',
                   locals: {
                     session: session,
-                    user_is_an_attendee: true
+                    user_is_an_attendee: true,
+                    id_prefix: "schedule",
                   }
                 ) %>
           <% end %>

app/views/sessions/_bookmark.html.erb

@@ -0,0 +1,21 @@
+<% if show_bookmark_button?(session) %>
+  <% if user_is_an_attendee %>
+    <%= button_to(
+          session_attendee_path(session_id: session.id, params: request.params[:starts_at], anchor: session_anchor(session)),
+          method: :delete, form: { class: "z-10 flex items-center", id: dom_id(session, "bookmark") }
+        ) do %>
+      <div class="p-2">
+        <%= inline_svg_tag("icons/bookmark-full.svg") %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= button_to(
+          session_attendee_path(session_id: session.id, params: request.params[:starts_at], anchor: session_anchor(session)),
+          form: { class: "z-10 flex items-center", id: dom_id(session, "bookmark"), }
+        ) do %>
+      <div class="p-2">
+        <%= inline_svg_tag("icons/bookmark-outline.svg", class: "") %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

app/views/sessions/_card.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (session:, user_is_an_attendee:) %>
+<%# locals: (session:, user_is_an_attendee:, id_prefix: nil) %>
 
-<div class="relative flex flex-col w-full p-5 mb-4 bg-white rounded-[20px]">
+<div class="relative flex flex-col w-full p-5 mb-4 bg-white rounded-[20px]" id="<%= dom_id(session, id_prefix) %>">
   <a href="<%= session_path(session) %>" class="absolute top-0 bottom-0 left-0 right-0 z-0"></a>
 
   <%= render partial: "sessions/status", locals: { session: session } %>
@@ -11,28 +11,7 @@
         <%= session.title %>
       </h3>
     </a>
-
-    <% unless session.past? %>
-      <% if user_is_an_attendee %>
-        <%= button_to(
-          session_attendee_path(session_id: session.id, params: request.params[:starts_at], anchor: session_anchor(session)),
-          method: :delete, form_class: "z-10 flex items-center", data: { turbo_action: 'replace' }
-        ) do %>
-          <div class="p-2">
-            <%= inline_svg_tag("icons/bookmark-full.svg") %>
-          </div>
-        <% end %>
-      <% else %>
-        <%= button_to(
-          session_attendee_path(session_id: session.id, params: request.params[:starts_at], anchor: session_anchor(session)),
-          form_class: "z-10 flex items-center", data: { turbo_action: 'replace' }
-        ) do %>
-          <div class="p-2">
-            <%= inline_svg_tag("icons/bookmark-outline.svg", class: "") %>
-          </div>
-        <% end %>
-      <% end %>
-    <% end %>
+    <%= render partial: "sessions/bookmark", locals: { session: session, user_is_an_attendee: } %>
   </div>
 
   <% if session.speakers.present? %>

app/views/sessions/show.html.erb

@@ -7,24 +7,7 @@
 
       <div class="flex flex-row justify-between w-full mb-2 grow">
         <h1 class="text-2xl italic font-bold text-red"><%= @session.title %></h1>
-
-        <% unless @session.past? %>
-          <% if current_user.sessions.pluck(:id).include?(@session.id) %>
-            <%= button_to(
-              session_attendee_path(session_id: @session.id, params: request.params[:starts_at]),
-              method: :delete, form_class: "flex items-center ml-8"
-            ) do %>
-              <%= inline_svg_tag("icons/bookmark-full.svg") %>
-            <% end %>
-          <% else %>
-            <%= button_to(
-              session_attendee_path(session_id: @session.id, params: request.params[:starts_at]),
-              form_class: "flex items-center ml-8"
-            ) do %>
-              <%= inline_svg_tag("icons/bookmark-outline.svg") %>
-            <% end %>
-          <% end %>
-        <% end %>
+        <%= render partial: "bookmark", locals: { session: @session, user_is_an_attendee: @user_session_ids.include?(@session.id)} %>
       </div>
 
       <% if @session.speakers.present? %>

app/views/user_sessions/new.html.erb

@@ -16,7 +16,13 @@
 
           <div class="flex flex-col">
             <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-            <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field" } %>
+            <div class="relative" data-controller="password-visibility">
+              <%= form.password_field :password, required: true, class: "peer w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %>
+              <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 hover:text-white peer-focus:text-gray-400 peer-focus:hover:text-gray-600" type="button" data-action="password-visibility#toggle">
+                <%= inline_svg_tag("icons/eye-empty.svg", size: "22", data: { "password-visibility-target": "icon" }) %>
+                <%= inline_svg_tag("icons/eye-off.svg", size: "22", class: "hidden", data: { "password-visibility-target": "icon" }) %>
+              </button>
+            </div>
           </div>
         </div>
 

config/importmap.rb

@@ -10,3 +10,4 @@
 pin_all_from "app/javascript/custom", under: "custom"
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
+pin "@stimulus-components/password-visibility", to: "@stimulus-components--password-visibility.js" # @3.0.0