From 4f302faf45b12744497cd69c330f932885b02682 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 10 Mar 2025 03:12:13 +0400
Subject: [PATCH] Added option to turn on/off separation of tags by custom
 category

---
 src/lib/extension/settings/TagSettings.ts | 19 +++++++++++++++++++
 src/routes/preferences/tags/+page.svelte  |  6 ++++++
 src/stores/preferences/tag.ts             | 18 ++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 src/lib/extension/settings/TagSettings.ts
 create mode 100644 src/stores/preferences/tag.ts

diff --git a/src/lib/extension/settings/TagSettings.ts b/src/lib/extension/settings/TagSettings.ts
new file mode 100644
index 0000000..a1c49a2
--- /dev/null
+++ b/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));
+  }
+}
diff --git a/src/routes/preferences/tags/+page.svelte b/src/routes/preferences/tags/+page.svelte
index c5e55ba..2a0ed83 100644
--- a/src/routes/preferences/tags/+page.svelte
+++ b/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>
diff --git a/src/stores/preferences/tag.ts b/src/stores/preferences/tag.ts
new file mode 100644
index 0000000..70722c9
--- /dev/null
+++ b/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));
+    });
+  })