From 5576c5d6578bd13c5a26cedd7dce749a9fe3f339 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Fri, 9 Feb 2024 12:37:56 -0800
Subject: [PATCH] Fix handle not showing when display name isn't available,
 hide most parent replies if above threshold

---
 src/app/(site)/about/page.tsx                 |  5 +-
 src/app/dashboard/layout.tsx                  |  2 +-
 src/app/providers/composer.tsx                |  2 +-
 .../actions/editProfile/EditProfile.tsx       | 32 ++++-----
 .../contentDisplay/feedItem/FeedItem.tsx      | 14 ++--
 .../contentDisplay/feedPost/FeedPost.tsx      |  2 +-
 .../notification/NotificationItem.tsx         |  4 +-
 .../profileCard/ProfileCard.tsx               |  2 +-
 .../profileHeader/ProfileHeader.tsx           |  5 +-
 .../savedFeedItem/SavedFeedItem.tsx           |  8 +--
 .../contentDisplay/searchPost/SearchPost.tsx  |  2 +-
 .../contentDisplay/threadPost/ThreadPost.tsx  |  2 +-
 .../dataDisplay/postEmbed/ListEmbed.tsx       |  2 +-
 .../dataDisplay/postEmbed/RecordEmbed.tsx     | 14 ++--
 src/components/dataDisplay/reason/Reason.tsx  |  4 +-
 src/components/inputs/editor/Editor.tsx       |  4 +-
 src/components/inputs/editor/QuotePreview.tsx | 10 +--
 .../inputs/editor/ReplyToPreview.tsx          |  2 +-
 .../inputs/editor/SuggestionList.tsx          | 12 ++--
 src/components/inputs/editor/TextEdit.tsx     |  8 +--
 src/components/inputs/radio/Radio.tsx         |  4 +-
 src/components/inputs/switch/Switch.tsx       |  2 +-
 src/components/inputs/tabGroup/TabGroup.tsx   |  4 +-
 src/components/navigational/aside/Aside.tsx   |  8 +--
 .../myFeedsContainer/MyFeedsContainer.tsx     | 16 ++---
 .../settingsContainer/SettingsContainer.tsx   | 66 +++++++++----------
 src/containers/thread/ParentContainer.tsx     | 57 ++++++++++++++--
 src/containers/thread/PostThreadContainer.tsx | 14 ++--
 src/lib/consts/thread.ts                      |  2 +
 src/lib/hooks/bsky/actor/useUpdateProfile.tsx |  4 +-
 30 files changed, 178 insertions(+), 135 deletions(-)

