styling previews

packages/atproto-browser/app/at/[identifier]/[collection]/[rkey]/page.tsx

@@ -42,7 +42,7 @@ export default async function RkeyPage({
   if (!response.ok) {
     return (
       <div>
-        🚨 Failed to fetch record: {response.statusText}. URL:{" "}
+        🚨 Failed to fetch record: {response.statusText}. URL:
         {getRecordUrl.toString()}
       </div>
     );

packages/atproto-browser/app/at/[identifier]/[collection]/page.tsx

@@ -30,7 +30,7 @@ export default async function CollectionPage({
         href={`at://${identityResult.didDocument.id}/${params.collection}`}
       />
       <h1>
-        {params.collection} records{" "}
+        {params.collection} records
         <Link
           href={`/collection-rss?u=at://${params.identifier}/${params.collection}`}
           title="RSS feed"

packages/atproto-browser/app/at/[identifier]/page.tsx

@@ -84,7 +84,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
           return (
             // eslint-disable-next-line react/no-array-index-key
             <li key={index}>
-              Change created at {utcDateFormatter.format(previous.createdAt)}{" "}
+              Change created at {utcDateFormatter.format(previous.createdAt)}
               (UTC) of type &quot;{previousOperation.type}&quot;.
             </li>
           );
@@ -174,11 +174,11 @@ async function DidHistory({ identifier }: { identifier: string }) {
               {alsoKnownAsAdded.length === 1 &&
               alsoKnownAsRemoved.length === 1 ? (
                 <li>
-                  Alias changed from{" "}
+                  Alias changed from
                   <Link href={getAtUriPath(new AtUri(alsoKnownAsRemoved[0]!))}>
                     {alsoKnownAsRemoved[0]}
-                  </Link>{" "}
-                  to{" "}
+                  </Link>
+                  to
                   <Link href={getAtUriPath(new AtUri(alsoKnownAsAdded[0]!))}>
                     {alsoKnownAsAdded[0]}
                   </Link>
@@ -187,7 +187,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
                 <>
                   {alsoKnownAsAdded.length > 0 && (
                     <li>
-                      Alias added:{" "}
+                      Alias added:
                       {alsoKnownAsAdded.flatMap((aka) => [
                         <Link key={aka} href={getAtUriPath(new AtUri(aka))}>
                           {aka}
@@ -198,7 +198,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
                   )}
                   {alsoKnownAsRemoved.length > 0 && (
                     <li>
-                      Alias removed:{" "}
+                      Alias removed:
                       {alsoKnownAsRemoved.flatMap((aka) => [
                         <Link key={aka} href={getAtUriPath(new AtUri(aka))}>
                           {aka}
@@ -222,19 +222,19 @@ async function DidHistory({ identifier }: { identifier: string }) {
                     )}
                     {!!service.endpoint && (
                       <li key={service.id}>
-                        Service &quot;{service.id}&quot; changed endpoint from{" "}
+                        Service &quot;{service.id}&quot; changed endpoint from
                         <a href={service.endpoint.from}>
                           {service.endpoint.from}
-                        </a>{" "}
-                        to{" "}
+                        </a>
+                        to
                         <a href={service.endpoint.to}>{service.endpoint.to}</a>
                       </li>
                     )}
                   </Fragment>
                 ))}
               {servicesAdded.length > 0 && (
                 <li>
-                  Services added:{" "}
+                  Services added:
                   {servicesAdded.flatMap(([id, service]) => [
                     <Link key={id} href={service.endpoint}>
                       {id} ({service.type})
@@ -245,7 +245,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {servicesRemoved.length > 0 && (
                 <li>
-                  Services removed:{" "}
+                  Services removed:
                   {servicesRemoved.flatMap(([id, service]) => [
                     <Link key={id} href={service.endpoint}>
                       {id} ({service.type})
@@ -256,7 +256,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {rotationKeysAdded.length > 0 && (
                 <li>
-                  Rotation keys added:{" "}
+                  Rotation keys added:
                   {rotationKeysAdded.flatMap((key) => [
                     <code key={key}>{key}</code>,
                     ", ",
@@ -265,7 +265,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {rotationKeysRemoved.length > 0 && (
                 <li>
-                  Rotation keys removed:{" "}
+                  Rotation keys removed:
                   {rotationKeysRemoved.flatMap((key) => [
                     <code key={key}>{key}</code>,
                     ", ",
@@ -275,13 +275,13 @@ async function DidHistory({ identifier }: { identifier: string }) {
               {verificationMethodsChanged.length > 0 &&
                 verificationMethodsChanged.map((method) => (
                   <li key={method.id}>
-                    Verification method &quot;{method.id}&quot; changed from{" "}
+                    Verification method &quot;{method.id}&quot; changed from
                     <code>{method.from}</code> to <code>{method.to}</code>
                   </li>
                 ))}
               {verificationMethodsAdded.length > 0 && (
                 <li>
-                  Verification methods added:{" "}
+                  Verification methods added:
                   {verificationMethodsAdded.flatMap(([id, key]) => [
                     <Fragment key={id}>
                       <code>{key}</code> (&quot;{id}&quot;)
@@ -292,7 +292,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {verificationMethodsRemoved.length > 0 && (
                 <li>
-                  Verification methods removed:{" "}
+                  Verification methods removed:
                   {verificationMethodsRemoved.flatMap(([id, key]) => [
                     <Fragment key={id}>
                       <code>{key}</code> (&quot;{id}&quot;)

packages/atproto-browser/app/at/_lib/did-components.tsx

@@ -54,7 +54,7 @@ export async function DidHandle({ did }: { did: string }) {
         </Link>
       ) : (
         "⚠️ Invalid Handle"
-      )}{" "}
+      )}
       (<Link href={`/at/${didDocument.id}`}>{didDocument.id}</Link>)
     </>
   );

packages/atproto-browser/app/page.tsx

@@ -21,11 +21,11 @@ export default function Home() {
 
       <footer>
         <p>
-          Developed by{" "}
+          Developed by
           <Link href="/at/did:plc:2xau7wbgdq4phuou2ypwuen7/app.bsky.actor.profile/self">
             @tom.frontpage.team
           </Link>
-          .{" "}
+          .
           <a href="https://github.com/likeandscribe/frontpage/tree/main/packages/atproto-browser">
             Source code
           </a>

packages/frontpage/app/(app)/_components/post-card.tsx

@@ -15,6 +15,7 @@ import { revalidatePath } from "next/cache";
 import { ReportDialogDropdownButton } from "./report-dialog";
 import { DeleteButton } from "./delete-button";
 import { ShareDropdownButton } from "./share-button";
+import { ChatBubbleIcon } from "@radix-ui/react-icons";
 
 type PostProps = {
   id: number;
@@ -49,96 +50,92 @@ export async function PostCard({
 
   return (
     // TODO: Make article route to postHref via onClick on card except innser links or buttons
-    <article className="flex items-center gap-4 shadow-sm rounded-lg p-4 bg-white dark:bg-slate-900">
-      <div className="flex flex-col items-center">
-        <VoteButton
-          voteAction={async () => {
-            "use server";
-            await ensureUser();
-            await createVote({
-              subjectAuthorDid: author,
-              subjectCid: cid,
-              subjectRkey: rkey,
-              subjectCollection: PostCollection,
-            });
-          }}
-          unvoteAction={async () => {
-            "use server";
-            await ensureUser();
-            const vote = await getVoteForPost(id);
-            if (!vote) {
-              // TODO: Show error notification
-              console.error("Vote not found for post", id);
-              return;
-            }
-            await deleteVote(vote.rkey);
-          }}
-          initialState={
-            (await getUser())?.did === author
-              ? "authored"
-              : isUpvoted
-                ? "voted"
-                : "unvoted"
-          }
-          votes={votes}
-        />
+    <article className="w-full py-2 px-2 bg-white dark:bg-slate-900 space-y-2 border-b-2 border-b-accent">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center px-3 space-x-1.5">
+          <UserHoverCard did={author} asChild>
+            <Link
+              href={`/profile/${handle}`}
+              className="text-xs hover:underline"
+            >
+              by {handle}
+            </Link>
+          </UserHoverCard>
+        </div>
+
+        {user ? (
+          <EllipsisDropdown>
+            <ShareDropdownButton path={postHref} />
+            <ReportDialogDropdownButton
+              reportAction={reportPostAction.bind(null, {
+                rkey,
+                cid,
+                author,
+              })}
+            />
+            {user?.did === author ? (
+              <DeleteButton deleteAction={deletePostAction.bind(null, rkey)} />
+            ) : null}
+          </EllipsisDropdown>
+        ) : null}
       </div>
-      <div className="w-full">
+
+      <div className="px-3">
         <h2 className="mb-1 text-xl">
           <a
             href={url}
             className="hover:underline flex flex-wrap items-center gap-x-2"
           >
-            {title}{" "}
+            {title}
             <span className="text-gray-500 dark:text-gray-400 font-normal text-sm md:text-base">
               ({new URL(url).host})
             </span>
           </a>
         </h2>
-        <div className="flex flex-wrap text-gray-500 dark:text-gray-400 sm:gap-4">
-          <div className="flex gap-2 flex-wrap md:flex-nowrap">
-            <div className="flex gap-2 items-center">
-              <span aria-hidden>•</span>
-              <UserHoverCard did={author} asChild>
-                <Link href={`/profile/${handle}`} className="hover:underline">
-                  by {handle}
-                </Link>
-              </UserHoverCard>
-            </div>
-          </div>
-          <div className="w-full flex items-center justify-between gap-2 md:gap-4 sm:w-auto">
-            <div className="flex gap-2">
-              <span aria-hidden>•</span>
-              <TimeAgo createdAt={createdAt} side="bottom" />
-            </div>
-            <div className="flex gap-2">
-              <span aria-hidden>•</span>
-              <Link href={postHref} className="hover:underline">
-                {commentCount} comments
-              </Link>
-            </div>
-          </div>
+      </div>
 
-          {user ? (
-            <div className="ml-auto">
-              <EllipsisDropdown>
-                <ShareDropdownButton path={postHref} />
-                <ReportDialogDropdownButton
-                  reportAction={reportPostAction.bind(null, {
-                    rkey,
-                    cid,
-                    author,
-                  })}
-                />
-                {user?.did === author ? (
-                  <DeleteButton
-                    deleteAction={deletePostAction.bind(null, rkey)}
-                  />
-                ) : null}
-              </EllipsisDropdown>
-            </div>
-          ) : null}
+      <div className="pr-2 flex items-center justify-between">
+        <div className="flex items-center gap-6">
+          <VoteButton
+            voteAction={async () => {
+              "use server";
+              await ensureUser();
+              await createVote({
+                subjectAuthorDid: author,
+                subjectCid: cid,
+                subjectRkey: rkey,
+                subjectCollection: PostCollection,
+              });
+            }}
+            unvoteAction={async () => {
+              "use server";
+              await ensureUser();
+              const vote = await getVoteForPost(id);
+              if (!vote) {
+                // TODO: Show error notification
+                console.error("Vote not found for post", id);
+                return;
+              }
+              await deleteVote(vote.rkey);
+            }}
+            initialState={
+              (await getUser())?.did === author
+                ? "authored"
+                : isUpvoted
+                  ? "voted"
+                  : "unvoted"
+            }
+            votes={votes}
+          />
+          <Link
+            href={postHref}
+            className="hover:underline flex items-center gap-2"
+          >
+            <ChatBubbleIcon className="w-4 h-4" />
+            {commentCount}
+          </Link>
         </div>
+        <TimeAgo createdAt={createdAt} side="bottom" className="text-xs" />
       </div>
     </article>
   );

packages/frontpage/app/(app)/_components/vote-button.tsx

@@ -66,7 +66,7 @@ export function VoteButton({
           setHasOptimisticallyVoted(true);
         }
       }}
-      className="contents"
+      className="flex items-center"
     >
       <Button
         variant="ghost"

packages/frontpage/app/(app)/about/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function CommunityGuidelinesPage() {
   return (
-    <>
+    <div className="px-4 pt-4">
       <Heading1>About Frontpage</Heading1>
       <Paragraph>
         Frontpage is a decentralised and federated link aggregator that&apos;s
@@ -44,7 +44,7 @@ export default function CommunityGuidelinesPage() {
         reports from users to help us keep the community safe. Please report any
         content that violates our guidelines.
       </Paragraph>
-    </>
+    </div>
   );
 }