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,46 +1,97 @@
+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) {
-  return (
-    <Setting {...props}>
-      <p class="info">
-        Adds a way to create customizable labels to users. Wherever a link to a
-        person's profile is available, a <code>[+]</code> will be put next 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.
-        <br />
-        Or you can use the dedicated{" "}
-        <a href="/options/user-label-editor.html">User Label Editor</a> to add,
-        edit, or remove user labels.
-      </p>
+type State = {
+  onSiteNewLabelEnabled:
+    | Awaited<StorageValues[Data.OnSiteNewLabel]>
+    | undefined;
+};
 
-      <details>
-        <summary>View Customizable Values</summary>
-        <ul class="user-label-values">
+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 {...this.props}>
+        <p class="info">
+          Adds a way to create customizable labels to users. Wherever a link to
+          a person's profile is available, a <code>[+]</code> will be put next
+          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.
+          <br />
+          Or you can use the dedicated{" "}
+          <a href="/options/user-label-editor.html">User Label Editor</a> to
+          add, edit, or remove user labels.
+        </p>
+
+        <ul class="checkbox-list">
           <li>
-            <b>Username</b>: who to apply the label to.
-          </li>
-          <li>
-            <b>Priority</b>: determines the order of labels. If multiple labels
-            have the same priority they will be sorted alphabetically. 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
-            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
-            dropdown menu.
-          </li>
-          <li>
-            <b>Text</b>: the text to go in the label. If left empty the label
-            will show as a 12 by 12 pixel square instead.
+            <label class="styled-checkbox">
+              <input
+                type="checkbox"
+                checked={onSiteNewLabelEnabled.value}
+                onClick={this.toggleOnSiteNewLabelEnabled}
+              />
+              Show new label editor next to usernames
+            </label>
           </li>
         </ul>
-      </details>
-    </Setting>
-  );
+
+        <details>
+          <summary>View Customizable Values</summary>
+          <ul class="user-label-values">
+            <li>
+              <b>Username</b>: who to apply the label to.
+            </li>
+            <li>
+              <b>Priority</b>: determines the order of labels. If multiple
+              labels have the same priority they will be sorted alphabetically.
+              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 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 dropdown menu.
+            </li>
+            <li>
+              <b>Text</b>: the text to go in the label. If left empty the label
+              will show as a 12 by 12 pixel square instead.
+            </li>
+          </ul>
+        </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),