Retained tab state using location hash (#161)

assets/js/app.js

@@ -22,6 +22,7 @@ import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import topbar from '../vendor/topbar'
 import Alpine from 'alpinejs'
+import './tabs'
 
 window.Alpine = Alpine
 Alpine.start()

assets/js/tabs.js

@@ -0,0 +1,20 @@
+window.setTabIndex = (index) => {
+  window.location.hash = `tab-${index}`
+
+  return index
+}
+
+// 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) => {
+  if (window.location.hash === '' || window.location.hash === '#') {
+    return 0
+  }
+
+  if (window.location.hash.startsWith('#tab-')) {
+    return parseInt(window.location.hash.replace('#tab-', ''))
+  }
+
+  return currIndex
+}

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -14,7 +14,8 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
   def tabbed_layout(assigns) do
     ~H"""
     <div
-      x-data="{ openTab: 0, activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
+      x-data="{ openTab: getTabIndex(0), activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
+      @hashchange.window="openTab = getTabIndex(openTab)"
       class="w-full"
     >
       <header class="flex flex-col md:flex-row md:justify-between border-b border-strokedark">
@@ -22,7 +23,7 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
           <a
             :for={{tab, idx} <- Enum.with_index(@tab)}
             href="#"
-            @click.prevent={"openTab = #{idx}"}
+            @click.prevent={"openTab = setTabIndex(#{idx})"}
             x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
             class="border-b-2 py-4 w-full sm:w-fit text-sm font-medium hover:text-meta-5 md:text-base"
           >

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

@@ -52,7 +52,9 @@
       <:tab title="Sources">
         <.table rows={@media_profile.sources} table_class="text-black dark:text-white">
           <:col :let={source} label="Name">
-            <%= source.custom_name || source.collection_name %>
+            <.subtle_link href={~p"/sources/#{source.id}"}>
+              <%= source.custom_name || source.collection_name %>
+            </.subtle_link>
           </:col>
           <:col :let={source} label="Type"><%= source.collection_type %></:col>
           <:col :let={source} label="Should Download?">