Merge branch 'preview'

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

@@ -5,7 +5,7 @@ export const metadata: Metadata = {
   description: "List",
 };
 
-export default function FeedLayout({
+export default function ListsLayout({
   children,
 }: {
   children: React.ReactNode;

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

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

src/components/contentDisplay/listItem/ListItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ListView } from "@atproto/api/dist/client/types/app/bsky/graph/defs";
 import Image from "next/image";
 import Link from "next/link";
@@ -10,17 +12,18 @@ interface Props {
 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)}`,
+        pathname: `/dashboard/user/${creator.handle}/lists/${encodeURIComponent(
+          uri.split(":")[3].split("/")[2]
+        )}`,
         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 justify-between gap-3">        
         <div className="flex flex-wrap items-center gap-3">
           <Image
             src={avatar ?? FallbackList}

src/components/dataDisplay/postEmbed/FeedEmbed.tsx

@@ -3,7 +3,6 @@ import { AppBskyFeedDefs } from "@atproto/api";
 import FallbackFeed from "@/assets/images/fallbackFeed.png";
 import { BiSolidHeart } from "react-icons/bi";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 
 interface Props {
   feed: AppBskyFeedDefs.GeneratorView;
@@ -12,7 +11,6 @@ interface Props {
 
 export default function FeedEmbed(props: Props) {
   const { feed, depth } = props;
-  const router = useRouter();
 
   return (
     <>

src/containers/lists/ListContainer.tsx

@@ -23,7 +23,9 @@ export default function ListContainer(props: Props) {
       <div
         role="tablist"
         aria-orientation="horizontal"
-        className={`no-scrollbar flex flex-nowrap gap-3 overflow-auto border border-t-0 ${currenTab === "posts" ? "border-b" : "border-b-0"} px-3 pt-3`}
+        className={`no-scrollbar flex flex-nowrap gap-3 overflow-auto border border-t-0 ${
+          currenTab === "posts" ? "border-b" : "border-b-0"
+        } px-3 pt-3`}
       >
         <button
           role="tab"