Separate tabs for pending and downloaded in media history

- closes #504

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

@@ -56,12 +56,13 @@ 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()
+    media_state = session["media_state"]
+    base_query = generate_base_query(media_state)
     pagination_attrs = fetch_pagination_attributes(base_query, page)
 
-    {:ok, assign(socket, Map.merge(pagination_attrs, %{base_query: base_query}))}
+    {:ok, assign(socket, Map.merge(pagination_attrs, %{base_query: base_query, media_state: media_state}))}
   end
 
   def handle_event("page_change", %{"direction" => direction}, %{assigns: assigns} = socket) do
@@ -97,13 +98,20 @@ 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()))
     |> 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
+
   defp format_datetime(nil), do: ""
 
   defp format_datetime(datetime) do

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">