From 3b1c1692fbb5c64d5dd4bb79dce83832df3f71e3 Mon Sep 17 00:00:00 2001
From: Kieran <kieran.eglin@gmail.com>
Date: Wed, 3 Apr 2024 11:05:49 -0700
Subject: [PATCH] Retained tab state using location hash (#161)

---
 assets/js/app.js                              |  1 +
 assets/js/tabs.js                             | 20 +++++++++++++++++++
 .../custom_components/tab_components.ex       |  5 +++--
 .../media_profile_html/show.html.heex         |  4 +++-
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/tabs.js

diff --git a/assets/js/app.js b/assets/js/app.js
index 7e99adc..f161731 100644
--- a/assets/js/app.js
+++ b/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()
diff --git a/assets/js/tabs.js b/assets/js/tabs.js
new file mode 100644
index 0000000..964223d
--- /dev/null
+++ b/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
+}
diff --git a/lib/pinchflat_web/components/custom_components/tab_components.ex b/lib/pinchflat_web/components/custom_components/tab_components.ex
index 3e6876d..160d073 100644
--- a/lib/pinchflat_web/components/custom_components/tab_components.ex
+++ b/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"
           >
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
index 0160e86..009f2dd 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
+++ b/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?">