Merge branch 'preview'

src/app/dashboard/lists/layout.tsx

@@ -11,5 +11,14 @@ export default function FeedLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <Layout>{children}</Layout>;
+  return (
+    <Layout>
+      <section>
+        <h2 className="text-skin-base mx-3 mb-2 text-2xl font-semibold md:mx-0">
+          My Lists
+        </h2>
+        {children}
+      </section>
+    </Layout>
+  );
 }

src/app/dashboard/lists/loading.tsx

@@ -1,12 +1,5 @@
 import ListsSkeleton from "@/components/contentDisplay/lists/ListsSkeleton";
 
 export default function Loading() {
-  return (
-    <section>
-      <h2 className="text-skin-base mx-3 mb-2 text-2xl font-semibold md:mx-0">
-        My Lists
-      </h2>
-      <ListsSkeleton />
-    </section>
-  );
+  return <ListsSkeleton />;
 }

src/app/dashboard/lists/page.tsx

@@ -1,12 +1,5 @@
 import Lists from "@/components/contentDisplay/lists/Lists";
 
 export default function Page() {
-  return (
-    <section>
-      <h2 className="text-skin-base mx-3 mb-2 text-2xl font-semibold md:mx-0">
-        My Lists
-      </h2>
-      <Lists />
-    </section>
-  );
+  return <Lists />;
 }

src/app/dashboard/user/[handle]/(follow)/followers/layout.tsx

@@ -2,9 +2,22 @@ import Layout from "@/containers/Layout";
 
 interface Props {
   children: React.ReactNode;
+  params: {
+    handle: string;
+  };
 }
 
 export default function FollowersLayout(props: Props) {
-  const { children } = props;
-  return <Layout>{children}</Layout>;
+  const { children, params } = props;
+  return (
+    <Layout>
+      <section>
+        <div className="px-3 md:px-0">
+          <h2 className="text-skin-base text-2xl font-semibold">Followers</h2>
+          <h3 className="text-skin-secondary text-lg">@{params.handle}</h3>
+        </div>
+        <section className="mt-2 flex flex-col">{children}</section>
+      </section>
+    </Layout>
+  );
 }

src/app/dashboard/user/[handle]/(follow)/followers/loading.tsx

@@ -1,15 +1,5 @@
 import ProfileCardSkeleton from "@/components/contentDisplay/profileCard/ProfileCardSkeleton";
 
 export default function Loading() {
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base mb-2 text-2xl font-semibold">
-          Followers
-        </h2>
-        <div className="bg-skin-muted mb-2 h-4 w-1/3 animate-pulse rounded" />
-      </div>
-      <ProfileCardSkeleton />
-    </section>
-  );
+  return <ProfileCardSkeleton />;
 }

src/app/dashboard/user/[handle]/(follow)/followers/page.tsx

@@ -9,16 +9,5 @@ interface Props {
 export default function Page(props: Props) {
   const { handle } = props.params;
 
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base text-2xl font-semibold">Followers</h2>
-        <h3 className="text-skin-secondary text-lg">@{handle}</h3>
-      </div>
-
-      <section className="mt-2 flex flex-col">
-        <FollowersContainer handle={handle} />
-      </section>
-    </section>
-  );
+  return <FollowersContainer handle={handle} />;
 }

src/app/dashboard/user/[handle]/(follow)/following/layout.tsx

@@ -2,9 +2,22 @@ import Layout from "@/containers/Layout";
 
 interface Props {
   children: React.ReactNode;
+  params: {
+    handle: string;
+  };
 }
 
 export default function FollowingLayout(props: Props) {
-  const { children } = props;
-  return <Layout>{children}</Layout>;
+  const { children, params } = props;
+  return (
+    <Layout>
+      <section>
+        <div className="px-3 md:px-0">
+          <h2 className="text-skin-base text-2xl font-semibold">Following</h2>
+          <h3 className="text-skin-secondary text-lg">@{params.handle}</h3>
+        </div>
+        <section className="mt-2 flex flex-col">{children}</section>
+      </section>
+    </Layout>
+  );
 }

