From 872b84aa95fba35102b13191bb3817c9219f688b Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 30 Oct 2024 17:09:38 -0700
Subject: [PATCH] Move reason inside post, fix incorrect header post and topic
 borders

---
 src/app/dashboard/topics/[topic]/layout.tsx       |  2 +-
 .../user/[handle]/(post)/post/[id]/layout.tsx     |  2 +-
 .../contentDisplay/feedPost/FeedPost.tsx          | 15 ++++-----------
 .../contentDisplay/topicHeader/TopicHeader.tsx    | 12 +++++++-----
 src/components/dataDisplay/reason/Reason.tsx      |  1 +
 src/containers/thread/ParentContainer.tsx         |  2 +-
 6 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/app/dashboard/topics/[topic]/layout.tsx b/src/app/dashboard/topics/[topic]/layout.tsx
index 0e81d3ce..6e4705ce 100644
--- a/src/app/dashboard/topics/[topic]/layout.tsx
+++ b/src/app/dashboard/topics/[topic]/layout.tsx
@@ -13,7 +13,7 @@ export default async function TopicsLayout({
 }) {
   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">
+      <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 px-3 py-2 md:border 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" />
diff --git a/src/app/dashboard/user/[handle]/(post)/post/[id]/layout.tsx b/src/app/dashboard/user/[handle]/(post)/post/[id]/layout.tsx
index 8ef4b6f6..553da699 100644
--- a/src/app/dashboard/user/[handle]/(post)/post/[id]/layout.tsx
+++ b/src/app/dashboard/user/[handle]/(post)/post/[id]/layout.tsx
@@ -47,7 +47,7 @@ export default function PostThreadLayout({
 }) {
   return (
     <>
-      <div className="border-skin-base md:rounded-t-2xl border-b-0 md:border md:border-b-0">
+      <div className="border-skin-base border-b md:rounded-t-2xl md:border">
         <h2 className="text-skin-base px-3 py-2 text-center text-xl font-semibold">
           Post
         </h2>
diff --git a/src/components/contentDisplay/feedPost/FeedPost.tsx b/src/components/contentDisplay/feedPost/FeedPost.tsx
index a384dc75..7b372d18 100644
--- a/src/components/contentDisplay/feedPost/FeedPost.tsx
+++ b/src/components/contentDisplay/feedPost/FeedPost.tsx
@@ -52,12 +52,8 @@ export default function FeedPost(props: Props) {
   if (!showPost) {
     return (
       <>
-        {reason && (
-          <div className="px-3 pt-3">
-            <Reason reason={reason} />
-          </div>
-        )}
-        <article>
+        <article className="p-3">
+          {reason && <Reason reason={reason} />}
           <div className="relative flex items-start gap-3">
             <Avatar size="md" className="z-20 shrink-0" />
             <div className={`flex grow flex-col ${isParent && "pb-6"}`}>
@@ -77,11 +73,6 @@ export default function FeedPost(props: Props) {
 
   return (
     <>
-      {reason && (
-        <div className="px-3 pt-3">
-          <Reason reason={reason} />
-        </div>
-      )}
       <article
         onClick={(e) => {
           e.stopPropagation();
@@ -93,6 +84,8 @@ export default function FeedPost(props: Props) {
         }}
         className="cursor-pointer hover:bg-skin-secondary p-3"
       >
+        {reason && <Reason reason={reason} />}
+
         <div className="relative flex items-start gap-3">
           <div
             onClick={(e) => {
diff --git a/src/components/contentDisplay/topicHeader/TopicHeader.tsx b/src/components/contentDisplay/topicHeader/TopicHeader.tsx
index b26c215b..a6bd927c 100644
--- a/src/components/contentDisplay/topicHeader/TopicHeader.tsx
+++ b/src/components/contentDisplay/topicHeader/TopicHeader.tsx
@@ -24,11 +24,13 @@ export default function TopicHeader(props: Props) {
   return (
     <article className="border-skin-base md:border-x">
       {error && (
-        <FeedAlert
-          variant="badResponse"
-          message="Something went wrong"
-          standalone
-        />
+        <div className="p-3">
+          <FeedAlert
+            variant="badResponse"
+            message="Could not load this topic"
+            standalone
+          />
+        </div>
       )}
 
       {data?.image && !hideImage && (
diff --git a/src/components/dataDisplay/reason/Reason.tsx b/src/components/dataDisplay/reason/Reason.tsx
index 5eaf6dd4..f69c35fa 100644
--- a/src/components/dataDisplay/reason/Reason.tsx
+++ b/src/components/dataDisplay/reason/Reason.tsx
@@ -24,6 +24,7 @@ export default function Reason(props: Props) {
       {isRepost && (
         <Link
           href={`/dashboard/user/${reason.by.handle}`}
+          onClick={(e) => e.stopPropagation()}
           className="max-w-fit"
         >
           <div className="text-skin-secondary hover:text-skin-tertiary inline-flex flex-wrap items-center gap-1 text-lg font-semibold">
diff --git a/src/containers/thread/ParentContainer.tsx b/src/containers/thread/ParentContainer.tsx
index 32600148..a5ca564b 100644
--- a/src/containers/thread/ParentContainer.tsx
+++ b/src/containers/thread/ParentContainer.tsx
@@ -17,7 +17,7 @@ export default function ParentContainer(props: Props) {
   const [showMore, setShowMore] = useState(false);
 
   return (
-    <div className="border-skin-base flex flex-col justify-between border border-x-0 first:border-t-0  last:rounded-b-2xl last:border-b md:border-x odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0">
+    <div className="border-skin-base flex flex-col justify-between border border-x-0 first:border-t-0 last:rounded-b-2xl last:border-b md:border-x odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0">
       {parentChain.map((parent, i) => (
         <div key={i}>
           {AppBskyFeedDefs.isBlockedPost(parent) && (