Refactored tab layout to grab tabs by name

assets/js/tabs.js

@@ -1,20 +1,20 @@
-window.setTabIndex = (index) => {
-  window.location.hash = `tab-${index}`
+window.setTabByName = (tabName) => {
+  window.location.hash = `tab-${tabName}`
 
-  return index
+  return tabName
 }
 
 // The conditionals and currIndex stuff ensures that
 // the tab index is always set to 0 if the hash is empty
 // AND other hash values are ignored
-window.getTabIndex = (currIndex) => {
+window.getTabFromHash = (currentTabName, defaultTabName) => {
   if (window.location.hash === '' || window.location.hash === '#') {
-    return 0
+    return defaultTabName
   }
 
   if (window.location.hash.startsWith('#tab-')) {
-    return parseInt(window.location.hash.replace('#tab-', ''))
+    return window.location.hash.replace('#tab-', '')
   }
 
-  return currIndex
+  return currentTabName
 }

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -6,25 +6,32 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
   Takes a list of tabs and renders them in a tabbed layout.
   """
   slot :tab, required: true do
+    attr :id, :string, required: true
     attr :title, :string, required: true
   end
 
   slot :tab_append, required: false
 
   def tabbed_layout(assigns) do
+    assigns = Map.put(assigns, :first_tab_id, hd(assigns.tab).id)
+
     ~H"""
     <div
-      x-data="{ openTab: getTabIndex(0), activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
-      @hashchange.window="openTab = getTabIndex(openTab)"
+      x-data={"{
+        openTab: getTabFromHash('#{@first_tab_id}', '#{@first_tab_id}'),
+        activeClasses: 'text-meta-5 border-meta-5',
+        inactiveClasses: 'border-transparent'
+      }"}
+      @hashchange.window={"openTab = getTabFromHash(openTab, '#{@first_tab_id}')"}
       class="w-full"
     >
       <header class="flex flex-col md:flex-row md:justify-between border-b border-strokedark">
         <div class="flex flex-wrap gap-5 sm:gap-10">
           <a
-            :for={{tab, idx} <- Enum.with_index(@tab)}
+            :for={tab <- @tab}
             href="#"
-            @click.prevent={"openTab = setTabIndex(#{idx})"}
-            x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
+            @click.prevent={"openTab = setTabByName('#{tab.id}')"}
+            x-bind:class={"openTab === '#{tab.id}' ? activeClasses : inactiveClasses"}
             class="border-b-2 py-4 w-full sm:w-fit text-sm font-medium hover:text-meta-5 md:text-base"
           >
             <span class="text-xl"><%= tab.title %></span>
@@ -35,7 +42,7 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
         </div>
       </header>
       <div class="mt-4 min-h-60">
-        <div :for={{tab, idx} <- Enum.with_index(@tab)} x-show={"openTab === #{idx}"} class="font-medium leading-relaxed">
+        <div :for={tab <- @tab} x-show={"openTab === '#{tab.id}'"} class="font-medium leading-relaxed">
           <%= render_slot(tab) %>
         </div>
       </div>

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -36,7 +36,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         </tr>
       </thead>
       <tbody>
-        <tr :for={row <- @rows} class="border-b border-boxdark hover:border-strokedark">
+        <tr :for={row <- @rows} class="hover:bg-strokedark">
           <td
             :for={col <- @col}
             class={[

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -23,7 +23,7 @@
         <.actions_dropdown media_item={@media_item} />
       </:tab_append>
 
-      <:tab title="Media">
+      <:tab title="Media" id="media">
         <div class="flex flex-col gap-10 dark:text-white">
           <%= if media_file_exists?(@media_item) do %>
             <section class="grid grid-cols-1 xl:grid-cols-2 xl:gap-6 mt-6">
@@ -52,7 +52,7 @@
           </section>
         </div>
       </:tab>
-      <:tab title="Tasks">
+      <:tab title="Tasks" id="tasks">
         <%= if match?([_|_], @media_item.tasks) do %>
           <.table rows={@media_item.tasks} table_class="text-black dark:text-white">
             <:col :let={task} label="Worker">

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -23,13 +23,13 @@
         <.actions_dropdown media_profile={@media_profile} />
       </:tab_append>
 
-      <:tab title="Media Profile">
+      <:tab title="Media Profile" id="media-profile">
         <div class="flex flex-col gap-10 text-white">
           <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
           <.list_items_from_map map={Map.from_struct(@media_profile)} />
         </div>
       </:tab>
-      <:tab title="Sources">
+      <:tab title="Sources" id="sources">
         <.table rows={@sources} table_class="text-black dark:text-white">
           <:col :let={source} label="Name">
             <.subtle_link href={~p"/sources/#{source.id}"}>

lib/pinchflat_web/controllers/sources/source_html/index.html.heex

@@ -19,8 +19,8 @@
           </.subtle_link>
         </:col>
         <:col :let={source} label="Type"><%= source.collection_type %></:col>
-        <:col :let={source} label="Downloaded"><%= source.downloaded_count %></:col>
         <:col :let={source} label="Pending"><%= source.pending_count %></:col>
+        <:col :let={source} label="Downloaded"><%= source.downloaded_count %></:col>
         <:col :let={source} label="Retention">
           <%= if source.retention_period_days && source.retention_period_days > 0 do %>
             <%= source.retention_period_days %> day(s)

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -23,7 +23,7 @@
         <.actions_dropdown source={@source} conn={@conn} />
       </:tab_append>
 
-      <:tab title="Source">
+      <:tab title="Source" id="source">
         <div class="flex flex-col gap-10 text-white">
           <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
           <section>
@@ -36,21 +36,21 @@
           <.list_items_from_map map={Map.from_struct(@source)} />
         </div>
       </:tab>
-      <:tab title="Pending Media">
+      <:tab title="Pending Media" id="pending">
         <%= live_render(
           @conn,
           Pinchflat.Sources.MediaItemTableLive,
           session: %{"source_id" => @source.id, "media_state" => "pending"}
         ) %>
       </:tab>
-      <:tab title="Downloaded Media">
+      <:tab title="Downloaded Media" id="downloaded">
         <%= live_render(
           @conn,
           Pinchflat.Sources.MediaItemTableLive,
           session: %{"source_id" => @source.id, "media_state" => "downloaded"}
         ) %>
       </:tab>
-      <:tab title="Pending Tasks">
+      <:tab title="Pending Tasks" id="tasks">
         <%= if match?([_|_], @pending_tasks) do %>
           <.table rows={@pending_tasks} table_class="text-black dark:text-white">
             <:col :let={task} label="Worker">