Added compact mode to Poster

app/components/Post.tsx

@@ -5,6 +5,7 @@ import { FormLabel, TextArea } from "./Form";
 import { SubTitle, Text } from "./Typography";
 import type { User } from "@prisma/client";
 import type { PostWithRelations } from "~/utils/prisma.server";
+import { ReactNode } from "react";
 
 export function Poster({
   username,
@@ -70,11 +71,11 @@ export function Poster({
 export function Post({
   userId,
   post,
-  liker,
+  topTitle,
 }: {
   post: PostWithRelations;
   userId?: number;
-  liker?: User;
+  topTitle?: ReactNode;
 }) {
   const fetcher = useFetcher();
   const liked = post.likes.filter((like) => like.id === userId).length > 0;
@@ -86,13 +87,7 @@ export function Post({
       key={post.id}
       className="flex relative flex-col gap-4 p-6 transition-all bg-ctp-mantle/20 hover:bg-ctp-base first:rounded-t-lg last:rounded-b-lg "
     >
-      {liker ? (
-        <Text type="subtitle">
-          <strong>{liker.username}</strong> liked
-        </Text>
-      ) : (
-        ""
-      )}
+      {topTitle ? <Text type="subtitle">{topTitle}</Text> : ""}
       {post.reposters?.length > 0 ? (
         <div className="flex gap-1 items-center">
           {post.reposters.map((user) => (

app/root.tsx

@@ -40,10 +40,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const cookieHeader = request.headers.get("Cookie");
   const session = await getSession(cookieHeader);
   const message = session.get("globalMessage") || null;
+  const themeCookie = (await theme.parse(cookieHeader)) || {};
 
   if (session.has("userId")) {
-    const themeCookie = (await theme.parse(cookieHeader)) || {};
-
     const data = await prisma.user.findUnique({
       where: {
         id: session.get("userId"),
@@ -80,6 +79,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return json(
     {
       toast: message,
+      theme: themeCookie.theme,
     },
     {
       headers: {

app/routes/users.$username.tsx

@@ -142,6 +142,28 @@ export async function loader({ params }: LoaderFunctionArgs) {
             select: {
               id: true,
               text: true,
+              createdAt: true,
+              likes: {
+                select: {
+                  id: true,
+                },
+              },
+              reposts: {
+                select: {
+                  id: true,
+                  userId: true,
+                  postId: true,
+                  user: true,
+                },
+              },
+              author: {
+                select: {
+                  id: true,
+                  username: true,
+                  name: true,
+                  pfp: true,
+                },
+              },
             },
           },
         },
@@ -164,14 +186,13 @@ export async function loader({ params }: LoaderFunctionArgs) {
     throw Error(`User ${params.username} not found`);
   }
 
-  console.log(data);
-
   return data;
 }
 
 export default function UserProfile() {
   const rootData = useRouteLoaderData<RootLoaderTypes>("root");
   const data: UserWithRelations = useLoaderData<LoaderFunction>();
+  console.log(data.reposts);
   const actionData = useActionData<ActionFunction>();
   const isFollowing =
     data.followedBy.filter((follow) => follow.id === rootData?.id).length > 0;
@@ -246,7 +267,11 @@ export default function UserProfile() {
                   userId={rootData?.id}
                   key={post.id}
                   post={post}
-                  liker={data}
+                  topTitle={
+                    <>
+                      <strong>{data.username}</strong> liked this
+                    </>
+                  }
                 />
               ))}
             </Card>
@@ -254,6 +279,27 @@ export default function UserProfile() {
             <Text type="subtitle">No likes yet</Text>
           )}
         </div>
+        <div className="flex flex-col flex-grow gap-5 w-full">
+          <SubTitle>Reposts</SubTitle>
+          {data.reposts.length > 0 ? (
+            <Card className="!p-0 !gap-0 divide-y">
+              {data.reposts.map((repost) => (
+                <Post
+                  userId={rootData?.id}
+                  key={repost.id}
+                  post={repost.post}
+                  topTitle={
+                    <>
+                      <strong>{data.username}</strong> reposted this
+                    </>
+                  }
+                />
+              ))}
+            </Card>
+          ) : (
+            <Text type="subtitle">No reposts yet</Text>
+          )}
+        </div>
       </div>
     </div>
   );