From fcc09e6bae56747d68f62720c19248234c6f88ba Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 8 Aug 2024 02:58:18 +0100
Subject: [PATCH 01/23] refactor: improve calendar performance and style

---
 lib/atomic_web/components/calendar/month.ex   |  68 +++++--
 lib/atomic_web/live/calendar_live/show.ex     |  95 +++++++++-
 .../live/calendar_live/show.html.heex         | 176 +++++++++++++++++-
 3 files changed, 317 insertions(+), 22 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 6717e6ba5..3cb452815 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -6,7 +6,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
   import AtomicWeb.Components.Badge
 
   attr :id, :string, default: "calendar-month", required: false
-  attr :current_path, :string, required: true
+  attr :current_date, :string, required: true
   attr :activities, :list, required: true
   attr :timezone, :string, required: true
   attr :beginning_of_month, :string, required: true
@@ -15,9 +15,9 @@ defmodule AtomicWeb.Components.CalendarMonth do
 
   def calendar_month(assigns) do
     ~H"""
-    <div id={@id} class="rounded-lg shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-      <div class="grid grid-cols-7 gap-px rounded-t-lg border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
-        <div class="rounded-tl-lg bg-white py-2">
+    <div id={@id} class="shadow lg:flex lg:flex-auto lg:flex-col">
+      <div class="grid grid-cols-7 gap-px border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
+        <div class="bg-white py-2">
           M<span class="sr-only sm:not-sr-only">on</span>
         </div>
         <div class="bg-white py-2">
@@ -35,20 +35,21 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <div class="bg-white py-2">
           S<span class="sr-only sm:not-sr-only">at</span>
         </div>
-        <div class="rounded-tr-lg bg-white py-2">
+        <div class="bg-white py-2">
           S<span class="sr-only sm:not-sr-only">un</span>
         </div>
       </div>
       <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
-        <div class="grid w-full grid-cols-7 gap-px overflow-hidden rounded-b-lg">
-          <%= for i <- 0..@end_of_month.day - 1 do %>
-            <.day index={i} params={@params} current_path={@current_path} activities={@activities} date={Timex.shift(@beginning_of_month, days: i)} timezone={@timezone} />
+        <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
+          <%= for date <- generate_days_list(@beginning_of_month, @end_of_month) do %>
+            <%!-- <p><%= @end_of_month %></p> --%>
+            <.day index={date.day} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
           <% end %>
         </div>
       </div>
     </div>
     <div class="py-4 lg:hidden">
-      <ol class="divide-y divide-zinc-200 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
+      <ol class="divide-y divide-zinc-200 overflow-hidden rounded-lg bg-white text-sm shadow">
         <%= for activity <- get_date_activities(@activities, current_from_params(@timezone, @params)) do %>
           <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
             <li class="group flex p-4 pr-6 focus-within:bg-zinc-50 hover:bg-zinc-50">
@@ -74,16 +75,40 @@ defmodule AtomicWeb.Components.CalendarMonth do
     """
   end
 
+  defp generate_days_list(beginning_of_month, end_of_month) do
+    days_from_last_month = Timex.weekday(beginning_of_month, :monday)
+
+    past_month =
+      for i <- 1..(days_from_last_month - 1) do
+        Timex.shift(Timex.shift(beginning_of_month, days: -days_from_last_month), days: i)
+      end
+
+    current_month =
+      for i <- 0..(end_of_month.day - 1) do
+        Timex.shift(beginning_of_month, days: i)
+      end
+
+    next_month =
+      for i <- 1..(42 - Timex.days_in_month(beginning_of_month) - days_from_last_month + 1) do
+        Timex.shift(end_of_month, days: i)
+      end
+
+    if days_from_last_month == 1 do
+      current_month ++ next_month
+    else
+      past_month ++ current_month ++ next_month
+    end
+  end
+
   defp day(%{index: index, date: date, timezone: timezone} = assigns) do
     weekday = Timex.weekday(date, :monday)
     today? = Timex.compare(date, Timex.today(timezone))
 
     class =
       class_list([
-        {"relative py-2 px-3 lg:min-h-[110px] lg:flex hidden", true},
-        {col_start(weekday), index == 0},
-        {"bg-white", today? >= 0},
-        {"bg-zinc-50 text-zinc-500", today? < 0}
+        {"relative py-2 px-3 lg:h-28 lg:flex flex-col hidden", true},
+        {"bg-white", assigns.current_date.month == date.month},
+        {"bg-zinc-50 text-zinc-500", assigns.current_date.month != date.month}
       ])
 
     assigns =
@@ -99,25 +124,30 @@ defmodule AtomicWeb.Components.CalendarMonth do
     <div class={@class}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
-            "flex h-6 w-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
+            "flex h-6 w-6 items-center justify-center rounded-full bg-primary-600 font-semibold text-white"
           end}"
         }>
         <%= @text %>
       </time>
-      <ol class="mt-3 w-full">
-        <%= for activity <- get_date_activities(@activities, @date) do %>
+      <ol class="mt-2 -space-y-1">
+        <%= for activity <- get_date_activities(@activities, @date) |> Enum.take(2) do %>
           <li>
             <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
-              <p class="flex-auto truncate font-medium text-zinc-600 group-hover:text-zinc-800">
+              <p class="flex-auto truncate font-medium text-zinc-900 group-hover:text-primary-600">
                 <%= activity.title %>
               </p>
-              <time datetime={activity.start} class="mx-2 hidden flex-none text-zinc-600 group-hover:text-zinc-800 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
+              <time datetime={activity.start} class="ml-3 hidden flex-none text-zinc-500 group-hover:text-primary-600 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
             </.link>
           </li>
         <% end %>
+        <%= if Enum.count(get_date_activities(@activities, @date)) > 2 do %>
+          <li class="text-zinc-500">
+            + <%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
+          </li>
+        <% end %>
       </ol>
     </div>
-    <.link patch={build_path(@current_path, %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class={"#{if @index == 0 do col_start(@weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
+    <.link patch={build_path("", %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class={"#{if @index == 0 do col_start(@weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
       <time
         date-time={@date}
         class={
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index 706b3dc6e..3da57d16e 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -3,9 +3,12 @@ defmodule AtomicWeb.CalendarLive.Show do
   use AtomicWeb, :live_view
 
   import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.Calendar
+  import AtomicWeb.Components.CalendarMonth
+  import AtomicWeb.Components.CalendarWeek
+  import AtomicWeb.Components.Dropdown
 
   alias Atomic.Activities
+  alias Timex.Duration
 
   @impl true
   def mount(_params, _session, socket) do
@@ -22,7 +25,95 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_page, :calendar)
      |> assign(:params, params)
      |> assign(:mode, mode)
-     |> assign(:activities, list_activities(socket.assigns.timezone, mode, params))}
+     |> assign(:activities, list_activities(socket.assigns.timezone, mode, params))
+     |> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+     |> assign(:current_date, Timex.today(socket.assigns.timezone))
+     |> assigns_month(
+       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
+       socket.assigns.timezone,
+       params
+     )}
+  end
+
+  @impl true
+  def handle_event("previous", _, socket) do
+    {:noreply,
+     socket
+     |> assign(
+       :current_date,
+       socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
+     )
+     |> assigns_month(
+       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
+       socket.assigns.timezone,
+       socket.assigns.params
+     )}
+  end
+
+  @impl true
+  def handle_event("present", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_date, Timex.today(socket.assigns.timezone))
+     |> assigns_month(
+       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
+       socket.assigns.timezone,
+       socket.assigns.params
+     )}
+  end
+
+  @impl true
+  def handle_event("next", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
+     |> assigns_month(
+       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
+       socket.assigns.timezone,
+       socket.assigns.params
+     )}
+  end
+
+  defp assigns_month(socket, current_path, timezone, params) do
+    current = socket.assigns.current_date
+    beginning_of_month = Timex.beginning_of_month(current)
+    end_of_month = Timex.end_of_month(current)
+
+    last_day_previous_month =
+      beginning_of_month
+      |> Timex.add(Duration.from_days(-1))
+
+    first_day_next_month =
+      end_of_month
+      |> Timex.add(Duration.from_days(1))
+
+    previous_month =
+      last_day_previous_month
+      |> date_to_month()
+
+    next_month =
+      first_day_next_month
+      |> date_to_month()
+
+    previous_month_year =
+      last_day_previous_month
+      |> date_to_year()
+
+    next_month_year =
+      first_day_next_month
+      |> date_to_year()
+
+    previous_month_path =
+      build_path(current_path, %{mode: "month", month: previous_month, year: previous_month_year})
+
+    next_month_path =
+      build_path(current_path, %{mode: "month", month: next_month, year: next_month_year})
+
+    socket
+    |> assign(beginning_of_month: beginning_of_month)
+    |> assign(end_of_month: end_of_month)
+    |> assign(previous_month_path: previous_month_path)
+    |> assign(next_month_path: next_month_path)
   end
 
   defp list_activities(timezone, mode, params) do
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 4af43197f..5e90c893b 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,3 +1,177 @@
 <.page title="Calendar">
-  <.calendar current_path={Routes.calendar_show_path(@socket, :show)} activities={@activities} params={@params} mode={@mode} timezone={@timezone} />
+  <div>
+    <div x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
+      <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300 bg-gray-50">
+        <div class="flex-1">
+          <div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
+            <span class="font-semibold text-base text-zinc-900">
+              <%= if @mode == "month" do %>
+                <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
+              <% else %>
+                <%= case date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
+                  <% true -> %>
+                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
+                  <% _ -> %>
+                    <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
+                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
+                    <% else %>
+                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
+                    <% end %>
+                <% end %>
+              <% end %>
+            </span>
+            <div class="flex items-center">
+              <div class="flex items-center rounded-md bg-white shadow-sm md:items-stretch">
+                <button type="button" phx-click="previous" class="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-300 pr-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
+                  <span class="sr-only">Previous month</span>
+                  <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                </button>
+                <button type="button" phx-click="present" class="hidden border-y border-zinc-300 px-3.5 text-sm font-semibold text-zinc-900 hover:bg-gray-50 focus:relative md:block">
+                  <span><%= gettext("Today") %></span>
+                </button>
+                <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
+                <button type="button" phx-click="next" class="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-300 pl-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
+                  <span class="sr-only">Next month</span>
+                  <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                </button>
+              </div>
+              <div class="hidden md:ml-4 md:flex md:items-center">
+                <div class="relative">
+                  <.dropdown
+                    id="calendar-dropdown"
+                    orientation={:down}
+                    items={
+                      [
+                        %{name: gettext("Week view"), link: ""},
+                        # Link that switches mode
+                        %{name: gettext("Month view"), link: ""}
+                      ]
+                    }
+                  >
+                    <:wrapper>
+                      <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                        <%= if @mode == "month" do %>
+                          <%= gettext("Month view") %>
+                        <% else %>
+                          <%= gettext("Week view") %>
+                        <% end %>
+                        <span class="h-5 w-5 text-zinc-400">
+                          <.icon name={:chevron_down} solid />
+                        </span>
+                      </button>
+                    </:wrapper>
+                  </.dropdown>
+
+                  <div
+                    x-bind:class="mode_view ?'block' : 'hidden'"
+                    class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="menu-button"
+                    tabindex="-1"
+                  >
+                    <div class="py-1" role="none">
+                      <.link patch={@current_path}>
+                        <button
+                          type="button"
+                          @click="mode_view = false"
+                          class={
+                            "block px-4 w-full py-2 text-sm #{if @mode == "week" do
+                              "hidden"
+                            else
+                              "block"
+                            end}"
+                          }
+                          role="menuitem"
+                          tabindex="-1"
+                          id="menu-0-item-2"
+                        >
+                          <%= gettext("Week view") %>
+                        </button>
+                      </.link>
+                      <.link patch={@current_path}>
+                        <button
+                          type="button"
+                          @click="mode_view = false"
+                          class={
+                            "block px-4 w-full py-2 text-sm #{if @mode == "month" do
+                              "hidden"
+                            else
+                              "block"
+                            end}"
+                          }
+                          role="menuitem"
+                          tabindex="-1"
+                          id="menu-0-item-3"
+                        >
+                          <%= gettext("Month view") %>
+                        </button>
+                      </.link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="relative ml-6 md:hidden">
+                <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
+                  <span class="sr-only">Open menu</span>
+                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                </button>
+                <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <div class="py-1" role="none">
+                    <.link patch={"#{if @mode == "month" do @current_path else @current_path end}"}>
+                      <button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
+                        <%= gettext("Today") %>
+                      </button>
+                    </.link>
+                    <div class="mx-4 border-b border-zinc-200" />
+                    <.link patch={@current_path}>
+                      <button
+                        type="button"
+                        @click="mode_view = false"
+                        class={
+                          "block px-4 w-full py-2 text-sm #{if @mode == "week" do
+                            "hidden"
+                          else
+                            "block"
+                          end}"
+                        }
+                        role="menuitem"
+                        tabindex="-1"
+                        id="menu-1-item-2"
+                      >
+                        <%= gettext("Week view") %>
+                      </button>
+                    </.link>
+                    <.link patch={@current_path}>
+                      <button
+                        type="button"
+                        @click="mode_view = false"
+                        class={
+                          "block px-4 w-full py-2 text-sm #{if @mode == "month" do
+                            "hidden"
+                          else
+                            "block"
+                          end}"
+                        }
+                        role="menuitem"
+                        tabindex="-1"
+                        id="menu-1-item-3"
+                      >
+                        <%= gettext("Month view") %>
+                      </button>
+                    </.link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <%= if @mode == "month" do %>
+        <.calendar_month current_date={@current_date} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
+      <% else %>
+        <.calendar_week current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
+      <% end %>
+    </div>
+  </div>
 </.page>

