summaryrefslogtreecommitdiff
path: root/lib/lsg_web/live/chat_live.html.heex
diff options
context:
space:
mode:
authorhref <href@random.sh>2021-09-03 04:04:21 +0200
committerhref <href@random.sh>2021-09-03 04:04:21 +0200
commit5399fc818cf821c75f9f19fd00bf7905ba7fe7e3 (patch)
tree00408724f9778cc7323b1459782a762626d39b6a /lib/lsg_web/live/chat_live.html.heex
parentassets.. (diff)
various fixes, web client wip, pubsub events
Diffstat (limited to '')
-rw-r--r--lib/lsg_web/live/chat_live.html.heex96
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">*&nbsp;*&nbsp;*</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>