Add expanded version of category drop down and add it to categories page

public/css/nimforum.scss

@@ -122,6 +122,19 @@ $logo-height: $navbar-height - 20px;
   }
 }
 
+.category-description {
+  opacity: 0.6;
+  font-size: small;
+}
+
+.category-status {
+  .topic-count {
+    margin-left: 5px;
+    opacity: 0.7;
+    font-size: small;
+  }
+}
+
 .category {
   white-space: nowrap;
 }

src/frontend/category.nim

@@ -10,16 +10,23 @@ type
   CategoryList* = ref object
     categories*: seq[Category]
 
+const categoryDescriptionCharLimit = 250
+
 proc cmpNames*(cat1: Category, cat2: Category): int =
   cat1.name.cmp(cat2.name)
 
 when defined(js):
   include karax/prelude
   import karax / [vstyles]
+  import karaxutils
 
-  proc render*(category: Category): VNode =
+  proc render*(category: Category, compact=false): VNode =
-    result = buildHtml():
+    if category.name.len == 0:
-      if category.name.len >= 0:
+      return buildHtml():
+        span()
+
+    result = buildhtml(tdiv):
+      tdiv(class="category-status"):
         tdiv(class="category",
              title=category.description,
              "data-color"="#" & category.color):
@@ -28,6 +35,11 @@ when defined(js):
                  (StyleAttr.border,
                   kstring"0.3rem solid #" & category.color)
           ))
-          text category.name
+          span(class="category-name"):
-      else:
+            text category.name
-        span()
+          if not compact:
+            span(class="topic-count"):
+              text "× " & $category.numTopics
+      if not compact:
+        tdiv(class="category-description"):
+          text category.description.limit(categoryDescriptionCharLimit)

src/frontend/categorypicker.nim

@@ -155,7 +155,7 @@ when defined(js):
                       state.onAddCategoryClick()):
                 text "Add"
 
-  proc render*(state: CategoryPicker, currentUser: Option[User]): VNode =
+  proc render*(state: CategoryPicker, currentUser: Option[User], compact=false): VNode =
     let loggedIn = currentUser.isSome()
     let currentAdmin =
       loggedIn and currentUser.get().rank == Admin
@@ -178,7 +178,7 @@ when defined(js):
         tdiv(class="dropdown"):
           a(class="btn btn-link dropdown-toggle", tabindex="0"):
             tdiv(class="selected-category d-inline-block"):
-              render(selectedCategory)
+              render(selectedCategory, compact=true)
             text " "
             italic(class="fas fa-caret-down")
           ul(class="menu"):
@@ -186,6 +186,6 @@ when defined(js):
               li(class="menu-item"):
                 a(class="category-" & $category.id & " " & category.name.slug,
                   onClick=onCategoryClick(state, category)):
-                  render(category)
+                  render(category, compact)
         if state.addEnabled:
           genAddCategory(state)

src/frontend/mainbuttons.nim

@@ -3,16 +3,22 @@ import user
 
 when defined(js):
   include karax/prelude
-  import karax / [vstyles, kajax, kdom]
+  import karax / [kdom]
 
-  import karaxutils, error, user
+  import karaxutils, user, categorypicker, category
 
   let buttons = [
     (name: "Latest", url: makeUri("/"), id: "latest-btn"),
     (name: "Categories", url: makeUri("/categories"), id: "categories-btn"),
   ]
 
-  proc renderMainButtons*(currentUser: Option[User]): VNode =
+  proc onSelectedCategoryChanged(oldCategory: Category, newCategory: Category) =
+    let uri = makeUri("/c/" & $newCategory.id)
+    navigateTo(uri)
+
+  let catPicker = newCategoryPicker(onCategoryChange=onSelectedCategoryChanged)
+
+  proc renderMainButtons*(currentUser: Option[User], categoryId = -1): VNode =
     result = buildHtml():
       section(class="navbar container grid-xl", id="main-buttons"):
         section(class="navbar-section"):
@@ -23,6 +29,9 @@ when defined(js):
             ul(class="menu"):
               li: text "community"
               li: text "dev" ]#
+          if categoryId != -1:
+            catPicker.selectedCategoryID = categoryId
+            render(catPicker, currentUser)
 
           for btn in buttons:
             let active = btn.url == window.location.href

src/frontend/threadlist.nim

@@ -88,7 +88,7 @@ when defined(js):
     else:
       return $duration.inSeconds & "s"
 
-  proc genThread(thread: Thread, isNew: bool, noBorder: bool): VNode =
+  proc genThread(thread: Thread, isNew: bool, noBorder: bool, displayCategory=true): VNode =
     let isOld = (getTime() - thread.creation.fromUnix).inWeeks > 2
     let isBanned = thread.author.rank.isBanned()
     result = buildHtml():
@@ -109,8 +109,9 @@ when defined(js):
           a(href=makeUri("/t/" & $thread.id),
             onClick=anchorCB):
             text thread.topic
-        td():
+        if displayCategory:
-          render(thread.category)
+          td():
+            render(thread.category, compact=true)
         genUserAvatars(thread.users)
         td(): text $thread.replies
         td(class=class({
@@ -193,7 +194,8 @@ when defined(js):
           thead():
             tr:
               th(text "Topic")
-              th(text "Category")
+              if categoryId == -1:
+                th(text "Category")
               th(style=style((StyleAttr.width, kstring"8rem"))): text "Users"
               th(text "Replies")
               th(text "Views")
@@ -206,7 +208,8 @@ when defined(js):
               let isLastThread = i+1 == list.threads.len
               let (isLastUnseen, isNew) = getInfo(list.threads, i, currentUser)
               genThread(thread, isNew,
-                        noBorder=isLastUnseen or isLastThread)
+                        noBorder=isLastUnseen or isLastThread,
+                        displayCategory=categoryId == -1)
               if isLastUnseen and (not isLastThread):
                 tr(class="last-visit-separator"):
                   td(colspan="6"):
@@ -224,5 +227,5 @@ when defined(js):
 
   proc renderThreadList*(currentUser: Option[User], categoryId = -1): VNode =
     result = buildHtml(tdiv):
-      renderMainButtons(currentUser)
+      renderMainButtons(currentUser, categoryId=categoryId)
       genThreadList(currentUser, categoryId)