From cc4b6226595956b9de2211418e793faf93f95069 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 8 Aug 2024 16:42:05 +0100
Subject: [PATCH 02/23] refactor: update calendar week view code and dropdown
 link handling

---
 .../components/calendar/calendar.ex           | 383 ------------------
 lib/atomic_web/components/calendar/month.ex   |   6 +-
 lib/atomic_web/components/calendar/week.ex    |   7 +-
 lib/atomic_web/components/dropdown.ex         |   2 +-
 lib/atomic_web/live/calendar_live/show.ex     | 101 +++--
 .../live/calendar_live/show.html.heex         |   6 +-
 6 files changed, 85 insertions(+), 420 deletions(-)
 delete mode 100644 lib/atomic_web/components/calendar/calendar.ex

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
deleted file mode 100644
index 7c27db643..000000000
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ /dev/null
@@ -1,383 +0,0 @@
-defmodule AtomicWeb.Components.Calendar do
-  @moduledoc false
-  use AtomicWeb, :component
-
-  import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.CalendarMonth
-  import AtomicWeb.Components.CalendarWeek
-  import AtomicWeb.Components.Dropdown
-
-  alias Timex.Duration
-
-  attr :id, :string, default: "calendar", required: false
-  attr :current_path, :string, required: true
-  attr :activities, :list, required: true
-  attr :mode, :string, required: true
-  attr :timezone, :string, required: true
-  attr :params, :map, required: true
-
-  def calendar(
-        %{
-          current_path: current_path,
-          params: params,
-          mode: mode,
-          timezone: timezone
-        } = assigns
-      ) do
-    assigns =
-      assigns
-      |> assign_date(current_path, params, timezone)
-
-    assigns =
-      case mode do
-        "week" ->
-          assigns
-          |> assigns_week(current_path, timezone, params)
-
-        "month" ->
-          assigns
-          |> assigns_month(current_path, timezone, params)
-
-        _ ->
-          assigns
-          |> assigns_month(current_path, timezone, params)
-      end
-
-    ~H"""
-    <div id={@id} x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full">
-      <header class="my-4 flex flex-col sm:flex-row">
-        <div class="flex-1">
-          <div class="relative z-20 flex w-full items-end justify-between lg:flex-none">
-            <span class="font-base pl-2 text-base text-zinc-900">
-              <%= if @mode == "month" do %>
-                <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
-              <% else %>
-                <%= case date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
-                  <% true -> %>
-                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
-                  <% _ -> %>
-                    <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% else %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% end %>
-                <% end %>
-              <% end %>
-            </span>
-            <div class="flex items-center">
-              <div class="flex items-center md:items-stretch">
-                <.link patch={"#{if @mode == "month" do @previous_month_path else @previous_week_path end}"}>
-                  <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
-                    <span class="sr-only">Previous month</span>
-                    <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
-                  </button>
-                </.link>
-                <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
-                  <button type="button" class="hidden h-full px-3.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 hover:text-zinc-900 focus:relative md:block">
-                    <%= gettext("Today") %>
-                  </button>
-                </.link>
-                <.link patch={"#{if @mode == "month" do @next_month_path else @next_week_path end}"}>
-                  <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
-                    <span class="sr-only">Next month</span>
-                    <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
-                  </button>
-                </.link>
-              </div>
-              <div class="hidden md:ml-4 md:flex md:items-center">
-                <div class="relative">
-                  <.dropdown
-                    id="calendar-dropdown"
-                    orientation={:down}
-                    items={[
-                      %{name: gettext("Week view"), link: @current_week_path},
-                      %{name: gettext("Month view"), link: @current_month_path}
-                    ]}
-                  >
-                    <:wrapper>
-                      <.button color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
-                        <%= if @mode == "month" do %>
-                          <%= gettext("Month view") %>
-                        <% else %>
-                          <%= gettext("Week view") %>
-                        <% end %>
-                      </.button>
-                    </:wrapper>
-                  </.dropdown>
-
-                  <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-                    <div class="py-1" role="none">
-                      <.link patch={@current_week_path}>
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-2"
-                        >
-                          <%= gettext("Week view") %>
-                        </button>
-                      </.link>
-                      <.link patch={@current_month_path}>
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-3"
-                        >
-                          <%= gettext("Month view") %>
-                        </button>
-                      </.link>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="relative ml-6 md:hidden">
-                <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
-                  <span class="sr-only">Open menu</span>
-                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
-                </button>
-                <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div class="py-1" role="none">
-                    <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
-                      <button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
-                        <%= gettext("Today") %>
-                      </button>
-                    </.link>
-                    <div class="mx-4 border-b border-zinc-200" />
-                    <.link patch={@present_week_path}>
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-2"
-                      >
-                        <%= gettext("Week view") %>
-                      </button>
-                    </.link>
-                    <.link patch={@present_month_path}>
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-3"
-                      >
-                        <%= gettext("Month view") %>
-                      </button>
-                    </.link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <%= if @mode == "month" do %>
-        <.calendar_month current_path={@current_path} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
-      <% else %>
-        <.calendar_week current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
-      <% end %>
-    </div>
-    """
-  end
-
-  defp assign_date(assigns, current_path, params, timezone) do
-    current = current_from_params(timezone, params)
-
-    current_year =
-      current
-      |> date_to_year()
-
-    current_month =
-      current
-      |> date_to_month()
-
-    current_day =
-      current
-      |> date_to_day()
-
-    present_year =
-      Timex.today(timezone)
-      |> date_to_year()
-
-    present_month =
-      Timex.today(timezone)
-      |> date_to_month()
-
-    present_day =
-      Timex.today(timezone)
-      |> date_to_day()
-
-    present_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: present_day,
-        month: present_month,
-        year: present_year
-      })
-
-    current_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: current_day,
-        month: current_month,
-        year: current_year
-      })
-
-    present_month_path =
-      build_path(current_path, %{
-        mode: "month",
-        day: present_day,
-        month: present_month,
-        year: present_year
-      })
-
-    current_month_path =
-      build_path(current_path, %{
-        mode: "month",
-        day: current_day,
-        month: current_month,
-        year: current_year
-      })
-
-    assigns
-    |> assign(present_month_path: present_month_path)
-    |> assign(present_week_path: present_week_path)
-    |> assign(current_month_path: current_month_path)
-    |> assign(current_week_path: current_week_path)
-    |> assign(current: current)
-  end
-
-  defp assigns_week(assigns, current_path, timezone, params) do
-    current = current_from_params(timezone, params)
-    beginning_of_week = Timex.beginning_of_week(current)
-    end_of_week = Timex.end_of_week(current)
-
-    previous_week_date =
-      current
-      |> Timex.add(Duration.from_days(-7))
-
-    next_week_date =
-      current
-      |> Timex.add(Duration.from_days(7))
-
-    previous_week_day =
-      previous_week_date
-      |> date_to_day()
-
-    previous_week_month =
-      previous_week_date
-      |> date_to_month()
-
-    previous_week_year =
-      previous_week_date
-      |> date_to_year()
-
-    next_week_day =
-      next_week_date
-      |> date_to_day()
-
-    next_week_month =
-      next_week_date
-      |> date_to_month()
-
-    next_week_year =
-      next_week_date
-      |> date_to_year()
-
-    previous_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: previous_week_day,
-        month: previous_week_month,
-        year: previous_week_year
-      })
-
-    next_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: next_week_day,
-        month: next_week_month,
-        year: next_week_year
-      })
-
-    assigns
-    |> assign(beginning_of_week: beginning_of_week)
-    |> assign(end_of_week: end_of_week)
-    |> assign(previous_week_path: previous_week_path)
-    |> assign(next_week_path: next_week_path)
-  end
-
-  defp assigns_month(assigns, current_path, timezone, params) do
-    current = current_from_params(timezone, params)
-    beginning_of_month = Timex.beginning_of_month(current)
-    end_of_month = Timex.end_of_month(current)
-
-    last_day_previous_month =
-      beginning_of_month
-      |> Timex.add(Duration.from_days(-1))
-
-    first_day_next_month =
-      end_of_month
-      |> Timex.add(Duration.from_days(1))
-
-    previous_month =
-      last_day_previous_month
-      |> date_to_month()
-
-    next_month =
-      first_day_next_month
-      |> date_to_month()
-
-    previous_month_year =
-      last_day_previous_month
-      |> date_to_year()
-
-    next_month_year =
-      first_day_next_month
-      |> date_to_year()
-
-    previous_month_path =
-      build_path(current_path, %{mode: "month", month: previous_month, year: previous_month_year})
-
-    next_month_path =
-      build_path(current_path, %{mode: "month", month: next_month, year: next_month_year})
-
-    assigns
-    |> assign(beginning_of_month: beginning_of_month)
-    |> assign(end_of_month: end_of_month)
-    |> assign(previous_month_path: previous_month_path)
-    |> assign(next_month_path: next_month_path)
-  end
-end
diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 3cb452815..b1f02c1f8 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -43,7 +43,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
           <%= for date <- generate_days_list(@beginning_of_month, @end_of_month) do %>
             <%!-- <p><%= @end_of_month %></p> --%>
-            <.day index={date.day} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
+            <.day params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
           <% end %>
         </div>
       </div>
@@ -100,7 +100,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
     end
   end
 
-  defp day(%{index: index, date: date, timezone: timezone} = assigns) do
+  defp day(%{date: date, timezone: timezone} = assigns) do
     weekday = Timex.weekday(date, :monday)
     today? = Timex.compare(date, Timex.today(timezone))
 