diff --git a/src/app/(site)/about/page.tsx b/src/app/(site)/about/page.tsx
index c596321b..aad74750 100644
--- a/src/app/(site)/about/page.tsx
+++ b/src/app/(site)/about/page.tsx
@@ -62,14 +62,13 @@ export default function Page() {
         <p className="mt-3">
           The app is being developed and designed by me,{" "}
           <Link
-            href="https://bsky.app/profile/contrapunctus.bsky.social"
+            href="https://pouriade.com"
             className="underline underline-offset-2"
           >
             Pouria
           </Link>
           . I started the project to learn more about the AT Protocol and as fun
-          way to practice my skills while I look for a full-time role after
-          graduation.
+          way to practice my skills.
         </p>
 
         <h2 className="mb-6 mt-12 text-2xl font-medium text-neutral-600">
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index e81110d7..32b811a9 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -21,7 +21,7 @@ export default async function DashboardLayout({
   const profile = await getProfile(session?.user.bskySession.handle);
 
   return (
-    <main className="flex justify-center gap-6 lg:gap-12 pb-20 md:mt-6">
+    <main className="flex justify-center gap-6 pb-20 md:mt-6 lg:gap-12">
       {profile && <Composer author={profile} />}
       <SidePanel />
       <section className="w-full md:max-w-xl">
diff --git a/src/app/providers/composer.tsx b/src/app/providers/composer.tsx
index acc5cc38..c0f964a6 100644
--- a/src/app/providers/composer.tsx
+++ b/src/app/providers/composer.tsx
@@ -80,7 +80,7 @@ export const ComposerProvider: React.FC<ComposerProviderProps> = ({
       openComposer,
       closeComposer,
     }),
-    []
+    [],
   );
 
   const state = {
diff --git a/src/components/actions/editProfile/EditProfile.tsx b/src/components/actions/editProfile/EditProfile.tsx
index 3187f7c6..22692cd2 100644
--- a/src/components/actions/editProfile/EditProfile.tsx
+++ b/src/components/actions/editProfile/EditProfile.tsx
@@ -49,17 +49,17 @@ export default function EditProfile(props: Props) {
       }}
     >
       <Dialog.Trigger asChild>
-        <Button className="flex items-center justify-center gap-1 font-medium text-sm disabled:cursor-not-allowed rounded-full py-2 px-4 bg-neutral-100 text-neutral-500 hover:brightness-95">
+        <Button className="flex items-center justify-center gap-1 rounded-full bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-500 hover:brightness-95 disabled:cursor-not-allowed">
           Edit Profile
         </Button>
       </Dialog.Trigger>
-      <Dialog.Overlay className="z-50 bg-black/80 fixed inset-0 w-screen h-screen animate-fade animate-duration-200" />
-      <Dialog.Content className="z-50 bg-white w-[90svw] p-3 fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] h-fit max-h-[90svh] max-w-xl md:border-t shadow-2xl rounded-2xl overflow-auto animate-fade animate-duration-200">
-        <h2 className="text-2xl font-semibold text-center mb-2">
+      <Dialog.Overlay className="animate-fade animate-duration-200 fixed inset-0 z-50 h-screen w-screen bg-black/80" />
+      <Dialog.Content className="animate-fade animate-duration-200 fixed left-[50%] top-[50%] z-50 h-fit max-h-[90svh] w-[90svw] max-w-xl translate-x-[-50%] translate-y-[-50%] overflow-auto rounded-2xl bg-white p-3 shadow-2xl md:border-t">
+        <h2 className="mb-2 text-center text-2xl font-semibold">
           Edit My Profile
         </h2>
         <div className="relative">
-          <div className="absolute  right-3 bottom-3 bg-neutral-200 p-1 rounded-full">
+          <div className="absolute  bottom-3 right-3 rounded-full bg-neutral-200 p-1">
             <BiSolidCamera />
           </div>
           <Dropzone
@@ -87,13 +87,13 @@ export default function EditProfile(props: Props) {
                   alt="Banner"
                   width={800}
                   height={100}
-                  className="object-cover h-[9rem] rounded-2xl hover:cursor-pointer"
+                  className="h-[9rem] rounded-2xl object-cover hover:cursor-pointer"
                 />
               </div>
             )}
           </Dropzone>
-          <div className="absolute bottom-0 transform translate-y-1/2 px-3 ">
-            <div className="absolute right-3 bottom-3 bg-neutral-200 p-1 rounded-full">
+          <div className="absolute bottom-0 translate-y-1/2 transform px-3 ">
+            <div className="absolute bottom-3 right-3 rounded-full bg-neutral-200 p-1">
               <BiSolidCamera />
             </div>
             <Dropzone
@@ -121,25 +121,25 @@ export default function EditProfile(props: Props) {
                     alt="Avatar"
                     width={95}
                     height={95}
-                    className="object-cover rounded-full h-[95px] w-[95px] border-4 border-white hover:cursor-pointer"
+                    className="h-[95px] w-[95px] rounded-full border-4 border-white object-cover hover:cursor-pointer"
                   />
                 </div>
               )}
             </Dropzone>
           </div>
         </div>
-        <div className="mt-14 md:max-w-xl mx-auto">
+        <div className="mx-auto mt-14 md:max-w-xl">
           <div>
-            <h3 className="text-xl font-semibold mb-2">Display Name</h3>
+            <h3 className="mb-2 text-xl font-semibold">Display Name</h3>
             <Input
               maxLength={MAX_DISPLAY_NAME_LENGTH}
               placeholder="Your name"
-              defaultValue={profile.displayName ?? profile.handle}
+              defaultValue={profile.displayName || profile.handle}
               onChange={(e) => setDisplayName(e.currentTarget.value)}
             />
           </div>
           <div>
-            <h3 className="text-xl font-semibold my-2">Description</h3>
+            <h3 className="my-2 text-xl font-semibold">Description</h3>
             <Textarea
               rows={4}
               maxLength={MAX_DESCRIPTION_LENGTH}
@@ -150,8 +150,8 @@ export default function EditProfile(props: Props) {
             />
           </div>
         </div>
-        <div className="flex gap-3 mt-2 justify-end">
-          <Dialog.Close className="px-4 py-2 text-sm text-neutral-600 font-semibold border rounded-full hover:bg-neutral-50">
+        <div className="mt-2 flex justify-end gap-3">
+          <Dialog.Close className="rounded-full border px-4 py-2 text-sm font-semibold text-neutral-600 hover:bg-neutral-50">
             Cancel
           </Dialog.Close>
           <Button
@@ -164,7 +164,7 @@ export default function EditProfile(props: Props) {
               });
             }}
             disabled={updateProfile.isPending}
