Separate tabs for pending and downloaded in media history (#508)

* Separate tabs for pending and downloaded in media history
 - closes #504

* correct query for pending state and remove unecessary assign

* correct pending where

---------

Co-authored-by: robs <git@robs.social>

lib/pinchflat_web/controllers/pages/page_html/history_table_live.ex

@@ -56,9 +56,9 @@ defmodule Pinchflat.Pages.HistoryTableLive do
     """
   end
 
-  def mount(_params, _session, socket) do
+  def mount(_params, session, socket) do
     page = 1
-    base_query = generate_base_query()
+    base_query = generate_base_query(session["media_state"])
     pagination_attrs = fetch_pagination_attributes(base_query, page)
 
     {:ok, assign(socket, Map.merge(pagination_attrs, %{base_query: base_query}))}
@@ -97,10 +97,17 @@ defmodule Pinchflat.Pages.HistoryTableLive do
     |> Repo.preload(:source)
   end
 
-  defp generate_base_query do
+  defp generate_base_query("pending") do
     MediaQuery.new()
     |> MediaQuery.require_assoc(:media_profile)
-    |> where(^dynamic(^MediaQuery.downloaded() or ^MediaQuery.pending()))
+    |> where(^dynamic(^MediaQuery.pending()))
+    |> order_by(desc: :id)
+  end
+
+  defp generate_base_query("downloaded") do
+    MediaQuery.new()
+    |> MediaQuery.require_assoc(:media_profile)
+    |> where(^dynamic(^MediaQuery.downloaded()))
     |> order_by(desc: :id)
   end
 

lib/pinchflat_web/controllers/pages/page_html/home.html.heex

@@ -41,9 +41,22 @@
 
 <div class="rounded-sm border shadow-default border-strokedark bg-boxdark mt-4 p-5">
   <span class="text-2xl font-medium mb-4">Media History</span>
-  <section class="mt-6">
-    {live_render(@conn, Pinchflat.Pages.HistoryTableLive)}
-  </section>
+  <.tabbed_layout>
+    <:tab title="Downloaded" id="downloaded">
+      {live_render(
+        @conn,
+        Pinchflat.Pages.HistoryTableLive,
+        session: %{"media_state" => "downloaded"}
+      )}
+    </:tab>
+    <:tab title="Pending" id="pending">
+      {live_render(
+        @conn,
+        Pinchflat.Pages.HistoryTableLive,
+        session: %{"media_state" => "pending"}
+      )}
+    </:tab>
+  </.tabbed_layout>
 </div>
 
 <div class="rounded-sm border shadow-default border-strokedark bg-boxdark mt-4 p-5">