Migrate and fix filter component and subcomponents

web/frontend/src/generic/helper/Refresher.svelte

@@ -10,15 +10,7 @@
 <script>
   import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
 
-  let refreshInterval = $state(null);
-  let refreshIntervalId = null;
-
-  function refreshIntervalChanged() {
-    if (refreshIntervalId != null) clearInterval(refreshIntervalId);
-    if (refreshInterval == null) return;
-    refreshIntervalId = setInterval(() => dispatch("refresh"), refreshInterval);
-  }
-
+  /* Svelte 5 Props */
   let {
     initially = null,
     onRefresh
@@ -28,6 +20,19 @@
     refreshInterval = initially * 1000;
     refreshIntervalChanged();
   }
+
+  /* State Init */
+  let refreshInterval = $state(null);
+
+  /* Var Init */
+  let refreshIntervalId = null;
+
+  /* Functions */
+  function refreshIntervalChanged() {
+    if (refreshIntervalId != null) clearInterval(refreshIntervalId);
+    if (refreshInterval == null) return;
+    refreshIntervalId = setInterval(() => onRefresh(), refreshInterval);
+  }
 </script>
 
 <InputGroup>

web/frontend/src/generic/helper/Tag.svelte

@@ -9,21 +9,30 @@
 
 <script>
     import { getContext } from 'svelte'
-    const allTags = getContext('tags'),
-          initialized = getContext('initialized')
+    
+    /* Svelte 5 Props */
+    let {
+        id = null,
+        tag = null,
+        clickable = true
+    } = $props();
 
-    export let id = null
-    export let tag = null
-    export let clickable = true
+    /* Derived */
+    const allTags = $derived(getContext('tags'));
+    const initialized = $derived(getContext('initialized'));
 
-    if (tag != null && id == null)
-        id = tag.id
+    /* Effects */
+    $effect(() => {
+        if (tag != null && id == null)
+            id = tag.id
+    });
 
-    $: {
+    $effect(() => {
         if ($initialized && tag == null)
             tag = allTags.find(tag => tag.id == id)
-    }
+    });
 
+    /* Function*/
     function getScopeColor(scope) {
         switch (scope) {
         case "admin":

web/frontend/src/generic/helper/TextFilter.svelte

@@ -14,7 +14,8 @@
   import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";
   import { scramble, scrambleNames } from "../utils.js";
 
-  // If page with this component has project preset, keep preset until reset
+  // Note: If page with this component has project preset, keep preset until reset
+  /* Svelte 5 Props */
   let {
     presetProject = "",
     authlevel = null,
@@ -22,14 +23,20 @@
     setFilter
   } = $props();
 
-  let mode = $state(presetProject ? "jobName" : "project");
-  let term = $state("");
+  /* Const Init*/
+  const throttle = 500;
 
+  /* Var Init */
   let user = "";
   let project = presetProject ? presetProject : "";
   let jobName = "";
-  const throttle = 500;
+  let timeoutId = null;
 
+  /* State Init */
+  let mode = $state(presetProject ? "jobName" : "project");
+  let term = $state("");
+
+  /* Functions */
   function modeChanged() {
     if (mode == "user") {
       project = presetProject ? presetProject : "";
@@ -44,7 +51,6 @@
     termChanged(0);
   }
 
-  let timeoutId = null;
   // Compatibility: Handle "user role" and "no role" identically
   function termChanged(sleep = throttle) {
     if (roles && authlevel >= roles.manager) {