Add an option to hide the user label editor [+].

source/content-scripts/features/user-labels.tsx

@@ -16,6 +16,7 @@ import {
 
 type Props = {
   anonymizeUsernamesEnabled: boolean;
+  onSiteNewLabelEnabled: boolean;
   userLabels: UserLabelsData;
 };
 
@@ -59,7 +60,7 @@ export class UserLabelsFeature extends Component<Props, State> {
   };
 
   addLabelsToUsernames = (elements: HTMLElement[], onlyID?: number): number => {
-    const {userLabels} = this.props;
+    const {onSiteNewLabelEnabled, userLabels} = this.props;
     const inTopicListing = document.querySelector(".topic-listing") !== null;
 
     // Sort the labels by priority or alphabetically, so 2 labels with the same
@@ -103,7 +104,7 @@ export class UserLabelsFeature extends Component<Props, State> {
           [+]
         </span>
       );
-      if (!inTopicListing && onlyID === undefined) {
+      if (onSiteNewLabelEnabled && !inTopicListing && onlyID === undefined) {
         const addLabelPlaceholder = document.createElement("span");
         element.after(addLabelPlaceholder);
         render(addLabel, element.parentElement!, addLabelPlaceholder);
@@ -111,6 +112,7 @@ export class UserLabelsFeature extends Component<Props, State> {
 
       if (userLabels.length === 0 && onlyID === undefined) {
         if (
+          onSiteNewLabelEnabled &&
           inTopicListing &&
           (element.nextElementSibling === null ||
             !element.nextElementSibling.className.includes("trx-user-label"))

source/content-scripts/setup.tsx

@@ -156,9 +156,11 @@ async function initialize() {
   }
 
   if (enabledFeatures.value.has(Feature.UserLabels)) {
+    const onSiteNewLabelEnabled = await fromStorage(Data.OnSiteNewLabel);
     components.userLabels = (
       <UserLabelsFeature
         anonymizeUsernamesEnabled={anonymizeUsernamesEnabled}
+        onSiteNewLabelEnabled={onSiteNewLabelEnabled.value}
         userLabels={userLabels}
       />
     );

source/options/components/user-labels.tsx

@@ -1,19 +1,68 @@
+import {Component} from "preact";
+import {Data, fromStorage, type StorageValues} from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
 
-export function UserLabelsSetting(props: SettingProps) {
+type State = {
+  onSiteNewLabelEnabled:
+    | Awaited<StorageValues[Data.OnSiteNewLabel]>
+    | undefined;
+};
+
+export class UserLabelsSetting extends Component<SettingProps, State> {
+  constructor(props: SettingProps) {
+    super(props);
+
+    this.state = {
+      onSiteNewLabelEnabled: undefined,
+    };
+  }
+
+  async componentDidMount() {
+    this.setState({
+      onSiteNewLabelEnabled: await fromStorage(Data.OnSiteNewLabel),
+    });
+  }
+
+  toggleOnSiteNewLabelEnabled = async () => {
+    const onSiteNewLabelEnabled = this.state.onSiteNewLabelEnabled!;
+    onSiteNewLabelEnabled.value = !onSiteNewLabelEnabled.value;
+    await onSiteNewLabelEnabled.save();
+    this.setState({onSiteNewLabelEnabled});
+  };
+
+  render() {
+    const {onSiteNewLabelEnabled} = this.state;
+    if (onSiteNewLabelEnabled === undefined) {
+      return;
+    }
+
     return (
-    <Setting {...props}>
+      <Setting {...this.props}>
         <p class="info">
-        Adds a way to create customizable labels to users. Wherever a link to a
+          Adds a way to create customizable labels to users. Wherever a link to
-        person's profile is available, a <code>[+]</code> will be put next to
+          a person's profile is available, a <code>[+]</code> will be put next
-        it. Clicking on that will bring up a dialog to add a new label and
+          to it. Clicking on that will bring up a dialog to add a new label and
-        clicking on existing labels will bring up the same dialog to edit them.
+          clicking on existing labels will bring up the same dialog to edit
+          them.
           <br />
           Or you can use the dedicated{" "}
-        <a href="/options/user-label-editor.html">User Label Editor</a> to add,
+          <a href="/options/user-label-editor.html">User Label Editor</a> to
-        edit, or remove user labels.
+          add, edit, or remove user labels.
         </p>
 
+        <ul class="checkbox-list">
+          <li>
+            <label class="styled-checkbox">
+              <input
+                type="checkbox"
+                checked={onSiteNewLabelEnabled.value}
+                onClick={this.toggleOnSiteNewLabelEnabled}
+              />
+              Show new label editor next to usernames
+            </label>
+          </li>
+        </ul>
+
         <details>
           <summary>View Customizable Values</summary>
           <ul class="user-label-values">
@@ -21,19 +70,20 @@ export function UserLabelsSetting(props: SettingProps) {
               <b>Username</b>: who to apply the label to.
             </li>
             <li>
-            <b>Priority</b>: determines the order of labels. If multiple labels
+              <b>Priority</b>: determines the order of labels. If multiple
-            have the same priority they will be sorted alphabetically. In the
+              labels have the same priority they will be sorted alphabetically.
-            topic listing only the highest priority label will be shown.
+              In the topic listing only the highest priority label will be
+              shown.
             </li>
             <li>
               <b>Color</b>: will set the background color of the label. The
-            foreground color is calculated to be black or white depending on the
+              foreground color is calculated to be black or white depending on
-            brightness of the background color.
+              the brightness of the background color.
               <br />
               Valid values are hex colors or <code>transparent</code>.
               <br />
-            Colors based on your current Tildes theme are also available in the
+              Colors based on your current Tildes theme are also available in
-            dropdown menu.
+              the dropdown menu.
             </li>
             <li>
               <b>Text</b>: the text to go in the label. If left empty the label
@@ -43,4 +93,5 @@ export function UserLabelsSetting(props: SettingProps) {
         </details>
       </Setting>
     );
+  }
 }

source/scss/_settings.scss

@@ -86,6 +86,7 @@
     flex-direction: column;
     gap: 8px;
     list-style: none;
+    margin-bottom: 8px;
 
     label {
       cursor: pointer;

source/storage/enums.ts

@@ -36,6 +36,7 @@ export enum Data {
   KnownGroups = "known-groups",
   LatestActiveFeatureTab = "latest-active-feature-tab",
   MiscellaneousEnabledFeatures = "miscellaneous-enabled-features",
+  OnSiteNewLabel = "on-site-new-label",
   RandomizeUsernameColors = "randomize-username-colors",
   Version = "data-version",
 }

source/storage/exports.ts

@@ -64,6 +64,13 @@ export const storageValues = {
     value: new Set([MiscellaneousFeature.CommentAnchorFix]),
     storage: browser.storage.sync,
   }),
+  [Data.OnSiteNewLabel]: createValue({
+    deserialize: (input) => JSON.parse(input) as boolean,
+    serialize: (input) => JSON.stringify(input),
+    key: Data.OnSiteNewLabel,
+    value: true,
+    storage: browser.storage.sync,
+  }),
   [Data.Version]: createValue({
     deserialize: (input) => JSON.parse(input) as string,
     serialize: (input) => JSON.stringify(input),