Fixes tag category bar to show available skills (#1636)

plugins/tags-resources/src/components/CategoryBar.svelte

@@ -41,15 +41,43 @@
   let categoryKeys: Ref<TagCategory>[] = []
 
   const elementsQuery = createQuery()
-  $: elementsQuery.query(
+  $: if ((tagElements?.size ?? 0) > 0) {
-    tags.class.TagElement,
+    elementsQuery.query(
-    { targetClass },
+      tags.class.TagElement,
+      { targetClass },
+      (res) => {
+        elements = res
+      },
+      {
+        sort: {
+          title: SortingOrder.Ascending
+        }
+      }
+    )
+  }
+
+  type TagElementInfo = { count: number; modifiedOn: number }
+  let tagElements: Map<Ref<TagElement>, TagElementInfo> | undefined = undefined
+  const refQuery = createQuery()
+  $: refQuery.query(
+    tags.class.TagReference,
+    {},
     (res) => {
-      elements = res
+      const result = new Map<Ref<TagElement>, TagElementInfo>()
+
+      for (const d of res) {
+        const v = result.get(d.tag) ?? { count: 0, modifiedOn: 0 }
+        v.count++
+        v.modifiedOn = Math.max(v.modifiedOn, d.modifiedOn)
+        result.set(d.tag, v)
+      }
+
+      tagElements = result
     },
     {
-      sort: {
+      projection: {
-        title: SortingOrder.Ascending
+        _id: 1,
+        tag: 1
       }
     }
   )

plugins/tags-resources/src/components/TagsCategoryPopup.svelte

@@ -128,7 +128,7 @@
       {#if elements.length > 0}
         <div class="sticky-wrapper">
           <div class="menu-group" style:overflow="visible">
-            {#each elements as element}
+            {#each elements.filter((it) => tagElements?.has(it._id)) as element}
               <button
                 class="menu-item"
                 on:click={() => {
@@ -183,13 +183,6 @@
 </div>
 
 <style lang="scss">
-  // .counter {
-  //   padding-right: 0.125rem;
-  //   min-width: 1.5rem;
-  //   text-align: right;
-  //   font-size: 0.8125rem;
-  //   color: var(--caption-color);
-  // }
   .empty {
     display: flex;
     justify-content: center;