@@ -147,7 +147,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <.link patch={build_path("", %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class={"#{if @index == 0 do col_start(@weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
+    <.link patch={build_path("", %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class="min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden">
       <time
         date-time={@date}
         class={
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 2362b81eb..4035c3186 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -7,10 +7,9 @@ defmodule AtomicWeb.Components.CalendarWeek do
   import AtomicWeb.CalendarUtils
 
   attr :id, :string, default: "calendar-week", required: false
-  attr :current_path, :string, required: true
+  attr :current_date, :string, required: true
   attr :activities, :list, required: true
   attr :timezone, :string, required: true
-  attr :current, :string, required: true
   attr :beginning_of_week, :string, required: true
   attr :end_of_week, :string, required: true
   attr :params, :map, required: true
@@ -29,7 +28,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
-              <.link patch={build_path(@current_path, %{"mode" => "week", "day" => day_of_week |> date_to_day(), "month" => @params["month"], "year" => @params["year"]})} class="flex flex-col items-center py-2">
+              <.link patch="" class="flex flex-col items-center py-2">
                 <%= Enum.at(@week_mobile, idx) %>
                 <span class={
                   "#{if @today == day_of_week do
@@ -99,7 +98,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
             </div>
             <!-- Events -->
             <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
-              <.day date={@current} idx={0} activities={@activities} />
+              <.day date={@current_date} idx={0} activities={@activities} />
             </ol>
             <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
               <%= for idx <- 0..6 do %>
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index eb81121d3..b2800c5d0 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -30,7 +30,7 @@ defmodule AtomicWeb.Components.Dropdown do
       <div id={@id} class={"#{if @orientation == :down, do: "origin-top-right top-full", else: "origin-bottom-right bottom-full"} absolute right-0 z-10 mt-2 hidden w-56 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"}>
         <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
           <%= for item <- @items do %>
-            <.link href={item.link} class="block flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" method={Map.get(item, :method, "get")}>
+            <.link patch={item.link} phx-click={JS.hide(to: "##{@id}")} class="block flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" method={Map.get(item, :method, "get")}>
               <%= if item[:icon] do %>
                 <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
               <% end %>
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index 3da57d16e..f0410fba7 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -17,7 +17,7 @@ defmodule AtomicWeb.CalendarLive.Show do
 
   @impl true
   def handle_params(params, _, socket) do
-    mode = default_mode(params)
+    mode = Map.get(params, "mode", "month")
 
     {:noreply,
      socket
@@ -28,11 +28,8 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:activities, list_activities(socket.assigns.timezone, mode, params))
      |> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
      |> assign(:current_date, Timex.today(socket.assigns.timezone))
-     |> assigns_month(
-       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
-       socket.assigns.timezone,
-       params
-     )}
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+     |> assigns_week(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
   @impl true
@@ -43,11 +40,7 @@ defmodule AtomicWeb.CalendarLive.Show do
        :current_date,
        socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
      )
-     |> assigns_month(
-       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
-       socket.assigns.timezone,
-       socket.assigns.params
-     )}
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
   @impl true
@@ -55,11 +48,7 @@ defmodule AtomicWeb.CalendarLive.Show do
     {:noreply,
      socket
      |> assign(:current_date, Timex.today(socket.assigns.timezone))
-     |> assigns_month(
-       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
-       socket.assigns.timezone,
-       socket.assigns.params
-     )}
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
   @impl true
@@ -67,14 +56,18 @@ defmodule AtomicWeb.CalendarLive.Show do
     {:noreply,
      socket
      |> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
-     |> assigns_month(
-       Routes.calendar_show_path(AtomicWeb.Endpoint, :show),
-       socket.assigns.timezone,
-       socket.assigns.params
-     )}
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
-  defp assigns_month(socket, current_path, timezone, params) do
+  @impl true
+  def handle_event("set-mode", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
+  end
+
+  defp assigns_month(socket, current_path) do
     current = socket.assigns.current_date
     beginning_of_month = Timex.beginning_of_month(current)
     end_of_month = Timex.end_of_month(current)
@@ -116,14 +109,70 @@ defmodule AtomicWeb.CalendarLive.Show do
     |> assign(next_month_path: next_month_path)
   end
 
+  defp assigns_week(socket, current_path) do
+    current = socket.assigns.current_date
+    beginning_of_week = Timex.beginning_of_week(current)
+    end_of_week = Timex.end_of_week(current)
+
+    previous_week_date =
+      current
+      |> Timex.add(Duration.from_days(-7))
+
+    next_week_date =
+      current
+      |> Timex.add(Duration.from_days(7))
+
+    previous_week_day =
+      previous_week_date
+      |> date_to_day()
+
+    previous_week_month =
+      previous_week_date
+      |> date_to_month()
+
+    previous_week_year =
+      previous_week_date
+      |> date_to_year()
+
+    next_week_day =
+      next_week_date
+      |> date_to_day()
+
+    next_week_month =
+      next_week_date
+      |> date_to_month()
+
+    next_week_year =
+      next_week_date
+      |> date_to_year()
+
+    previous_week_path =
+      build_path(current_path, %{
+        mode: "week",
+        day: previous_week_day,
+        month: previous_week_month,
+        year: previous_week_year
+      })
+
+    next_week_path =
+      build_path(current_path, %{
+        mode: "week",
+        day: next_week_day,
+        month: next_week_month,
+        year: next_week_year
+      })
+
+    socket
+    |> assign(beginning_of_week: beginning_of_week)
+    |> assign(end_of_week: end_of_week)
+    |> assign(previous_week_path: previous_week_path)
+    |> assign(next_week_path: next_week_path)
+  end
+
   defp list_activities(timezone, mode, params) do
     start = build_beggining_date(timezone, mode, params)
     finish = build_ending_date(timezone, mode, params)
 
     Activities.list_activities_from_to(start, finish)
   end
-
-  defp default_mode(params) when is_map_key(params, "mode"), do: params["mode"]
-
-  defp default_mode(_params), do: "month"
 end
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 5e90c893b..68b71e021 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -42,9 +42,9 @@
                     orientation={:down}
                     items={
                       [
-                        %{name: gettext("Week view"), link: ""},
+                        %{name: gettext("Week view"), link: "?mode=week"},
                         # Link that switches mode
-                        %{name: gettext("Month view"), link: ""}
+                        %{name: gettext("Month view"), link: "?mode=month"}
                       ]
                     }
                   >
@@ -170,7 +170,7 @@
       <%= if @mode == "month" do %>
         <.calendar_month current_date={@current_date} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
       <% else %>
-        <.calendar_week current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
+        <.calendar_week current_date={@current_date} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
       <% end %>
     </div>
   </div>

From 05abb4981c7898622c45e09a289a2034b7aaf384 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 8 Aug 2024 16:46:55 +0100
Subject: [PATCH 03/23] refactor: remove unused calendar story file

---
 storybook/components/calendar.story.exs | 32 -------------------------
 1 file changed, 32 deletions(-)
 delete mode 100644 storybook/components/calendar.story.exs

diff --git a/storybook/components/calendar.story.exs b/storybook/components/calendar.story.exs
deleted file mode 100644
index f4e6679ed..000000000
--- a/storybook/components/calendar.story.exs
+++ /dev/null
@@ -1,32 +0,0 @@
-defmodule AtomicWeb.Storybook.Components.Calendar do
-  use PhoenixStorybook.Story, :component
-
-  alias AtomicWeb.Components.Calendar
-
-  def function, do: &Calendar.calendar/1
-
-  def variations do
-    [
-      %Variation{
-        id: :default,
-        attributes: %{
-          current_path: "/storybook/components/calendar",
-          activities: [],
-          mode: "month",
-          timezone: "Europe/Lisbon",
-          params: %{}
-        }
-      },
-      %Variation{
-        id: :weekly,
-        attributes: %{
-          current_path: "/storybook/components/calendar",
-          activities: [],
-          mode: "week",
-          timezone: "Europe/Lisbon",
-          params: %{}
-        }
-      }
-    ]
-  end
-end

From 3642b8c722b73fdb4ba3bcae60cefc345141c263 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Fri, 9 Aug 2024 23:21:45 +0100
Subject: [PATCH 04/23] refactor: improve calendar week view code and style

---
 lib/atomic_web/components/calendar/month.ex   |  6 +-
 lib/atomic_web/components/calendar/week.ex    | 29 ++++---
 lib/atomic_web/live/calendar_live/show.ex     | 77 +++++++++++++++----
 .../live/calendar_live/show.html.heex         | 18 ++---
 lib/atomic_web/views/calendar_utils.ex        | 20 ++---
 5 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index b1f02c1f8..2f11e0231 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -141,8 +141,10 @@ defmodule AtomicWeb.Components.CalendarMonth do
           </li>
         <% end %>
         <%= if Enum.count(get_date_activities(@activities, @date)) > 2 do %>
-          <li class="text-zinc-500">
-            + <%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
+          <li class="text-zinc-500 hover:text-primary-600">
+            <button type="button" phx-click="show-more" phx-value-date={@date}>
+              +<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
+            </button>
           </li>
         <% end %>
       </ol>
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 4035c3186..cbf5d1a9c 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> assign(today: Timex.today(timezone))
 
     ~H"""
-    <div id={@id} class="flex flex-auto flex-col overflow-auto rounded-lg bg-white">
+    <div id={@id} class="flex flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
         <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
@@ -77,7 +77,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
           <div class="left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
           <div class="grid flex-auto grid-cols-1 grid-rows-1">
             <!-- Horizontal lines -->
-            <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(30, minmax(2.5rem, 1fr))">
+            <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
               <div class="row-end-1 h-6"></div>
               <%= for hour <- hours() do %>
                 <div>
@@ -100,7 +100,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
             <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
               <.day date={@current_date} idx={0} activities={@activities} />
             </ol>
-            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
+            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr))">
               <%= for idx <- 0..6 do %>
                 <.day date={Timex.shift(@beginning_of_week, days: idx)} idx={idx} activities={@activities} />
               <% end %>
@@ -142,19 +142,29 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> Timex.format!("{m}")
       |> String.to_integer()
 
-    minutes = (minutes * 20 / 60) |> trunc()
-
-    2 + (hours - 8) * 20 + minutes
+    hours * 12 + div(minutes, 5) + 2
   end
 
   defp calc_time(start, finish) do
-    time_diff = (NaiveDateTime.diff(finish, start) / 3600) |> trunc()
+    time_diff = (NaiveDateTime.diff(finish, start) / 60) |> trunc()
 
-    2 + 20 * time_diff
+    if time_diff == 0 do
+      1
+    else
+      div(time_diff, 5)
+    end
   end
 
   defp hours,
     do: [
+      "0H",
+      "1H",
+      "2H",
+      "3H",
+      "4H",
+      "5H",
+      "6H",
+      "7H",
       "8H",
       "9H",
       "10H",
@@ -169,6 +179,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
       "19H",
       "20H",
       "21H",
-      "22H"
+      "22H",
+      "23H"
     ]
 end
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index f0410fba7..dff030b42 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -18,6 +18,7 @@ defmodule AtomicWeb.CalendarLive.Show do
   @impl true
   def handle_params(params, _, socket) do
     mode = Map.get(params, "mode", "month")
+    current_date = Map.get(socket.assigns, :current_date, Timex.today(socket.assigns.timezone))
 
     {:noreply,
      socket
@@ -25,46 +26,90 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_page, :calendar)
      |> assign(:params, params)
      |> assign(:mode, mode)
-     |> assign(:activities, list_activities(socket.assigns.timezone, mode, params))
+     |> assign(:activities, list_activities(socket.assigns.timezone, mode, current_date))
      |> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
-     |> assign(:current_date, Timex.today(socket.assigns.timezone))
+     |> assign(:current_date, current_date)
      |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
      |> assigns_week(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
   @impl true
   def handle_event("previous", _, socket) do
+    new_date =
+      if socket.assigns.mode == "week" do
+        socket.assigns.current_date |> Timex.add(Duration.from_days(-7))
+      else
+        socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
+      end
+
     {:noreply,
      socket
      |> assign(
        :current_date,
-       socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
+       new_date
+     )
+     |> assign(
+       :activities,
+       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
      )
-     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
+     |> assigns_dates()}
   end
 
   @impl true
   def handle_event("present", _, socket) do
+    new_date = Timex.today(socket.assigns.timezone)
+
     {:noreply,
      socket
-     |> assign(:current_date, Timex.today(socket.assigns.timezone))
-     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
+     |> assign(:current_date, new_date)
+     |> assign(
+       :activities,
+       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
+     )
+     |> assigns_dates()}
   end
 
   @impl true
   def handle_event("next", _, socket) do
+    new_date =
+      if socket.assigns.mode == "week" do
+        socket.assigns.current_date |> Timex.add(Duration.from_days(7))
+      else
+        socket.assigns.end_of_month |> Timex.add(Duration.from_days(1))
+      end
+
     {:noreply,
      socket
-     |> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
-     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
+     |> assign(:current_date, new_date)
+     |> assign(
+       :activities,
+       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
+     )
+     |> assigns_dates()}
   end
 
   @impl true
-  def handle_event("set-mode", _, socket) do
-    {:noreply,
-     socket
-     |> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
-     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
+  def handle_event("show-more", %{"date" => date}, socket) do
+    case Timex.parse(date, "{YYYY}-{0M}-{0D}") do
+      {:ok, naive_date} ->
+        date = Timex.to_date(naive_date)
+
+        {:noreply,
+         socket
+         |> assign(:current_date, date)
+         |> push_patch(to: Routes.calendar_show_path(socket, :show, mode: "week"), replace: true)}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
+  defp assigns_dates(socket) do
+    if socket.assigns.mode == "week" do
+      assigns_week(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+    else
+      assigns_month(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+    end
   end
 
   defp assigns_month(socket, current_path) do
@@ -169,9 +214,9 @@ defmodule AtomicWeb.CalendarLive.Show do
     |> assign(next_week_path: next_week_path)
   end
 
-  defp list_activities(timezone, mode, params) do
-    start = build_beggining_date(timezone, mode, params)
-    finish = build_ending_date(timezone, mode, params)
+  defp list_activities(timezone, mode, current_date) do
+    start = build_beggining_date(timezone, mode, current_date)
+    finish = build_ending_date(timezone, mode, current_date)
 
     Activities.list_activities_from_to(start, finish)
   end
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 68b71e021..a03bcbe09 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,6 +1,6 @@
 <.page title="Calendar">
   <div>
-    <div x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
+    <div x-data="{ mode_view: false }" class="flex-col h-[787px] lg:flex  lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
       <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300 bg-gray-50">
         <div class="flex-1">
           <div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
@@ -71,7 +71,7 @@
                     tabindex="-1"
                   >
                     <div class="py-1" role="none">
-                      <.link patch={@current_path}>
+                      <.link patch="?mode=week">
                         <button
                           type="button"
                           @click="mode_view = false"
@@ -89,7 +89,7 @@
                           <%= gettext("Week view") %>
                         </button>
                       </.link>
-                      <.link patch={@current_path}>
+                      <.link patch="?mode=month">
                         <button
                           type="button"
                           @click="mode_view = false"
@@ -118,13 +118,11 @@
                 </button>
                 <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div class="py-1" role="none">
-                    <.link patch={"#{if @mode == "month" do @current_path else @current_path end}"}>
-                      <button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
-                        <%= gettext("Today") %>
-                      </button>
-                    </.link>
+                    <button @click="mode_view = false" phx-click="present" type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
+                      <%= gettext("Today") %>
+                    </button>
                     <div class="mx-4 border-b border-zinc-200" />
-                    <.link patch={@current_path}>
+                    <.link patch="?mode=week">
                       <button
                         type="button"
                         @click="mode_view = false"
@@ -142,7 +140,7 @@
                         <%= gettext("Week view") %>
                       </button>
                     </.link>
-                    <.link patch={@current_path}>
+                    <.link patch="?mode=month">
                       <button
                         type="button"
                         @click="mode_view = false"
diff --git a/lib/atomic_web/views/calendar_utils.ex b/lib/atomic_web/views/calendar_utils.ex
index f75ea4035..b99efa9b9 100644
--- a/lib/atomic_web/views/calendar_utils.ex
+++ b/lib/atomic_web/views/calendar_utils.ex
@@ -5,24 +5,20 @@ defmodule AtomicWeb.CalendarUtils do
   use Phoenix.HTML
   use Timex
 
-  def build_beggining_date(timezone, "month", params) do
-    current = current_from_params(timezone, params)
-    Timex.beginning_of_month(current) |> Timex.to_naive_datetime()
+  def build_beggining_date(_timezone, "month", current_date) do
+    Timex.beginning_of_month(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_beggining_date(timezone, "week", params) do
-    current = current_from_params(timezone, params)
-    Timex.beginning_of_week(current) |> Timex.to_naive_datetime()
+  def build_beggining_date(_timezone, "week", current_date) do
+    Timex.beginning_of_week(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_ending_date(timezone, "month", params) do
-    current = current_from_params(timezone, params)
-    Timex.end_of_month(current) |> Timex.to_naive_datetime()
+  def build_ending_date(_timezone, "month", current_date) do
+    Timex.end_of_month(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_ending_date(timezone, "week", params) do
-    current = current_from_params(timezone, params)
-    Timex.end_of_week(current) |> Timex.to_naive_datetime()
+  def build_ending_date(_timezone, "week", current_date) do
+    Timex.end_of_week(current_date) |> Timex.to_naive_datetime()
   end
 
   def current_from_params(timezone, %{"day" => day, "month" => month, "year" => year}) do

From 9c896343efce7bb65a2989a3037d71d13d3cd639 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Tue, 13 Aug 2024 02:07:40 +0100
Subject: [PATCH 05/23] fix: resolve overlapping events display issue and
 incorrect styling

---
 lib/atomic_web/components/calendar/month.ex   | 56 +++++++++----------
 lib/atomic_web/components/calendar/week.ex    | 44 +++++++++++++--
 lib/atomic_web/live/calendar_live/show.ex     | 26 ++++++++-
 .../live/calendar_live/show.html.heex         | 54 +-----------------
 4 files changed, 94 insertions(+), 86 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 2f11e0231..fe80040a9 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -3,7 +3,6 @@ defmodule AtomicWeb.Components.CalendarMonth do
   use AtomicWeb, :component
 
   import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.Badge
 
   attr :id, :string, default: "calendar-month", required: false
   attr :current_date, :string, required: true
@@ -15,7 +14,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
 
   def calendar_month(assigns) do
     ~H"""
-    <div id={@id} class="shadow lg:flex lg:flex-auto lg:flex-col">
+    <div id={@id} class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
       <div class="grid grid-cols-7 gap-px border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
         <div class="bg-white py-2">
           M<span class="sr-only sm:not-sr-only">on</span>
@@ -42,36 +41,37 @@ defmodule AtomicWeb.Components.CalendarMonth do
       <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
         <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
           <%= for date <- generate_days_list(@beginning_of_month, @end_of_month) do %>
-            <%!-- <p><%= @end_of_month %></p> --%>
             <.day params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
           <% end %>
         </div>
       </div>
     </div>
-    <div class="py-4 lg:hidden">
-      <ol class="divide-y divide-zinc-200 overflow-hidden rounded-lg bg-white text-sm shadow">
-        <%= for activity <- get_date_activities(@activities, current_from_params(@timezone, @params)) do %>
-          <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-            <li class="group flex p-4 pr-6 focus-within:bg-zinc-50 hover:bg-zinc-50">
-              <div class="flex-auto">
-                <p class="font-semibold text-zinc-900">
-                  <%= activity.title %>
-                </p>
-                <div class="flex flex-row items-center gap-x-2 pt-2">
-                  <.link navigate={Routes.activity_index_path(AtomicWeb.Endpoint, :index)}>
-                    <.badge variant={:outline} color={:primary} label="Activity" />
-                  </.link>
-                  <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <.icon name={:clock} solid class="mr-2 h-5 w-5 text-zinc-400" />
-                    <%= Calendar.strftime(activity.start, "%Hh%M") %>
-                  </time>
+    <%= if length(@activities) > 0 do %>
+      <div class="px-4 py-10 sm:px-6 lg:hidden">
+        <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
+          <%= for activity <- @activities do %>
+            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
+              <li class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
+                <div class="flex-auto">
+                  <p class="font-semibold text-zinc-900">
+                    <%= activity.title %>
+                  </p>
+                  <div class="flex flex-row items-center gap-x-2 pt-2">
+                    <time datetime={activity.start} class="mt-2 flex items-center text-zinc-700">
+                      <.icon name={:clock} solid class="mr-2 h-5 w-5 text-zinc-400" />
+                      <%= Calendar.strftime(activity.start, "%Hh%M") %>
+                    </time>
+                  </div>
                 </div>
-              </div>
-            </li>
-          </.link>
-        <% end %>
-      </ol>
-    </div>
+                <.link navigate={Routes.activity_index_path(AtomicWeb.Endpoint, :index)} class="bg-primary-600 flex-none self-center rounded-md px-3 py-2 font-semibold text-white hover:bg-primary-500 focus-visible:outline-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2">
+                  Open activity
+                </.link>
+              </li>
+            </.link>
+          <% end %>
+        </ol>
+      </div>
+    <% end %>
     """
   end
 
@@ -149,11 +149,11 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <.link patch={build_path("", %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class="min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden">
+    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50 text-zinc-500" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
       <time
         date-time={@date}
         class={
-          "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
+          "ml-auto lg:ml-0 #{if @current_date == @date do
             "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
               "bg-orange-700"
             else
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index cbf5d1a9c..d8c24a0ce 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -22,19 +22,19 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> assign(today: Timex.today(timezone))
 
     ~H"""
-    <div id={@id} class="flex flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
+    <div id={@id} class="flex h-full flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
         <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
-              <.link patch="" class="flex flex-col items-center py-2">
+              <.link phx-click="set-current-date" phx-value-date={day_of_week} class="flex flex-col items-center py-2">
                 <%= Enum.at(@week_mobile, idx) %>
                 <span class={
                   "#{if @today == day_of_week do
                     "bg-orange-700 rounded-full text-white"
                   else
-                    if day_of_week |> date_to_day() == @params["day"] do
+                    if day_of_week == @current_date do
                       "bg-zinc-900 rounded-full text-white"
                     else
                       "text-zinc-900"
@@ -115,9 +115,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
   defp day(assigns) do
     ~H"""
     <%= for activity <- get_date_activities(@activities, @date) do %>
-      <li class={"#{col_start(@idx + 1)} relative mt-px flex"} style={"grid-row: #{calc_row_start(activity.start)} / span #{calc_time(activity.start, activity.finish)}"}>
+      <% width = calc_total_overlaps(activity, @activities) + 1 %>
+      <% left = calc_left_amount(activity, @activities) %>
+      <li class={"#{col_start(@idx + 1)} relative mt-px flex"} style={"
+            grid-row: #{calc_row_start(activity.start)} / span #{calc_time(activity.start, activity.finish)};
+            width: #{(1/width)*100}%;
+            left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class="group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100">
+          <div class={"#{if width != 1 do "hover:z-10 sm:hover:w-max" end} group absolute inset-1 flex flex-col overflow-y-auto overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100"}>
             <p class="order-1 font-semibold text-orange-500">
               <%= activity.title %>
             </p>
@@ -155,6 +160,35 @@ defmodule AtomicWeb.Components.CalendarWeek do
     end
   end
 
+  defp calc_total_overlaps(current_activity, activities) do
+    current_interval =
+      Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
+
+    activities
+    |> Enum.filter(fn activity ->
+      activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+
+      activity != current_activity and
+        Timex.Interval.overlaps?(current_interval, activity_interval)
+    end)
+    |> length()
+  end
+
+  defp calc_left_amount(current_activity, activities) do
+    current_interval =
+      Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
+
+    activities
+    |> Enum.take_while(fn activity -> activity != current_activity end)
+    |> Enum.filter(fn activity ->
+      activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+
+      activity != current_activity and
+        Timex.Interval.overlaps?(current_interval, activity_interval)
+    end)
+    |> length()
+  end
+
   defp hours,
     do: [
       "0H",
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index dff030b42..d35caa822 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -104,6 +104,28 @@ defmodule AtomicWeb.CalendarLive.Show do
     end
   end
 
+  @impl true
+  def handle_event("set-current-date", %{"date" => date}, socket) do
+    case Timex.parse(date, "{YYYY}-{0M}-{0D}") do
+      {:ok, naive_date} ->
+        date = Timex.to_date(naive_date)
+
+        date =
+          if date.month != socket.assigns.current_date.month && socket.assigns.mode == "month" do
+            socket.assigns.current_date
+          else
+            date
+          end
+
+        {:noreply,
+         socket
+         |> assign(:current_date, date)}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
   defp assigns_dates(socket) do
     if socket.assigns.mode == "week" do
       assigns_week(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
@@ -215,8 +237,8 @@ defmodule AtomicWeb.CalendarLive.Show do
   end
 
   defp list_activities(timezone, mode, current_date) do
-    start = build_beggining_date(timezone, mode, current_date)
-    finish = build_ending_date(timezone, mode, current_date)
+    start = Timex.shift(build_beggining_date(timezone, mode, current_date), days: -7)
+    finish = Timex.shift(build_ending_date(timezone, mode, current_date), days: 7)
 
     Activities.list_activities_from_to(start, finish)
   end
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index a03bcbe09..367df4f12 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title="Calendar">
-  <div>
-    <div x-data="{ mode_view: false }" class="flex-col h-[787px] lg:flex  lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
-      <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300 bg-gray-50">
+  <div class="bg-gray-50 lg:h-0 lg:min-h-[787px] overflow-hidden rounded-lg ring-1 ring-zinc-900/10 lg:mx-8 m-4">
+    <div x-data="{ mode_view: false }" class="lg:flex lg:h-full lg:flex-col">
+      <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300">
         <div class="flex-1">
           <div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
             <span class="font-semibold text-base text-zinc-900">
@@ -61,54 +61,6 @@
                       </button>
                     </:wrapper>
                   </.dropdown>
-
-                  <div
-                    x-bind:class="mode_view ?'block' : 'hidden'"
-                    class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                    role="menu"
-                    aria-orientation="vertical"
-                    aria-labelledby="menu-button"
-                    tabindex="-1"
-                  >
-                    <div class="py-1" role="none">
-                      <.link patch="?mode=week">
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-2"
-                        >
-                          <%= gettext("Week view") %>
-                        </button>
-                      </.link>
-                      <.link patch="?mode=month">
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-3"
-                        >
-                          <%= gettext("Month view") %>
-                        </button>
-                      </.link>
-                    </div>
-                  </div>
                 </div>
               </div>
               <div class="relative ml-6 md:hidden">

From 98556fcea0b2265108b900ab5d90b924f534487c Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sat, 17 Aug 2024 00:55:41 +0100
Subject: [PATCH 06/23] fix: resolve mobile view activity display and styling
 issues

---
 lib/atomic_web/components/calendar/month.ex      | 9 ++++++---
 lib/atomic_web/live/calendar_live/show.html.heex | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index fe80040a9..c9f32b76e 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -46,10 +46,10 @@ defmodule AtomicWeb.Components.CalendarMonth do
         </div>
       </div>
     </div>
-    <%= if length(@activities) > 0 do %>
+    <%= if length(get_date_activities(@activities, @current_date)) > 0 do %>
       <div class="px-4 py-10 sm:px-6 lg:hidden">
         <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
-          <%= for activity <- @activities do %>
+          <%= for activity <- get_date_activities(@activities, @current_date) do %>
             <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
               <li class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
                 <div class="flex-auto">
@@ -149,7 +149,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50 text-zinc-500" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
+    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
       <time
         date-time={@date}
         class={
@@ -163,6 +163,9 @@ defmodule AtomicWeb.Components.CalendarMonth do
             if @today? == 0 do
               "text-orange-700"
             end
+            if @date.month != @current_date.month do
+              "text-zinc-500"
+            end
           end}"
         }
       >
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 367df4f12..479250db9 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -49,7 +49,7 @@
                     }
                   >
                     <:wrapper>
-                      <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                      <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50">
                         <%= if @mode == "month" do %>
                           <%= gettext("Month view") %>
                         <% else %>

From a1fb964ca3ea5e29d6141014ba1b854f85c9ee37 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Tue, 20 Aug 2024 02:26:46 +0100
Subject: [PATCH 07/23] feat: display activities from followed organizations
 only

---
 lib/atomic_web/components/calendar/month.ex   |  2 +-
 lib/atomic_web/live/calendar_live/show.ex     | 44 +++++++++++++++----
 .../live/calendar_live/show.html.heex         |  6 ++-
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index c9f32b76e..bb3a8aa48 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -149,7 +149,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
+    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50" else "hover:bg-zinc-100" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 focus:z-10 lg:hidden"}>
       <time
         date-time={@date}
         class={
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index d35caa822..c7ade453b 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -8,6 +8,7 @@ defmodule AtomicWeb.CalendarLive.Show do
   import AtomicWeb.Components.Dropdown
 
   alias Atomic.Activities
+  alias Atomic.Organizations
   alias Timex.Duration
 
   @impl true
@@ -26,7 +27,10 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_page, :calendar)
      |> assign(:params, params)
      |> assign(:mode, mode)
-     |> assign(:activities, list_activities(socket.assigns.timezone, mode, current_date))
+     |> assign(
+       :activities,
+       list_activities(socket.assigns.timezone, mode, current_date, socket.assigns.current_user)
+     )
      |> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
      |> assign(:current_date, current_date)
      |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
@@ -50,7 +54,12 @@ defmodule AtomicWeb.CalendarLive.Show do
      )
      |> assign(
        :activities,
-       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
      )
      |> assigns_dates()}
   end
@@ -64,7 +73,12 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_date, new_date)
      |> assign(
        :activities,
-       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
      )
      |> assigns_dates()}
   end
@@ -83,7 +97,12 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_date, new_date)
      |> assign(
        :activities,
-       list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
      )
      |> assigns_dates()}
   end
@@ -236,10 +255,19 @@ defmodule AtomicWeb.CalendarLive.Show do
     |> assign(next_week_path: next_week_path)
   end
 
-  defp list_activities(timezone, mode, current_date) do
-    start = Timex.shift(build_beggining_date(timezone, mode, current_date), days: -7)
-    finish = Timex.shift(build_ending_date(timezone, mode, current_date), days: 7)
+  defp list_activities(timezone, mode, current_date, current_user) do
+    if current_user do
+      organizations_id =
+        Organizations.list_organizations_followed_by_user(current_user.id)
+        |> Enum.map(fn org -> org.id end)
 
-    Activities.list_activities_from_to(start, finish)
+      start = Timex.shift(build_beggining_date(timezone, mode, current_date), days: -7)
+      finish = Timex.shift(build_ending_date(timezone, mode, current_date), days: 7)
+
+      Activities.list_activities_from_to(start, finish)
+      |> Enum.filter(fn activity -> activity.organization_id in organizations_id end)
+    else
+      []
+    end
   end
 end
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 479250db9..20589de78 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,5 +1,5 @@
 <.page title="Calendar">
-  <div class="bg-gray-50 lg:h-0 lg:min-h-[787px] overflow-hidden rounded-lg ring-1 ring-zinc-900/10 lg:mx-8 m-4">
+  <div class="bg-gray-50 lg:h-0 lg:min-h-[787px] overflow-hidden rounded-lg ring-1 ring-zinc-900/10 lg:mx-8 mx-4">
     <div x-data="{ mode_view: false }" class="lg:flex lg:h-full lg:flex-col">
       <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300">
         <div class="flex-1">
@@ -124,4 +124,8 @@
       <% end %>
     </div>
   </div>
+  <div class="flex mx-4 mt-3 gap-1 lg:mx-8 text-zinc-400 text-sm">
+    <.icon name={:information_circle} outline class="h-5 w-5" />
+    <p>See here the activities of the organizations you follow.</p>
+  </div>
 </.page>

From 1edd9e429b5a7f6eec5f52867811f31db4623051 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Fri, 23 Aug 2024 16:48:28 +0100
Subject: [PATCH 08/23] refactor: improve mobile dropdown and responsiveness

---
 lib/atomic_web/components/calendar/month.ex   |   8 +-
 lib/atomic_web/components/calendar/week.ex    |  12 +-
 .../live/calendar_live/show.html.heex         | 117 ++++++------------
 3 files changed, 45 insertions(+), 92 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index bb3a8aa48..1bfea349c 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -154,8 +154,8 @@ defmodule AtomicWeb.Components.CalendarMonth do
         date-time={@date}
         class={
           "ml-auto lg:ml-0 #{if @current_date == @date do
-            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
-              "bg-orange-700"
+            "flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
+              "bg-orange-600"
             else
               "bg-zinc-900"
             end} text-white shirk-0"
@@ -174,9 +174,9 @@ defmodule AtomicWeb.Components.CalendarMonth do
       <%= if (activities = get_date_activities(@activities, @date)) != [] do %>
         <span class="sr-only"><%= Enum.count(activities) %> events</span>
         <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
-          <%= for activity <- activities do %>
+          <%= for activity <- Enum.take(activities, 3) do %>
             <%= if activity do %>
-              <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-700"></span>
+              <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-400"></span>
             <% end %>
           <% end %>
         </span>
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index d8c24a0ce..f37a2edd7 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> assign(today: Timex.today(timezone))
 
     ~H"""
-    <div id={@id} class="flex h-full flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
+    <div id={@id} class="flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
         <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
@@ -46,7 +46,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
               </.link>
             <% end %>
           </div>
-          <div class="-mr-px hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
+          <div class="hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
             <div class="col-end-1 w-12"></div>
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
@@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
                   <%= Enum.at(@week, idx) %>
                   <span class={
                     "#{if @today == day_of_week do
-                      "flex ml-1.5 w-8 h-8 text-white bg-orange-700 rounded-full"
+                      "flex ml-1.5 w-8 h-8 text-white bg-primary-600 rounded-full"
                     else
                       "text-zinc-900"
                     end} items-center justify-center font-semibold"
@@ -74,14 +74,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
           </div>
         </div>
         <div class="flex flex-auto">
-          <div class="left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
+          <div class="sticky left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
           <div class="grid flex-auto grid-cols-1 grid-rows-1">
             <!-- Horizontal lines -->
             <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
               <div class="row-end-1 h-6"></div>
               <%= for hour <- hours() do %>
                 <div>
-                  <div class="left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
+                  <div class="sticky left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
                 </div>
                 <div></div>
               <% end %>
@@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
             width: #{(1/width)*100}%;
             left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class={"#{if width != 1 do "hover:z-10 sm:hover:w-max" end} group absolute inset-1 flex flex-col overflow-y-auto overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100"}>
+          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-32 sm:hover:overflow-y-auto" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden"}>
             <p class="order-1 font-semibold text-orange-500">
               <%= activity.title %>
             </p>
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 20589de78..c908de96c 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,10 +1,10 @@
 <.page title="Calendar">
-  <div class="bg-gray-50 lg:h-0 lg:min-h-[787px] overflow-hidden rounded-lg ring-1 ring-zinc-900/10 lg:mx-8 mx-4">
-    <div x-data="{ mode_view: false }" class="lg:flex lg:h-full lg:flex-col">
-      <header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300">
+  <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-gray-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
+    <div class="lg:flex lg:h-full lg:flex-col">
+      <header class="flex flex-col border-b border-zinc-300 px-6 py-4 sm:flex-row">
         <div class="flex-1">
           <div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
-            <span class="font-semibold text-base text-zinc-900">
+            <span class="text-base font-semibold text-zinc-900">
               <%= if @mode == "month" do %>
                 <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
               <% else %>
@@ -35,83 +35,36 @@
                   <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
                 </button>
               </div>
-              <div class="hidden md:ml-4 md:flex md:items-center">
-                <div class="relative">
-                  <.dropdown
-                    id="calendar-dropdown"
-                    orientation={:down}
-                    items={
-                      [
-                        %{name: gettext("Week view"), link: "?mode=week"},
-                        # Link that switches mode
-                        %{name: gettext("Month view"), link: "?mode=month"}
-                      ]
-                    }
-                  >
-                    <:wrapper>
-                      <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50">
-                        <%= if @mode == "month" do %>
-                          <%= gettext("Month view") %>
-                        <% else %>
-                          <%= gettext("Week view") %>
-                        <% end %>
-                        <span class="h-5 w-5 text-zinc-400">
-                          <.icon name={:chevron_down} solid />
-                        </span>
-                      </button>
-                    </:wrapper>
-                  </.dropdown>
-                </div>
-              </div>
-              <div class="relative ml-6 md:hidden">
-                <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
-                  <span class="sr-only">Open menu</span>
-                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
-                </button>
-                <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div class="py-1" role="none">
-                    <button @click="mode_view = false" phx-click="present" type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
-                      <%= gettext("Today") %>
-                    </button>
-                    <div class="mx-4 border-b border-zinc-200" />
-                    <.link patch="?mode=week">
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-2"
-                      >
-                        <%= gettext("Week view") %>
-                      </button>
-                    </.link>
-                    <.link patch="?mode=month">
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-3"
-                      >
+              <div class="relative">
+                <.dropdown
+                  id="calendar-dropdown"
+                  orientation={:down}
+                  items={
+                    [
+                      %{name: gettext("Go to today"), phx_click: "present", class: "md:hidden border-b border-zinc-100"},
+                      # Link that switches mode
+                      %{name: gettext("Week view"), patch: "?mode=week"},
+                      %{name: gettext("Month view"), patch: "?mode=month"}
+                    ]
+                  }
+                >
+                  <:wrapper>
+                    <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="hidden items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50 md:ml-4 md:flex">
+                      <%= if @mode == "month" do %>
                         <%= gettext("Month view") %>
-                      </button>
-                    </.link>
-                  </div>
-                </div>
+                      <% else %>
+                        <%= gettext("Week view") %>
+                      <% end %>
+                      <span class="h-5 w-5 text-zinc-400">
+                        <.icon name={:chevron_down} solid />
+                      </span>
+                    </button>
+                    <button type="button" class="ml-5 md:hidden flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
+                      <span class="sr-only">Open menu</span>
+                      <.icon name={:ellipsis_horizontal} solid class="h-5 w-5" />
+                    </button>
+                  </:wrapper>
+                </.dropdown>
               </div>
             </div>
           </div>
@@ -124,8 +77,8 @@
       <% end %>
     </div>
   </div>
-  <div class="flex mx-4 mt-3 gap-1 lg:mx-8 text-zinc-400 text-sm">
+  <div class="mx-4 mt-3 flex gap-1 text-sm text-zinc-400 lg:mx-8">
     <.icon name={:information_circle} outline class="h-5 w-5" />
-    <p>See here the activities of the organizations you follow.</p>
+    <p><%= gettext("See here the activities of the organizations you follow.") %></p>
   </div>
 </.page>

From 53726c04662533090601d63acbf3a96ca5239a41 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 25 Aug 2024 01:57:48 +0100
Subject: [PATCH 09/23] fix: resolve overflow issue on sunday with overlapping
 activities and improve hours column styling

---
 lib/atomic_web/components/calendar/week.ex | 34 +++++++++++++++-------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index f37a2edd7..901b0ffb4 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -24,7 +24,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
     ~H"""
     <div id={@id} class="flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
-        <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
+        <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
@@ -46,8 +46,8 @@ defmodule AtomicWeb.Components.CalendarWeek do
               </.link>
             <% end %>
           </div>
-          <div class="hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
-            <div class="col-end-1 w-12"></div>
+          <div class="-mr-px hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
+            <div class="col-end-1 w-14"></div>
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
               <div id={"day-of-week-#{idx}"} class="flex h-12 items-center justify-center">
@@ -74,14 +74,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
           </div>
         </div>
         <div class="flex flex-auto">
-          <div class="sticky left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
+          <div class="sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-zinc-100"></div>
           <div class="grid flex-auto grid-cols-1 grid-rows-1">
             <!-- Horizontal lines -->
             <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
-              <div class="row-end-1 h-6"></div>
+              <div class="row-end-1 h-7"></div>
               <%= for hour <- hours() do %>
                 <div>
-                  <div class="sticky left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
+                  <div class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
                 </div>
                 <div></div>
               <% end %>
@@ -95,12 +95,13 @@ defmodule AtomicWeb.Components.CalendarWeek do
               <div class="col-start-5 row-span-full"></div>
               <div class="col-start-6 row-span-full"></div>
               <div class="col-start-7 row-span-full"></div>
+              <div class="col-start-8 row-span-full w-8"></div>
             </div>
             <!-- Events -->
-            <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
+            <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr))">
               <.day date={@current_date} idx={0} activities={@activities} />
             </ol>
-            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr))">
+            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7 sm:pr-8" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto">
               <%= for idx <- 0..6 do %>
                 <.day date={Timex.shift(@beginning_of_week, days: idx)} idx={idx} activities={@activities} />
               <% end %>
@@ -122,7 +123,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
             width: #{(1/width)*100}%;
             left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-32 sm:hover:overflow-y-auto" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden"}>
+          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-32" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden sm:hover:overflow-y-auto"}>
             <p class="order-1 font-semibold text-orange-500">
               <%= activity.title %>
             </p>
@@ -164,11 +165,22 @@ defmodule AtomicWeb.Components.CalendarWeek do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
 
+    IO.inspect(
+      activities
+      |> Enum.filter(fn activity ->
+        activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+
+        activity != current_activity && activity.start.day == current_activity.start.day and
+          Timex.Interval.overlaps?(current_interval, activity_interval)
+      end)
+      |> length()
+    )
+
     activities
     |> Enum.filter(fn activity ->
       activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
 
-      activity != current_activity and
+      activity != current_activity && activity.start.day == current_activity.start.day and
         Timex.Interval.overlaps?(current_interval, activity_interval)
     end)
     |> length()
@@ -183,7 +195,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
     |> Enum.filter(fn activity ->
       activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
 
-      activity != current_activity and
+      activity != current_activity && activity.start.day == current_activity.start.day and
         Timex.Interval.overlaps?(current_interval, activity_interval)
     end)
     |> length()

From b3eeaf5ce5a289420fe15d35f7b17901bd864107 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 25 Aug 2024 02:01:16 +0100
Subject: [PATCH 10/23] fix: ensure multi-day activities display across all
 days

---
 lib/atomic_web/live/calendar_live/show.ex | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index c7ade453b..282f012df 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -255,6 +255,33 @@ defmodule AtomicWeb.CalendarLive.Show do
     |> assign(next_week_path: next_week_path)
   end
 
+  defp multi_day_activity?(activity) do
+    Timex.diff(activity.finish, activity.start, :days) > 0
+  end
+
+  defp split_activity_by_day(activity) do
+    start_date = Timex.to_date(activity.start)
+    end_date = Timex.to_date(activity.finish)
+
+    Enum.map(0..Timex.diff(end_date, start_date, :days), fn offset ->
+      day_start =
+        if offset > 0 do
+          Timex.shift(activity.start, days: offset) |> Timex.beginning_of_day()
+        else
+          activity.start
+        end
+
+      day_end =
+        if offset == Timex.diff(end_date, start_date, :days) do
+          activity.finish
+        else
+          Timex.end_of_day(day_start)
+        end
+
+      %{activity | start: day_start, finish: day_end}
+    end)
+  end
+
   defp list_activities(timezone, mode, current_date, current_user) do
     if current_user do
       organizations_id =
@@ -266,6 +293,14 @@ defmodule AtomicWeb.CalendarLive.Show do
 
       Activities.list_activities_from_to(start, finish)
       |> Enum.filter(fn activity -> activity.organization_id in organizations_id end)
+      |> Enum.map(fn activity ->
+        if multi_day_activity?(activity) do
+          split_activity_by_day(activity)
+        else
+          [activity]
+        end
+      end)
+      |> List.flatten()
     else
       []
     end

From dc4b6759a1a8d8fb4c4f425e2fa5f9a7a67d87b9 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 25 Aug 2024 02:17:53 +0100
Subject: [PATCH 11/23] chore: fix linting issues

---
 lib/atomic_web/components/calendar/week.ex | 11 -----------
 lib/atomic_web/live/calendar_live/show.ex  | 20 ++++++++++++--------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 901b0ffb4..145bf0669 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -165,17 +165,6 @@ defmodule AtomicWeb.Components.CalendarWeek do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
 
-    IO.inspect(
-      activities
-      |> Enum.filter(fn activity ->
-        activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
-
-        activity != current_activity && activity.start.day == current_activity.start.day and
-          Timex.Interval.overlaps?(current_interval, activity_interval)
-      end)
-      |> length()
-    )
-
     activities
     |> Enum.filter(fn activity ->
       activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index 282f012df..539a8db2d 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -282,6 +282,17 @@ defmodule AtomicWeb.CalendarLive.Show do
     end)
   end
 
+  defp split_all_activities_by_day(activities) do
+    Enum.map(activities, fn activity ->
+      if multi_day_activity?(activity) do
+        split_activity_by_day(activity)
+      else
+        [activity]
+      end
+    end)
+    |> List.flatten()
+  end
+
   defp list_activities(timezone, mode, current_date, current_user) do
     if current_user do
       organizations_id =
@@ -293,14 +304,7 @@ defmodule AtomicWeb.CalendarLive.Show do
 
       Activities.list_activities_from_to(start, finish)
       |> Enum.filter(fn activity -> activity.organization_id in organizations_id end)
-      |> Enum.map(fn activity ->
-        if multi_day_activity?(activity) do
-          split_activity_by_day(activity)
-        else
-          [activity]
-        end
-      end)
-      |> List.flatten()
+      |> split_all_activities_by_day()
     else
       []
     end

From d3dab892c5e29536583fa6aad8aa806ddb1ab0e1 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 26 Aug 2024 17:07:27 +0100
Subject: [PATCH 12/23] fix: ensure hovered events do not overlap the week days
 header

---
 lib/atomic_web/components/calendar/week.ex       | 6 +++---
 lib/atomic_web/live/calendar_live/show.html.heex | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 145bf0669..3dee40a1c 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -24,7 +24,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
     ~H"""
     <div id={@id} class="flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
-        <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
+        <div class="sticky top-0 z-20 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
@@ -74,7 +74,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
           </div>
         </div>
         <div class="flex flex-auto">
-          <div class="sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-zinc-100"></div>
+          <div class="sticky left-0 z-20 w-14 flex-none bg-white ring-1 ring-zinc-100"></div>
           <div class="grid flex-auto grid-cols-1 grid-rows-1">
             <!-- Horizontal lines -->
             <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
@@ -123,7 +123,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
             width: #{(1/width)*100}%;
             left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-32" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden sm:hover:overflow-y-auto"}>
+          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden sm:hover:overflow-y-auto"}>
             <p class="order-1 font-semibold text-orange-500">
               <%= activity.title %>
             </p>
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index c908de96c..2ffec689f 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,9 +1,9 @@
 <.page title="Calendar">
   <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-gray-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
     <div class="lg:flex lg:h-full lg:flex-col">
-      <header class="flex flex-col border-b border-zinc-300 px-6 py-4 sm:flex-row">
+      <header class="flex flex-col border-b border-zinc-300 px-6 py-4 sm:flex-row z-30">
         <div class="flex-1">
-          <div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
+          <div class="relative flex w-full items-center justify-between lg:flex-none">
             <span class="text-base font-semibold text-zinc-900">
               <%= if @mode == "month" do %>
                 <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>

From 184660b8f4a95d57f3678e39f22f71838d2079bf Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Tue, 27 Aug 2024 00:28:22 +0100
Subject: [PATCH 13/23] fix: prevent weekdays header from overlapping dropdown
 menu on mobile

---
 lib/atomic_web/components/calendar/week.ex       | 4 ++--
 lib/atomic_web/live/calendar_live/show.html.heex | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 3dee40a1c..143ec306b 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -22,9 +22,9 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> assign(today: Timex.today(timezone))
 
     ~H"""
-    <div id={@id} class="flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
+    <div id={@id} class="isolate flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
-        <div class="sticky top-0 z-20 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
+        <div class="sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 2ffec689f..756763c20 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title="Calendar">
   <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-gray-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
     <div class="lg:flex lg:h-full lg:flex-col">
-      <header class="flex flex-col border-b border-zinc-300 px-6 py-4 sm:flex-row z-30">
+      <header class="flex flex-none items-center justify-between border-b border-gray-200 px-6 py-4">
         <div class="flex-1">
           <div class="relative flex w-full items-center justify-between lg:flex-none">
             <span class="text-base font-semibold text-zinc-900">

From 06e8f6676689ac0cc54982d73f3eb6052181dc00 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Wed, 4 Sep 2024 00:25:56 +0100
Subject: [PATCH 14/23] refactor: make activity card clickable instead of using
 a dedicated button

---
 lib/atomic_web/components/calendar/month.ex | 23 +++++++++------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 1bfea349c..c17f180ba 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -50,8 +50,8 @@ defmodule AtomicWeb.Components.CalendarMonth do
       <div class="px-4 py-10 sm:px-6 lg:hidden">
         <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
           <%= for activity <- get_date_activities(@activities, @current_date) do %>
-            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-              <li class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
+            <li>
+              <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
                 <div class="flex-auto">
                   <p class="font-semibold text-zinc-900">
                     <%= activity.title %>
@@ -63,11 +63,8 @@ defmodule AtomicWeb.Components.CalendarMonth do
                     </time>
                   </div>
                 </div>
-                <.link navigate={Routes.activity_index_path(AtomicWeb.Endpoint, :index)} class="bg-primary-600 flex-none self-center rounded-md px-3 py-2 font-semibold text-white hover:bg-primary-500 focus-visible:outline-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2">
-                  Open activity
-                </.link>
-              </li>
-            </.link>
+              </.link>
+            </li>
           <% end %>
         </ol>
       </div>
@@ -104,7 +101,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
     weekday = Timex.weekday(date, :monday)
     today? = Timex.compare(date, Timex.today(timezone))
 
-    class =
+    class_desktop =
       class_list([
         {"relative py-2 px-3 lg:h-28 lg:flex flex-col hidden", true},
         {"bg-white", assigns.current_date.month == date.month},
@@ -115,13 +112,13 @@ defmodule AtomicWeb.Components.CalendarMonth do
       assigns
       |> assign(disabled: today? < 0)
       |> assign(:text, Timex.format!(date, "{D}"))
-      |> assign(:class, class)
+      |> assign(:class_desktop, class_desktop)
       |> assign(:date, date)
       |> assign(:today?, today?)
       |> assign(:weekday, weekday)
 
     ~H"""
-    <div class={@class}>
+    <div class={@class_desktop}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
             "flex h-6 w-6 items-center justify-center rounded-full bg-primary-600 font-semibold text-white"
@@ -162,9 +159,9 @@ defmodule AtomicWeb.Components.CalendarMonth do
           else
             if @today? == 0 do
               "text-orange-700"
-            end
-            if @date.month != @current_date.month do
-              "text-zinc-500"
+            else if @date.month != @current_date.month do
+                "text-zinc-500"
+              end
             end
           end}"
         }

From 760859cc4186d4d769a823d1bffa1a616b5f3a75 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Wed, 4 Sep 2024 15:46:48 +0100
Subject: [PATCH 15/23] refactor: improve classes readability

---
 lib/atomic_web/components/calendar/month.ex | 51 +++++++++------------
 lib/atomic_web/components/calendar/week.ex  | 46 ++++++++-----------
 2 files changed, 40 insertions(+), 57 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index c17f180ba..27b18b971 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -98,27 +98,20 @@ defmodule AtomicWeb.Components.CalendarMonth do
   end
 
   defp day(%{date: date, timezone: timezone} = assigns) do
-    weekday = Timex.weekday(date, :monday)
     today? = Timex.compare(date, Timex.today(timezone))
 
-    class_desktop =
-      class_list([
-        {"relative py-2 px-3 lg:h-28 lg:flex flex-col hidden", true},
-        {"bg-white", assigns.current_date.month == date.month},
-        {"bg-zinc-50 text-zinc-500", assigns.current_date.month != date.month}
-      ])
-
     assigns =
       assigns
-      |> assign(disabled: today? < 0)
       |> assign(:text, Timex.format!(date, "{D}"))
-      |> assign(:class_desktop, class_desktop)
       |> assign(:date, date)
       |> assign(:today?, today?)
-      |> assign(:weekday, weekday)
 
     ~H"""
-    <div class={@class_desktop}>
+    <div class={[
+      "relative py-2 px-3 lg:h-28 lg:flex flex-col hidden",
+      @current_date.month == @date.month && "bg-white",
+      @current_date.month != @date.month && "bg-zinc-50 text-zinc-500"
+    ]}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
             "flex h-6 w-6 items-center justify-center rounded-full bg-primary-600 font-semibold text-white"
@@ -146,25 +139,25 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <.link phx-click="set-current-date" phx-value-date={@date} class={"#{if @current_date.month != @date.month do "bg-zinc-50" else "hover:bg-zinc-100" end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 focus:z-10 lg:hidden"}>
+    <.link
+      phx-click="set-current-date"
+      phx-value-date={@date}
+      class={[
+        "min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 focus:z-10 lg:hidden",
+        @current_date.month == @date.month && "hover:bg-zinc-100",
+        @current_date.month != @date.month && "bg-zinc-50"
+      ]}
+    >
       <time
         date-time={@date}
-        class={
-          "ml-auto lg:ml-0 #{if @current_date == @date do
-            "flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
-              "bg-orange-600"
-            else
-              "bg-zinc-900"
-            end} text-white shirk-0"
-          else
-            if @today? == 0 do
-              "text-orange-700"
-            else if @date.month != @current_date.month do
-                "text-zinc-500"
-              end
-            end
-          end}"
-        }
+        class={[
+          "ml-auto lg:ml-0",
+          @current_date == @date && "flex h-6 w-6 items-center justify-center rounded-full text-white shrink-0",
+          @current_date == @date && @today? == 0 && "bg-primary-600",
+          @current_date == @date && @today? != 0 && "bg-zinc-900",
+          @current_date != @date && @today? == 0 && "text-primary-700",
+          @current_date != @date && @date.month != @current_date.month && "text-zinc-500"
+        ]}
       >
         <%= @text %>
       </time>
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 143ec306b..44f297791 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -30,17 +30,12 @@ defmodule AtomicWeb.Components.CalendarWeek do
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
               <.link phx-click="set-current-date" phx-value-date={day_of_week} class="flex flex-col items-center py-2">
                 <%= Enum.at(@week_mobile, idx) %>
-                <span class={
-                  "#{if @today == day_of_week do
-                    "bg-orange-700 rounded-full text-white"
-                  else
-                    if day_of_week == @current_date do
-                      "bg-zinc-900 rounded-full text-white"
-                    else
-                      "text-zinc-900"
-                    end
-                  end} flex items-center justify-center w-8 h-8 mt-1 font-semibold"
-                }>
+                <span class={[
+                  "flex items-center justify-center w-8 h-8 mt-1 font-semibold",
+                  @today == day_of_week && "bg-primary-700 rounded-full text-white",
+                  @today != day_of_week && day_of_week == @current_date && "bg-zinc-900 rounded-full text-white",
+                  @today != day_of_week && day_of_week != @current_date && "text-zinc-900"
+                ]}>
                   <%= day_of_week |> date_to_day() %>
                 </span>
               </.link>
@@ -51,21 +46,13 @@ defmodule AtomicWeb.Components.CalendarWeek do
             <%= for idx <- 0..6 do %>
               <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
               <div id={"day-of-week-#{idx}"} class="flex h-12 items-center justify-center">
-                <span class={
-                  if @today == day_of_week do
-                    "flex items-baseline"
-                  else
-                    ""
-                  end
-                }>
+                <span class={@today == day_of_week && "flex items-baseline"}>
                   <%= Enum.at(@week, idx) %>
-                  <span class={
-                    "#{if @today == day_of_week do
-                      "flex ml-1.5 w-8 h-8 text-white bg-primary-600 rounded-full"
-                    else
-                      "text-zinc-900"
-                    end} items-center justify-center font-semibold"
-                  }>
+                  <span class={[
+                    "items-center justify-center font-semibold",
+                    @today == day_of_week && "flex ml-1.5 w-8 h-8 text-white bg-primary-600 rounded-full",
+                    @today != day_of_week && "text-zinc-900"
+                  ]}>
                     <%= day_of_week |> date_to_day() %>
                   </span>
                 </span>
@@ -123,11 +110,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
             width: #{(1/width)*100}%;
             left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden sm:hover:overflow-y-auto"}>
-            <p class="order-1 font-semibold text-orange-500">
+          <div class={[
+            "group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-primary-50 p-2 text-xs leading-5 hover:bg-primary-100 sm:overflow-y-hidden sm:hover:overflow-y-auto",
+            width != 1 && "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]"
+          ]}>
+            <p class="text-primary-500 order-1 font-semibold">
               <%= activity.title %>
             </p>
-            <p class="text-orange-500 group-hover:text-orange-800">
+            <p class="text-primary-500 group-hover:text-primary-800">
               <time datetime={activity.start}><%= Calendar.strftime(activity.start, "%Hh%M") %></time>
             </p>
           </div>

From 0729a8fcb86be86c4299b573d9f44b7d238ff958 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 15 Sep 2024 01:20:11 +0100
Subject: [PATCH 16/23] refactor: move width and left offset to assigns

---
 lib/atomic_web/components/calendar/month.ex   |  26 +++++
 lib/atomic_web/components/calendar/week.ex    | 107 +++++++++++++++---
 .../live/calendar_live/show.html.heex         |   5 +-
 3 files changed, 119 insertions(+), 19 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 27b18b971..85d4c47d8 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -72,6 +72,32 @@ defmodule AtomicWeb.Components.CalendarMonth do
     """
   end
 
+  @doc """
+  Generates a list of days for the calendar month, including days from the previous and next months to fill the 6x7 grid.
+
+  ## Example
+
+      iex> generate_days_list(~D[2024-09-01], ~D[2024-09-30])
+      [
+        ~D[2024-08-26],
+        ~D[2024-08-27],
+        ~D[2024-08-28],
+        ~D[2024-08-29],
+        ~D[2024-08-30],
+        ~D[2024-08-31],
+        ~D[2024-09-01],
+        ~D[2024-09-02],
+        ...,
+        ~D[2024-09-29],
+        ~D[2024-09-30],
+        ~D[2024-10-01],
+        ~D[2024-10-02],
+        ~D[2024-10-03],
+        ~D[2024-10-04],
+        ~D[2024-10-05],
+        ~D[2024-10-06]
+      ]
+  """
   defp generate_days_list(beginning_of_month, end_of_month) do
     days_from_last_month = Timex.weekday(beginning_of_month, :monday)
 
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 44f297791..63e173a7c 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -101,18 +101,20 @@ defmodule AtomicWeb.Components.CalendarWeek do
   end
 
   defp day(assigns) do
+    assigns =
+      assigns
+      |> assign_activities_positions(get_date_activities(assigns.activities, assigns.date))
+
     ~H"""
-    <%= for activity <- get_date_activities(@activities, @date) do %>
-      <% width = calc_total_overlaps(activity, @activities) + 1 %>
-      <% left = calc_left_amount(activity, @activities) %>
+    <%= for {activity, width, left} <- @activities_with_positions do %>
       <li class={"#{col_start(@idx + 1)} relative mt-px flex"} style={"
             grid-row: #{calc_row_start(activity.start)} / span #{calc_time(activity.start, activity.finish)};
-            width: #{(1/width)*100}%;
-            left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
+            width: #{width}%;
+            left: #{left}%"}>
         <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
           <div class={[
             "group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-primary-50 p-2 text-xs leading-5 hover:bg-primary-100 sm:overflow-y-hidden sm:hover:overflow-y-auto",
-            width != 1 && "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]"
+            width != 100 && "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]"
           ]}>
             <p class="text-primary-500 order-1 font-semibold">
               <%= activity.title %>
@@ -127,6 +129,26 @@ defmodule AtomicWeb.Components.CalendarWeek do
     """
   end
 
+  defp assign_activities_positions(assigns, day_activities) do
+    activities_with_positions =
+      Enum.map(day_activities, fn activity ->
+        # Calculate the width of the activity in percentage
+        width = 1 / (calc_total_overlaps(activity, day_activities) + 1) * 100
+
+        # Calculate the left position of the activity in percentage
+        left =
+          calc_left_amount(
+            activity,
+            day_activities,
+            calc_total_overlaps(activity, day_activities) + 1
+          )
+
+        {activity, width, left}
+      end)
+
+    assign(assigns, :activities_with_positions, activities_with_positions)
+  end
+
   defp calc_row_start(start) do
     hours =
       start
@@ -141,6 +163,15 @@ defmodule AtomicWeb.Components.CalendarWeek do
     hours * 12 + div(minutes, 5) + 2
   end
 
+  @doc """
+  Calculates the number of grid rows the activity should span based on the time difference between the start and finish.
+  Each row spans a 5-minute interval.
+
+  ## Example
+
+      iex> calc_time(~N[2024-09-11 09:00:00], ~N[2024-09-11 10:00:00])
+      12
+  """
   defp calc_time(start, finish) do
     time_diff = (NaiveDateTime.diff(finish, start) / 60) |> trunc()
 
@@ -151,7 +182,23 @@ defmodule AtomicWeb.Components.CalendarWeek do
     end
   end
 
-  defp calc_total_overlaps(current_activity, activities) do
+  @doc """
+  Calculates the total number of overlapping activities with the current activity on the same day.
+
+  ## Example
+
+      iex> activities = [
+      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+      ...> ]
+      ...>
+      ...> calc_total_overlaps(
+      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+      ...>   activities
+      ...> )
+      1
+  """
+  def calc_total_overlaps(current_activity, activities) do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
 
@@ -165,19 +212,47 @@ defmodule AtomicWeb.Components.CalendarWeek do
     |> length()
   end
 
-  defp calc_left_amount(current_activity, activities) do
+  @doc """
+  Calculates the left offset percentage for positioning an activity on the calendar grid.
+
+  The left offset is determined by the number of overlapping activities prior to the current one.
+
+
+  ## Example
+
+      iex> activities = [
+      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+      ...> ]
+      ...>
+      ...> calc_left_amount(
+      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]},
+      ...>   activities,
+      ...>   2
+      ...> )
+      50.0
+  """
+  defp calc_left_amount(current_activity, activities, activity_total_overlaps) do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
 
-    activities
-    |> Enum.take_while(fn activity -> activity != current_activity end)
-    |> Enum.filter(fn activity ->
-      activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+    # Total number of overlaps prior to the current activity
+    total_overlaps =
+      activities
+      |> Enum.take_while(fn activity -> activity != current_activity end)
+      |> Enum.filter(fn activity ->
+        activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
 
-      activity != current_activity && activity.start.day == current_activity.start.day and
-        Timex.Interval.overlaps?(current_interval, activity_interval)
-    end)
-    |> length()
+        activity != current_activity && activity.start.day == current_activity.start.day and
+          Timex.Interval.overlaps?(current_interval, activity_interval)
+      end)
+      |> length()
+
+    if total_overlaps > 0 do
+      total_overlaps / activity_total_overlaps * 100
+    else
+      0
+    end
   end
 
   defp hours,
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 756763c20..c046f2b26 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -8,10 +8,9 @@
               <%= if @mode == "month" do %>
                 <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
               <% else %>
-                <%= case date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
-                  <% true -> %>
+                <%= if date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
                     <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
-                  <% _ -> %>
+                  <% else %>
                     <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
                       <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
                     <% else %>

From ab6694571718ac4991503396d1757f0e4780688f Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 15 Sep 2024 16:15:05 +0100
Subject: [PATCH 17/23] fix: update icon names

---
 lib/atomic_web/live/calendar_live/show.html.heex | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index c046f2b26..3defbc82d 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -23,7 +23,7 @@
               <div class="flex items-center rounded-md bg-white shadow-sm md:items-stretch">
                 <button type="button" phx-click="previous" class="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-300 pr-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
                   <span class="sr-only">Previous month</span>
-                  <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <.icon name="hero-chevron-left-solid" class="size-3 sm:size-5" />
                 </button>
                 <button type="button" phx-click="present" class="hidden border-y border-zinc-300 px-3.5 text-sm font-semibold text-zinc-900 hover:bg-gray-50 focus:relative md:block">
                   <span><%= gettext("Today") %></span>
@@ -31,7 +31,7 @@
                 <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
                 <button type="button" phx-click="next" class="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-300 pl-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
                   <span class="sr-only">Next month</span>
-                  <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <.icon name="hero-chevron-right-solid" class="size-3 sm:size-5" />
                 </button>
               </div>
               <div class="relative">
@@ -48,19 +48,19 @@
                   }
                 >
                   <:wrapper>
-                    <button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="hidden items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50 md:ml-4 md:flex">
+                    <button class="hidden items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50 md:ml-4 md:flex">
                       <%= if @mode == "month" do %>
                         <%= gettext("Month view") %>
                       <% else %>
                         <%= gettext("Week view") %>
                       <% end %>
-                      <span class="h-5 w-5 text-zinc-400">
-                        <.icon name={:chevron_down} solid />
+                      <span class="size-5 text-zinc-400">
+                        <.icon name="hero-chevron-down-solid" />
                       </span>
                     </button>
                     <button type="button" class="ml-5 md:hidden flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                       <span class="sr-only">Open menu</span>
-                      <.icon name={:ellipsis_horizontal} solid class="h-5 w-5" />
+                      <.icon name="hero-ellipsis-horizontal-solid" class="size-5" />
                     </button>
                   </:wrapper>
                 </.dropdown>
@@ -77,7 +77,7 @@
     </div>
   </div>
   <div class="mx-4 mt-3 flex gap-1 text-sm text-zinc-400 lg:mx-8">
-    <.icon name={:information_circle} outline class="h-5 w-5" />
+    <.icon name="hero-information-circle" class="size-5" />
     <p><%= gettext("See here the activities of the organizations you follow.") %></p>
   </div>
 </.page>

From 40413962799bede3851eedabb1a9d27b2c0377b4 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 16 Sep 2024 10:44:50 +0100
Subject: [PATCH 18/23] docs: change to normal comments

---
 lib/atomic_web/components/calendar/month.ex   | 49 ++++++-----
 lib/atomic_web/components/calendar/week.ex    | 82 +++++++++----------
 .../live/calendar_live/show.html.heex         | 12 +--
 3 files changed, 69 insertions(+), 74 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index b8bbf4316..806c36bd8 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -72,32 +72,31 @@ defmodule AtomicWeb.Components.CalendarMonth do
     """
   end
 
-  @doc """
-  Generates a list of days for the calendar month, including days from the previous and next months to fill the 6x7 grid.
+  # Generates a list of days for the calendar month, including days from the previous and next months to fill the 6x7 grid.
+  #
+  # Example
+  #
+  # iex> generate_days_list(~D[2024-09-01], ~D[2024-09-30])
+  # [
+  # ~D[2024-08-26],
+  # ~D[2024-08-27],
+  # ~D[2024-08-28],
+  # ~D[2024-08-29],
+  # ~D[2024-08-30],
+  # ~D[2024-08-31],
+  # ~D[2024-09-01],
+  # ~D[2024-09-02],
+  # ...,
+  # ~D[2024-09-29],
+  # ~D[2024-09-30],
+  # ~D[2024-10-01],
+  # ~D[2024-10-02],
+  # ~D[2024-10-03],
+  # ~D[2024-10-04],
+  # ~D[2024-10-05],
+  # ~D[2024-10-06]
+  # ]
 
-  ## Example
-
-      iex> generate_days_list(~D[2024-09-01], ~D[2024-09-30])
-      [
-        ~D[2024-08-26],
-        ~D[2024-08-27],
-        ~D[2024-08-28],
-        ~D[2024-08-29],
-        ~D[2024-08-30],
-        ~D[2024-08-31],
-        ~D[2024-09-01],
-        ~D[2024-09-02],
-        ...,
-        ~D[2024-09-29],
-        ~D[2024-09-30],
-        ~D[2024-10-01],
-        ~D[2024-10-02],
-        ~D[2024-10-03],
-        ~D[2024-10-04],
-        ~D[2024-10-05],
-        ~D[2024-10-06]
-      ]
-  """
   defp generate_days_list(beginning_of_month, end_of_month) do
     days_from_last_month = Timex.weekday(beginning_of_month, :monday)
 
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index 63e173a7c..c106818ab 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -163,15 +163,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
     hours * 12 + div(minutes, 5) + 2
   end
 
-  @doc """
-  Calculates the number of grid rows the activity should span based on the time difference between the start and finish.
-  Each row spans a 5-minute interval.
+  # Each row spans a 5-minute interval.
+  # Calculates the number of grid rows the activity should span based on the time difference between the start and finish.
+  #
+  # Example
+  #
+  # iex> calc_time(~N[2024-09-11 09:00:00], ~N[2024-09-11 10:00:00])
+  # 12
 
-  ## Example
-
-      iex> calc_time(~N[2024-09-11 09:00:00], ~N[2024-09-11 10:00:00])
-      12
-  """
   defp calc_time(start, finish) do
     time_diff = (NaiveDateTime.diff(finish, start) / 60) |> trunc()
 
@@ -182,22 +181,21 @@ defmodule AtomicWeb.Components.CalendarWeek do
     end
   end
 
-  @doc """
-  Calculates the total number of overlapping activities with the current activity on the same day.
-
-  ## Example
+  # Calculates the total number of overlapping activities with the current activity on the same day.
+  #
+  # Example
+  #
+  # iex> activities = [
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+  # ...> ]
+  # ...>
+  # ...> calc_total_overlaps(
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   activities
+  # ...> )
+  # 1
 
-      iex> activities = [
-      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
-      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
-      ...> ]
-      ...>
-      ...> calc_total_overlaps(
-      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
-      ...>   activities
-      ...> )
-      1
-  """
   def calc_total_overlaps(current_activity, activities) do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
@@ -212,26 +210,24 @@ defmodule AtomicWeb.Components.CalendarWeek do
     |> length()
   end
 
-  @doc """
-  Calculates the left offset percentage for positioning an activity on the calendar grid.
-
-  The left offset is determined by the number of overlapping activities prior to the current one.
-
-
-  ## Example
-
-      iex> activities = [
-      ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
-      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
-      ...> ]
-      ...>
-      ...> calc_left_amount(
-      ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]},
-      ...>   activities,
-      ...>   2
-      ...> )
-      50.0
-  """
+  # Calculates the left offset percentage for positioning an activity on the calendar grid.
+  #
+  # The left offset is determined by the number of overlapping activities prior to the current one.
+  #
+  #
+  # Example
+  #
+  # iex> activities = [
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+  # ...> ]
+  # ...>
+  # ...> calc_left_amount(
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]},
+  # ...>   activities,
+  # ...>   2
+  # ...> )
+  # 50.0
   defp calc_left_amount(current_activity, activities, activity_total_overlaps) do
     current_interval =
       Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 3defbc82d..8b706aaea 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -9,13 +9,13 @@
                 <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
               <% else %>
                 <%= if date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
-                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
+                  <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
+                <% else %>
+                  <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
+                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
                   <% else %>
-                    <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% else %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% end %>
+                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
+                  <% end %>
                 <% end %>
               <% end %>
             </span>

From 6a96ca060c7f3cd197f0356ed6224d14333a7d7f Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 16 Sep 2024 10:49:08 +0100
Subject: [PATCH 19/23] chore: lint issues

---
 lib/atomic_web/components/calendar/month.ex | 3 ++-
 lib/atomic_web/components/calendar/week.ex  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 806c36bd8..e23408f30 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -72,7 +72,8 @@ defmodule AtomicWeb.Components.CalendarMonth do
     """
   end
 
