Merge branch 'preview'

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

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

src/app/providers/composer.tsx

@@ -80,7 +80,7 @@ export const ComposerProvider: React.FC<ComposerProviderProps> = ({
       openComposer,
       closeComposer,
     }),
-    []
+    [],
   );
 
   const state = {

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

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>

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}

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

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}

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 && (

src/components/contentDisplay/savedFeedItem/SavedFeedItem.tsx

@@ -17,21 +17,21 @@ 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}
           width={40}
           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>

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}

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

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>

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>

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

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,

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>

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}