From d58e9fa1e51791ac250d315da46c70f3e83a34f7 Mon Sep 17 00:00:00 2001
From: Lalle <29478339+LalleSX@users.noreply.github.com>
Date: Tue, 16 May 2023 00:20:17 +0200
Subject: [PATCH] Add subject to catalog

---
 src/entries/contentScript/image.ts           |  2 +-
 src/entries/contentScript/primary/Header.tsx |  2 +-
 src/entries/contentScript/primary/Thread.tsx | 46 --------------------
 src/entries/contentScript/primary/main.tsx   |  6 +++
 4 files changed, 8 insertions(+), 48 deletions(-)
 delete mode 100644 src/entries/contentScript/primary/Thread.tsx

diff --git a/src/entries/contentScript/image.ts b/src/entries/contentScript/image.ts
index 50a1d1d..c35bd3e 100644
--- a/src/entries/contentScript/image.ts
+++ b/src/entries/contentScript/image.ts
@@ -15,7 +15,7 @@ export function initImageHovering(): void {
     }
 
     // Find all thumbnail images on the page
-    const thumbnails = $("a.fileThumb") as JQuery<HTMLAnchorElement>
+    const thumbnails = $("a.fileThumb")
 
     // Attach hover events to each thumbnail image
     thumbnails.each(function () {
diff --git a/src/entries/contentScript/primary/Header.tsx b/src/entries/contentScript/primary/Header.tsx
index 43b36d7..17e8159 100644
--- a/src/entries/contentScript/primary/Header.tsx
+++ b/src/entries/contentScript/primary/Header.tsx
@@ -25,7 +25,7 @@ const Header = () => {
 	}
 
 	return (
-		<div className=" bg-indigo-50 text-gray-900 py-2 px-4 flex justify-between items-center fixed top-0 left-0 w-full">
+		<div className=" bg-indigo-50 text-gray-900 py-2 px-4 flex justify-between items-center fixed top-0 left-0 w-full border-b border-gray-300 z-10">
 			<div className="flex">
 				<a href={indexUrl} className="mx-2 hover:text-red-500">
 					Index
diff --git a/src/entries/contentScript/primary/Thread.tsx b/src/entries/contentScript/primary/Thread.tsx
deleted file mode 100644
index 98597d2..0000000
--- a/src/entries/contentScript/primary/Thread.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Thread.tsx
-import React from "react"
-
-interface ThreadProps {
-  threadId: number;
-  imageUrl: string;
-  replies: number;
-  teaser: string;
-  board: string;
-  customImageUrl: string;
-}
-
-const Thread: React.FC<ThreadProps> = ({
-  threadId,
-  imageUrl,
-  replies,
-  teaser,
-  board,
-  customImageUrl,
-}) => {
-  const newImageUrl = customImageUrl || imageUrl
-
-  return (
-    <div id={`thread-${threadId}`} className="thread">
-      <a href={`//boards.4channel.org/${board}/thread/${threadId}`}>
-        <img
-          loading="lazy"
-          alt=""
-          id={`thumb-${threadId}`}
-          className="thumb"
-          src={newImageUrl}
-          data-id={threadId}
-        />
-      </a>
-      <div title="(R)eplies / (I)mage Replies" id={`meta-${threadId}`} className="meta">
-        R: <b>{replies}</b>
-        <a href="#" className="postMenuBtn" title="Thread Menu" data-post-menu={threadId}>
-          ▶
-        </a>
-      </div>
-      <div className="teaser">{teaser}</div>
-    </div>
-  )
-}
-
-export default Thread
diff --git a/src/entries/contentScript/primary/main.tsx b/src/entries/contentScript/primary/main.tsx
index a13b646..5ef64ad 100644
--- a/src/entries/contentScript/primary/main.tsx
+++ b/src/entries/contentScript/primary/main.tsx
@@ -38,12 +38,18 @@ $(document).ready(() => {
 		threads.forEach((thread: Thread) => {
 			const threadId = thread.no
 			const comment = thread.com
+			const subject = thread.sub
 
 			// Assuming each thread teaser has an id like `thread-{id}`
 			const threadTeaser = $(`#thread-${threadId} > .teaser`)
 			if (threadTeaser.length > 0) {
 				// Replace the teaser with the comment
 				threadTeaser.html(comment)
+				// Add the subject to the top of the comment if it exists
+				if (subject) {
+					threadTeaser.prepend(`<span class= "subject">${subject}</span> <br>`)
+					threadTeaser.find(".subject").css("color", "#0f0c5d").css("font-weight", "700")
+				}
 				// Add css to the class "quote" and make the text green #789922
 				threadTeaser.find(".quote").css("color", "#789922")
 			}