Add the storage and options UI for different Anonymize Usernames replacement types.

source/options/components/anonymize-usernames.tsx

@@ -1,14 +1,70 @@
+import {Component} from "preact";
+import {fromStorage, Feature} from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
 
-export function AnonymizeUsernamesSetting(props: SettingProps) {
-  return (
-    <Setting {...props}>
-      <p class="info">
-        Anonymizes usernames by replacing them with "Anonymous #".
-        <br />
-        Note that User Labels and Username Colors will still be applied to any
-        usernames as normal.
-      </p>
-    </Setting>
-  );
+type State = {
+  data?: Awaited<ReturnType<typeof fromStorage<Feature.AnonymizeUsernames>>>;
+};
+
+export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
+  constructor(props: SettingProps) {
+    super(props);
+
+    this.state = {
+      data: undefined,
+    };
+  }
+
+  async componentDidMount(): Promise<void> {
+    const data = await fromStorage(Feature.AnonymizeUsernames);
+    this.setState({data});
+  }
+
+  replacementTypeChanged = async (event: Event) => {
+    const newValue = (event.target as HTMLInputElement)!.value;
+    const {data} = this.state;
+    if (data === undefined) {
+      return;
+    }
+
+    data.value.replacementType = newValue;
+    await data.save();
+    this.setState({data});
+  };
+
+  render() {
+    const {data} = this.state;
+    if (data === undefined) {
+      return;
+    }
+
+    const replacementType = data.value.replacementType;
+
+    return (
+      <Setting {...this.props}>
+        <p class="info">
+          Anonymizes usernames by replacing them with "Anonymous #".
+          <br />
+          Note that User Labels and Username Colors will still be applied to any
+          usernames as normal.
+        </p>
+
+        <ul class="checkbox-list">
+          <li>
+            <select onChange={this.replacementTypeChanged}>
+              <option
+                selected={replacementType === "numerical"}
+                value="numerical"
+              >
+                Numerical
+              </option>
+              <option selected={replacementType === "hashed"} value="hashed">
+                Hashed
+              </option>
+            </select>
+          </li>
+        </ul>
+      </Setting>
+    );
+  }
 }

source/storage/exports.ts

@@ -11,6 +11,13 @@ export * from "./hide-topics.js";
 export * from "./username-color.js";
 export * from "./user-label.js";
 
+/**
+ * The data stored for the Anonymize Usernames feature.
+ */
+export type AnonymizeUsernamesData = {
+  replacementType: "numerical" | "hashed";
+};
+
 /**
  * The data stored for the Hide Votes feature.
  */
@@ -73,6 +80,15 @@ export const storageValues = {
     value: false,
     storage: browser.storage.sync,
   }),
+  [Feature.AnonymizeUsernames]: createValue({
+    deserialize: (input) => JSON.parse(input) as AnonymizeUsernamesData,
+    serialize: (input) => JSON.stringify(input),
+    key: Feature.AnonymizeUsernames,
+    value: {
+      replacementType: "numerical",
+    },
+    storage: browser.storage.sync,
+  }),
   [Feature.HideTopics]: collectHideTopicsData(),
   [Feature.HideVotes]: createValue({
     deserialize: (input) => JSON.parse(input) as HideVotesData,