1 files changed, 127 insertions, 0 deletions
diff --git a/desk/web/components/chat.hoon b/desk/web/components/chat.hoon
new file mode 100644
index 0000000..f616a16
--- /dev/null
+++ b/desk/web/components/chat.hoon
@@ -0,0 +1,127 @@
+/-  c=tlon-channels
+/+  sr=sortug, kaji, sigil=sigil-sigil, lib=boke
+=<  html
+|%
+++  css  ^~  %-  trip
+'''
+#chat-box{
+  height: 100%;
+  width: 100%;
+  border: 1px solid var(--text-color);
+  display: flex;
+  flex-direction: column;
+
+  input[type=text]{
+    outline: none;
+  }
+
+  header{
+    border-bottom: 1px solid var(--text-color);
+    display: flex;
+    padding: 0.5rem 2rem;
+
+    h3{
+      margin: 0;
+    }
+  }
+}
+#chat-container{
+  flex-grow: 1;
+  overflow-y: scroll;
+  word-break: break-all;
+  padding: 0.5rem;
+  
+
+  .chat-msg {
+    display: flex;
+    min-height: 4rem;
+
+    .left {
+      margin-right: 1rem;
+
+      & .anon-avatar{
+        width: 32px;
+        height: 32px;
+      }
+    }
+    .right {
+      width: 100%;
+      .metadata {
+        display: flex;
+        color: rgb(100, 100, 100);
+        font-size: 0.8rem;
+
+        .author{
+          font-family: "Anonymous Pro";  
+          margin-right: 0.5rem;
+        }
+      }
+      .chat-content{
+        font-family: Inter;
+      }
+    }
+  }
+}
+#chat-container .chat-content img{
+  max-width: 80%;
+  display: block;
+  margin: 0 auto;
+}
+#chat-composer{
+  display: flex;
+}
+#text-input{
+  flex-grow: 1;
+}
+.row{
+  display: flex;
+}
+.f1{
+  display: flex;
+  justify-content: space-between;
+}
+'''
+++  script  ^~  %-  trip
+'''
+document.addEventListener('DOMContentLoaded', (event) => {
+  const room = document.getElementById("chat-container");
+  if (room) room.scrollTop = room.scrollHeight
+})
+
+document.addEventListener('kaji-fact', (event) => {
+  const room = document.getElementById("chat-container");
+  if (room) setTimeout(() => room.scrollTop = room.scrollHeight, 50)
+})
+'''
+++  post-to-manx
+|=  post=@t
+;div.chat-msg
+  ;p:"(trip post)"
+==
+++  html
+  |=  =bowl:gall  ^-  manx
+  =/  pat  /chat/(scot %p our.bowl)/chat/posts/newest/200/post
+  =/  io  ~(. io:sr bowl)
+  =/  scrying  (scry:io %channels pat paged-posts:c)
+  =/  chat-list  (tap:on-posts:c posts.scrying)
+  ;div#chat-box
+    ;style:"{css}"
+    ;script:"{script}"
+    ;header.f1
+      ;h3: Bloody Shovel Public Chat
+      ;div: ~hostyr-docteg-mothep/spandrell
+    ==
+    ;div#chat-container
+      ;*  %+  turn  chat-list  |=  [=time up=(unit post:c)]  
+        ?~  up  ;p:"Deleted post"
+        (tlon-chat-post-to-manx:lib u.up)
+    ==
+    ;form
+      =id  "chat-composer"
+      =kaji  "poke"
+      =action  "add-chat"
+      ;input#text-input(type "text", name "input", autocomplete "off");
+      ;input(type "submit", value "Submit");
+    ==
+  ==
+--