From 1e3e05e7edc64a6e46e4322078a3f2cc095499b4 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 27 Nov 2024 18:29:58 -0800
Subject: [PATCH 1/2] Clean up JSX

---
 .../contentDisplay/feedHeader/FeedHeader.tsx  | 129 ++++++++----------
 .../contentDisplay/listHeader/ListHeader.tsx  |  71 +++++-----
 2 files changed, 92 insertions(+), 108 deletions(-)

diff --git a/src/components/contentDisplay/feedHeader/FeedHeader.tsx b/src/components/contentDisplay/feedHeader/FeedHeader.tsx
index 2b1ac13b..85a8466f 100644
--- a/src/components/contentDisplay/feedHeader/FeedHeader.tsx
+++ b/src/components/contentDisplay/feedHeader/FeedHeader.tsx
@@ -106,78 +106,67 @@ export default function FeedHeader(props: Props) {
     }
   };
 
+  if (isFetchingFeedInfo || !feedInfo) return <FeedHeaderSkeleton />;
+
   return (
-    <>
-      {isFetchingFeedInfo && <FeedHeaderSkeleton />}
-      {!isFetchingFeedInfo && feedInfo && (
-        <>
-          <article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div className="flex flex-wrap items-center gap-3">
-                <Image
-                  src={feedInfo.view.avatar ?? FallbackFeed}
-                  alt={feedInfo.view.displayName}
-                  width={60}
-                  height={60}
-                  className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
-                />
-                <div className="flex flex-col">
-                  <h2 className="text-skin-base break-words text-xl font-semibold">
-                    {feedInfo.view.displayName}
-                  </h2>
-                  <h3 className="text-skin-secondary break-all">
-                    By{" "}
-                    <Link
-                      href={`/dashboard/user/${feedInfo.view.creator.handle}`}
-                      className="hover:text-skin-tertiary font-medium"
-                    >
-                      @{feedInfo.view.creator.handle}
-                    </Link>
-                  </h3>
-                </div>
-              </div>
-              {isSaved !== null && isPinned !== null && (
-                <div className="flex flex-wrap gap-3">
-                  <Button onClick={toggleSave}>
-                    {isSaved && (
-                      <BiSolidTrash className="text-status-danger text-lg" />
-                    )}
-                    {!isSaved && (
-                      <BiPlus className="text-skin-icon-base text-lg" />
-                    )}
-                  </Button>
-                  <Button onClick={togglePin}>
-                    <BiSolidBookmarkAlt
-                      className={`text-lg ${
-                        isPinned
-                          ? "text-status-success"
-                          : "text-skin-icon-muted"
-                      }`}
-                    />
-                  </Button>
-                  <Button onClick={toggleLike}>
-                    {likeUri && (
-                      <BiSolidHeart className="text-skin-icon-like text-lg" />
-                    )}
-                    {!likeUri && (
-                      <BiHeart className="text-skin-icon-muted text-lg" />
-                    )}
-                  </Button>
-                </div>
+    <article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-3">
+          <Image
+            src={feedInfo.view.avatar ?? FallbackFeed}
+            alt={feedInfo.view.displayName}
+            width={60}
+            height={60}
+            className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
+          />
+          <div className="flex flex-col">
+            <h2 className="text-skin-base break-words text-xl font-semibold">
+              {feedInfo.view.displayName}
+            </h2>
+            <h3 className="text-skin-secondary break-all">
+              By{" "}
+              <Link
+                href={`/dashboard/user/${feedInfo.view.creator.handle}`}
+                className="hover:text-skin-tertiary font-medium"
+              >
+                @{feedInfo.view.creator.handle}
+              </Link>
+            </h3>
+          </div>
+        </div>
+        {isSaved !== null && isPinned !== null && (
+          <div className="flex flex-wrap gap-3">
+            <Button onClick={toggleSave}>
+              {isSaved && (
+                <BiSolidTrash className="text-status-danger text-lg" />
+              )}
+              {!isSaved && <BiPlus className="text-skin-icon-base text-lg" />}
+            </Button>
+            <Button onClick={togglePin}>
+              <BiSolidBookmarkAlt
+                className={`text-lg ${
+                  isPinned ? "text-status-success" : "text-skin-icon-muted"
+                }`}
+              />
+            </Button>
+            <Button onClick={toggleLike}>
+              {likeUri && (
+                <BiSolidHeart className="text-skin-icon-like text-lg" />
               )}
-            </div>
-            {feedInfo.view.description && (
-              <p className="text-skin-base break-words" dir="auto">
-                {feedInfo.view.description}
-              </p>
-            )}
-            <small className="text-skin-secondary flex items-center gap-1 font-medium">
-              <BiSolidHeart className="text-skin-icon-base" />
-              <span>{feedInfo.view.likeCount}</span>
-            </small>
-          </article>
-        </>
+              {!likeUri && <BiHeart className="text-skin-icon-muted text-lg" />}
+            </Button>
+          </div>
+        )}
+      </div>
+      {feedInfo.view.description && (
+        <p className="text-skin-base break-words" dir="auto">
+          {feedInfo.view.description}
+        </p>
       )}
-    </>
+      <small className="text-skin-secondary flex items-center gap-1 font-medium">
+        <BiSolidHeart className="text-skin-icon-base" />
+        <span>{feedInfo.view.likeCount}</span>
+      </small>
+    </article>
   );
 }
diff --git a/src/components/contentDisplay/listHeader/ListHeader.tsx b/src/components/contentDisplay/listHeader/ListHeader.tsx
index 903adae7..893b9827 100644
--- a/src/components/contentDisplay/listHeader/ListHeader.tsx
+++ b/src/components/contentDisplay/listHeader/ListHeader.tsx
@@ -20,45 +20,40 @@ export default function FeedHeader(props: Props) {
     listInfoError,
   } = useListInfo(list);
 
+  if (isFetchingListInfo || !listInfo) return <ListHeaderSkeleton />;
+
   return (
-    <>
-      {isFetchingListInfo && <ListHeaderSkeleton />}
-      {!isFetchingListInfo && listInfo && (
-        <>
-          <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 md:border-b-0">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div className="flex flex-wrap items-center gap-3">
-                <Image
-                  src={listInfo.list.avatar ?? FallbackList}
-                  alt={listInfo.list.name}
-                  width={60}
-                  height={60}
-                  className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
-                />
-                <div className="flex flex-col">
-                  <h2 className="text-skin-base break-words text-xl font-semibold">
-                    {listInfo.list.name}
-                  </h2>
-                  <h3 className="text-skin-secondary break-all">
-                    By{" "}
-                    <Link
-                      href={`/dashboard/user/${listInfo.list.creator.handle}`}
-                      className="hover:text-skin-tertiary font-medium"
-                    >
-                      @{listInfo.list.creator.handle}
-                    </Link>
-                  </h3>
-                </div>
-              </div>
-            </div>
-            {listInfo.list.description && (
-              <p className="text-skin-base break-words" dir="auto">
-                {listInfo.list.description}
-              </p>
-            )}
-          </article>
-        </>
+    <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 md:border-b-0">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-3">
+          <Image
+            src={listInfo.list.avatar ?? FallbackList}
+            alt={listInfo.list.name}
+            width={60}
+            height={60}
+            className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
+          />
+          <div className="flex flex-col">
+            <h2 className="text-skin-base break-words text-xl font-semibold">
+              {listInfo.list.name}
+            </h2>
+            <h3 className="text-skin-secondary break-all">
+              By{" "}
+              <Link
+                href={`/dashboard/user/${listInfo.list.creator.handle}`}
+                className="hover:text-skin-tertiary font-medium"
+              >
+                @{listInfo.list.creator.handle}
+              </Link>
+            </h3>
+          </div>
+        </div>
+      </div>
+      {listInfo.list.description && (
+        <p className="text-skin-base break-words" dir="auto">
+          {listInfo.list.description}
+        </p>
       )}
-    </>
+    </article>
   );
 }

From e378f23f0d78d03aa5f06afdbfc978b5fbc1931c Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 27 Nov 2024 18:36:51 -0800
Subject: [PATCH 2/2] Expand atmosphere button toggles to full width

---
 src/containers/atmosphere/AtmosphereContainer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/containers/atmosphere/AtmosphereContainer.tsx b/src/containers/atmosphere/AtmosphereContainer.tsx
index 09b0cae3..59f5fd90 100644
--- a/src/containers/atmosphere/AtmosphereContainer.tsx
+++ b/src/containers/atmosphere/AtmosphereContainer.tsx
@@ -39,13 +39,13 @@ export default function AtmosphereContainer(props: Props) {
       const frontpageRecords = await getATRecords(
         did,
         "fyi.unravel.frontpage.post",
-        agent
+        agent,
       );
       const linkatRecords = await getATRecords(did, "blue.linkat.board", agent);
       const whtwndRecords = await getATRecords(
         did,
         "com.whtwnd.blog.entry",
-        agent
+        agent,
       );
 
       return [
@@ -87,7 +87,7 @@ export default function AtmosphereContainer(props: Props) {
       }
       return acc;
     },
-    {} as Record<string, any[]>
+    {} as Record<string, any[]>,
   );
 
   const renderContainer = () => {
@@ -123,10 +123,10 @@ export default function AtmosphereContainer(props: Props) {
 
   return (
     <section>
-      <div className="sticky top-12 md:top-0 p-3 bg-skin-base border-skin-base md:border-x border-b">
+      <div className="sticky top-12 md:top-0 bg-skin-base border-skin-base md:border-x border-b">
         {hasCollection && (
           <ScrollArea.Root role="tablist">
-            <div className="flex flex-nowrap items-center gap-2 overflow-x-auto">
+            <div className="flex flex-nowrap items-center gap-2 overflow-x-auto p-3">
               {collections.map((c) => (
                 <>
                   {c.records.length !== 0 && (