chore+feat(css): added styling for follow button and new search in navbar

src/views/general.nim

@@ -2,8 +2,8 @@
 import uri, strutils, strformat
 import karax/[karaxdsl, vdom]
 
-import renderutils
-import ../utils, ../types, ../prefs, ../formatters
+import renderutils, search_panel
+import ../utils, ../types, ../prefs, ../formatters, ../query, tables
 
 import jester
 
@@ -20,14 +20,17 @@ proc renderNavbar(cfg: Config; req: Request; rss, canonical: string): VNode =
     path = $(parseUri(req.path) ? filterParams(req.params))
     if "/status/" in path: path.add "#m"
 
+  let query = initQuery(req.params)
+
   buildHtml(nav):
     tdiv(class="inner-nav"):
       tdiv(class="nav-item"):
         a(class="site-name", href="/"): text cfg.title
         a(href="/about"): text "(donate)"
 
+      renderSearchPanel(query)
+
       tdiv(class="nav-item right"):
-        icon "search", title="Search", href="/search"
         if cfg.enableRss and rss.len > 0:
           icon "rss", title="RSS Feed", href=rss
         icon "bird", title="Open in Twitter", href=canonical

src/views/search.nim

@@ -1,33 +1,13 @@
 # SPDX-License-Identifier: AGPL-3.0-only
-import strutils, strformat, sequtils, unicode, tables, options
+import strutils, options
 import karax/[karaxdsl, vdom]
 
 import renderutils, timeline
 import ".."/[types, query]
 
-const 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"):
-      form(`method`="get", action="/search", autocomplete="off"):
-        hiddenField("f", "tweets")
-        input(`type`="text", name="q", autofocus="",
-              placeholder="Search...", dir="auto")
-        button(`type`="submit"): icon "search"
+    discard
 
 proc renderProfileTabs*(query: Query; username: string): VNode =
   let link = "/" & username
@@ -51,43 +31,6 @@ proc renderSearchTabs*(query: Query): VNode =
       q.kind = users
       a(href=("?" & genQueryUrl(q))): text "Users"
 
-proc isPanelOpen(q: Query): bool =
-  q.fromUser.len == 0 and (q.filters.len > 0 or q.excludes.len > 0 or
-  @[q.near, q.until, q.since].anyIt(it.len > 0))
-
-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", autocomplete="off")):
-    hiddenField("f", "tweets")
-    genInput("q", "", query.text, "Enter search...", class="pref-inline")
-    button(`type`="submit"): icon "search"
-
-    input(id="search-panel-toggle", `type`="checkbox", checked=isPanelOpen(query))
-    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)
-
-      tdiv(class="search-row"):
-        tdiv:
-          span(class="search-title"): text "Time range"
-          tdiv(class="date-range"):
-            genDate("since", query.since)
-            span(class="search-title"): text "-"
-            genDate("until", query.until)
-        tdiv:
-          span(class="search-title"): text "Near"
-          genInput("near", "", query.near, "Location...", autofocus=false)
-
 proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
                         pinned=none(Tweet)): VNode =
   let query = results.query
@@ -100,8 +43,7 @@ proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
       renderProfileTabs(query, query.fromUser.join(","))
 
     if query.fromUser.len == 0 or query.kind == tweets:
-      tdiv(class="timeline-header"):
-        renderSearchPanel(query)
+      discard
 
     if query.fromUser.len == 0:
       renderSearchTabs(query)
@@ -110,11 +52,5 @@ proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
 
 proc renderUserSearch*(results: Result[User]; prefs: Prefs; path: string): VNode =
   buildHtml(tdiv(class="timeline-container")):
-    tdiv(class="timeline-header"):
-      form(`method`="get", action="/search", class="search-field", autocomplete="off"):
-        hiddenField("f", "users")
-        genInput("q", "", results.query.text, "Enter username...", class="pref-inline")
-        button(`type`="submit"): icon "search"
-
     renderSearchTabs(results.query)
     renderTimelineUsers(results, prefs, path)

src/views/search_panel.nim

@@ -0,0 +1,58 @@
+# SPDX-License-Identifier: AGPL-3.0-only
+import strutils, strformat, sequtils, unicode, tables
+import karax/[karaxdsl, vdom]
+
+import renderutils
+import ".."/[types]
+
+const 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 isPanelOpen(q: Query): bool =
+  q.fromUser.len == 0 and (q.filters.len > 0 or q.excludes.len > 0 or
+  @[q.near, q.until, q.since].anyIt(it.len > 0))
+
+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", autocomplete="off")):
+    hiddenField("f", "tweets")
+    genInput("q", "", query.text, "Enter search...", class="pref-inline")
+    button(`type`="submit"): icon "search"
+
+    input(id="search-panel-toggle", `type`="checkbox", checked=isPanelOpen(query))
+    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)
+
+      tdiv(class="search-row"):
+        tdiv:
+          span(class="search-title"): text "Time range"
+          tdiv(class="date-range"):
+            genDate("since", query.since)
+            span(class="search-title"): text "-"
+            genDate("until", query.until)
+        tdiv:
+          span(class="search-title"): text "Near"
+          genInput("near", "", query.near, "Location...", autofocus=false)