Added reply.

Reviewed-on: retoor/snek#26
Reviewed-by: retoor <retoor@noreply@molodetz.nl>

src/snek/static/base.css

@@ -20,7 +20,7 @@
 
 body {
   font-family: Arial, sans-serif;
-  background-color: #1a1a1a;
+  background-color: #000000;
   color: #e6e6e6;
   line-height: 1.5;
   display: flex;
@@ -36,7 +36,7 @@ main {
 }
 
 header {
-  background-color: #0f0f0f;
+  background-color: #000000;
   padding: 10px 20px;
   display: flex;
   justify-content: space-between;
@@ -78,14 +78,13 @@ a {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #1a1a1a;
+  background-color: #000000;
   overflow: hidden;
 }
 
 .chat-header {
   padding: 10px 20px;
-  background-color: #0f0f0f;
+  background-color: #000000;
-  border-bottom: 1px solid #333;
   user-select: none;
 }
 
@@ -109,7 +108,7 @@ a {
   -ms-overflow-style: none;
   padding: 10px;
   height: 200px;
-  background: #1a1a1a;
+  background: #000000;
 }
 
 .container {
@@ -205,15 +204,14 @@ a {
 
 .chat-input {
   padding: 15px;
-  background-color: #121212;
+  background-color: #000000;
   display: flex;
   align-items: center;
-  border-top: 1px solid #333;
 }
 
 input[type="text"], .chat-input textarea {
   flex: 1;
-  background-color: #1a1a1a;
+  background-color: #000000;
   color: white;
   border: none;
   padding: 10px;
@@ -312,10 +310,11 @@ a {
 
 .sidebar {
   width: 250px;
-  background-color: #121212;
+  background-color: #000000;
-  padding: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
   overflow-y: auto;
-  border-right: 1px solid #333;
 }
 
 .sidebar h2 {

src/snek/templates/search_user.html

@@ -8,7 +8,7 @@
     <div class="chat-header">
         <h2>Search user</h2>
     </div>
-    <div class="container">
+    <div class="container chat-area">
         <form method="get" action="/search-user.html">
             <input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
             <fancy-button size="auto" text="Search" url="submit"></fancy-button>

src/snek/templates/web.html

@@ -22,6 +22,10 @@
 <script>
     const channelUid = "{{ channel.uid.value }}";
 
+    function getInputField(){
+        return document.querySelector("textarea")
+    }
+        
     function initInputField(textBox) {
         textBox.addEventListener('change', (e) => {
             e.preventDefault();
@@ -41,9 +45,29 @@
         textBox.focus();
     }
 
+    function replyMessage(message) {
+        const field = getInputField() 
+        field.value = "```markdown\n> " + (message || '') + "\n```\n";
+        field.focus();
+    }
+
     function updateTimes() {
-        document.querySelectorAll(".time").forEach((time) => {
+        document.querySelectorAll(".time").forEach((container) => {
-            time.innerText = app.timeDescription(time.dataset.created_at);
+            const messageDiv = container.closest('.message');
+            const userNick = messageDiv.dataset.user_nick;
+            const text = messageDiv.querySelector(".text").innerText;
+            const time = document.createElement("span");
+            time.innerText = app.timeDescription(container.dataset.created_at);
+            
+            container.replaceChildren(time);
+            const reply = document.createElement("a");
+            reply.innerText = " reply";
+            reply.href = "#reply";
+            container.appendChild(reply);
+            reply.addEventListener('click', (e) => {
+                e.preventDefault();
+                replyMessage(text);
+            })
         });
     }
 
@@ -159,7 +183,7 @@
         }, 1000);
     });
 
-    initInputField(document.querySelector("textarea"));
+    initInputField(getInputField());
     updateLayout(true);
 </script>
 {% endblock %}

src/snek/view/threads.py

@@ -28,6 +28,6 @@ class ThreadsView(BaseView):
             thread['last_message_user_color'] = user_last_message['color']  
             threads.append(thread)
             
-        threads.sort(key=lambda x: x['last_message_on'], reverse=True)
+        threads.sort(key=lambda x: x['last_message_on'] or '', reverse=True)
 
         return await self.render_template("threads.html", dict(threads=threads,user=user))

src/snek/view/upload.py

@@ -25,6 +25,7 @@ class UploadView(BaseView):
         drive_item = await self.services.drive_item.get(uid)
         response = web.FileResponse(drive_item["path"])
         response.headers['Cache-Control'] = f'public, max-age={1337*420}'
+        response.headers['Content-Disposition'] = f'attachment; filename="{drive_item["name"]}"'
         return response
 
     async def post(self):
@@ -57,8 +58,10 @@ class UploadView(BaseView):
             filename = field.filename
             if not filename:
                 continue
+            
+            name = str(uuid.uuid4()) + pathlib.Path(filename).suffix
 
-            file_path = pathlib.Path(UPLOAD_DIR).joinpath(filename.strip("/").strip("."))
+            file_path = pathlib.Path(UPLOAD_DIR).joinpath(name)
             files.append(file_path)
 
             async with aiofiles.open(str(file_path.absolute()), 'wb') as f: