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

23
lib/slax_web/live/chat_room_live.ex
View File

@ -26,23 +26,30 @@ defmodule SlaxWeb.ChatRoomLive do
</div> </div>
<div id="rooms-list"> <div id="rooms-list">
<.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} /> <.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"> <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" /> <.icon name="hero-plus" class="h-4 w-4 relative top-px" />
<span class="ml-2 leading-none">Add rooms</span> <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"> </button>
<div class="w-full text-left">
<div class="hover:bg-sky-600">
<div <div
phx-click={JS.navigate(~p"/rooms")} id="sidebar-rooms-menu"
class="cursor-pointer whitespace-nowrap text-gray-800 hover:text-withe px-6 py-1" 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">
<.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 Browse rooms
</.link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</button>
</div>
<div class="mt-4"> <div class="mt-4">
<div class="flex items-center h-8 px-3 group"> <div class="flex items-center h-8 px-3 group">
<div class="flex items-center flex-grow focus:outline-none"> <div class="flex items-center flex-grow focus:outline-none">

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} :for={{id, {room, joined?}} <- @streams.rooms}
class="cursor-pointer p-4 flex justify-between items-center group first:rounded-t last:rounded-b" class="cursor-pointer p-4 flex justify-between items-center group first:rounded-t last:rounded-b"
id={id} 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>
<div class="font-medium mb-1"> <div class="font-medium mb-1">
#{room.name} #{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 View room
</span> </span>
</div> </div>
@ -77,4 +80,8 @@ defmodule SlaxWeb.ChatRoomLive.Index do
{:noreply, stream_insert(socket, :rooms, {room, joined?})} {:noreply, stream_insert(socket, :rooms, {room, joined?})}
end end
defp open_room(room) do
JS.navigate(~p"/rooms/#{room}")
end
end end