Add icon and embed link to topic header, fix blank target values

src/app/dashboard/topics/[topic]/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { SiGooglemessages } from "react-icons/si";
 
 export const metadata: Metadata = {
   title: "Topic",
@@ -10,5 +11,22 @@ export default async function TopicsLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 px-3 py-2 md:border md:border-b-0 md:rounded-t-2xl">
+        <div className="flex flex-wrap items-center gap-2 text-skin-secondary">
+          <div className="bg-primary/10 p-3 rounded-full">
+            <SiGooglemessages className="text-primary text-2xl" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-semibold text-lg text-skin-base">Topic</span>
+            <span className="font-medium text-skin-secondary">
+              Posts that mention this topic
+            </span>
+          </div>
+        </div>
+      </article>
+      {children}
+    </>
+  );
 }

src/app/dashboard/user/[handle]/(post)/post/[id]/layout.tsx

@@ -45,5 +45,14 @@ export default function PostThreadLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      <div className="border-skin-base md:rounded-t-2xl border-b-0 md:border md:border-b-0">
+        <h2 className="text-skin-base px-3 py-2 text-center text-xl font-semibold">
+          Post
+        </h2>
+      </div>
+      {children}
+    </>
+  );
 }

src/components/contentDisplay/topicHeader/TopicHeader.tsx

@@ -6,6 +6,9 @@ import { SiGooglemessages } from "react-icons/si";
 import TopicHeaderSkeleton from "./TopicHeaderSkeleton";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import { useState } from "react";
