Display stars in the tag editor for prefixes/suffixes

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/routes/features/groups/[id]/edit/+page.svelte

@@ -60,6 +60,14 @@
     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>
@@ -80,12 +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}/>
+      <TagsEditor bind:tags={suffixesList} mapTagNames={mapSuffixNames}/>
     </FormControl>
   </TagsColorContainer>
 </FormContainer>