-            className={`bg-primary text-white text-sm font-semibold px-4 py-2 rounded-full hover:bg-primary-dark ${
+            className={`bg-primary hover:bg-primary-dark rounded-full px-4 py-2 text-sm font-semibold text-white ${
               updateProfile.isPending && "animate-pulse"
             }`}
           >
diff --git a/src/components/contentDisplay/feedItem/FeedItem.tsx b/src/components/contentDisplay/feedItem/FeedItem.tsx
index 7646c112..46d4723a 100644
--- a/src/components/contentDisplay/feedItem/FeedItem.tsx
+++ b/src/components/contentDisplay/feedItem/FeedItem.tsx
@@ -46,14 +46,14 @@ export default function FeedItem(props: Props) {
     <Link
       href={{
         pathname: `/dashboard/feeds/${encodeURIComponent(
-          feedItem.uri.split(":")[3].split("/")[0]
+          feedItem.uri.split(":")[3].split("/")[0],
         )}`,
         query: { uri: feedItem.uri },
       }}
-      className="flex flex-col gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+      className="flex flex-col gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
     >
-      <div className="flex flex-wrap gap-3 items-center justify-between">
-        <div className="flex flex-wrap gap-3 items-center">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-3">
           <Image
             src={avatar ?? FallbackFeed}
             alt={displayName}
@@ -62,10 +62,10 @@ export default function FeedItem(props: Props) {
             className={`rounded-lg ${!avatar && "border"}`}
           />
           <div className="flex flex-col">
-            <h2 className="text-neutral-700 font-semibold break-words">
+            <h2 className="break-words font-semibold text-neutral-700">
               {feedItem.displayName}
             </h2>
-            <h3 className="text-neutral-500 text-sm break-all">
+            <h3 className="break-all text-sm text-neutral-500">
               By @{creator.handle}
             </h3>
           </div>
@@ -80,7 +80,7 @@ export default function FeedItem(props: Props) {
           {!isSaved && <BiPlus className="text-lg text-green-600" />}
         </Button>
       </div>
-      <p className="text-neutral-700 break-words">{description}</p>
+      <p className="break-words text-neutral-700">{description}</p>
       <small className="flex items-center gap-1 font-medium text-neutral-500">
         <BiSolidHeart />
         <span>{likeCount ?? 0}</span>
diff --git a/src/components/contentDisplay/feedPost/FeedPost.tsx b/src/components/contentDisplay/feedPost/FeedPost.tsx
index 354d8a2e..213d4582 100644
--- a/src/components/contentDisplay/feedPost/FeedPost.tsx
+++ b/src/components/contentDisplay/feedPost/FeedPost.tsx
@@ -66,7 +66,7 @@ export default function FeedPost(props: Props) {
                 className="flex gap-1"
               >
                 <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700 hover:text-neutral-500">
-                  {author.displayName ?? author.handle}{" "}
+                  {author.displayName || author.handle}{" "}
                 </span>
                 <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
                   @{author.handle}
diff --git a/src/components/contentDisplay/notification/NotificationItem.tsx b/src/components/contentDisplay/notification/NotificationItem.tsx
index 39da3bb1..e8ebe541 100644
--- a/src/components/contentDisplay/notification/NotificationItem.tsx
+++ b/src/components/contentDisplay/notification/NotificationItem.tsx
@@ -80,7 +80,7 @@ const NotificationItem = memo(function NotificationItem(props: Props) {
                       href={`/dashboard/user/${author.handle}`}
                       className="break-all font-semibold text-neutral-700 hover:text-neutral-500"
                     >
-                      {author.displayName ?? author.handle}{" "}
+                      {author.displayName || author.handle}{" "}
                     </Link>
                     <span className="text-neutral-700">
                       and {allAuthors.length - 1}{" "}
@@ -93,7 +93,7 @@ const NotificationItem = memo(function NotificationItem(props: Props) {
                     href={`/dashboard/user/${author.handle}`}
                     className="break-all font-semibold text-neutral-700 hover:text-neutral-500"
                   >
-                    {author.displayName ?? author.handle}{" "}
+                    {author.displayName || author.handle}{" "}
                   </Link>
                 )}
                 <span className="break-words font-medium text-neutral-700">
diff --git a/src/components/contentDisplay/profileCard/ProfileCard.tsx b/src/components/contentDisplay/profileCard/ProfileCard.tsx
index e3bf974f..d16e52a4 100644
--- a/src/components/contentDisplay/profileCard/ProfileCard.tsx
+++ b/src/components/contentDisplay/profileCard/ProfileCard.tsx
@@ -25,7 +25,7 @@ const ProfileCard = memo(function ProfileCard(props: Props) {
             <Avatar src={profile.avatar} />
             <div className="flex flex-col">
               <h2 className="font-semibold">
-                {profile?.displayName ?? profile.handle}
+                {profile.displayName || profile.handle}
               </h2>
               <h3 className="break-all font-medium text-neutral-400">
                 @{profile?.handle}
diff --git a/src/components/contentDisplay/profileHeader/ProfileHeader.tsx b/src/components/contentDisplay/profileHeader/ProfileHeader.tsx
index c0940d3a..6dab3e5e 100644
--- a/src/components/contentDisplay/profileHeader/ProfileHeader.tsx
+++ b/src/components/contentDisplay/profileHeader/ProfileHeader.tsx
@@ -18,7 +18,6 @@ import ViewerInfo from "@/components/dataDisplay/viewerInfo/ViewerInfo";
 import ProfileBio from "@/components/dataDisplay/profileBio/ProfileBio";
 import usePreferences from "@/lib/hooks/bsky/actor/usePreferences";
 import EditProfile from "@/components/actions/editProfile/EditProfile";
-import { getFormattedDate } from "@/lib/utils/time";
 import JoinedDate from "@/components/dataDisplay/joinedDate/JoinedDate";
 
 interface Props {
@@ -135,9 +134,7 @@ export default function ProfileHeader(props: Props) {
           <div className="p-3">
             <div className="flex flex-wrap items-center gap-x-2">
               <h1 className="break-all text-2xl font-semibold text-neutral-700">
-                {profile?.displayName ||
-                  (profile?.handle &&
-                    (profile?.displayName ?? profile?.handle))}
+                {profile.displayName || profile.handle}
               </h1>
               <div className="flex flex-wrap gap-1.5">
                 {profile.viewer?.followedBy && (
diff --git a/src/components/contentDisplay/savedFeedItem/SavedFeedItem.tsx b/src/components/contentDisplay/savedFeedItem/SavedFeedItem.tsx
index bd063950..4a3da671 100644
--- a/src/components/contentDisplay/savedFeedItem/SavedFeedItem.tsx
+++ b/src/components/contentDisplay/savedFeedItem/SavedFeedItem.tsx
@@ -17,13 +17,13 @@ export default function SavedFeedItem(props: Props) {
     <Link
       href={{
         pathname: `/dashboard/feeds/${encodeURIComponent(
-          feedItem.uri.split(":")[3].split("/")[0]
+          feedItem.uri.split(":")[3].split("/")[0],
         )}`,
         query: { uri: feedItem.uri },
       }}
-      className="flex justify-between items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+      className="flex items-center justify-between gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
     >
-      <div className="flex flex-wrap gap-3 items-center">
+      <div className="flex flex-wrap items-center gap-3">
         <Image
           src={avatar ?? FallbackFeed}
           alt={displayName}
@@ -31,7 +31,7 @@ export default function SavedFeedItem(props: Props) {
           height={40}
           className={`rounded-lg ${!avatar && "border"}`}
         />
-        <h2 className="text-neutral-700 font-semibold break-words">
+        <h2 className="break-words font-semibold text-neutral-700">
           {feedItem.displayName}
         </h2>
       </div>
diff --git a/src/components/contentDisplay/searchPost/SearchPost.tsx b/src/components/contentDisplay/searchPost/SearchPost.tsx
index f5dc065b..d5a0e3c2 100644
--- a/src/components/contentDisplay/searchPost/SearchPost.tsx
+++ b/src/components/contentDisplay/searchPost/SearchPost.tsx
@@ -52,7 +52,7 @@ const SearchPost = memo(function SearchPost(props: Props) {
               className="flex gap-1"
             >
               <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700 hover:text-neutral-500">
-                {author.displayName ?? author.handle}{" "}
+                {author.displayName || author.handle}{" "}
               </span>
               <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
                 @{author.handle}
diff --git a/src/components/contentDisplay/threadPost/ThreadPost.tsx b/src/components/contentDisplay/threadPost/ThreadPost.tsx
index 1bfdbd02..2a5e8d80 100644
--- a/src/components/contentDisplay/threadPost/ThreadPost.tsx
+++ b/src/components/contentDisplay/threadPost/ThreadPost.tsx
@@ -57,7 +57,7 @@ export default function ThreadPost(props: Props) {
               className="flex gap-1"
             >
               <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700 hover:text-neutral-500">
-                {author.displayName ?? author.handle}{" "}
+                {author.displayName || author.handle}{" "}
               </span>
             </Link>
             <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
diff --git a/src/components/dataDisplay/postEmbed/ListEmbed.tsx b/src/components/dataDisplay/postEmbed/ListEmbed.tsx
index 2124d28f..a157a503 100644
--- a/src/components/dataDisplay/postEmbed/ListEmbed.tsx
+++ b/src/components/dataDisplay/postEmbed/ListEmbed.tsx
@@ -41,7 +41,7 @@ export default function ListEmbed(props: Props) {
                 {list.name}
               </span>
               <span className="break-all font-medium text-neutral-400">
-                {type} by {list.creator.displayName ?? list.creator.handle}
+                {type} by {list.creator.displayName || list.creator.handle}
               </span>
               {list.description && (
                 <p className="break-all">{list.description}</p>
diff --git a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx b/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
index 8d18ee1d..53ea72e2 100644
--- a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
+++ b/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
@@ -39,25 +39,25 @@ export default function RecordEmbed(props: Props) {
           onClick={(e) => {
             router.push(
               `/dashboard/user/${record.author.handle}/post/${getPostId(
-                record.uri
-              )}`
+                record.uri,
+              )}`,
             );
             e.stopPropagation();
           }}
