Implements reply box UI.

redesign/nimforum.scss

@@ -389,4 +389,10 @@ blockquote {
     margin-right: $control-padding-x*2;
     float: right;
   }
+}
+
+.form-input {
+  // For reply text area.
+  margin-top: $control-padding-y*2;
+  resize: vertical;
 }

redesign/postlist.nim

@@ -31,7 +31,7 @@ when defined(js):
   include karax/prelude
   import karax / [vstyles, kajax, kdom]
 
-  import karaxutils, error
+  import karaxutils, error, replybox
 
   type
     State = ref object
@@ -39,12 +39,15 @@ when defined(js):
       loading: bool
       status: HttpCode
       replyBoxShown: bool
+      replyBox: ReplyBox
 
   proc newState(): State =
     State(
       list: none[PostList](),
       loading: false,
-      status: Http200
+      status: Http200,
+      replyBoxShown: true,
+      replyBox: newReplyBox()
     )
 
   var
@@ -156,7 +159,6 @@ when defined(js):
           tdiv(class="information-title"):
             text diffStr
 
-
   proc renderPostList*(threadId: int, isLoggedIn: bool): VNode =
     if state.status != Http200:
       return renderError("Couldn't retrieve posts.")
@@ -186,3 +188,6 @@ when defined(js):
 
           if list.moreCount > 0:
             genLoadMore(list.posts.len)
+
+          if state.replyBoxShown:
+            render(state.replyBox, list.thread)

redesign/replybox.nim

@@ -0,0 +1,40 @@
+when defined(js):
+  import strformat
+
+  include karax/prelude
+  import karax / [vstyles, kajax, kdom]
+
+  import karaxutils, threadlist
+
+  type
+    ReplyBox* = ref object
+      preview: bool
+
+  proc newReplyBox*(): ReplyBox =
+    ReplyBox()
+
+  proc render*(state: ReplyBox, thread: Thread): VNode =
+    result = buildHtml():
+      tdiv(class="information no-border"):
+        tdiv(class="information-icon"):
+          italic(class="fas fa-reply")
+        tdiv(class="information-main", style=style(StyleAttr.width, "100%")):
+          tdiv(class="information-title"):
+            # text fmt("Replying to \"{thread.topic}\"")
+          # tdiv(class="information-content"):
+            tdiv(class="panel"):
+              tdiv(class="panel-nav"):
+                ul(class="tab tab-block"):
+                  li(class=class({"active": not state.preview}, "tab-item")):
+                    a(href="#"):
+                      text "Message"
+                  li(class=class({"active": state.preview}, "tab-item")):
+                    a(href="#"):
+                      text "Preview"
+              tdiv(class="panel-body"):
+                textarea(class="form-input", rows="5")
+              tdiv(class="panel-footer"):
+                button(class="btn btn-primary float-right"):
+                  text "Reply"
+                button(class="btn btn-link float-right"):
+                  text "Cancel"