Add subject to catalog

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 () {

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

src/entries/contentScript/primary/Thread.tsx

@@ -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

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")
 			}