From 18cfe32ad7be97955f33d978399273cf3eb73d3b Mon Sep 17 00:00:00 2001
From: kuuuube <hexagonisalie@gmail.com>
Date: Tue, 5 Nov 2024 17:41:51 -0500
Subject: [PATCH] Add color to flags

---
 ext/js/display/display-anki.js | 35 ++++++++++++++++++++++++++++++++++
 types/ext/display-anki.d.ts    |  6 ++++++
 2 files changed, 41 insertions(+)

diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
index 59715fbf4f..6de3786971 100644
--- a/ext/js/display/display-anki.js
+++ b/ext/js/display/display-anki.js
@@ -560,6 +560,11 @@ export class DisplayAnki {
             flagsIndicator.disabled = false;
             flagsIndicator.hidden = false;
             flagsIndicator.title = `Card flags: ${[...displayFlags].join(', ')}`;
+            /** @type {HTMLElement} */
+            const flagsIndicatorIcon = querySelectorNotNull(flagsIndicator, '.action-icon');
+            if (flagsIndicatorIcon !== null && flagsIndicator instanceof HTMLElement) {
+                flagsIndicatorIcon.style.background = this._getFlagColor(displayFlags);
+            }
         }
     }
 
@@ -585,7 +590,37 @@ export class DisplayAnki {
         return '';
     }
 
+    /**
+     * @param {Set<string>} flags
+     * @returns {string}
+     */
+    _getFlagColor(flags) {
+        /** @type {Record<string, import('display-anki').RGB>} */
+        const flagColors = {
+            'No Flag': {red: 0, green: 0, blue: 0},
+            'Red': {red: 248, green: 113, blue: 113},
+            'Orange': {red: 253, green: 186, blue: 116},
+            'Green': {red: 134, green: 239, blue: 172},
+            'Blue': {red: 96, green: 165, blue: 250},
+            'Pink': {red: 240, green: 171, blue: 252},
+            'Turquoise': {red: 94, green: 234, blue: 212},
+            'Purple': {red: 192, green: 132, blue: 252},
+        };
+
+        const gradientSliceSize = 100 / flags.size;
+        let currentGradientPercent = 0;
+
+        let gradient = 'linear-gradient(to left,';
+        for (const flag of flags) {
+            const flagRGB = flagColors[flag];
+            gradient += 'rgb(' + flagRGB.red + ',' + flagRGB.green + ',' + flagRGB.blue + ') ' + currentGradientPercent + '%,';
+            gradient += 'rgb(' + flagRGB.red + ',' + flagRGB.green + ',' + flagRGB.blue + ') ' + (currentGradientPercent + gradientSliceSize) + '%,';
+            currentGradientPercent += gradientSliceSize;
         }
+        gradient = gradient.slice(0, -1); // remove trailing comma
+        gradient += ')';
+
+        return gradient;
     }
 
     /**
diff --git a/types/ext/display-anki.d.ts b/types/ext/display-anki.d.ts
index 4b6c6e3788..e171cd2a8c 100644
--- a/types/ext/display-anki.d.ts
+++ b/types/ext/display-anki.d.ts
@@ -59,3 +59,9 @@ export type CreateNoteResult = {
     errors: Error[];
     requirements: AnkiNoteBuilder.Requirement[];
 };
+
+export type RGB = {
+    red: number;
+    green: number;
+    blue: number;
+};