-  # Generates a list of days for the calendar month, including days from the previous and next months to fill the 6x7 grid.
+  # Generates a list of days for the calendar month,
+  # including days from the previous and next months to fill the 6x7 grid.
   #
   # Example
   #
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
index c106818ab..a0d389a5e 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/components/calendar/week.ex
@@ -164,7 +164,8 @@ defmodule AtomicWeb.Components.CalendarWeek do
   end
 
   # Each row spans a 5-minute interval.
-  # Calculates the number of grid rows the activity should span based on the time difference between the start and finish.
+  # Calculates the number of grid rows the activity should
+  # span based on the time difference between the start and finish.
   #
   # Example
   #

From c2fd5228e9f50bf3e0759f6ead0368e816cafb60 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 16 Sep 2024 11:11:08 +0100
Subject: [PATCH 20/23] refactor: change calendar components scope

---
 .../calendar_live/components}/calendar_utils.ex             | 2 +-
 .../calendar => live/calendar_live/components}/month.ex     | 4 ++--
 .../calendar => live/calendar_live/components}/week.ex      | 4 ++--
 lib/atomic_web/live/calendar_live/show.ex                   | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename lib/atomic_web/{views => live/calendar_live/components}/calendar_utils.ex (97%)
 rename lib/atomic_web/{components/calendar => live/calendar_live/components}/month.ex (98%)
 rename lib/atomic_web/{components/calendar => live/calendar_live/components}/week.ex (98%)

