Added option to turn on/off separation of tags by custom category

src/lib/extension/settings/TagSettings.ts

@@ -0,0 +1,19 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings";
+
+interface TagSettingsFields {
+  groupSeparation: boolean;
+}
+
+export default class TagSettings extends CacheableSettings<TagSettingsFields> {
+  constructor() {
+    super("tag");
+  }
+
+  async resolveGroupSeparation() {
+    return this._resolveSetting("groupSeparation", false);
+  }
+
+  async setGroupSeparation(value: boolean) {
+    return this._writeSetting("groupSeparation", Boolean(value));
+  }
+}

src/routes/preferences/tags/+page.svelte

@@ -5,6 +5,7 @@
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { stripBlacklistedTagsEnabled } from "$stores/preferences/maintenance";
+  import { shouldSeparateTagGroups } from "$stores/preferences/tag";
 </script>
 
 <Menu>
@@ -17,4 +18,9 @@
       Automatically remove black-listed tags from the images
     </CheckboxField>
   </FormControl>
+  <FormControl>
+    <CheckboxField bind:checked={$shouldSeparateTagGroups}>
+      Enable separation of custom tag groups on the image pages
+    </CheckboxField>
+  </FormControl>
 </FormContainer>

src/stores/preferences/tag.ts

@@ -0,0 +1,18 @@
+import { writable } from "svelte/store";
+import TagSettings from "$lib/extension/settings/TagSettings";
+
+const tagSettings = new TagSettings();
+
+export const shouldSeparateTagGroups = writable(false);
+
+tagSettings.resolveGroupSeparation()
+  .then(value => shouldSeparateTagGroups.set(value))
+  .then(() => {
+    shouldSeparateTagGroups.subscribe(value => {
+      void tagSettings.setGroupSeparation(value);
+    });
+
+    tagSettings.subscribe(settings => {
+      shouldSeparateTagGroups.set(Boolean(settings.groupSeparation));
+    });
+  })