Merge pull request #107 from koloml/feature/groups-suffix

Tag Groups: Support matching custom categories by suffix

src/components/features/GroupView.svelte

@@ -9,7 +9,8 @@
   let { group }: GroupViewProps = $props();
 
   let sortedTagsList = $derived<string[]>(group.settings.tags.sort((a, b) => a.localeCompare(b))),
-    sortedPrefixes = $derived<string[]>(group.settings.prefixes.sort((a, b) => a.localeCompare(b)));
+    sortedPrefixes = $derived<string[]>(group.settings.prefixes.sort((a, b) => a.localeCompare(b))),
+    sortedSuffixes = $derived<string[]>(group.settings.suffixes.sort((a, b) => a.localeCompare(b)));
 
 </script>
 
@@ -41,6 +42,18 @@
     </TagsColorContainer>
   </div>
 {/if}
+{#if sortedSuffixes.length}
+  <div class="block">
+    <strong>Suffixes:</strong>
+    <TagsColorContainer targetCategory={group.settings.category}>
+      <div class="tags-list">
+        {#each sortedSuffixes as suffixName}
+          <span class="tag">*{suffixName}</span>
+        {/each}
+      </div>
+    </TagsColorContainer>
+  </div>
+{/if}
 
 <style lang="scss">
   .tags-list {

src/components/tags/TagsEditor.svelte

@@ -4,10 +4,12 @@
   interface TagEditorProps {
     // List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
     tags?: string[];
+    mapTagNames?: (tagName: string) => string;
   }
 
   let {
-    tags = $bindable([])
+    tags = $bindable([]),
+    mapTagNames,
   }: TagEditorProps = $props();
 
   let uniqueTags = $state<Set<string>>(new Set());
@@ -87,7 +89,7 @@
 <div class="tags-editor">
   {#each uniqueTags.values() as tagName}
     <div class="tag">
-      {tagName}
+      {mapTagNames?.(tagName) ?? tagName}
       <span class="remove" onclick={createTagRemoveHandler(tagName)}
             onkeydown={createTagRemoveHandler(tagName)}
             role="button" tabindex="0">x</span>

src/lib/extension/CustomCategoriesResolver.ts

@@ -95,6 +95,13 @@ export default class CustomCategoriesResolver {
           categoryName
         );
       }
+
+      for (let tagSuffix of tagGroup.settings.suffixes) {
+        this.#compiledRegExps.set(
+          new RegExp(`${escapeRegExp(tagSuffix)}$`),
+          categoryName
+        );
+      }
     }
 
     this.#queueUpdatingTags();

src/lib/extension/entities/TagGroup.ts

@@ -4,6 +4,7 @@ export interface TagGroupSettings {
   name: string;
   tags: string[];
   prefixes: string[];
+  suffixes: string[];
   category: string;
 }
 
@@ -13,6 +14,7 @@ export default class TagGroup extends StorageEntity<TagGroupSettings> {
       name: settings.name || '',
       tags: settings.tags || [],
       prefixes: settings.prefixes || [],
+      suffixes: settings.suffixes || [],
       category: settings.category || ''
     });
   }

src/lib/extension/transporting/exporters.ts

@@ -20,6 +20,7 @@ const entitiesExporters: ExportersMap = {
       name: entity.settings.name,
       tags: entity.settings.tags,
       prefixes: entity.settings.prefixes,
+      suffixes: entity.settings.suffixes,
     }
   }
 };

src/routes/features/groups/[id]/edit/+page.svelte

@@ -25,6 +25,7 @@
   let groupName = $state<string>('');
   let tagsList = $state<string[]>([]);
   let prefixesList = $state<string[]>([]);
+  let suffixesList = $state<string[]>([]);
   let tagCategory = $state<string>('');
 
   $effect(() => {
@@ -40,6 +41,7 @@
     groupName = targetGroup.settings.name;
     tagsList = [...targetGroup.settings.tags].sort((a, b) => a.localeCompare(b));
     prefixesList = [...targetGroup.settings.prefixes].sort((a, b) => a.localeCompare(b));
+    suffixesList = [...targetGroup.settings.suffixes].sort((a, b) => a.localeCompare(b));
     tagCategory = targetGroup.settings.category;
   });
 
@@ -52,11 +54,20 @@
     targetGroup.settings.name = groupName;
     targetGroup.settings.tags = [...tagsList];
     targetGroup.settings.prefixes = [...prefixesList];
+    targetGroup.settings.suffixes = [...suffixesList];
     targetGroup.settings.category = tagCategory;
 
     await targetGroup.save();
     await goto(`/features/groups/${targetGroup.id}`);
   }
+
+  function mapPrefixNames(tagName: string): string {
+    return `${tagName}*`;
+  }
+
+  function mapSuffixNames(tagName: string): string {
+    return `*${tagName}`;
+  }
 </script>
 
 <Menu>
@@ -77,7 +88,12 @@
   </TagsColorContainer>
   <TagsColorContainer targetCategory={tagCategory}>
     <FormControl label="Tag Prefixes">
-      <TagsEditor bind:tags={prefixesList}/>
+      <TagsEditor bind:tags={prefixesList} mapTagNames={mapPrefixNames}/>
+    </FormControl>
+  </TagsColorContainer>
+  <TagsColorContainer targetCategory={tagCategory}>
+    <FormControl label="Tag Suffixes">
+      <TagsEditor bind:tags={suffixesList} mapTagNames={mapSuffixNames}/>
     </FormControl>
   </TagsColorContainer>
 </FormContainer>