joao.dubas/slax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): updates made on Jan-2025

Browse Source 
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:
João Paulo Dubas 2025-01-27 23:58:19 +00:00
parent dd8e4d90dd
commit e96efdecfa
Signed by: joao.dubas
SSH Key Fingerprint: SHA256:V1mixgOGRc/YMhGx/DNkOSmJxgA2vHNrDZEk3wt/kOA
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
lib/slax_web/live/chat_room_live.ex
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">

11
lib/slax_web/live/chat_room_live/index.ex
View File

@ -16,12 +16,15 @@ defmodule SlaxWeb.ChatRoomLive.Index do
:for={{id, {room, joined?}} <- @streams.rooms}
class="cursor-pointer p-4 flex justify-between items-center group first:rounded-t last:rounded-b"
id={id}
phx-click={JS.navigate(~p"/rooms/#{room}")}
phx-click={open_room(room)}
phx-keydown={open_room(room)}
phx-key="Enter"
tabindex="0"
>
<div>
<div class="font-medium mb-1">
#{room.name}
<span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
<span class="mx-1 text-gray-500 font-light text-sm hidden group-hover:inline group-focus:inline">
View room
</span>
</div>
@ -77,4 +80,8 @@ defmodule SlaxWeb.ChatRoomLive.Index do
{:noreply, stream_insert(socket, :rooms, {room, joined?})}
end
defp open_room(room) do
JS.navigate(~p"/rooms/#{room}")
end
end