Updated to Svelte 4.2.9, Frontend: Optimised pill to not bind mouseover and other functions for unused tooltips. Removed unused function in +page.svelte.

frontend/package-lock.json

@@ -19,7 +19,7 @@
         "@sveltejs/adapter-auto": "^2.0.0",
         "@sveltejs/kit": "^1.20.4",
         "autoprefixer": "10.4.16",
-        "svelte": "^4.0.5",
+        "svelte": "^4.2.9",
         "vite": "^4.4.2"
       }
     },
@@ -668,9 +668,9 @@
       }
     },
     "node_modules/axobject-query": {
-      "version": "3.2.1",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
-      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
@@ -1326,17 +1326,18 @@
       }
     },
     "node_modules/svelte": {
-      "version": "4.2.5",
+      "version": "4.2.9",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.9.tgz",
-      "integrity": "sha512-P9YPKsGkNdw4OJbtpd1uzimQHPj7Ai2sPcOHmmD6VgkFhFDmcYevQi7vE4cQ1g8/Vs64aL2TwMoCNFAzv7TPaQ==",
+      "integrity": "sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
         "acorn": "^8.9.0",
         "aria-query": "^5.3.0",
-        "axobject-query": "^3.2.1",
+        "axobject-query": "^4.0.0",
         "code-red": "^1.0.3",
         "css-tree": "^2.3.1",
         "estree-walker": "^3.0.3",
@@ -1444,9 +1445,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",

frontend/package.json

@@ -11,7 +11,7 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
     "autoprefixer": "10.4.16",
-    "svelte": "^4.0.5",
+    "svelte": "^4.2.9",
     "vite": "^4.4.2"
   },
   "type": "module",

frontend/src/lib/components/pill.svelte

@@ -72,49 +72,70 @@
 
   afterUpdate(async () => {
     // 16 = arrow size + something
-    offsetUp = main_pill.offsetTop - pill_tooltip.offsetHeight - 16;
+    if (show_tooltip && tooltip_data.length > 0) {
+      offsetUp = main_pill.offsetTop - pill_tooltip.offsetHeight - 16;
+    }
   });
 </script>
 
-<svelte:window bind:innerWidth bind:scrollY/>
+<svelte:window bind:innerWidth bind:scrollY />
 
-<div
+{#if show_tooltip && tooltip_data.length > 0}
-  class={white ? "pill-container pill-white" : "pill-container pill-black"}
+  <div
-  {style}
+    class={white ? "pill-container pill-white" : "pill-container pill-black"}
-  on:focus={() => true}
+    {style}
-  on:mouseover={() => showingTooltip(true)}
+    on:focus={() => true}
-  on:mouseleave={() => showingTooltip(false)}
+    on:mouseover={() => showingTooltip(true)}
-  role="link"
+    on:mouseleave={() => showingTooltip(false)}
-  tabindex="0"
+    role="link"
-  bind:this={main_pill}
+    tabindex="0"
->
+    bind:this={main_pill}
-  {#if show_tooltip === true}
+  >
-    <div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} />
+    {#if show_tooltip === true}
-    <div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} />
+      <div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} />
-    <div class="pill-tooltip" bind:this={pill_tooltip}>
+      <div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} />
-      {#each tooltip_data as td}
+      <div class="pill-tooltip" bind:this={pill_tooltip}>
-        <div>
+        {#each tooltip_data as td}
-          <span>{td.title}</span>
+          <div>
-          <div class="pill-last">
+            <span>{td.title}</span>
-            <button
+            <div class="pill-last">
-              class="pill-view"
+              <button
-              on:click={() => showPopup(true, td.project_id)}
+                class="pill-view"
-              ><SvgIcon size="20" path={mdiPlus} type="mdi" /></button
+                on:click={() => showPopup(true, td.project_id)}
-            >
+                ><SvgIcon size="20" path={mdiPlus} type="mdi" /></button
+              >
+            </div>
           </div>
-        </div>
+        {/each}
-      {/each}
+      </div>
-    </div>
+    {/if}
-  {/if}
+    {#if type_icon === "simpleicons"}
-  {#if type_icon === "simpleicons"}
+      <img
-    <img
+        height="20"
-      height="20"
+        width="20"
-      width="20"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
-      src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
+        alt={name}
-      alt={name}
+      />
-    />
+    {:else}
-  {:else}
+      <SvgIcon type="mdi" path={icon} size="20" />
-    <SvgIcon type="mdi" path={icon} size="20" />
+    {/if}
-  {/if}
+    <p>{name}</p>
-  <p>{name}</p>
+  </div>
-</div>
+{:else}
+  <div
+    class={white ? "pill-container pill-white" : "pill-container pill-black"}
+    {style}
+  >
+    {#if type_icon === "simpleicons"}
+      <img
+        height="20"
+        width="20"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
+        alt={name}
+      />
+    {:else}
+      <SvgIcon type="mdi" path={icon} size="20" />
+    {/if}
+    <p>{name}</p>
+  </div>
+{/if}

frontend/src/routes/+page.svelte

@@ -67,8 +67,8 @@
         containerCv.offsetHeight - sidebar.offsetHeight
       }px`;
     }
-	// Only putting absolute if on little screen 
+    // Only putting absolute if on little screen
-	else if (littleScreen) {
+    else if (littleScreen) {
       sidebar.style.position = "absolute";
       sidebar.style.top = "";
     }
@@ -76,9 +76,6 @@
 
   // Mobile check
   $: innerWidth = 0;
-  function mobileCheck() {
-    //console.log(innerWidth);
-  }
 </script>
 
 <svelte:window
@@ -86,7 +83,6 @@
   bind:innerHeight
   bind:innerWidth
   on:scroll={sidebarScrollingHandler}
-  on:resize={mobileCheck}
 />
 
 {#if data.status == 0}