feat: Unified search results

lib/bdfr_browser/http/plug.ex

@@ -109,23 +109,15 @@ defmodule BdfrBrowser.HTTP.Plug do
   get "/search" do
     conn = Plug.Conn.fetch_query_params(conn)
     params = conn.query_params
+    search = params["search"]
 
-    {tpl, tpl_args} =
+    tpl_args = [
-      if not is_nil(params["comment"]) and String.length(params["comment"]) > 0 do
-        search = params["comment"]
-
-        {"search_comments", [search: search, comments: search |> Comment.search() |> Repo.all()]}
-      else
-        search = params["post"]
-
-        {"search_posts",
-         [
       search: search,
-           posts: search |> Post.search() |> Repo.all()
+      posts: search |> Post.search() |> Repo.all(),
-         ]}
+      comments: search |> Comment.search() |> Repo.all()
-      end
+    ]
 
-    content = render_template(tpl, tpl_args)
+    content = render_template("search", tpl_args)
 
     conn
     |> put_resp_header("content-type", "text/html; charset=utf-8")

priv/templates/http/index.eex

@@ -9,15 +9,11 @@
 <br>
 
 <form method="get" action="/search" class="row justify-content-center">
-  <div class="col-md-4">
+  <div class="col-sm-11">
-    <input type="text" class="form-control" placeholder="Post" name="post" />
+    <input type="text" class="form-control" placeholder="Search term" name="search" />
   </div>
 
-  <div class="col-md-4">
+  <div class="col-sm-1 text-end">
-    <input type="text" class="form-control" placeholder="Comment" name="comment" />
-  </div>
-
-  <div class="col-md-2 text-center">
     <button type="submit" class="btn btn-primary">Search</button>
   </div>
 </form>

priv/templates/http/search.eex

@@ -0,0 +1,61 @@
+<h2>Search: <%= search %></h2>
+
+<ul class="nav nav-pills" id="searchTab" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="posts-tab" data-bs-toggle="tab" data-bs-target="#posts" type="button" role="tab" aria-controls="posts" aria-selected="true">
+      Posts (<%= length(posts) %>)
+    </button>
+  </li>
+
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="comments-tab" data-bs-toggle="tab" data-bs-target="#comments" type="button" role="tab" aria-controls="comments" aria-selected="false">
+      Comments (<%= length(comments) %>)
+    </button>
+  </li>
+</ul>
+
+<div class="tab-content">
+  <div class="tab-pane active" id="posts" role="tabpanel" aria-labelledby="posts-tab" tabindex="0">
+    <div class="row text-center" style="margin-top: 5px;">
+      <div class="d-grid gap-2 col-12 mx-auto">
+        <%= for post <- posts do %>
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title"><a href="/r/<%= post.subreddit %>/<%= post.date %>/<%= post.id %>"><%= post.title %></a></h5>
+              <h6 class="card-subtitle mb-2 text-body-secondary">
+                <small>
+                  <a href="/r/<%= post.subreddit %>/<%= post.date %>/"><%= post.subreddit %></a> - 
+                  <%= post.num_comments %> comment(s) -
+                  <%= Calendar.strftime(post.posted_at, "%Y-%m-%d") %>
+                </small>
+              </h6>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <div class="tab-pane" id="comments" role="tabpanel" aria-labelledby="comments-tab" tabindex="1">
+    <div class="row" style="margin-top: 5px;">
+      <div class="d-grid gap-2 col-12 mx-auto">
+        <%= for comment <- comments do %>
+          <div class="card" style="margin-bottom: 4px;">
+            <div class="card-body">
+              <blockquote class="blockquote mb-0" style="font-size: 1rem;">
+                <%= BdfrBrowser.RenderUtils.comment(comment.body) %>
+
+                <footer class="blockquote-footer">
+                  <a href="/user/<%= comment.author %>"><%= comment.author %></a>,
+                  <a href="/r/<%= comment.subreddit %>/<%= comment.post_date %>/<%= comment.post_id %>"><%= comment.post_title %></a>,
+                  <a href="/r/<%= comment.subreddit %>/<%= comment.post_date %>/"><%= comment.subreddit %></a>,
+                  <small><%= DateTime.to_iso8601(comment.posted_at) %></small>
+                </footer>
+              </blockquote>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

priv/templates/http/search_comments.eex

@@ -1,22 +0,0 @@
-<h2>Search: <%= search %></h2>
-
-<div class="row">
-  <div class="d-grid gap-2 col-12 mx-auto">
-    <%= for comment <- comments do %>
-      <div class="card" style="margin-bottom: 4px;">
-        <div class="card-body">
-          <blockquote class="blockquote mb-0" style="font-size: 1rem;">
-            <%= BdfrBrowser.RenderUtils.comment(comment.body) %>
-
-            <footer class="blockquote-footer">
-              <a href="/user/<%= comment.author %>"><%= comment.author %></a>,
-              <a href="/r/<%= comment.subreddit %>/<%= comment.post_date %>/<%= comment.post_id %>"><%= comment.post_title %></a>,
-              <a href="/r/<%= comment.subreddit %>/<%= comment.post_date %>/"><%= comment.subreddit %></a>,
-              <small><%= DateTime.to_iso8601(comment.posted_at) %></small>
-            </footer>
-          </blockquote>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>

priv/templates/http/search_posts.eex

@@ -1,20 +0,0 @@
-<h2>Search: <%= search %></h2>
-
-<div class="row text-center">
-  <div class="d-grid gap-2 col-12 mx-auto">
-    <%= for post <- posts do %>
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title"><a href="/r/<%= post.subreddit %>/<%= post.date %>/<%= post.id %>"><%= post.title %></a></h5>
-          <h6 class="card-subtitle mb-2 text-body-secondary">
-            <small>
-              <a href="/r/<%= post.subreddit %>/<%= post.date %>/"><%= post.subreddit %></a> - 
-              <%= post.num_comments %> comment(s) -
-              <%= Calendar.strftime(post.posted_at, "%Y-%m-%d") %>
-            </small>
-          </h6>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>