diff --git a/lib/atomic_web/views/calendar_utils.ex b/lib/atomic_web/live/calendar_live/components/calendar_utils.ex
similarity index 97%
rename from lib/atomic_web/views/calendar_utils.ex
rename to lib/atomic_web/live/calendar_live/components/calendar_utils.ex
index b99efa9b9..3c56e7c9e 100644
--- a/lib/atomic_web/views/calendar_utils.ex
+++ b/lib/atomic_web/live/calendar_live/components/calendar_utils.ex
@@ -1,4 +1,4 @@
-defmodule AtomicWeb.CalendarUtils do
+defmodule AtomicWeb.CalendarLive.Components.CalendarUtils do
   @moduledoc """
   Calendar utils functions to be used on all views.
   """
diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/live/calendar_live/components/month.ex
similarity index 98%
rename from lib/atomic_web/components/calendar/month.ex
rename to lib/atomic_web/live/calendar_live/components/month.ex
index e23408f30..ea95475d1 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/live/calendar_live/components/month.ex
@@ -1,8 +1,8 @@
-defmodule AtomicWeb.Components.CalendarMonth do
+defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
   @moduledoc false
   use AtomicWeb, :component
 
-  import AtomicWeb.CalendarUtils
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
 
   attr :id, :string, default: "calendar-month", required: false
   attr :current_date, :string, required: true
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/live/calendar_live/components/week.ex
similarity index 98%
rename from lib/atomic_web/components/calendar/week.ex
rename to lib/atomic_web/live/calendar_live/components/week.ex
index a0d389a5e..486eeb57c 100644
--- a/lib/atomic_web/components/calendar/week.ex
+++ b/lib/atomic_web/live/calendar_live/components/week.ex
@@ -1,10 +1,10 @@
-defmodule AtomicWeb.Components.CalendarWeek do
+defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
   @moduledoc false
   use AtomicWeb, :component
 
   alias Timex.Duration
 
