Rework UsernameColorsData to be stored individual keys.

source/content-scripts/features/username-colors.ts

@@ -14,7 +14,9 @@ function usernameColors(
   anonymizeUsernamesEnabled: boolean,
 ): number {
   const usernameColors = new Map<string, string>();
-  for (const {color, username: usernames} of data) {
+  for (const {
+    value: {color, username: usernames},
+  } of data) {
     for (const username of usernames.split(",")) {
       usernameColors.set(username.trim().toLowerCase(), color);
     }

source/content-scripts/setup.tsx

@@ -86,7 +86,7 @@ async function initialize() {
   if (enabledFeatures.value.has(Feature.UsernameColors)) {
     observerFeatures.push(async () => {
       const data = await fromStorage(Feature.UsernameColors);
-      runUsernameColorsFeature(data.value, anonymizeUsernamesEnabled);
+      runUsernameColorsFeature(data, anonymizeUsernamesEnabled);
     });
   }
 

source/options/components/username-colors.tsx

@@ -1,17 +1,18 @@
 import {Component} from "preact";
-import {type Value} from "@holllo/webextension-storage";
 import {log} from "../../utilities/exports.js";
 import {
   type UsernameColorsData,
   type UsernameColor,
   Feature,
+  createValueUsernamecolor,
   fromStorage,
 } from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
 
 type State = {
   previewChecked: "off" | "foreground" | "background";
-  usernameColors: Value<UsernameColorsData>;
+  usernameColors: UsernameColorsData;
+  usernameColorsToRemove: UsernameColorsData;
 };
 
 export class UsernameColorsSetting extends Component<SettingProps, State> {
@@ -21,6 +22,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
     this.state = {
       previewChecked: "off",
       usernameColors: undefined!,
+      usernameColorsToRemove: [],
     };
   }
 
@@ -28,35 +30,50 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
     this.setState({usernameColors: await fromStorage(Feature.UsernameColors)});
   }
 
-  addNewColor = () => {
+  addNewColor = async () => {
     let id = 1;
-    if (this.state.usernameColors.value.length > 0) {
+    if (this.state.usernameColors.length > 0) {
       id =
-        this.state.usernameColors.value.sort((a, b) => b.id - a.id)[0].id + 1;
+        this.state.usernameColors.sort((a, b) => b.value.id - a.value.id)[0]
+          .value.id + 1;
     }
 
-    const newColor: UsernameColor = {
+    const newColor = await createValueUsernamecolor({
       color: "",
       id,
       username: "",
-    };
+    });
 
-    this.state.usernameColors.value.push(newColor);
+    this.state.usernameColors.push(newColor);
     this.setState({
       usernameColors: this.state.usernameColors,
     });
   };
 
-  removeColor = (targetId: number) => {
-    const targetIndex = this.state.usernameColors.value.findIndex(
-      ({id}) => id === targetId,
+  removeColor = async (targetId: number) => {
+    const targetIndex = this.state.usernameColors.findIndex(
+      ({value}) => value.id === targetId,
     );
-    this.state.usernameColors.value.splice(targetIndex, 1);
-    this.setState({usernameColors: this.state.usernameColors});
+    const usernameColorsToRemove = this.state.usernameColorsToRemove;
+    usernameColorsToRemove.push(
+      ...this.state.usernameColors.splice(targetIndex, 1),
+    );
+    this.setState({
+      usernameColors: this.state.usernameColors,
+      usernameColorsToRemove,
+    });
   };
 
   saveChanges = async () => {
-    await this.state.usernameColors.save();
+    for (const usernameColor of this.state.usernameColorsToRemove) {
+      await usernameColor.remove();
+    }
+
+    for (const usernameColor of this.state.usernameColors) {
+      await usernameColor.save();
+    }
+
+    this.setState({usernameColorsToRemove: []});
   };
 
   togglePreview = async () => {
@@ -84,8 +101,8 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
   };
 
   onInput = (event: Event, id: number, key: "color" | "username") => {
-    const colorIndex = this.state.usernameColors.value.findIndex(
-      (color) => color.id === id,
+    const colorIndex = this.state.usernameColors.findIndex(
+      ({value}) => value.id === id,
     );
     if (colorIndex === -1) {
       log(`Tried to edit unknown UsernameColor ID: ${id}`);
@@ -93,7 +110,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
     }
 
     const newValue = (event.target as HTMLInputElement).value;
-    this.state.usernameColors.value[colorIndex][key] = newValue;
+    this.state.usernameColors[colorIndex].value[key] = newValue;
     this.setState({usernameColors: this.state.usernameColors});
   };
 
@@ -103,9 +120,9 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
       return;
     }
 
-    usernameColors.value.sort((a, b) => a.id - b.id);
+    usernameColors.sort((a, b) => a.value.id - b.value.id);
 
-    const editors = usernameColors.value.map(({color, id, username}) => {
+    const editors = usernameColors.map(({value: {color, id, username}}) => {
       const style: Record<string, string> = {};
       if (previewChecked === "background") {
         style.backgroundColor = color;
@@ -121,8 +138,8 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
         this.onInput(event, id, "color");
       };
 
-      const removeHandler = () => {
-        this.removeColor(id);
+      const removeHandler = async () => {
+        await this.removeColor(id);
       };
 
       return (

source/storage/exports.ts

@@ -1,10 +1,12 @@
-import {createValue, type Value} from "@holllo/webextension-storage";
+import {createValue} from "@holllo/webextension-storage";
 import browser from "webextension-polyfill";
-import {collectUserLabels} from "./user-label.js";
 import {Data, Feature} from "./enums.js";
+import {collectUsernameColors} from "./username-color.js";
+import {collectUserLabels} from "./user-label.js";
 
-export * from "./user-label.js";
 export * from "./enums.js";
+export * from "./username-color.js";
+export * from "./user-label.js";
 
 export type HideVotesData = {
   otherComments: boolean;
@@ -13,14 +15,6 @@ export type HideVotesData = {
   ownTopics: boolean;
 };
 
-export type UsernameColor = {
-  color: string;
-  id: number;
-  username: string;
-};
-
-export type UsernameColorsData = UsernameColor[];
-
 export const storageValues = {
   [Data.EnabledFeatures]: createValue({
     deserialize: (input) => new Set(JSON.parse(input) as Feature[]),
@@ -63,13 +57,7 @@ export const storageValues = {
     storage: browser.storage.sync,
   }),
   [Feature.UserLabels]: collectUserLabels(),
-  [Feature.UsernameColors]: createValue({
-    deserialize: (input) => JSON.parse(input) as UsernameColorsData,
-    serialize: (input) => JSON.stringify(Array.from(input)),
-    key: Feature.UsernameColors,
-    value: [],
-    storage: browser.storage.sync,
-  }),
+  [Feature.UsernameColors]: collectUsernameColors(),
 };
 
 type StorageValues = typeof storageValues;

source/storage/migrations/migrations.test.ts

@@ -38,10 +38,15 @@ await setup("Migrations", async (group) => {
           break;
         }
 
-        case Feature.UsernameColors: {
+        case `${Feature.UsernameColors}-4`: {
+          test.equals(value, '{"color":"red","id":4,"username":"Test"}');
+          break;
+        }
+
+        case `${Feature.UsernameColors}-18`: {
           test.equals(
             value,
-            '[{"color":"red","id":4,"username":"Test"},{"color":"green","id":18,"username":"AnotherTest"}]',
+            '{"color":"green","id":18,"username":"AnotherTest"}',
           );
           break;
         }

source/storage/migrations/migrations.ts

@@ -2,11 +2,13 @@ import {type Migration} from "@holllo/migration-helper";
 import {
   Data,
   Feature,
+  createValueUsernamecolor,
   createValueUserLabel,
   fromStorage,
+  saveUsernameColors,
   saveUserLabels,
 } from "../exports.js";
-import {v112DeserializeData, v112Sample, type V112Settings} from "./v1-1-2.js";
+import {v112DeserializeData, type V112Settings} from "./v1-1-2.js";
 
 export const migrations: Array<Migration<string>> = [
   {
@@ -16,11 +18,18 @@ export const migrations: Array<Migration<string>> = [
       data.data.userLabels = deserialized.userLabels;
       data.data.usernameColors = deserialized.usernameColors;
 
+      const usernameColors = [];
       const userLabels = [];
+
+      for (const usernameColor of data.data.usernameColors) {
+        usernameColors.push(await createValueUsernamecolor(usernameColor));
+      }
+
       for (const userLabel of data.data.userLabels) {
         userLabels.push(await createValueUserLabel(userLabel));
       }
 
+      await saveUsernameColors(usernameColors);
       await saveUserLabels(userLabels);
 
       const hideVotes = await fromStorage(Feature.HideVotes);
@@ -40,10 +49,6 @@ export const migrations: Array<Migration<string>> = [
       version.value = "2.0.0";
       await version.save();
 
-      const usernameColors = await fromStorage(Feature.UsernameColors);
-      usernameColors.value = data.data.usernameColors;
-      await usernameColors.save();
-
       const enabledFeatures = await fromStorage(Data.EnabledFeatures);
       for (const [key, value] of Object.entries(data.features)) {
         if (value) {

source/storage/username-color.ts

@@ -0,0 +1,58 @@
+import {type Value, createValue} from "@holllo/webextension-storage";
+import browser from "webextension-polyfill";
+import {Feature} from "./enums.js";
+
+export type UsernameColor = {
+  color: string;
+  id: number;
+  username: string;
+};
+
+export type UsernameColorsData = Array<Value<UsernameColor>>;
+
+/**
+ * Create a {@link Value}-wrapped {@link UsernameColor}.
+ */
+export async function createValueUsernamecolor(
+  usernameColor: UsernameColor,
+): Promise<UsernameColorsData[number]> {
+  return createValue<UsernameColor>({
+    deserialize: (input) => JSON.parse(input) as UsernameColor,
+    serialize: (input) => JSON.stringify(input),
+    key: `${Feature.UsernameColors}-${usernameColor.id}`,
+    value: usernameColor,
+    storage: browser.storage.sync,
+  });
+}
+
+/**
+ * Get all username colors from storage and combine them into a single array.
+ */
+export async function collectUsernameColors(): Promise<UsernameColorsData> {
+  const storage = await browser.storage.sync.get();
+  const userLabels = [];
+  for (const [key, value] of Object.entries(storage)) {
+    if (!key.startsWith(Feature.UsernameColors)) {
+      continue;
+    }
+
+    userLabels.push(
+      await createValueUsernamecolor(
+        JSON.parse(value as string) as UsernameColor,
+      ),
+    );
+  }
+
+  return userLabels;
+}
+
+/**
+ * Save all username colors to storage under individual keys.
+ */
+export async function saveUsernameColors(
+  usernameColors: UsernameColorsData,
+): Promise<void> {
+  for (const usernameColor of usernameColors) {
+    await usernameColor.save();
+  }
+}