Redesign and fix search, add custom timeline tab

src/views/search.nim

@@ -1,9 +1,24 @@
-import strutils, strformat, unicode
+import strutils, strformat, unicode, tables
 import karax/[karaxdsl, vdom, vstyles]
 
 import renderutils, timeline
 import ".."/[types, formatters, query]
 
+let toggles = {
+  "nativeretweets": "Retweets",
+  "media": "Media",
+  "videos": "Videos",
+  "news": "News",
+  "verified": "Verified",
+  "native_video": "Native videos",
+  "replies": "Replies",
+  "links": "Links",
+  "images": "Images",
+  "safe": "Safe",
+  "quote": "Quotes",
+  "pro_video": "Pro videos"
+}.toOrderedTable
+
 proc renderSearch*(): VNode =
   buildHtml(tdiv(class="panel-container")):
     tdiv(class="search-bar"):
@@ -12,55 +27,77 @@ proc renderSearch*(): VNode =
         input(`type`="text", name="text", autofocus="", placeholder="Enter username...")
         button(`type`="submit"): icon "search"
 
-proc renderTimelineSearch*(timeline: Timeline; prefs: Prefs; path: string): VNode =
-  let users =
-    if timeline.query.isSome: get(timeline.query).fromUser
-    else: @[]
+proc getTabClass(query: Option[Query]; tab: string): string =
+  var classes = @["tab-item"]
 
-  buildHtml(tdiv(class="timeline-container")):
-    tdiv(class="timeline-header"):
-      text users.join(" | ")
+  if query.isNone or get(query).kind == multi:
+    if tab == "posts":
+      classes.add "active"
+  elif $get(query).kind == tab:
+    classes.add "active"
 
-    renderProfileTabs(timeline.query, users.join(","))
-    renderTimelineTweets(timeline, prefs, path)
+  return classes.join(" ")
+
+proc renderProfileTabs*(query: Option[Query]; username: string): VNode =
+  let link = "/" & username
+  buildHtml(ul(class="tab")):
+    li(class=query.getTabClass("posts")):
+      a(href=link): text "Tweets"
+    li(class=query.getTabClass("replies")):
+      a(href=(link & "/replies")): text "Tweets & Replies"
+    li(class=query.getTabClass("media")):
+      a(href=(link & "/media")): text "Media"
+    li(class=query.getTabClass("custom")):
+      a(href=(link & "/search")): text "Custom"
+
+proc renderSearchTabs*(query: Option[Query]): VNode =
+  var q = if query.isSome: get(query) else: Query()
+  buildHtml(ul(class="tab")):
+    li(class=query.getTabClass("custom")):
+      q.kind = custom
+      a(href=genQueryUrl(q)): text "Tweets"
+    li(class=query.getTabClass("users")):
+      q.kind = users
+      a(href=genQueryUrl(q)): text "Users"
+
+proc renderSearchPanel*(query: Query): VNode =
+  let user = query.fromUser.join(",")
+  let action = if user.len > 0: &"/{user}/search" else: "/search"
+  buildHtml(form(`method`="get", action=action, class="search-field")):
+    hiddenField("kind", "custom")
+    genInput("text", "", query.text, "Enter search...", class="pref-inline")
+    button(`type`="submit"): icon "search"
+    input(id="search-panel-toggle", `type`="checkbox")
+    label(`for`="search-panel-toggle"):
+      icon "down"
+    tdiv(class="search-panel"):
+      for f in @["filter", "exclude"]:
+        span(class="search-title"): text capitalize(f)
+        tdiv(class="search-toggles"):
+          for k, v in toggles:
+            let state =
+              if f == "filter": k in query.filters
+              else: k in query.excludes
+            genCheckbox(&"{f[0]}-{k}", v, state)
 
 proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
-  let query = if tweets.query.isSome: get(tweets.query) else: Query(kind: custom)
+  let query =
+    if tweets.query.isSome: get(tweets.query)
+    else: Query(kind: custom)
 
   buildHtml(tdiv(class="timeline-container")):
-    tdiv(class="timeline-header"):
-      form(`method`="get", action="/search", class="search-field"):
-        hiddenField("kind", "custom")
-        genInput("text", "", query.text, "Enter search...", class="pref-inline")
-        button(`type`="submit"): icon "search"
-        input(id="panel-toggle", `type`="checkbox")
-        label(`for`="panel-toggle", class="panel-label"):
-          icon "down"
-        tdiv(class="search-panel"):
-          tdiv:
-            span(class="search-title"): text "Include: "
-            genCheckbox("retweets", "Retweets", "nativeretweets" in query.includes)
-            genCheckbox("replies", "Replies", "replies" in query.includes)
+    if query.fromUser.len > 1:
+      tdiv(class="timeline-header"):
+        text query.fromUser.join(" | ")
+    if query.fromUser.len == 0 or query.kind == custom:
+      tdiv(class="timeline-header"):
+        renderSearchPanel(query)
 
-          for f in @["filter", "exclude"]:
-            tdiv:
-              span(class="search-title"): text capitalize(f) & ":"
-              for i in commonFilters:
-                let state =
-                  if f == "filter": i in query.filters
-                  else: i in query.excludes
-                genCheckbox(&"{f[0]}-{i}", capitalize(i), state)
-              input(id=(&"{f}-toggle"), `type`="checkbox")
-              label(`for`=(&"{f}-toggle"), class=(&"{f}-label")):
-                icon "down"
-              tdiv(class=(&"{f}-extras")):
-                for i in advancedFilters:
-                  let state =
-                    if f == "filter": i in query.filters
-                    else: i in query.excludes
-                  genCheckbox(&"{f[0]}-{i}", i, state)
+    if query.fromUser.len > 0:
+      renderProfileTabs(tweets.query, query.fromUser.join(","))
+    else:
+      renderSearchTabs(tweets.query)
 
-    renderSearchTabs(tweets.query)
     renderTimelineTweets(tweets, prefs, path)
 
 proc renderUserSearch*(users: Result[Profile]; prefs: Prefs): VNode =
@@ -74,9 +111,6 @@ proc renderUserSearch*(users: Result[Profile]; prefs: Prefs): VNode =
         hiddenField("kind", "users")
         genInput("text", "", searchText, "Enter username...", class="pref-inline")
         button(`type`="submit"): icon "search"
-        input(id="panel-toggle", `type`="checkbox")
-        label(`for`="panel-toggle", class="panel-label"):
-          icon "down"
 
     renderSearchTabs(users.query)
     renderTimelineUsers(users, prefs)