-  import AtomicWeb.CalendarUtils
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
 
   attr :id, :string, default: "calendar-week", required: false
   attr :current_date, :string, required: true
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index 539a8db2d..9167d4bfb 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -2,9 +2,9 @@ defmodule AtomicWeb.CalendarLive.Show do
   @moduledoc false
   use AtomicWeb, :live_view
 
-  import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.CalendarMonth
-  import AtomicWeb.Components.CalendarWeek
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
+  import AtomicWeb.CalendarLive.Components.CalendarMonth
+  import AtomicWeb.CalendarLive.Components.CalendarWeek
   import AtomicWeb.Components.Dropdown
 
   alias Atomic.Activities

From 897974e27f032db9b91374e8fa5f95f64965d2ce Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 19 Sep 2024 15:36:26 +0100
Subject: [PATCH 21/23] refactor: remove phoenix pitfalls

---
 .../live/calendar_live/components/month.ex       | 16 ++++------------
 .../live/calendar_live/components/week.ex        | 13 +++++++++----
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/lib/atomic_web/live/calendar_live/components/month.ex b/lib/atomic_web/live/calendar_live/components/month.ex
index ea95475d1..2620ea360 100644
--- a/lib/atomic_web/live/calendar_live/components/month.ex
+++ b/lib/atomic_web/live/calendar_live/components/month.ex
@@ -40,17 +40,14 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
       </div>
       <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
         <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
