diff options
Diffstat (limited to 'lib/lsg_web/live/chat_live.html.heex')
| -rw-r--r-- | lib/lsg_web/live/chat_live.html.heex | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/lib/lsg_web/live/chat_live.html.heex b/lib/lsg_web/live/chat_live.html.heex new file mode 100644 index 0000000..01d8b3a --- /dev/null +++ b/lib/lsg_web/live/chat_live.html.heex @@ -0,0 +1,96 @@ +<div class="chat" data-turbo="false"> + + <div class="py-4 px-4 bg-gradient-to-b from-black to-gray-900"> + <div class="grid grid-cols-2"> + <h1 class="text-gray-50 tracking-tight font-extrabold text-xl"> + <%= @network %> + <span class="font-bold"><%= @chan %></span> + </h1> + <div class="text-right"> + <a href="/" class="text-gray-400"><%= @account_id %></a> + </div> + </div> + </div> + + <div class="body"> + + <div class="log"> + <%= if Enum.empty?(@backlog) do %> + <p class="disconnected text-center text-6xl tracking-tight font-extrabold text-red-800 w-full my-24 mx-auto overflow-y-auto"> + Disconnected + </p> + <p class="phx-errored text-center text-6xl tracking-tight font-extrabold text-red-800 w-full my-24 mx-auto overflow-y-auto"> + Oh no error + </p> + <% end %> + + <ul class="pt-4 pl-4"> + <%= for message <- @backlog do %> + <%= if is_map(message) && Map.get(message, :__struct__) == IRC.Message do %> + <li class="flex gap-2 place-items-center message" + data-account-id={message.account.id}> + <LSGWeb.Component.naive_date_time_utc datetime={message.at} format="time-24-with-seconds" /> + <span class="inline-block font-bold flex-none cursor-default"><%= message.sender.nick %></span> + <span class="inline-block flex-grow cursor-default"> + <LSGWeb.MessageComponent.content + self={message.account.id == @account_id} + text={message.text} + /> + </span> + </li> + <% end %> + + <%= if is_binary(message) do %> + <li class="notice"><%= message %></li> + <% end %> + + <%= if is_map(message) && Map.get(message, :type) do %> + <li class="flex gap-2 place-items-center event"> + <LSGWeb.Component.naive_date_time_utc datetime={message.at} format="time-24-with-seconds" /> + <span class="inline-block font-bold flex-none cursor-default text-gray-700">* * *</span> + <span class="inline-block flex-grow cursor-default text-gray-700"> + <LSGWeb.EventComponent.content event={message} + self={@users[message.user_id] && @users[message.user_id].account == @account_id} + user={@users[message.user_id]} + /> + </span> + </li> + <% end %> + <% end %> + </ul> + </div> + + <aside> + <%= for {_, user} <- @users do %> + <details class="user dropdown"> + <summary><%= user.nick %></summary> + <div class="content"> + <h3 class="text-xl font-bold"><%= user.nick %></h3> + + <ul class="mt-4 space-y-2"> + <li class="">User: <span class="font-bold"><%= user.username %></span></li> + <li class="">Name: <%= user.realname || user.nick %></li> + <li class="">Host: <span class="font-mono"><%= user.host %></span></li> + </ul> + + <div class="mt-4 font-xs text-gray-300 text-center"> + UID: <%= user.id %> + <br /> + AID: <%= user.account %> + </div> + </div> + </details> + <% end %> + </aside> + + </div> + + <.form let={f} id={"form-#{@counter}"} for={:message} phx-submit="send" class="w-full px-4 pt-4"> + <div> + <div class="mt-1 flex rounded-md shadow-sm border border-gray-300"> + <%= text_input f, :text, class: "focus:ring-indigo-500 focus:border-indigo-500 block w-full border rounded-md pl-4 sm:text-sm border-gray-300", autofocus: true, 'phx-hook': "AutoFocus", autocomplete: "off", placeholder: "Don't be shy, say something…" %> + <%= submit content_tag(:span, "Send"), class: "-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"%> + </div> + </div> + </.form> +</div> |