Generate the replacement type options from the enum.

source/options/components/anonymize-usernames.tsx

@@ -1,5 +1,5 @@
 import {Component} from "preact";
-import {fromStorage, Feature} from "../../storage/exports.js";
+import {fromStorage, Feature, ReplacementType} from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
 
 type State = {
@@ -39,6 +39,13 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
     }
 
     const replacementType = data.value.replacementType;
+    const replacementTypeOptions = Object.values(ReplacementType).map((key) => (
+      <option selected={key === replacementType} value={key}>
+        {key
+          .replace(/-/g, " ")
+          .replace(/(\b[a-z])/gi, (character) => character.toUpperCase())}
+      </option>
+    ));
 
     return (
       <Setting {...this.props}>
@@ -52,15 +59,7 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
         <ul class="checkbox-list">
           <li>
             <select onChange={this.replacementTypeChanged}>
-              <option
+              {replacementTypeOptions}
-                selected={replacementType === "numerical"}
-                value="numerical"
-              >
-                Numerical
-              </option>
-              <option selected={replacementType === "hashed"} value="hashed">
-                Hashed
-              </option>
             </select>
           </li>
         </ul>

source/storage/anonymize-usernames.ts

@@ -0,0 +1,23 @@
+/**
+ * The different types of username replacements for the Anonymize Usernames
+ * feature.
+ */
+export enum ReplacementType {
+  Hashed = "hashed",
+  Numerical = "numerical",
+}
+
+/**
+ * Type guard check to see if a string is a valid {@link ReplacementType}.
+ * @param input The string to check.
+ */
+export function isReplacementType(input: string): input is ReplacementType {
+  return Object.values(ReplacementType).includes(input as ReplacementType);
+}
+
+/**
+ * The data stored for the Anonymize Usernames feature.
+ */
+export type AnonymizeUsernamesData = {
+  replacementType: ReplacementType;
+};

source/storage/exports.ts

@@ -1,23 +1,18 @@
 import {createValue, type Value} from "@holllo/webextension-storage";
 import browser from "webextension-polyfill";
+import {type AnonymizeUsernamesData} from "./anonymize-usernames.js";
 import {Data, Feature, MiscellaneousFeature} from "./enums.js";
 import {collectHideTopicsData} from "./hide-topics.js";
 import {defaultKnownGroups} from "./known-groups.js";
 import {collectUsernameColors} from "./username-color.js";
 import {collectUserLabels} from "./user-label.js";
 
+export * from "./anonymize-usernames.js";
 export * from "./enums.js";
 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.
  */