-          <%= for date <- generate_days_list(@beginning_of_month, @end_of_month) do %>
-            <.day params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
-          <% end %>
+            <.day :for={date <- generate_days_list(@beginning_of_month, @end_of_month)} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
         </div>
       </div>
     </div>
     <%= if length(get_date_activities(@activities, @current_date)) > 0 do %>
       <div class="px-4 py-10 sm:px-6 lg:hidden">
         <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
-          <%= for activity <- get_date_activities(@activities, @current_date) do %>
-            <li>
+            <li :for={activity <- get_date_activities(@activities, @current_date)}>
               <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
                 <div class="flex-auto">
                   <p class="font-semibold text-zinc-900">
@@ -65,7 +62,6 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
                 </div>
               </.link>
             </li>
-          <% end %>
         </ol>
       </div>
     <% end %>
@@ -146,8 +142,7 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
         <%= @text %>
       </time>
       <ol class="mt-2 -space-y-1">
-        <%= for activity <- get_date_activities(@activities, @date) |> Enum.take(2) do %>
-          <li>
+          <li :for={activity <- get_date_activities(@activities, @date) |> Enum.take(2)}>
             <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
               <p class="flex-auto truncate font-medium text-zinc-900 group-hover:text-primary-600">
                 <%= activity.title %>
