From f65dc92490178e5c6a04e42fe9d5c1fb2a2aa7cc Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 17 Sep 2024 17:59:00 +1000
Subject: [PATCH] refactor: Improve tabbed container and add active class to
 selected tab

---
 .../components/TabbedContainer.svelte         |  2 +-
 .../components/themes/BackgroundItem.svelte   | 14 +++---
 .../themes/BackgroundSelector.svelte          | 47 ++++++++++---------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte
index 3cd48e02..71f8a3fb 100644
--- a/src/svelte-interface/components/TabbedContainer.svelte
+++ b/src/svelte-interface/components/TabbedContainer.svelte
@@ -72,7 +72,7 @@
     >
       <div class="flex">
         {#each tabs as { Content }, index}
-          <div class="absolute w-full h-full transition-opacity duration-300 overflow-y-scroll {activeTab === index ? 'opacity-100' : 'opacity-0'}"
+          <div class="absolute w-full h-full transition-opacity duration-300 overflow-y-scroll tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
             style="left: {index * 100}%;">
             {@render Content()}
           </div>
diff --git a/src/svelte-interface/components/themes/BackgroundItem.svelte b/src/svelte-interface/components/themes/BackgroundItem.svelte
index 88c84061..e03945a0 100644
--- a/src/svelte-interface/components/themes/BackgroundItem.svelte
+++ b/src/svelte-interface/components/themes/BackgroundItem.svelte
@@ -2,8 +2,8 @@
   interface Background {
     id: string;
     type: string;
-    blob: Blob;
-    url?: string;
+    blob: Blob | null;
+    url?: string | undefined;
   }
 
   let { bg, isSelected, isEditMode, onClick, onDelete } = $props<{ bg: Background, isSelected: boolean, isEditMode: boolean, onClick: () => void, onDelete: () => void }>();
@@ -28,9 +28,11 @@
       <div class="w-4 h-0.5 bg-white"></div>
     </div>
   {/if}
-  {#if bg.type === 'image'}
-    <img class="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
-  {:else if bg.type === 'video'}
-    <video muted loop autoplay src={bg.url} class="object-cover w-full h-full rounded-xl"></video>
+  {#if bg.url}
+    {#if bg.type === 'image'}
+      <img class="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
+    {:else if bg.type === 'video'}
+      <video muted loop autoplay src={bg.url} class="object-cover w-full h-full rounded-xl"></video>
+    {/if}
   {/if}
 </div>
\ No newline at end of file
diff --git a/src/svelte-interface/components/themes/BackgroundSelector.svelte b/src/svelte-interface/components/themes/BackgroundSelector.svelte
index f87b7aac..b9b66883 100644
--- a/src/svelte-interface/components/themes/BackgroundSelector.svelte
+++ b/src/svelte-interface/components/themes/BackgroundSelector.svelte
@@ -2,21 +2,21 @@
   import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader'
   import BackgroundUploader from './BackgroundUploader.svelte';
   import BackgroundItem from './BackgroundItem.svelte'
-  import { onMount } from 'svelte'
+  import { onMount, onDestroy } from 'svelte'
   import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
   import { delay } from 'lodash'
 
   let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
-  let backgrounds = $state<{ id: string; type: string; blob: Blob; url?: string }[]>([]);
-  let isLoading = $state<boolean>(false);
+  let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
   let error = $state<string | null>(null);
 
   let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
   let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
 
   let isVisible = $state(false);
-  let observer: IntersectionObserver;
   let element: HTMLElement;
+  let observer: MutationObserver;
+  let parentElement: HTMLElement | null = null;
 
   async function getTheme() {
     return localStorage.getItem('selectedBackground');
@@ -56,7 +56,6 @@
 
   async function loadBackgroundMetadata(): Promise<void> {
     try {
-      isLoading = true;
       error = null;
 
       if (!isIndexedDBSupported()) {
@@ -75,14 +74,11 @@
       } else {
         error = 'An unknown error occurred';
       }
-    } finally {
-      isLoading = false;
     }
   }
 
   async function loadFullBackgrounds(): Promise<void> {
     try {
-      isLoading = true;
       error = null;
 
       if (!isIndexedDBSupported()) {
@@ -97,8 +93,6 @@
       } else {
         error = 'An unknown error occurred';
       }
-    } finally {
-      isLoading = false;
     }
   }
 
@@ -152,24 +146,33 @@
     }
   });
 
+  function checkActiveClass() {
+    if (parentElement?.classList.contains('active')) {
+      delay(() => {
+        isVisible = true;
+        loadFullBackgrounds();
+      }, 600);
+    }
+  }
+
   onMount(() => {
     loadBackgroundMetadata();
     
-    observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        delay(() => {
-          isVisible = true;
-          loadFullBackgrounds();
-        }, 450);
+    parentElement = element.closest('.tab');
+    if (parentElement) {
+      observer = new MutationObserver(checkActiveClass);
+      observer.observe(parentElement, { attributes: true, attributeFilter: ['class'] });
+
+      return () => {
         observer.disconnect();
-      }
-    });
+      };
+    }
+  });
 
-    observer.observe(element);
-
-    return () => {
+  onDestroy(() => {
+    if (observer) {
       observer.disconnect();
-    };
+    }
   });
 </script>