format nodeOverview state badges, review textFilter

- textFilter now remains on compare

web/frontend/src/Jobs.root.svelte

@@ -155,8 +155,9 @@
     {#if !showCompare}
       <TextFilter
         {presetProject}
-        bind:authlevel
+        {authlevel}
-        bind:roles
+        {roles}
+        {filterBuffer}
         setFilter={(filter) => filterComponent.updateFilters(filter)}
       />
     {/if}

web/frontend/src/generic/Filters.svelte

@@ -241,12 +241,15 @@
     if (filters.project) opts.push(`project=${filters.project}`);
     if (filters.project && filters.projectMatch != "contains") // "contains" is default-case
      opts.push(`projectMatch=${filters.projectMatch}`);
-    if (filters.user.length != 0)
+    if (filters.user) {
+      if (filters.user.length != 0) {
         if (filters.userMatch != "in") {
           opts.push(`user=${filters.user}`);
         } else {
           for (let singleUser of filters.user) opts.push(`user=${singleUser}`);
         }
+      }
+    }
     if (filters.userMatch != "contains") // "contains" is default-case
       opts.push(`userMatch=${filters.userMatch}`);
     // Filter Modals

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

@@ -2,9 +2,10 @@
   @component Search Field for Job-Lists with separate mode if project filter is active
 
   Properties:
-  - `presetProject String?`: Currently active project filter [Default: '']
+  - `presetProject String?`: Currently active project filter preset [Default: '']
   - `authlevel Number?`: The current users authentication level [Default: null]
   - `roles [Number]?`: Enum containing available roles [Default: null]
+  - `filterBuffer [Obj]?`: Currently active filters, if any.
   - `setFilter Func`: The callback function to apply current filter selection
 -->
 
@@ -18,78 +19,69 @@
     presetProject = "",
     authlevel = null,
     roles = null,
+    filterBuffer = [],
     setFilter
   } = $props();
 
   /* Const Init*/
-  const throttle = 500;
+  const throttle = 300;
 
   /* Var Init */
-  let user = "";
-  let jobName = "";
   let timeoutId = null;
 
-  /* State Init */
-  let term = $state("");
-
   /* Derived */  
-  let project = $derived(presetProject ? presetProject : "");
+  const bufferProject = $derived.by(() => {
-  let mode = $derived(presetProject ? "jobName" : "project");
+    let bp = filterBuffer.find((fb) => 
+      Object.keys(fb).includes("project")
+    )
+    return bp?.project?.contains || null
+  });
+
+  const bufferUser = $derived.by(() => {
+    let bu = filterBuffer.find((fb) => 
+      Object.keys(fb).includes("user")
+    )
+    return bu?.user?.contains || null
+  });
+
+  const bufferJobName = $derived.by(() => {
+    let bjn = filterBuffer.find((fb) => 
+      Object.keys(fb).includes("jobName")
+    )
+    return bjn?.jobName?.contains || null
+  });
+
+  let mode = $derived.by(() => {
+    if (presetProject) return "jobName" // Search by jobName if presetProject set
+    else if (bufferUser) return "user"
+    else if (bufferJobName) return "jobName"
+    else return "project"
+  });
+
+  let term = $derived(bufferUser || bufferJobName || bufferProject || "");
 
   /* Functions */
-  function modeChanged() {
+  function inputChanged(sleep = throttle) {
+    if (timeoutId != null) clearTimeout(timeoutId);
     if (mode == "user") {
-      project = presetProject ? presetProject : "";
-      jobName = "";
-    } else if (mode == "project") {
-      user = "";
-      jobName = "";
-    } else {
-      project = presetProject ? presetProject : "";
-      user = "";
-    }
-    termChanged(0);
-  }
-
-  // Compatibility: Handle "user role" and "no role" identically
-  function termChanged(sleep = throttle) {
-    if (roles && authlevel >= roles.manager) {
-      if (mode == "user") user = term;
-      else if (mode == "project") project = term;
-      else jobName = term;
-
-      if (timeoutId != null) clearTimeout(timeoutId);
-
       timeoutId = setTimeout(() => {
-        setFilter({
+        setFilter({ user: term, project: (presetProject ? presetProject : null), jobName: null });
-          user,
-          project,
-          jobName
-        });
       }, sleep);    
-    } else {
+    } else if (mode == "project") {
-      if (mode == "project") project = term;
-      else jobName = term;
-
-      if (timeoutId != null) clearTimeout(timeoutId);
-
       timeoutId = setTimeout(() => {
-        setFilter({
+        setFilter({ project: term, user: null, jobName: null });
-          project,
+      }, sleep);    
-          jobName
+    } else if (mode == "jobName") {
-        });
+      timeoutId = setTimeout(() => {
+        setFilter({ jobName: term, user: null, project: (presetProject ? presetProject : null) });
       }, sleep);    
     }
   }
 
   function resetProject () {
-    mode = "project"
+    presetProject = "";
-    term = ""
+    term = "";
-    presetProject = ""
+    inputChanged(0);
-    project = ""
-    jobName = ""
-    user = ""
-    termChanged(0);
   }
 </script>
 
@@ -100,12 +92,12 @@
     class="form-select w-auto"
     title="Search Mode"
     bind:value={mode}
-    onchange={modeChanged}
+    onchange={() => inputChanged()}
   >
     {#if !presetProject}
       <option value={"project"}>Project</option>
     {/if}
-    {#if roles && authlevel >= roles.manager}
+    {#if roles && authlevel >= roles?.manager}
       <option value={"user"}>User</option>
     {/if}
     <option value={"jobName"}>Jobname</option>
@@ -113,8 +105,8 @@
   <Input
     type="text"
     bind:value={term}
-    onchange={() => termChanged()}
+    onchange={() => inputChanged()}
-    onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
+    onkeyup={(event) => inputChanged(event.key == "Enter" ? 0 : throttle)}
     placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}

web/frontend/src/systems/NodeOverview.svelte

@@ -156,7 +156,9 @@
               >
             </h4>
             <span style="margin-right: 0.5rem;">
-              <Badge color={stateColors[item?.state? item.state : 'notindb']}>{item?.state? item.state : 'notindb'}</Badge>
+              <Badge color={stateColors[item?.state? item.state : 'notindb']}>
+                State: {item?.state? item.state.charAt(0).toUpperCase() + item.state.slice(1) : 'Not in DB'}
+              </Badge>
             </span>
           </div>
           {#if item?.data}