Redesign and fix search, add custom timeline tab

src/views/profile.nim

@@ -1,7 +1,7 @@
 import strutils, strformat
 import karax/[karaxdsl, vdom, vstyles]
 
-import tweet, timeline, renderutils
+import renderutils, search
 import ".."/[types, utils, formatters]
 
 proc renderStat(num, class: string; text=""): VNode =
@@ -54,11 +54,10 @@ proc renderPhotoRail(profile: Profile; photoRail: seq[GalleryPhoto]): VNode =
       a(href=(&"/{profile.username}/media")):
         icon "picture", $profile.media & " Photos and videos"
 
-    input(id="photo-rail-toggle", `type`="checkbox")
-    tdiv(class="photo-rail-header-mobile"):
-      label(`for`="photo-rail-toggle", class="photo-rail-label"):
-        icon "picture", $profile.media & " Photos and videos"
-        icon "down"
+    input(id="photo-rail-grid-toggle", `type`="checkbox")
+    label(`for`="photo-rail-grid-toggle", class="photo-rail-header-mobile"):
+      icon "picture", $profile.media & " Photos and videos"
+      icon "down"
 
     tdiv(class="photo-rail-grid"):
       for i, photo in photoRail:
@@ -76,13 +75,17 @@ proc renderBanner(profile: Profile): VNode =
         genImg(profile.banner)
 
 proc renderProtected(username: string): VNode =
-  buildHtml(tdiv(class="timeline-container timeline")):
-    tdiv(class="timeline-header timeline-protected"):
-      h2: text "This account's tweets are protected."
-      p: text &"Only confirmed followers have access to @{username}'s tweets."
+  buildHtml(tdiv(class="timeline-container")):
+    tdiv(class="timeline-container timeline"):
+      tdiv(class="timeline-header timeline-protected"):
+        h2: text "This account's tweets are protected."
+        p: text &"Only confirmed followers have access to @{username}'s tweets."
 
 proc renderProfile*(profile: Profile; timeline: Timeline;
                     photoRail: seq[GalleryPhoto]; prefs: Prefs; path: string): VNode =
+  if timeline.query.isNone:
+    timeline.query = some Query(fromUser: @[profile.username])
+
   buildHtml(tdiv(class="profile-tabs")):
     if not prefs.hideBanner:
       tdiv(class="profile-banner"):
@@ -94,9 +97,7 @@ proc renderProfile*(profile: Profile; timeline: Timeline;
       if photoRail.len > 0:
         renderPhotoRail(profile, photoRail)
 
-    tdiv(class="timeline-container"):
-      if profile.protected:
-        renderProtected(profile.username)
-      else:
-        renderProfileTabs(timeline.query, profile.username)
-        renderTimelineTweets(timeline, prefs, path)
+    if profile.protected:
+      renderProtected(profile.username)
+    else:
+      renderTweetSearch(timeline, prefs, path)

src/views/renderutils.nim

@@ -59,8 +59,7 @@ proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNod
       text text
 
 proc genCheckbox*(pref, label: string; state: bool): VNode =
-  buildHtml(tdiv(class="pref-group")):
-    label(class="checkbox-container"):
+  buildHtml(label(class="pref-group checkbox-container")):
       text label
       if state: input(name=pref, `type`="checkbox", checked="")
       else: input(name=pref, `type`="checkbox")
@@ -83,4 +82,3 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
           option(value=opt, selected=""): text opt
         else:
           option(value=opt): text opt
-

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)

src/views/timeline.nim

@@ -12,38 +12,6 @@ proc getQuery(query: Option[Query]): string =
     if result[^1] != '?':
       result &= "&"
 
-proc getTabClass(query: Option[Query]; tab: string): string =
-  var classes = @["tab-item"]
-
-  if query.isNone or get(query).kind == multi:
-    if tab == "posts":
-      classes.add "active"
-  elif $get(query).kind == tab:
-    classes.add "active"
-
-  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"
-
-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 renderNewer(query: Option[Query]): VNode =
   buildHtml(tdiv(class="timeline-item show-more")):
     a(href=(getQuery(query).strip(chars={'?', '&'}))):