src/app/dashboard/user/[handle]/(follow)/following/loading.tsx

@@ -1,15 +1,5 @@
 import ProfileCardSkeleton from "@/components/contentDisplay/profileCard/ProfileCardSkeleton";
 
 export default function Loading() {
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base mb-2 text-2xl font-semibold">
-          Following
-        </h2>
-        <div className="bg-skin-muted mb-2 h-4 w-1/3 animate-pulse rounded" />
-      </div>
-      <ProfileCardSkeleton />
-    </section>
-  );
+  return <ProfileCardSkeleton />;
 }

src/app/dashboard/user/[handle]/(follow)/following/page.tsx

@@ -9,15 +9,5 @@ interface Props {
 export default function Page(props: Props) {
   const { handle } = props.params;
 
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base text-2xl font-semibold">Following</h2>
-        <h3 className="text-skin-secondary text-lg">@{handle}</h3>
-      </div>
-      <section className="mt-2 flex flex-col">
-        <FollowingContainer handle={handle} />
-      </section>
-    </section>
-  );
+  return <FollowingContainer handle={handle} />;
 }

src/app/dashboard/user/[handle]/(follow)/known-followers/layout.tsx

@@ -2,9 +2,24 @@ import Layout from "@/containers/Layout";
 
 interface Props {
   children: React.ReactNode;
+  params: {
+    handle: string;
+  };
 }
 
 export default function KnownFollowersLayout(props: Props) {
-  const { children } = props;
-  return <Layout>{children}</Layout>;
+  const { children, params } = props;
+  return (
+    <Layout>
+      <section>
+        <div className="px-3 md:px-0">
+          <h2 className="text-skin-base text-2xl font-semibold">
+            Followers you know
+          </h2>
+          <h3 className="text-skin-secondary text-lg">@{params.handle}</h3>
+        </div>
+        <section className="mt-2 flex flex-col">{children}</section>
+      </section>
+    </Layout>
+  );
 }

src/app/dashboard/user/[handle]/(follow)/known-followers/loading.tsx

@@ -1,15 +1,5 @@
 import ProfileCardSkeleton from "@/components/contentDisplay/profileCard/ProfileCardSkeleton";
 
 export default function Loading() {
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base mb-2 text-2xl font-semibold">
-          Followers you know
-        </h2>
-        <div className="bg-skin-muted mb-2 h-4 w-1/3 animate-pulse rounded" />
-      </div>
-      <ProfileCardSkeleton />
-    </section>
-  );
+  return <ProfileCardSkeleton />;
 }

src/app/dashboard/user/[handle]/(follow)/known-followers/page.tsx

@@ -20,17 +20,5 @@ interface Props {
 export default function Page(props: Props) {
   const { handle } = props.params;
 
-  return (
-    <section>
-      <div className="px-3 md:px-0">
-        <h2 className="text-skin-base text-2xl font-semibold">
-          Followers you know
-        </h2>
-        <h3 className="text-skin-secondary text-lg">@{handle}</h3>
-      </div>
-      <section className="mt-2 flex flex-col">
-        <KnownFollowersContainer handle={handle} />
-      </section>
-    </section>
-  );
+  return <KnownFollowersContainer handle={handle} />;
 }

src/components/dataDisplay/postEmbed/ExternalEmbed.tsx

@@ -56,10 +56,7 @@ export default function ExternalEmbed(props: Props) {
               className="flex flex-wrap items-center gap-2 text-skin-tertiary px-3 py-2"
             >
               <SiGooglemessages className="text-lg" />
-              <div className="flex flex-wrap items-center">
-                <span className="font-medium text-sm">View topic</span>
-                <BiRightArrowAlt className="text-lg" />
-              </div>
+              <span className="font-medium text-sm">View topic</span>
             </Link>
           </div>
         </article>