-          className="p-3 mt-2 border rounded-xl hover:bg-neutral-50 hover:cursor-pointer"
+          className="mt-2 rounded-xl border p-3 hover:cursor-pointer hover:bg-neutral-50"
         >
           <div className="flex flex-col">
             <div className="flex">
               <span className="flex items-center gap-1">
                 <Avatar src={record.author.avatar} size="xs" />
-                <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700">
-                  {record.author.displayName ?? record.author.handle}{" "}
+                <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700">
+                  {record.author.displayName || record.author.handle}{" "}
                 </span>
-                <span className="text-neutral-400 font-medium line-clamp-1 break-all shrink min-w-[10%]">
+                <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
                   @{record.author.handle}
                 </span>
               </span>
-              <span className="text-neutral-400 font-medium whitespace-nowrap">
+              <span className="whitespace-nowrap font-medium text-neutral-400">
                 &nbsp;· {getRelativeTime(record.indexedAt)}
               </span>
             </div>
diff --git a/src/components/dataDisplay/reason/Reason.tsx b/src/components/dataDisplay/reason/Reason.tsx
index 9afe2ab0..2412bedb 100644
--- a/src/components/dataDisplay/reason/Reason.tsx
+++ b/src/components/dataDisplay/reason/Reason.tsx
@@ -23,9 +23,9 @@ export default function Reason(props: Props) {
           href={`/dashboard/user/${reason.by.handle}`}
           className="max-w-fit"
         >
-          <div className="inline-flex flex-wrap items-center gap-1 text-lg text-neutral-600 font-semibold hover:text-neutral-500">
+          <div className="inline-flex flex-wrap items-center gap-1 text-lg font-semibold text-neutral-600 hover:text-neutral-500">
             <BiRepost />
-            <small>{reason.by.displayName ?? reason.by.handle} reposted</small>
+            <small>{reason.by.displayName || reason.by.handle} reposted</small>
           </div>
         </Link>
       )}
