Merge branch 'preview'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ouranos",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/dashboard/feeds/[feed]/page.tsx

@@ -1,5 +1,5 @@
 import FeedHeader from "@/components/contentDisplay/feedHeader/FeedHeader";
-import FeedContainer from "@/containers/FeedContainer";
+import FeedContainer from "@/containers/posts/FeedContainer";
 
 interface Props {
   searchParams: {
@@ -13,7 +13,7 @@ export default function Page(props: Props) {
   return (
     <>
       <FeedHeader feed={searchParams.uri} />
-      <FeedContainer feed={searchParams.uri} />
+      <FeedContainer feed={searchParams.uri} mode="feed" />
     </>
   );
 }

src/app/dashboard/feeds/page.tsx

@@ -20,7 +20,7 @@ export default function Page(props: Props) {
   return (
     <section className="flex flex-col gap-5">
       <section>
-        <div className="flex justify-between items-center mx-3 md:mx-0 mb-2">
+        <div className="mx-3 mb-2 flex items-center justify-between md:mx-0">
           <h2 className="text-2xl font-semibold">My Feeds</h2>
           <Link href="/dashboard/settings/my-feeds">
             <BiCog className="text-2xl text-neutral-500 hover:text-neutral-700" />
@@ -32,8 +32,8 @@ export default function Page(props: Props) {
       </section>
       <section>
         <div>
-          <div className="flex flex-wrap justify-between gap-x-12 gap-y-2 mb-2">
-            <h2 className="flex-auto text-2xl font-semibold mx-3 md:mx-0 mb-2">
+          <div className="mb-2 flex flex-wrap justify-between gap-x-12 gap-y-2">
+            <h2 className="mx-3 mb-2 flex-auto text-2xl font-semibold md:mx-0">
               Popular Feeds
             </h2>
             <Search placeholder="Search for feeds" />

src/app/dashboard/home/[feed]/page.tsx

@@ -1,4 +1,4 @@
-import FeedContainer from "@/containers/FeedContainer";
+import FeedContainer from "@/containers/posts/FeedContainer";
 
 interface Props {
   searchParams: {
@@ -9,5 +9,5 @@ interface Props {
 export default function Feed(props: Props) {
   const { searchParams } = props;
 
-  return <FeedContainer feed={searchParams.uri} />;
+  return <FeedContainer feed={searchParams.uri} mode="feed" />;
 }

src/app/dashboard/home/page.tsx

@@ -1,5 +1,5 @@
-import FeedContainer from "@/containers/FeedContainer";
+import FeedContainer from "@/containers/posts/FeedContainer";
 
 export default function Home() {
-  return <FeedContainer feed="timeline" />;
+  return <FeedContainer feed="timeline" mode="feed" />;
 }

src/app/dashboard/lists/layout.tsx

@@ -0,0 +1,15 @@
+import Layout from "@/containers/Layout";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Ouranos — Lists",
+  description: "Lists",
+};
+
+export default function FeedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Layout>{children}</Layout>;
+}

src/app/dashboard/lists/loading.tsx

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

src/app/dashboard/lists/page.tsx

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

src/app/dashboard/notifications/page.tsx

@@ -1,10 +1,10 @@
-import NotificationsContainer from "@/containers/NotificationsContainer";
+import NotificationsContainer from "@/containers/notifications/NotificationsContainer";
 
 export default function Page() {
   return (
     <section className="flex flex-col gap-5">
       <section>
-        <h2 className="text-2xl font-semibold mx-3 md:mx-0 mb-2">
+        <h2 className="mx-3 mb-2 text-2xl font-semibold md:mx-0">
           Notifications
         </h2>
         <NotificationsContainer />

src/app/dashboard/user/[handle]/(content)/likes/page.tsx

@@ -1,4 +1,4 @@
-import UserPostsConatiner from "@/containers/UserPostsContainer";
+import UserPostsConatiner from "@/containers/posts/UserPostsContainer";
 import { getSessionFromServer } from "@/lib/api/auth/session";
 import { redirect } from "next/navigation";
 

src/app/dashboard/user/[handle]/(content)/media/page.tsx

@@ -1,4 +1,4 @@
-import UserPostsConatiner from "@/containers/UserPostsContainer";
+import UserPostsConatiner from "@/containers/posts/UserPostsContainer";
 
 interface Props {
   params: {

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

@@ -1,4 +1,4 @@
-import UserPostsConatiner from "@/containers/UserPostsContainer";
+import UserPostsConatiner from "@/containers/posts/UserPostsContainer";
 
 interface Props {
   params: {

src/app/dashboard/user/[handle]/(content)/replies/page.tsx

@@ -1,4 +1,4 @@
-import UserPostsConatiner from "@/containers/UserPostsContainer";
+import UserPostsConatiner from "@/containers/posts/UserPostsContainer";
 
 interface Props {
   params: {

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

@@ -1,4 +1,4 @@
-import FollowersContainer from "@/containers/FollowersContainer";
+import FollowersContainer from "@/containers/users/FollowersContainer";
 
 interface Props {
   params: {
@@ -16,7 +16,7 @@ export default function Page(props: Props) {
         <h3 className="text-lg text-neutral-500">@{handle}</h3>
       </div>
 
-      <section className="flex flex-col mt-2">
+      <section className="mt-2 flex flex-col">
         <FollowersContainer handle={handle} />
       </section>
     </section>

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

@@ -1,4 +1,4 @@
-import FollowingContainer from "@/containers/FollowingContainer";
+import FollowingContainer from "@/containers/users/FollowingContainer";
 
 interface Props {
   params: {
@@ -15,7 +15,7 @@ export default function Page(props: Props) {
         <h2 className="text-2xl font-semibold">Following</h2>
         <h3 className="text-lg text-neutral-500">@{handle}</h3>
       </div>
-      <section className="flex flex-col mt-2">
+      <section className="mt-2 flex flex-col">
         <FollowingContainer handle={handle} />
       </section>
     </section>

src/app/dashboard/user/[handle]/(lists)/lists/[uri]/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Ouranos — List",
+  description: "List",
+};
+
+export default function FeedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

src/app/dashboard/user/[handle]/(lists)/lists/[uri]/page.tsx

@@ -0,0 +1,13 @@
+import ListContainer from "@/containers/lists/ListContainer";
+
+interface Props {
+  searchParams: {
+    uri: string;
+  };
+}
+
+export default function Page(props: Props) {
+  const { searchParams } = props;
+
+  return <ListContainer uri={searchParams.uri} />;
+}

src/app/layout.tsx

@@ -10,7 +10,7 @@ import ToastProvider from "./providers/toast";
 import { ScrollProvider } from "./providers/scroll";
 import { getSessionFromServer } from "@/lib/api/auth/session";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Ouranos",
@@ -31,7 +31,7 @@ export default async function RootLayout({
         {/* for making the page fullscreen on iOS when added to home */}
         <meta name="apple-mobile-web-app-capable" content="yes" />
       </head>
-      <body className={`${inter.variable}`}>
+      <body className={inter.className}>
         <SessionProvider session={session}>
           <ScrollProvider>
             <QueryProvider>

src/components/contentDisplay/listHeader/ListHeader.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import FallbackList from "@/assets/images/fallbackList.png";
+import ListHeaderSkeleton from "./ListHeaderSkeleton";
+import useListInfo from "@/lib/hooks/bsky/list/useListInfo";
+
+interface Props {
+  list: string;
+}
+
+export default function FeedHeader(props: Props) {
+  const { list } = props;
+  const {
+    listInfo,
+    isLoadingListInfo,
+    isFetchingListInfo,
+    isRefetchingListInfo,
+    listInfoError,
+  } = useListInfo(list);
+
+  return (
+    <>
+      {isFetchingListInfo && <ListHeaderSkeleton />}
+      {!isFetchingListInfo && listInfo && (
+        <>
+          <article className="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"}`}
+                />
+                <div className="flex flex-col">
+                  <h2 className="break-words text-xl font-semibold text-neutral-700">
+                    {listInfo.list.name}
+                  </h2>
+                  <h3 className="break-all text-neutral-500">
+                    By{" "}
+                    <Link
+                      href={`/dashboard/user/${listInfo.list.creator.handle}`}
+                      className="font-medium hover:text-neutral-400"
+                    >
+                      @{listInfo.list.creator.handle}
+                    </Link>
+                  </h3>
+                </div>
+              </div>
+            </div>
+            {listInfo.list.description && (
+              <p className="break-words text-neutral-700" dir="auto">
+                {listInfo.list.description}
+              </p>
+            )}
+          </article>
+        </>
+      )}
+    </>
+  );
+}

src/components/contentDisplay/listHeader/ListHeaderSkeleton.tsx

@@ -0,0 +1,21 @@
+export default function ListHeaderSkeleton() {
+  return (
+    <article className="flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border-x md:border-t">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-[60px] w-[60px] animate-pulse rounded-lg bg-gray-200" />
+          <div className="flex flex-col gap-3">
+            <div className="h-4 w-20 animate-pulse rounded bg-gray-200" />
+            <div className="h-4 w-32 animate-pulse rounded bg-gray-200" />
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <div className="h-9 w-9 animate-pulse rounded-lg bg-gray-200" />
+        </div>
+      </div>
+      <div className="mt-2 h-3 w-4/5 animate-pulse rounded bg-gray-200" />
+      <div className="h-3 w-3/4 animate-pulse rounded bg-gray-200" />
+      <div className="h-3 w-5/6 animate-pulse rounded bg-gray-200" />
+    </article>
+  );
+}

src/components/contentDisplay/listItem/ListItem.tsx

@@ -0,0 +1,47 @@
+import { ListView } from "@atproto/api/dist/client/types/app/bsky/graph/defs";
+import Image from "next/image";
+import Link from "next/link";
+import FallbackList from "@/assets/images/fallbackList.png";
+
+interface Props {
+  list: ListView;
+}
+
+export default function ListItem(props: Props) {
+  const { list } = props;
+  const { avatar, name, description, creator, uri, viewer, indexedAt } = list;
+  const formattedUri = uri.split(":")[3].split("/")[2];
+
+  return (
+    <Link
+      href={{
+        pathname: `/dashboard/user/${creator.handle}/lists/${encodeURIComponent(formattedUri)}`,
+        query: { uri: uri },
+      }}
+      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 items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-3">
+          <Image
+            src={avatar ?? FallbackList}
+            alt={name}
+            width={40}
+            height={40}
+            className={`rounded-lg ${!avatar && "border"}`}
+          />
+          <div className="flex flex-col">
+            <h2 className="break-words font-semibold text-neutral-700">
+              {list.name}
+            </h2>
+            <h3 className="break-all text-sm text-neutral-500">
+              By @{creator.handle}
+            </h3>
+          </div>
+        </div>
+      </div>
+      {description && (
+        <p className="break-words text-neutral-700">{description}</p>
+      )}
+    </Link>
+  );
+}