pinchflat/lib/pinchflat_web/controllers/pages/page_html/home.html.heex
Daniel Da Cunha 6cb715c1d0
Move Active Tasks to tab in Media History section (#836)
Consolidate the home page UI by moving Active Tasks from a separate
section into a third tab alongside Downloaded and Pending tabs.

Co-authored-by: Daniel <ddacunha@MacBook-Pro-14.local>
2025-12-16 09:29:32 -08:00

63 lines
2.4 KiB
Text

<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
<a href={~p"/media_profiles"} class="flex flex-col items-center py-2">
<span class="text-md font-medium">
Media <.pluralize count={@media_profile_count} word="Profile" />
</span>
<h4 class="text-title-md font-bold text-white">
<.localized_number number={@media_profile_count} />
</h4>
</a>
</div>
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
<a href={~p"/sources"} class="flex flex-col items-center py-2">
<span class="text-md font-medium">
<.pluralize count={@source_count} word="Source" />
</span>
<h4 class="text-title-md font-bold text-white">
<.localized_number number={@source_count} />
</h4>
</a>
</div>
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
<span class="flex flex-col items-center py-2">
<span class="text-md font-medium">
<.pluralize count={@media_item_count} word="Download" />
</span>
<h4 class="text-title-md font-bold text-white">
<.localized_number number={@media_item_count} />
</h4>
</span>
</div>
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
<span class="flex flex-col items-center py-2">
<span class="text-md font-medium">Library Size</span>
<h4 class="text-title-md font-bold text-white">
<.readable_filesize byte_size={@media_item_size} />
</h4>
</span>
</div>
</div>
<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>
<.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>
<:tab title="Active Tasks" id="active-tasks">
{live_render(@conn, Pinchflat.Pages.JobTableLive)}
</:tab>
</.tabbed_layout>
</div>