diff --git a/src/components/inputs/editor/Editor.tsx b/src/components/inputs/editor/Editor.tsx
index 37e47ba2..33edc51b 100644
--- a/src/components/inputs/editor/Editor.tsx
+++ b/src/components/inputs/editor/Editor.tsx
@@ -40,8 +40,8 @@ export default function Editor(props: Props) {
   const [linkEmbed, setLinkEmbed] = useState("");
   const [linkCard, setLinkCard] = useState<LinkMeta | null>(null);
   const searchUsers = useSearchUsers();
-  const replyAuthor = replyTo?.author.displayName ?? replyTo?.author.handle;
-  const quoteAuthor = quote?.author.displayName ?? quote?.author.handle;
+  const replyAuthor = replyTo?.author.displayName || replyTo?.author.handle;
+  const quoteAuthor = quote?.author.displayName || quote?.author.handle;
   const placeholderText = getComposerPlaceholder(
     replyTo ? "reply" : quote ? "quote" : "post",
     replyAuthor ?? quoteAuthor,
diff --git a/src/components/inputs/editor/QuotePreview.tsx b/src/components/inputs/editor/QuotePreview.tsx
index 696944f9..caf1ad8f 100644
--- a/src/components/inputs/editor/QuotePreview.tsx
+++ b/src/components/inputs/editor/QuotePreview.tsx
@@ -24,7 +24,7 @@ export default function QuoteToPreview(props: Props) {
   return (
     <article
       onClick={toggleShowMore}
-      className="flex items-start gap-1 p-2 border rounded-2xl cursor-pointer"
+      className="flex cursor-pointer items-start gap-1 rounded-2xl border p-2"
     >
       <Image
         src={author.avatar ?? FallbackAvatar}
@@ -35,13 +35,13 @@ export default function QuoteToPreview(props: Props) {
       />
       <div className="flex flex-col">
         <div className="flex gap-1">
-          <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700">
-            {author.displayName ?? author.handle}
+          <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700">
+            {author.displayName || author.handle}
           </span>
-          <span className="text-neutral-400 font-medium line-clamp-1 break-all shrink min-w-[10%]">
+          <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
             @{author.handle}
           </span>
-          <span className="text-neutral-400 font-medium whitespace-nowrap">
+          <span className="whitespace-nowrap font-medium text-neutral-400">
             &nbsp;· {getRelativeTime(post.indexedAt)}
           </span>
         </div>
diff --git a/src/components/inputs/editor/ReplyToPreview.tsx b/src/components/inputs/editor/ReplyToPreview.tsx
index d56dec01..5c84a210 100644
--- a/src/components/inputs/editor/ReplyToPreview.tsx
+++ b/src/components/inputs/editor/ReplyToPreview.tsx
@@ -37,7 +37,7 @@ export default function ReplyToPreview(props: Props) {
       <div className="flex flex-col">
         <div className="flex gap-1">
           <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700">
-            {author.displayName ?? author.handle}
+            {author.displayName || author.handle}
           </span>
           <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
             @{author.handle}
diff --git a/src/components/inputs/editor/SuggestionList.tsx b/src/components/inputs/editor/SuggestionList.tsx
index 86843380..ad55e1a4 100644
--- a/src/components/inputs/editor/SuggestionList.tsx
+++ b/src/components/inputs/editor/SuggestionList.tsx
@@ -65,7 +65,7 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
 
     const upHandler = () => {
       setSelectedIndex(
-        (selectedIndex + props.items.length - 1) % props.items.length
+        (selectedIndex + props.items.length - 1) % props.items.length,
       );
     };
 
@@ -102,11 +102,11 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
 
     return (
       <div
-        className={`mt-2 mb-2 bg-white rounded-xl p-1 drop-shadow-lg border min-h-fit animate-fade animate-duration-300`}
+        className={`animate-fade animate-duration-300 mb-2 mt-2 min-h-fit rounded-xl border bg-white p-1 drop-shadow-lg`}
       >
         {props.items.length === 0 && (
-          <div className="flex justify-between items-center gap-10 py-1 px-2 rounded-md  focus:bg-neutral-100 focus:outline-none cursor-pointer">
-            <span className="inline-block whitespace-nowrap max-w-xs">
+          <div className="flex cursor-pointer items-center justify-between gap-10 rounded-md px-2  py-1 focus:bg-neutral-100 focus:outline-none">
+            <span className="inline-block max-w-xs whitespace-nowrap">
               No User Found
             </span>
           </div>
@@ -119,7 +119,7 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
                 e.preventDefault();
                 selectItem(index);
               }}
-              className={`flex justify-between items-center py-1 px-2 rounded-md focus:bg-neutral-100 hover:bg-neutral-100 focus:outline-none cursor-pointer ${
+              className={`flex cursor-pointer items-center justify-between rounded-md px-2 py-1 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none ${
                 index === selectedIndex && "bg-neutral-100"
               }`}
             >
@@ -144,7 +144,7 @@ const SuggestionList = forwardRef<SuggestionListRef, SuggestionListProps>(
           ))}
       </div>
     );
-  }
+  },
 );
 
 SuggestionList.displayName = "SuggestionList";
diff --git a/src/components/inputs/editor/TextEdit.tsx b/src/components/inputs/editor/TextEdit.tsx
index 16d76c32..896002f9 100644
--- a/src/components/inputs/editor/TextEdit.tsx
+++ b/src/components/inputs/editor/TextEdit.tsx
@@ -21,13 +21,13 @@ export default function TextEdit(props: Props) {
           alt="Avatar"
           width={50}
           height={50}
-          className={`rounded-full z-50 mb-2 ${isReply && "ml-2"}`}
+          className={`z-50 mb-2 rounded-full ${isReply && "ml-2"}`}
         />
         <div className="flex flex-col">
-          <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis">
-            {author?.displayName ?? author?.handle}
+          <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold">
+            {author?.displayName || author?.handle}
           </span>
-          <span className="text-neutral-400 font-medium line-clamp-1 break-all shrink min-w-[10%]">
+          <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
             {author?.handle}
           </span>
         </div>
diff --git a/src/components/inputs/radio/Radio.tsx b/src/components/inputs/radio/Radio.tsx
index e6cc7ae0..e8b07e1e 100644
--- a/src/components/inputs/radio/Radio.tsx
+++ b/src/components/inputs/radio/Radio.tsx
@@ -38,10 +38,10 @@ const RadioGroupItem = React.forwardRef<
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
-      className="aspect-square h-4 w-4 rounded-full border border-neutral-600 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      className="ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border border-neutral-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
+      <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:content-['']" />
     </RadioGroupPrimitive.Item>
   );
 });
diff --git a/src/components/inputs/switch/Switch.tsx b/src/components/inputs/switch/Switch.tsx
index 3da1f6ff..c740086b 100644
--- a/src/components/inputs/switch/Switch.tsx
+++ b/src/components/inputs/switch/Switch.tsx
@@ -13,7 +13,7 @@ const Switch = forwardRef<
   Props
 >((props: Props, ref) => (
   <SwitchPrimitives.Root
-    className="inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-neutral-200"
+    className="focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-neutral-200"
     {...props}
     ref={ref}
   >
diff --git a/src/components/inputs/tabGroup/TabGroup.tsx b/src/components/inputs/tabGroup/TabGroup.tsx
index 80a773e1..91c38742 100644
--- a/src/components/inputs/tabGroup/TabGroup.tsx
+++ b/src/components/inputs/tabGroup/TabGroup.tsx
@@ -12,7 +12,7 @@ const ToggleGroup = forwardRef<
 
   return (
     <ToggleGroupPrimitive.Root
-      className={`inline-flex border rounded-lg divide-x ${className}`}
+      className={`inline-flex divide-x rounded-lg border ${className}`}
       {...props}
       ref={ref}
     >
@@ -36,7 +36,7 @@ const ToggleGroupItem = React.forwardRef<
   return (
     <ToggleGroupPrimitive.Item
       ref={ref}
-      className="data-[state=on]:bg-primary data-[state=on]:text-white first:rounded-l last:rounded-r p-1.5"
+      className="data-[state=on]:bg-primary p-1.5 first:rounded-l last:rounded-r data-[state=on]:text-white"
       {...props}
     >
       {children}
diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
index b9d8cdce..c7be88e3 100644
--- a/src/components/navigational/aside/Aside.tsx
+++ b/src/components/navigational/aside/Aside.tsx
@@ -12,12 +12,12 @@ export default async function Aside(props: Props) {
   const { displayName, handle, avatar } = props;
 
   return (
-    <aside className="sticky h-full top-6 hidden md:block">
-      <div className="flex flex-col gap-1 items-center lg:flex-row lg:gap-3">
-        <div className="flex flex-col items-end order-last lg:order-first">
+    <aside className="sticky top-6 hidden h-full md:block">
+      <div className="flex flex-col items-center gap-1 lg:flex-row lg:gap-3">
+        <div className="order-last flex flex-col items-end lg:order-first">
           <Link
             href={`/dashboard/user/${handle}`}
-            className="hidden lg:inline font-semibold max-w-[7rem] truncate text-neutral-700 hover:text-neutral-500"
+            className="hidden max-w-[7rem] truncate font-semibold text-neutral-700 hover:text-neutral-500 lg:inline"
           >
             {displayName ?? handle}
           </Link>
diff --git a/src/containers/settings/myFeedsContainer/MyFeedsContainer.tsx b/src/containers/settings/myFeedsContainer/MyFeedsContainer.tsx
index a78a3c99..e56f1cb4 100644
--- a/src/containers/settings/myFeedsContainer/MyFeedsContainer.tsx
+++ b/src/containers/settings/myFeedsContainer/MyFeedsContainer.tsx
@@ -31,13 +31,13 @@ function FeedItem(props: FeedItemProps) {
     <Link
       href={{
         pathname: `/dashboard/feeds/${encodeURIComponent(
-          feedItem.uri.split(":")[3].split("/")[0]
+          feedItem.uri.split(":")[3].split("/")[0],
         )}`,
         query: { uri: feedItem.uri },
       }}
-      className="flex justify-between items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+      className="flex items-center justify-between gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
     >
-      <div className="flex flex-wrap gap-3 items-center">
+      <div className="flex flex-wrap items-center gap-3">
         <Image
           src={avatar ?? FallbackFeed}
           alt={displayName}
@@ -45,7 +45,7 @@ function FeedItem(props: FeedItemProps) {
           height={40}
           className={`rounded-lg ${!avatar && "border"}`}
         />
-        <h2 className="text-neutral-700 font-semibold break-words">
+        <h2 className="break-words font-semibold text-neutral-700">
           {feedItem.displayName}
         </h2>
       </div>
@@ -56,7 +56,7 @@ function FeedItem(props: FeedItemProps) {
             deleteFeed.mutate();
           }}
         >
-          <BiSolidTrash className="text-red-600 text-lg" />
+          <BiSolidTrash className="text-lg text-red-600" />
         </Button>
 
         <Button
@@ -87,9 +87,9 @@ export default function MyFeedsContainer() {
 
   return (
     <section className="flex flex-col gap-5">
-      <h2 className="text-2xl font-semibold mx-3 md:mx-0 mb-2">My Feeds</h2>
+      <h2 className="mx-3 mb-2 text-2xl font-semibold md:mx-0">My Feeds</h2>
       <section>
-        <h3 className="text-xl font-semibold mx-3 md:mx-0 mb-2">
+        <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">
           Pinned Feeds
         </h3>
         <section className="flex flex-col">
@@ -104,7 +104,7 @@ export default function MyFeedsContainer() {
       </section>
 
       <section>
-        <h2 className="text-xl font-semibold mx-3 md:mx-0 mb-2">Saved Feeds</h2>
+        <h2 className="mx-3 mb-2 text-xl font-semibold md:mx-0">Saved Feeds</h2>
         <section className="flex flex-col">
           {data &&
             data
diff --git a/src/containers/settings/settingsContainer/SettingsContainer.tsx b/src/containers/settings/settingsContainer/SettingsContainer.tsx
index 963a8902..65b49ad1 100644
--- a/src/containers/settings/settingsContainer/SettingsContainer.tsx
+++ b/src/containers/settings/settingsContainer/SettingsContainer.tsx
@@ -26,19 +26,19 @@ export default async function SettingsContainer() {
 
   return (
     <section className="flex flex-col gap-5">
-      <h2 className="text-2xl font-semibold mx-3 md:mx-0 mb-2">Settings</h2>
+      <h2 className="mx-3 mb-2 text-2xl font-semibold md:mx-0">Settings</h2>
       {profile && (
         <section>
-          <h3 className="text-xl font-semibold mb-2 mx-3 md:mx-0">Account</h3>
-          <div className="flex flex-col gap-3 p-3 mt-2 w-full rounded-none md:rounded-t-2xl md:rounded-b-2xl border border-x-0 md:border-x">
-            <div className="flex flex-wrap gap-3 justify-between items-center ">
+          <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">Account</h3>
+          <div className="mt-2 flex w-full flex-col gap-3 rounded-none border border-x-0 p-3 md:rounded-b-2xl md:rounded-t-2xl md:border-x">
+            <div className="flex flex-wrap items-center justify-between gap-3 ">
               <div className="flex gap-3">
                 <Avatar src={profile.avatar} size="md" />
                 <div className="flex flex-col">
-                  <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700">
-                    {profile.displayName ?? profile.handle}
+                  <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700">
+                    {profile.displayName || profile.handle}
                   </span>
-                  <span className="text-neutral-400 font-medium line-clamp-1 break-all shrink min-w-[10%]">
+                  <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
                     @{profile.handle}
                   </span>
                 </div>
@@ -47,19 +47,19 @@ export default async function SettingsContainer() {
             </div>
             <hr />
             <div className="flex flex-wrap items-center gap-2">
-              <BiSolidEnvelope className="text-neutral-600 text-xl" />
-              <span className="text-neutral-600 break-all">
+              <BiSolidEnvelope className="text-xl text-neutral-600" />
+              <span className="break-all text-neutral-600">
                 {session?.user.email}{" "}
               </span>
               {isEmailConfirmed && (
-                <small className="inline-flex gap-1 items-center px-2 py-1.5 rounded-full bg-green-600/10 font-bold text-[0.6rem] text-green-600">
-                  <BiSolidCheckCircle className="text-green-600 text-lg" />
+                <small className="inline-flex items-center gap-1 rounded-full bg-green-600/10 px-2 py-1.5 text-[0.6rem] font-bold text-green-600">
+                  <BiSolidCheckCircle className="text-lg text-green-600" />
                   Verified
                 </small>
               )}
               {!isEmailConfirmed && (
-                <small className="inline-flex gap-1 items-center px-2 py-1.5 rounded-full bg-orange-600/10 font-bold text-[0.6rem] text-orange-600">
-                  <BiSolidXCircle className="text-orange-600 text-lg" />
+                <small className="inline-flex items-center gap-1 rounded-full bg-orange-600/10 px-2 py-1.5 text-[0.6rem] font-bold text-orange-600">
+                  <BiSolidXCircle className="text-lg text-orange-600" />
                   Not Verified
                 </small>
               )}
@@ -69,84 +69,84 @@ export default async function SettingsContainer() {
       )}
 
       <section>
-        <h3 className="text-xl font-semibold mx-3 md:mx-0 mb-2">
+        <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">
           Invite Codes
         </h3>
         <InviteCodes codes={inviteCodes} />
       </section>
 
       <section>
-        <h3 className="text-xl font-semibold mx-3 md:mx-0 mb-2">
+        <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">
           Feeds and Threads
         </h3>
         <div className="flex flex-col">
           <Link
             href="/dashboard/settings/home-feed"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <FaSlidersH className="text-neutral-600 text-xl" />
+            <FaSlidersH className="text-xl text-neutral-600" />
             Home Feed Preferences
           </Link>
           <Link
             href="/dashboard/settings/thread-preferences"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <ImBubbles2 className="text-neutral-600 text-xl" />
+            <ImBubbles2 className="text-xl text-neutral-600" />
             Thread Preferences
           </Link>
           <Link
             href="/dashboard/settings/my-feeds"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <BiSolidCloud className="text-neutral-600 text-xl" />
+            <BiSolidCloud className="text-xl text-neutral-600" />
             My Feeds
           </Link>
         </div>
       </section>
 
       <section>
-        <h3 className="text-xl font-semibold mx-3 md:mx-0 mb-2">Moderation</h3>
+        <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">Moderation</h3>
         <section className="flex flex-col">
           <Link
             href="/dashboard/settings/content-filtering"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <MdRemoveRedEye className="text-neutral-600 text-xl" />
+            <MdRemoveRedEye className="text-xl text-neutral-600" />
             Content Filtering
           </Link>
           <Link
             href="/dashboard/settings/muted-users"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <BiSolidBellOff className="text-neutral-600 text-xl" />
+            <BiSolidBellOff className="text-xl text-neutral-600" />
             Muted Users
           </Link>
           <Link
             href="/dashboard/settings/blocked-users"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <BsPersonFillSlash className="text-neutral-600 text-xl" />
+            <BsPersonFillSlash className="text-xl text-neutral-600" />
             Blocked Users
           </Link>
         </section>
       </section>
       <section>
-        <h3 className="text-xl font-semibold mx-3 md:mx-0 mb-2">About</h3>
+        <h3 className="mx-3 mb-2 text-xl font-semibold md:mx-0">About</h3>
         <div className="flex flex-col">
           <Link
             href="https://github.com/pdelfan/ouranos"
             target="_blank"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <BiLogoGithub className="text-neutral-600 text-xl" />
+            <BiLogoGithub className="text-xl text-neutral-600" />
             GitHub Repository
           </Link>
           <Link
             href="https://github.com/pdelfan/ouranos/blob/main/LICENSE"
             target="_blank"
-            className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+            className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <TbLicense className="text-neutral-600 text-xl" />
+            <TbLicense className="text-xl text-neutral-600" />
             License
           </Link>
         </div>
diff --git a/src/containers/thread/ParentContainer.tsx b/src/containers/thread/ParentContainer.tsx
index 274acd8b..a5b7e436 100644
--- a/src/containers/thread/ParentContainer.tsx
+++ b/src/containers/thread/ParentContainer.tsx
@@ -3,6 +3,9 @@ import { ContentFilterResult, Thread } from "../../../types/feed";
 import { AppBskyFeedDefs } from "@atproto/api";
 import BlockedEmbed from "@/components/dataDisplay/postEmbed/BlockedEmbed";
 import NotFoundEmbed from "@/components/dataDisplay/postEmbed/NotFoundEmbed";
+import { MAX_PARENT_REPLIES } from "@/lib/consts/thread";
+import { useState } from "react";
+import Threadline from "@/components/dataDisplay/threadLine/ThreadLine";
 
 interface Props {
   parentChain: Thread[];
@@ -11,9 +14,10 @@ interface Props {
 
 export default function ParentContainer(props: Props) {
   const { parentChain, contentFilter } = props;
+  const [showMore, setShowMore] = useState(false);
 
   return (
-    <div className="flex flex-col justify-between p-3 border border-x-0 md:border-x  first:border-t-0 last:border-b last:rounded-b-2xl even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0">
+    <div className="flex flex-col justify-between border border-x-0 p-3 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) && (
@@ -27,11 +31,52 @@ export default function ParentContainer(props: Props) {
           )}
 
           {AppBskyFeedDefs.isThreadViewPost(parent) && contentFilter && (
-            <FeedPost
-              post={parent}
-              filter={contentFilter}
-              isParent={i < parentChain.length - 1}
-            />
+            <>
+              {/* only show the first and last two replies initially if above
+              threshold */}
+              {parentChain.length >= MAX_PARENT_REPLIES && (
+                <>
+                  {i < 2 && (
+                    <FeedPost
+                      post={parent}
+                      filter={contentFilter}
+                      isParent={i < parentChain.length - 1}
+                    />
+                  )}
+                  {i == 2 && !showMore && (
+                    <button
+                      onClick={() => setShowMore(true)}
+                      className="relative mb-6 inline-block rounded-full bg-neutral-600/10 px-2.5 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-200"
+                    >
+                      Show More
+                      <Threadline className="top-6" />
+                    </button>
+                  )}
+                  {showMore && i >= 2 && i < parentChain.length - 2 && (
+                    <FeedPost
+                      post={parent}
+                      filter={contentFilter}
+                      isParent={i < parentChain.length - 1}
+                    />
+                  )}
+                  {i >= parentChain.length - 2 && (
+                    <FeedPost
+                      post={parent}
+                      filter={contentFilter}
+                      isParent={i < parentChain.length - 1}
+                    />
+                  )}
+                </>
+              )}
+              {/* show all replies if below threshold */}
+              {parentChain.length < MAX_PARENT_REPLIES && (
+                <FeedPost
+                  post={parent}
+                  filter={contentFilter}
+                  isParent={i < parentChain.length - 1}
+                />
+              )}
+            </>
           )}
         </div>
       ))}
diff --git a/src/containers/thread/PostThreadContainer.tsx b/src/containers/thread/PostThreadContainer.tsx
index 60c52bb1..7a5cefcf 100644
--- a/src/containers/thread/PostThreadContainer.tsx
+++ b/src/containers/thread/PostThreadContainer.tsx
@@ -1,24 +1,24 @@
 "use client";
 
-import useAgent from "@/lib/hooks/bsky/useAgent";
-import { getPostThread } from "@/lib/api/bsky/feed";
-import { useQuery } from "@tanstack/react-query";
 import { AppBskyFeedDefs } from "@atproto/api";
 import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
-import useOrganizeThread from "@/lib/hooks/bsky/feed/useOrganizeThread";
-import usePreferences from "@/lib/hooks/bsky/actor/usePreferences";
 import ThreadPost from "@/components/contentDisplay/threadPost/ThreadPost";
 import BlockedEmbed from "@/components/dataDisplay/postEmbed/BlockedEmbed";
 import NotFoundEmbed from "@/components/dataDisplay/postEmbed/NotFoundEmbed";
 import Button from "@/components/actions/button/Button";
-import { useRouter } from "next/navigation";
 import FeedPostSkeleton from "@/components/contentDisplay/feedPost/FeedPostSkeleton";
 import FeedAlert from "@/components/feedback/feedAlert/FeedAlert";
 import RepliesContainer from "./RepliesContainer";
 import ParentContainer from "./ParentContainer";
-import { sortThread } from "@/lib/utils/feed";
 import ComposePrompt from "@/components/actions/composePrompt/ComposePrompt";
 import WhoCanReply from "@/components/feedback/WhoCanReply/WhoCanReply";
+import useAgent from "@/lib/hooks/bsky/useAgent";
+import useOrganizeThread from "@/lib/hooks/bsky/feed/useOrganizeThread";
+import usePreferences from "@/lib/hooks/bsky/actor/usePreferences";
+import { getPostThread } from "@/lib/api/bsky/feed";
+import { sortThread } from "@/lib/utils/feed";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
 
 interface Props {
   id: string;
diff --git a/src/lib/consts/thread.ts b/src/lib/consts/thread.ts
index 9727b158..5d621ed0 100644
--- a/src/lib/consts/thread.ts
+++ b/src/lib/consts/thread.ts
@@ -2,6 +2,8 @@ import { ThreadgateSetting } from "../../../types/feed";
 
 export const MAX_REPLIES = 4;
 
+export const MAX_PARENT_REPLIES = 8;
+
 export const THREADGATE_OPTIONS: { label: string; value: ThreadgateSetting }[] =
   [
     { label: "No One", value: "nobody" },
diff --git a/src/lib/hooks/bsky/actor/useUpdateProfile.tsx b/src/lib/hooks/bsky/actor/useUpdateProfile.tsx
index 83574f8c..e531ae32 100644
--- a/src/lib/hooks/bsky/actor/useUpdateProfile.tsx
+++ b/src/lib/hooks/bsky/actor/useUpdateProfile.tsx
@@ -31,7 +31,7 @@ export function useUpdateProfile(props: Props) {
             new Uint8Array(await blob.arrayBuffer()),
             {
               encoding: blob.type,
-            }
+            },
           );
           profile.banner = uploaded.data.blob;
         }
@@ -41,7 +41,7 @@ export function useUpdateProfile(props: Props) {
             new Uint8Array(await blob.arrayBuffer()),
             {
               encoding: blob.type,
-            }
+            },
           );
           profile.avatar = uploaded.data.blob;
         }