From 73f3977b62f7cedf55d340d46b16c94f18073388 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 13 Jul 2023 16:16:37 +0200
Subject: [PATCH] Add the Topic Info Ignore miscellaneous feature.

---
 source/content-scripts/features/exports.ts    |  3 +-
 .../features/topic-info-ignore.ts             | 35 +++++++++++++++++++
 source/content-scripts/setup.tsx              | 15 +++++---
 source/options/components/miscellaneous.tsx   |  9 +++++
 source/scss/content-scripts.scss              |  1 +
 source/scss/scripts/_topic-info-ignore.scss   | 20 +++++++++++
 source/storage/enums.ts                       |  1 +
 7 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 source/content-scripts/features/topic-info-ignore.ts
 create mode 100644 source/scss/scripts/_topic-info-ignore.scss

diff --git a/source/content-scripts/features/exports.ts b/source/content-scripts/features/exports.ts
index 4182f3d..c956c9e 100644
--- a/source/content-scripts/features/exports.ts
+++ b/source/content-scripts/features/exports.ts
@@ -2,10 +2,11 @@ export * from "./anonymize-usernames.js";
 export * from "./autocomplete.js";
 export * from "./back-to-top.js";
 export * from "./comment-anchor-fix.js";
+export * from "./hide-topics.js";
 export * from "./hide-votes.js";
 export * from "./jump-to-new-comment.js";
 export * from "./markdown-toolbar.js";
 export * from "./themed-logo.js";
+export * from "./topic-info-ignore.js";
 export * from "./user-labels.js";
 export * from "./username-colors.js";
-export * from "./hide-topics.js";
diff --git a/source/content-scripts/features/topic-info-ignore.ts b/source/content-scripts/features/topic-info-ignore.ts
new file mode 100644
index 0000000..aa3dbcc
--- /dev/null
+++ b/source/content-scripts/features/topic-info-ignore.ts
@@ -0,0 +1,35 @@
+import {log, pluralize, querySelectorAll} from "../../utilities/exports.js";
+
+export function runTopicInfoIgnore(): void {
+  const count = moveIgnoreButtons();
+  if (count > 0) {
+    const pluralized = `${count} ${pluralize(count, "ignore button")}`;
+    log(`Moved ${pluralized}`);
+  }
+}
+
+function moveIgnoreButtons(): number {
+  let count = 0;
+
+  for (const topic of querySelectorAll(
+    "article.topic:not(.trx-topic-info-ignore)",
+  )) {
+    const topicInfo = topic.querySelector(".topic-info") ?? undefined;
+    if (topicInfo === undefined) {
+      continue;
+    }
+
+    const button =
+      topic.querySelector<HTMLButtonElement>('[name="topic-actions-ignore"]') ??
+      undefined;
+    if (button === undefined) {
+      continue;
+    }
+
+    topic.classList.add("trx-topic-info-ignore");
+    topicInfo.append(button);
+    count++;
+  }
+
+  return count;
+}
diff --git a/source/content-scripts/setup.tsx b/source/content-scripts/setup.tsx
index 981c4fb..1e6d886 100644
--- a/source/content-scripts/setup.tsx
+++ b/source/content-scripts/setup.tsx
@@ -17,6 +17,7 @@ import {
   runHideVotesFeature,
   runMarkdownToolbarFeature,
   runThemedLogoFeature,
+  runTopicInfoIgnore,
   runUsernameColorsFeature,
 } from "./features/exports.js";
 
@@ -112,11 +113,6 @@ async function initialize() {
     });
   }
 
-  const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures);
-  if (miscEnabled.value.has(MiscellaneousFeature.CommentAnchorFix)) {
-    runCommentAnchorFixFeature();
-  }
-
   // Initialize all the observer-dependent features first.
   await Promise.all(observerFeatures.map(async (feature) => feature()));
 
@@ -150,6 +146,15 @@ async function initialize() {
     );
   }
 
+  const miscEnabled = await fromStorage(Data.MiscellaneousEnabledFeatures);
+  if (miscEnabled.value.has(MiscellaneousFeature.CommentAnchorFix)) {
+    runCommentAnchorFixFeature();
+  }
+
+  if (miscEnabled.value.has(MiscellaneousFeature.TopicInfoIgnore)) {
+    runTopicInfoIgnore();
+  }
+
   // Insert a placeholder at the end of the body first, then render the rest
   // and use that as the replacement element. Otherwise render() would put it
   // at the beginning of the body which causes a bunch of different issues.
diff --git a/source/options/components/miscellaneous.tsx b/source/options/components/miscellaneous.tsx
index f322e96..82734b5 100644
--- a/source/options/components/miscellaneous.tsx
+++ b/source/options/components/miscellaneous.tsx
@@ -25,6 +25,15 @@ function FeatureDescription({
     );
   }
 
+  if (feature === MiscellaneousFeature.TopicInfoIgnore) {
+    return (
+      <p class="description">
+        Moves the topic ignore button to be in the info section next to the
+        posted date.
+      </p>
+    );
+  }
+
   return <></>;
 }
 
diff --git a/source/scss/content-scripts.scss b/source/scss/content-scripts.scss
index 25598c1..254aace 100644
--- a/source/scss/content-scripts.scss
+++ b/source/scss/content-scripts.scss
@@ -4,6 +4,7 @@
 @import "scripts/hide-topics";
 @import "scripts/jump-to-new-comment";
 @import "scripts/markdown-toolbar";
+@import "scripts/topic-info-ignore";
 @import "scripts/user-labels";
 @import "scripts/username-colors";
 
diff --git a/source/scss/scripts/_topic-info-ignore.scss b/source/scss/scripts/_topic-info-ignore.scss
new file mode 100644
index 0000000..54e6a77
--- /dev/null
+++ b/source/scss/scripts/_topic-info-ignore.scss
@@ -0,0 +1,20 @@
+.trx-topic-info-ignore {
+  .topic-info {
+    // The first three values are copied from Tildes, the last one we set to add
+    // the Ignore button into.
+    grid-template-columns: 1fr 1.5fr 0.7fr 1fr;
+
+    // Override some of the styles of the button so it doesn't look out of
+    // place as much.
+    .btn-post-action {
+      align-self: center;
+      color: var(--link-color);
+      padding: 0;
+
+      &:hover {
+        color: var(--link-hover-color);
+        text-decoration: underline;
+      }
+    }
+  }
+}
diff --git a/source/storage/enums.ts b/source/storage/enums.ts
index 650fffc..4249a00 100644
--- a/source/storage/enums.ts
+++ b/source/storage/enums.ts
@@ -21,6 +21,7 @@ export enum Feature {
  */
 export enum MiscellaneousFeature {
   CommentAnchorFix = "comment-anchor-fix",
+  TopicInfoIgnore = "topic-info-ignore",
 }
 
 /**