@@ -155,14 +150,11 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
               <time datetime={activity.start} class="ml-3 hidden flex-none text-zinc-500 group-hover:text-primary-600 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
             </.link>
           </li>
-        <% end %>
-        <%= if Enum.count(get_date_activities(@activities, @date)) > 2 do %>
-          <li class="text-zinc-500 hover:text-primary-600">
+          <li :if={Enum.count(get_date_activities(@activities, @date)) > 2} class="text-zinc-500 hover:text-primary-600">
             <button type="button" phx-click="show-more" phx-value-date={@date}>
               +<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
             </button>
           </li>
-        <% end %>
       </ol>
     </div>
     <.link
diff --git a/lib/atomic_web/live/calendar_live/components/week.ex b/lib/atomic_web/live/calendar_live/components/week.ex
index 486eeb57c..4836dfb90 100644
--- a/lib/atomic_web/live/calendar_live/components/week.ex
+++ b/lib/atomic_web/live/calendar_live/components/week.ex
@@ -15,21 +15,26 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
   attr :params, :map, required: true
 
   def calendar_week(%{timezone: timezone} = assigns) do
+    days_of_week = for idx <- 0..6 do
+      day_of_week = assigns.beginning_of_week |> Timex.add(Duration.from_days(idx))
+      day_of_week_mobile = Enum.at(["M", "T", "W", "T", "F", "S", "S"], idx)
+      {day_of_week, day_of_week_mobile}
+    end
+
     assigns =
       assigns
-      |> assign(week_mobile: ["M", "T", "W", "T", "F", "S", "S"])
       |> assign(week: ["Mon ", "Tue ", "Wed ", "Thu ", "Fri ", "Sat ", "Sun "])
       |> assign(today: Timex.today(timezone))
+      |> assign(days_of_week: days_of_week)
 
     ~H"""
     <div id={@id} class="isolate flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
         <div class="sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
-            <%= for idx <- 0..6 do %>
-              <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
+            <%= for {day_of_week, day_of_week_mobile} <- @days_of_week do %>
               <.link phx-click="set-current-date" phx-value-date={day_of_week} class="flex flex-col items-center py-2">
-                <%= Enum.at(@week_mobile, idx) %>
+                <%= day_of_week_mobile %>
                 <span class={[
                   "flex items-center justify-center w-8 h-8 mt-1 font-semibold",
                   @today == day_of_week && "bg-primary-700 rounded-full text-white",

From 52fab76c8443c5f99f92705b1b50b74e68c4ebde Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 19 Sep 2024 15:43:43 +0100
Subject: [PATCH 22/23] chore: run mix format

---
 .../live/calendar_live/components/month.ex    | 56 +++++++++----------
 .../live/calendar_live/components/week.ex     | 11 ++--
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/lib/atomic_web/live/calendar_live/components/month.ex b/lib/atomic_web/live/calendar_live/components/month.ex
index 2620ea360..7ef4b728f 100644
--- a/lib/atomic_web/live/calendar_live/components/month.ex
+++ b/lib/atomic_web/live/calendar_live/components/month.ex
@@ -40,28 +40,28 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
       </div>
       <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
         <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
-            <.day :for={date <- generate_days_list(@beginning_of_month, @end_of_month)} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
+          <.day :for={date <- generate_days_list(@beginning_of_month, @end_of_month)} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
         </div>
       </div>
     </div>
     <%= if length(get_date_activities(@activities, @current_date)) > 0 do %>
       <div class="px-4 py-10 sm:px-6 lg:hidden">
         <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
-            <li :for={activity <- get_date_activities(@activities, @current_date)}>
-              <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
-                <div class="flex-auto">
-                  <p class="font-semibold text-zinc-900">
-                    <%= activity.title %>
-                  </p>
-                  <div class="flex flex-row items-center gap-x-2 pt-2">
-                    <time datetime={activity.start} class="mt-2 flex items-center text-zinc-700">
-                      <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
-                      <%= Calendar.strftime(activity.start, "%Hh%M") %>
-                    </time>
-                  </div>
+          <li :for={activity <- get_date_activities(@activities, @current_date)}>
+            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
+              <div class="flex-auto">
+                <p class="font-semibold text-zinc-900">
+                  <%= activity.title %>
+                </p>
+                <div class="flex flex-row items-center gap-x-2 pt-2">
+                  <time datetime={activity.start} class="mt-2 flex items-center text-zinc-700">
+                    <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
+                    <%= Calendar.strftime(activity.start, "%Hh%M") %>
+                  </time>
                 </div>
-              </.link>
-            </li>
+              </div>
+            </.link>
+          </li>
         </ol>
       </div>
     <% end %>
@@ -142,19 +142,19 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
         <%= @text %>
       </time>
       <ol class="mt-2 -space-y-1">
-          <li :for={activity <- get_date_activities(@activities, @date) |> Enum.take(2)}>
-            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
-              <p class="flex-auto truncate font-medium text-zinc-900 group-hover:text-primary-600">
-                <%= activity.title %>
-              </p>
-              <time datetime={activity.start} class="ml-3 hidden flex-none text-zinc-500 group-hover:text-primary-600 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
-            </.link>
-          </li>
-          <li :if={Enum.count(get_date_activities(@activities, @date)) > 2} class="text-zinc-500 hover:text-primary-600">
-            <button type="button" phx-click="show-more" phx-value-date={@date}>
-              +<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
-            </button>
-          </li>
+        <li :for={activity <- get_date_activities(@activities, @date) |> Enum.take(2)}>
+          <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
+            <p class="flex-auto truncate font-medium text-zinc-900 group-hover:text-primary-600">
+              <%= activity.title %>
+            </p>
+            <time datetime={activity.start} class="ml-3 hidden flex-none text-zinc-500 group-hover:text-primary-600 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
+          </.link>
+        </li>
+        <li :if={Enum.count(get_date_activities(@activities, @date)) > 2} class="text-zinc-500 hover:text-primary-600">
+          <button type="button" phx-click="show-more" phx-value-date={@date}>
+            +<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
+          </button>
+        </li>
       </ol>
     </div>
     <.link
diff --git a/lib/atomic_web/live/calendar_live/components/week.ex b/lib/atomic_web/live/calendar_live/components/week.ex
index 4836dfb90..4f54bf1db 100644
--- a/lib/atomic_web/live/calendar_live/components/week.ex
+++ b/lib/atomic_web/live/calendar_live/components/week.ex
@@ -15,11 +15,12 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
   attr :params, :map, required: true
 
   def calendar_week(%{timezone: timezone} = assigns) do
-    days_of_week = for idx <- 0..6 do
-      day_of_week = assigns.beginning_of_week |> Timex.add(Duration.from_days(idx))
-      day_of_week_mobile = Enum.at(["M", "T", "W", "T", "F", "S", "S"], idx)
-      {day_of_week, day_of_week_mobile}
-    end
+    days_of_week =
+      for idx <- 0..6 do
+        day_of_week = assigns.beginning_of_week |> Timex.add(Duration.from_days(idx))
+        day_of_week_mobile = Enum.at(["M", "T", "W", "T", "F", "S", "S"], idx)
+        {day_of_week, day_of_week_mobile}
+      end
 
     assigns =
       assigns

From 2abfbf4f94832c393f76414c691658050f952a04 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 19 Sep 2024 19:01:35 +0100
Subject: [PATCH 23/23] refactor: clean-up hours function

---
 .../live/calendar_live/components/week.ex     | 30 ++-----------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/lib/atomic_web/live/calendar_live/components/week.ex b/lib/atomic_web/live/calendar_live/components/week.ex
index 4f54bf1db..692c59fce 100644
--- a/lib/atomic_web/live/calendar_live/components/week.ex
+++ b/lib/atomic_web/live/calendar_live/components/week.ex
@@ -258,31 +258,7 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
     end
   end
 
-  defp hours,
-    do: [
-      "0H",
-      "1H",
-      "2H",
-      "3H",
-      "4H",
-      "5H",
-      "6H",
-      "7H",
-      "8H",
-      "9H",
-      "10H",
-      "11H",
-      "12H",
-      "13H",
-      "14H",
-      "15H",
-      "16H",
-      "17H",
-      "18H",
-      "19H",
-      "20H",
-      "21H",
-      "22H",
-      "23H"
-    ]
+  defp hours do
+    0..23 |> Enum.map(fn n -> "#{n}H" end)
+  end
 end