fix: scope and sort franchise relations

static/css/style.css

@@ -257,7 +257,7 @@ main {
 }
 
 .is-hidden {
-  display: none;
+  display: none !important;
 }
 
 .grid-full-width {
@@ -347,6 +347,12 @@ main {
   overflow: hidden;
 }
 
+.relation-type {
+  margin-top: var(--space-1);
+  color: var(--text-faint);
+  font-size: 0.76rem;
+}
+
 .catalog-item:hover .catalog-title,
 .relation-card:hover .relation-title,
 .notification-card:hover .notification-title {
@@ -782,6 +788,12 @@ main {
   line-height: 1.2;
 }
 
+.relations-controls {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
 .anime-side-section h3 {
   margin: 0 0 var(--space-2);
   color: var(--text-faint);

static/js/anime.js

@@ -10,6 +10,36 @@
 
   window.toggleDropdown = toggleDropdown
 
+  const toggleRelationExtras = (showExtras) => {
+    const extras = document.querySelectorAll('.relation-extra')
+    extras.forEach((item) => {
+      item.classList.toggle('is-hidden', !showExtras)
+    })
+
+    const mainTab = document.getElementById('relations-main-tab')
+    const extraTab = document.getElementById('relations-extra-tab')
+    if (mainTab) {
+      mainTab.classList.toggle('active', !showExtras)
+    }
+    if (extraTab) {
+      extraTab.classList.toggle('active', showExtras)
+    }
+  }
+
+  window.toggleRelationExtras = toggleRelationExtras
+  window.addEventListener('load', () => toggleRelationExtras(false))
+
+  document.body.addEventListener('htmx:afterSwap', (event) => {
+    const target = event.target
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    if (target.querySelector('#relations-grid') || target.id === 'relations-grid') {
+      toggleRelationExtras(false)
+    }
+  })
+
   document.addEventListener('click', (event) => {
     const dropdown = document.getElementById('watchlist-dropdown')
     if (!dropdown) {