+import Link from "next/link";
+import { BiLinkExternal } from "react-icons/bi";
+import { getHostname } from "@/lib/utils/text";
 
 interface Props {
   url: string;
@@ -19,7 +22,7 @@ export default function TopicHeader(props: Props) {
   if (isLoading && !data) return <TopicHeaderSkeleton />;
 
   return (
-    <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 p-3 md:border md:border-b-0 md:rounded-t-2xl">
+    <article className="border-skin-base md:border-x">
       {error && (
         <FeedAlert
           variant="badResponse"
@@ -34,28 +37,32 @@ export default function TopicHeader(props: Props) {
           alt={`Image from ${url}`}
           width={900}
           height={500}
-          className="rounded-lg"
           onError={() => setHideImage(true)}
+          className="max-h-96 object-cover"
         />
       )}
 
       {data && (
-        <>
-          <div className="flex flex-wrap items-center gap-2 text-skin-secondary mt-2">
-            <SiGooglemessages className="text-2xl" />
-            <span className="font-medium text-lg">Topic</span>
-          </div>
-          <div className="flex flex-col gap-1 mt-1">
+        <div className="p-3">
+          <div className="flex flex-col gap-1">
+            <Link
+              href={url}
+              target="_blank"
+              className="flex flex-wrap items-center gap-2 mt-2 font-medium text-skin-tertiary hover:text-skin-base"
+            >
+              <BiLinkExternal />
+              {getHostname(url)}
+            </Link>
             {data?.title && (
-              <h3 className="text-skin-base break-words text-xl font-medium">
+              <h1 className="text-skin-base break-words text-xl font-medium">
                 {data.title}
-              </h3>
+              </h1>
             )}
             {data?.description && (
               <p className="text-skin-secondary">{data.description}</p>
             )}
           </div>
-        </>
+        </div>
       )}
     </article>
   );

src/components/contentDisplay/topicHeader/TopicHeaderSkeleton.tsx

@@ -1,15 +1,11 @@
 export default function TopicHeaderSkeleton() {
   return (
-    <article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border-x md:border-t">
-      <div className="bg-skin-muted h-80 w-full animate-pulse rounded-lg" />
-
-      <div className="flex flex-wrap items-center gap-2 mt-2">
-        <div className="bg-skin-muted h-8 w-8 animate-pulse rounded-full" />
-        <div className="bg-skin-muted h-5 w-16 animate-pulse rounded" />
-      </div>
-
-      <div className="flex flex-col gap-1 mt-1">
+    <article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 pb-3 md:border-x md:border-t">
+      <div className="bg-skin-muted h-80 w-full animate-pulse" />
+      <div className="flex flex-col gap-1 p-3">
+        <div className="bg-skin-muted h-4 w-1/4 animate-pulse rounded" />
         <div className="bg-skin-muted h-6 w-3/4 animate-pulse rounded" />
+        <div className="bg-skin-muted h-6 w-2/4 animate-pulse rounded" />
         <div className="bg-skin-muted h-3 w-1/2 animate-pulse rounded mt-2" />
         <div className="bg-skin-muted h-3 w-1/3 animate-pulse rounded" />
       </div>

src/components/dataDisplay/postEmbed/ExternalEmbed.tsx

@@ -19,7 +19,7 @@ export default function ExternalEmbed(props: Props) {
           <div className="bg-skin-base hover:bg-skin-secondary rounded-t-lg">
             <Link
               href={embed.external.uri}
-              target="blank"
+              target="_blank"
               onClick={(e) => e.stopPropagation()}
             >
               {embed.external.thumb && (

src/components/dataDisplay/postText/postText.tsx

@@ -60,7 +60,7 @@ export default function PostText(props: Props) {
                 <Link
                   className="text-skin-link-base hover:text-skin-link-hover break-all"
                   href={segment.link?.uri!}
-                  target="blank"
+                  target="_blank"
                   key={segment.link?.uri}
                   onClick={(e) => e.stopPropagation()}
                 >
@@ -79,7 +79,7 @@ export default function PostText(props: Props) {
                   <Link
                     className="text-skin-link-base hover:text-skin-link-hover break-all"
                     href={segment.link?.uri!}
-                    target="blank"
+                    target="_blank"
                     key={segment.link?.uri}
                     onClick={(e) => e.stopPropagation()}
                   >

src/components/dataDisplay/profileBio/ProfileBio.tsx

@@ -41,7 +41,7 @@ export default function ProfileBio(props: Props) {
           <Link
             className="text-skin-link-base hover:text-skin-link-hover inline-block break-all"
             href={segment.link!.uri}
-            target="blank"
+            target="_blank"
             key={segment.link!.uri}
             onClick={(e) => e.stopPropagation()}
           >

src/components/navigational/tabs/TabItem.tsx

@@ -38,7 +38,7 @@ export default function TabItem(props: Props) {
         isActive
           ? "border-primary text-skin-link-base"
           : "text-skin-secondary border-transparent"
-      }`}
+      }`}      
     >
       {label}
     </Link>

src/containers/thread/PostThreadContainer.tsx

@@ -71,11 +71,9 @@ export default function PostThreadContainer(props: Props) {
     setFilteredReplies(
       replyChains
         .map((replyArr) =>
-          replyArr.some((reply) =>
-            replyIncludes(reply.post.record, textSearch),
-          ),
+          replyArr.some((reply) => replyIncludes(reply.post.record, textSearch))
         )
-        .filter(Boolean).length,
+        .filter(Boolean).length
     );
   }, [replyChains, textSearch]);
 
@@ -91,44 +89,28 @@ export default function PostThreadContainer(props: Props) {
 
   if (!hasValidThread) {
     return (
-      <div>
-        <div className="md:border-skin-base md:rounded-t-2xl md:border md:border-x">
-          <h2 className="text-skin-base px-3 py-2 text-center text-xl font-semibold">
-            Post
-          </h2>
+      <section className="border-skin-base border border-t-0 p-3 md:rounded-b-2xl">
+        {AppBskyFeedDefs.isBlockedPost(thread) && <BlockedEmbed depth={0} />}
+        {AppBskyFeedDefs.isNotFoundPost(thread) && <NotFoundEmbed depth={0} />}
+        {AppBskyFeedDefs.isBlockedAuthor(thread) && <BlockedEmbed depth={0} />}
+        {isError && (
+          <FeedAlert
+            variant="badResponse"
+            message={error.message}
+            standalone={true}
+          />
+        )}
+        <div className="mt-3 flex justify-center">
+          <Button onClick={() => router.push("/dashboard/home")}>
+            Go Home
+          </Button>
         </div>
-        <section className="border-skin-base border border-t-0 p-3 md:rounded-b-2xl">
-          {AppBskyFeedDefs.isBlockedPost(thread) && <BlockedEmbed depth={0} />}
-          {AppBskyFeedDefs.isNotFoundPost(thread) && (
-            <NotFoundEmbed depth={0} />
-          )}
-          {AppBskyFeedDefs.isBlockedAuthor(thread) && (
-            <BlockedEmbed depth={0} />
-          )}
-          {isError && (
-            <FeedAlert
-              variant="badResponse"
-              message={error.message}
-              standalone={true}
-            />
-          )}
-          <div className="mt-3 flex justify-center">
-            <Button onClick={() => router.push("/dashboard/home")}>
-              Go Home
-            </Button>
-          </div>
-        </section>
-      </div>
+      </section>
     );
   }
 
   return (
     <div>
-      <div className="border-skin-base border-b-0 md:rounded-t-2xl md:border md:border-x md:border-b-0">
-        <h2 className="text-skin-base px-3 py-2 text-center text-xl font-semibold">
-          Post
-        </h2>
-      </div>
       {(isFetching || isLoading) && <FeedPostSkeleton />}
       {parentChain && parentChain.length > 0 && contentFilter && (
         <ParentContainer
@@ -171,7 +153,7 @@ export default function PostThreadContainer(props: Props) {
               <>
                 {showReplies &&
                   replyArr.some((reply) =>
-                    replyIncludes(reply.post.record, textSearch),
+                    replyIncludes(reply.post.record, textSearch)
                   ) && (
                     <div
                       className="border-skin-base border border-x-0 first:border-t-0 last:border-b md:border-x md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"