Add the (un)subscribe button to group list items.

source/content-scripts/features/exports.ts

@@ -2,6 +2,7 @@ export * from "./anonymize-usernames.js";
 export * from "./autocomplete.js";
 export * from "./back-to-top.js";
 export * from "./comment-anchor-fix.js";
+export * from "./group-list-subscribe-button.js";
 export * from "./hide-topics.js";
 export * from "./hide-votes.js";
 export * from "./jump-to-new-comment.js";

source/content-scripts/features/group-list-subscribe-button.tsx

@@ -0,0 +1,127 @@
+import {Component, render} from "preact";
+import {log, pluralize, querySelectorAll} from "../../utilities/exports.js";
+
+export function runGroupListSubscribeButtonFeature(): void {
+  const count = addSubscribeButtonsToGroupList();
+  if (count > 0) {
+    const pluralized = `${count} ${pluralize(count, "subscribe button")}`;
+    log(`Added ${pluralized} to the group list`);
+  }
+}
+
+function addSubscribeButtonsToGroupList(): number {
+  if (window.location.pathname !== "/groups") {
+    return 0;
+  }
+
+  const csrfToken = document.querySelector<HTMLMetaElement>(
+    'meta[name="csrftoken"]',
+  )?.content;
+  if (csrfToken === undefined) {
+    log("No CSRF token found", true);
+    return 0;
+  }
+
+  let count = 0;
+  for (const listItem of querySelectorAll<HTMLLIElement>(
+    ".group-list li:not(.trx-group-list-subscribe-button)",
+  )) {
+    const group = listItem.querySelector(".link-group")?.textContent?.slice(1);
+    if (group === undefined) {
+      log(`Missing expected group in list item`, true);
+      log(listItem, true);
+      continue;
+    }
+
+    const button = document.createDocumentFragment();
+    render(
+      <SubscribeButton
+        csrfToken={csrfToken}
+        group={group}
+        listItem={listItem}
+      />,
+      button,
+    );
+
+    const activity =
+      listItem.querySelector(".group-list-activity") ?? undefined;
+    if (activity === undefined) {
+      listItem.append(button);
+    } else {
+      activity.before(button);
+    }
+
+    listItem.classList.add("trx-group-list-subscribe-button");
+    count++;
+  }
+
+  return count;
+}
+
+type Props = {
+  csrfToken: string;
+  listItem: HTMLLIElement;
+  group: string;
+};
+
+type State = {
+  isSubscribed: boolean;
+};
+
+class SubscribeButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isSubscribed: props.listItem.classList.contains(
+        "group-list-item-subscribed",
+      ),
+    };
+  }
+
+  clickHandler = async () => {
+    const {csrfToken, group} = this.props;
+    const {isSubscribed} = this.state;
+
+    const response = await window.fetch(
+      `https://tildes.net/api/web/group/${group}/subscribe`,
+      {
+        headers: {
+          "X-CSRF-Token": csrfToken,
+          "X-IC-Request": "true",
+        },
+        method: isSubscribed ? "DELETE" : "PUT",
+        referrer: "https://tildes.net",
+      },
+    );
+
+    if (response.status !== 200) {
+      log(`Unexpected status code: ${response.status}`, true);
+      return;
+    }
+
+    this.setState({isSubscribed: !isSubscribed});
+  };
+
+  render() {
+    const {listItem} = this.props;
+    const {isSubscribed} = this.state;
+
+    if (isSubscribed) {
+      listItem.classList.add("group-list-item-subscribed");
+      listItem.classList.remove("group-list-item-not-subscribed");
+    } else {
+      listItem.classList.add("group-list-item-not-subscribed");
+      listItem.classList.remove("group-list-item-subscribed");
+    }
+
+    return (
+      <button
+        class={`btn btn-sm ${isSubscribed ? "btn-used" : ""}`}
+        onClick={this.clickHandler}
+      >
+        {isSubscribed ? "Unsubscribe" : "Subscribe"}
+      </button>
+    );
+  }
+}

source/content-scripts/setup.tsx

@@ -13,6 +13,7 @@ import {
   UserLabelsFeature,
   runAnonymizeUsernamesFeature,
   runCommentAnchorFixFeature,
+  runGroupListSubscribeButtonFeature,
   runHideTopicsFeature,
   runHideVotesFeature,
   runMarkdownToolbarFeature,
@@ -25,6 +26,7 @@ async function initialize() {
   const start = window.performance.now();
   initializeGlobals();
   const enabledFeatures = await fromStorage(Data.EnabledFeatures);
+  const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures);
   window.TildesReExtended.debug = enabledFeatures.value.has(Feature.Debug);
 
   // Any features that will use the knownGroups data should be added to this
@@ -146,11 +148,14 @@ async function initialize() {
     );
   }
 
-  const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures);
   if (miscEnabled.value.has(MiscellaneousFeature.CommentAnchorFix)) {
     runCommentAnchorFixFeature();
   }
 
+  if (miscEnabled.value.has(MiscellaneousFeature.GroupListSubscribeButtons)) {
+    runGroupListSubscribeButtonFeature();
+  }
+
   if (miscEnabled.value.has(MiscellaneousFeature.TopicInfoIgnore)) {
     runTopicInfoIgnore();
   }

source/options/components/miscellaneous.tsx

@@ -25,6 +25,14 @@ function FeatureDescription({
     );
   }
 
+  if (feature === MiscellaneousFeature.GroupListSubscribeButtons) {
+    return (
+      <p class="description">
+        Add Subscribe and Unsubscribe buttons to the group list.
+      </p>
+    );
+  }
+
   if (feature === MiscellaneousFeature.TopicInfoIgnore) {
     return (
       <p class="description">

source/scss/content-scripts.scss

@@ -1,6 +1,7 @@
 // Scripts
 @import "scripts/autocomplete";
 @import "scripts/back-to-top";
+@import "scripts/group-list-subscribe-button";
 @import "scripts/hide-topics";
 @import "scripts/jump-to-new-comment";
 @import "scripts/markdown-toolbar";

source/scss/scripts/_group-list-subscribe-button.scss

@@ -0,0 +1,12 @@
+.group-list {
+  .trx-group-list-subscribe-button {
+    // Remove the text-indent set by Tildes so it the button is left-aligned
+    // properly.
+    text-indent: unset;
+
+    button {
+      // Add some space between the button and the activity text.
+      margin-right: 0.5rem;
+    }
+  }
+}

source/storage/enums.ts

@@ -21,6 +21,7 @@ export enum Feature {
  */
 export enum MiscellaneousFeature {
   CommentAnchorFix = "comment-anchor-fix",
+  GroupListSubscribeButtons = "group-list-subscribe-buttons",
   TopicInfoIgnore = "topic-info-ignore",
 }