feat(chat): updates made on Jan-2025

Some updates were made to the course and described in this post:

* https://arrowsmithlabs.com/blog/learn-phoenix-liveview-update-guide-january-2025
This commit is contained in:
2025-01-27 23:58:19 +00:00
parent dd8e4d90dd
commit e96efdecfa
2 changed files with 29 additions and 15 deletions

View File

@@ -26,22 +26,29 @@ defmodule SlaxWeb.ChatRoomLive do
</div>
<div id="rooms-list">
<.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} />
<button class="group relative flex items-center h-8 text-sm pl-8 pr-3 hover:bg-slate-300 cursor-pointer w-full">
<.icon name="hero-plus" class="h-4 w-4 relative top-px" />
<span class="ml-2 leading-none">Add rooms</span>
<div class="hidden group-focus:block cursor-default absolute top-8 right-2 bg-white border-slate-200 border py-3 rounded-lg">
<div class="relative">
<button
class="flex items-center peer h-8 text-sm pl-8 pr-3 hover:bg-slate-300 cursor-pointer w-full"
phx-click={JS.toggle(to: "#sidebar-rooms-menu")}
>
<.icon name="hero-plus" class="h-4 w-4 relative top-px" />
<span class="ml-2 leading-none">Add rooms</span>
</button>
<div
id="sidebar-rooms-menu"
class="hidden cursor-default absolute top-8 right-2 bg-white border-slate-200 border py-3 rounded-lg"
phx-click-away={JS.hide()}
>
<div class="w-full text-left">
<div class="hover:bg-sky-600">
<div
phx-click={JS.navigate(~p"/rooms")}
class="cursor-pointer whitespace-nowrap text-gray-800 hover:text-withe px-6 py-1"
>
Browse rooms
</div>
</div>
<.link
class="block select-none cursor-pointer whitespace-nowrap text-gray-800 hover:text-white px-6 py-1 hover:bg-sky-600"
navigate={~p"/rooms"}
>
Browse rooms
</.link>
</div>
</div>
</button>
</div>
</div>
<div class="mt-4">
<div class="flex items-center h-8 px-3 group">