Auto-refresh when opening thread watcher

src/Components/App.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { hasContext, onDestroy } from "svelte";
+  import { slide } from "svelte/transition";
+
   import Dialog from "./Dialog.svelte";
 
   import Tag from "./Tag.svelte";
@@ -45,7 +47,13 @@
 
   const boardname = location.pathname.match(/\/([^/]*)\//)![1];
   let updating = false;
-  let threads: { id: number; cnt: number }[] = [];
+  let threads: {
+    id: number;
+    cnt: number;
+    pees: number;
+    eyes: number;
+    other: number;
+  }[] = [];
   async function updateThreads() {
     updating = true;
     let params = "";
@@ -82,7 +90,8 @@
   });
 </script>
 
-<div class="backpanel" class:enabled={visible} class:disabled={!visible}>
+{#if visible}
+  <div class="backpanel" transition:slide>
     <div class="content">
       <h1>PEE Settings</h1>
       <hr />
@@ -91,7 +100,7 @@
           <Tab>General</Tab>
           <Tab>External</Tab>
           <Tab>File Host</Tab>
-        <Tab>Thread Watcher</Tab>
+          <Tab on:select={() => updateThreads()}>Thread Watcher</Tab>
           {#if $appState.akValid}
             <Tab>Hydrus</Tab>
           {/if}
@@ -160,7 +169,8 @@
             <input type="checkbox" bind:checked={$settings.ep} />
             <!-- svelte-ignore a11y-missing-attribute -->
             Disable embedded file preloading<a
-            title="You might still want to enable 'preload external files'">?</a
+              title="You might still want to enable 'preload external files'"
+              >?</a
             >
           </label>
           <label>
@@ -324,10 +334,9 @@
             >]
           </label>
 
-        <button on:click={updateThreads} disabled={updating}>Refresh</button>
-
           {#if !updating}
             <div class="bepis">
+              <p>Format is (embedded links / link in filename)</p>
               {#each threads as thread}
                 <div class="mbepis">
                   <a
@@ -336,7 +345,7 @@
                       "/thread/" +
                       thread.id}>>>{thread.id}</a
                   >
-                ({thread.cnt} embeds)
+                  ({thread.pees} / {thread.eyes + thread.other})
                 </div>
               {/each}
             </div>
@@ -351,7 +360,8 @@
         {/if}
       </Tabs>
     </div>
-</div>
+  </div>
+{/if}
 
 <style scoped>
   .bepis {
@@ -371,14 +381,6 @@
     width: 95%;
   }
 
-  .enabled {
-    display: block;
-  }
-
-  .disabled {
-    display: none;
-  }
-
   .content {
     display: flex;
     flex-direction: column;
@@ -420,7 +422,7 @@
     top: 32px;
     border: 1px solid;
     border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.8);
     pointer-events: all;
     backdrop-filter: blur(9px);
     max-height: 80vh;

src/Components/Tab.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { getContext } from 'svelte'
+  import { createEventDispatcher, getContext } from 'svelte'
   import { TABS } from './Tabs.svelte'
 
   const tab = {}
   const { registerTab, selectTab, selectedTab } = getContext(TABS)
+  const dispatch = createEventDispatcher();
 
   registerTab(tab)
 </script>
 
-<button class:selected={$selectedTab === tab} on:click={() => selectTab(tab)}>
+<button class:selected={$selectedTab === tab} on:click={() => {selectTab(tab); dispatch("select")}}>
   <slot />
 </button>
 

src/Components/Tabs.svelte

@@ -1,9 +1,10 @@
 <script context="module">
   export const TABS = {}
+
 </script>
 
 <script lang="ts">
-  import { setContext, onDestroy } from 'svelte'
+  import { setContext, onDestroy, createEventDispatcher } from 'svelte'
   import { writable } from 'svelte/store'
   import type Tab from './Tab.svelte'
   import type TabPanel from './TabPanel.svelte'