refactor: Move close button to store header

src/SEQTA.ts

@@ -345,44 +345,6 @@ export function OpenWhatsNewPopup() {
   })
 }
 
-export function OpenStorePage() {
-  const remove = renderStore()
-  /* export function renderStore() {
-  const container = document.querySelector('#container');
-  if (!container) {
-    throw new Error('Container not found');
-  }
-  
-  const child = document.createElement('div');
-  child.id = 'store';
-  container!.appendChild(child);
-
-  const shadow = child.attachShadow({ mode: 'open' });
-  const app = renderSvelte(Store, shadow);
-
-  return () => unmount(app)
-}
- */
-
-  // add a close button to the page
-  const closeButton = document.createElement('button')
-  closeButton.id = 'storeclosebutton'
-  closeButton.classList.add('closeButton')
-  closeButton.innerHTML = 'Close'
-  document.body.appendChild(closeButton)
-
-  closeButton.addEventListener('click', () => {
-    closeButton.classList.add('hide')
-    document.getElementById('store')!.classList.add('hide')
-
-    setTimeout(() => {
-      remove()
-      document.body.removeChild(closeButton)
-      document.getElementById('store')!.remove()
-    }, 500)
-  })
-}
-
 export function OpenAboutPage() {
   const background = document.createElement('div')
   background.id = 'whatsnewbk'

src/css/injected.scss

@@ -77,24 +77,6 @@ html {
     animation: fadeOut 500ms forwards;
   }
 }
-#storeclosebutton {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-  animation: fadeIn 500ms forwards;
-  animation-delay: 200ms;
-  opacity: 0;
-
-  &.hide {
-    animation: fadeOut 500ms forwards;
-    pointer-events: none;
-  }
-}
-
-.dark #storeclosebutton {
-  color: white;
-}
 
 @keyframes fadeIn {
   from {

src/seqta/ui/renderStore.ts

@@ -3,6 +3,12 @@ import Store from '@/svelte-interface/pages/store.svelte'
 
 import { unmount } from 'svelte'
 
+let remove: () => void
+
+export function OpenStorePage() {
+  remove = renderStore()
+}
+
 export function renderStore() {
   const container = document.querySelector('#container');
   if (!container) {
@@ -18,3 +24,12 @@ export function renderStore() {
 
   return () => unmount(app)
 }
+
+export function closeStore() {
+  document.getElementById('store')!.classList.add('hide')
+
+    setTimeout(() => {
+      remove()
+      document.getElementById('store')!.remove()
+    }, 500)
+}

src/svelte-interface/components/store/Header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import logo from '@/resources/icons/betterseqta-dark-full.png';
   import logoDark from '@/resources/icons/betterseqta-light-full.png';
+  import { closeStore } from '@/seqta/ui/renderStore'
   import browser from 'webextension-polyfill';
 
   // Props
@@ -40,6 +41,14 @@
         stroke="currentColor">
         <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
       </svg>
+
+      <!-- Close Button -->
+      <button
+        onclick={closeStore}
+        class="p-1 px-3"
+      >
+        <span class="text-2xl font-IconFamily">&#xed8a;</span>
+      </button>
     </div>
   </div>
 </header>

src/svelte-interface/components/themes/ThemeSelector.svelte

@@ -8,7 +8,7 @@
   import { disableTheme } from '@/seqta/ui/themes/disableTheme'
   import { setTheme } from '@/seqta/ui/themes/setTheme'
   import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
-  import { OpenStorePage } from '@/SEQTA'
+  import { OpenStorePage } from '@/seqta/ui/renderStore'
 
   let themes = $state<ThemeList | null>(null);
   let { isEditMode } = $props<{ isEditMode: boolean }>();