update layout

src/components/channels/channelListItem.tsx

@@ -6,15 +6,7 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  let fallback: any;
-
-  if (typeof data.metadata === 'object') {
-    fallback = data.metadata;
-  } else {
-    fallback = JSON.parse(data.metadata);
-  }
-
-  const channel: any = useChannelMetadata(data.event_id, fallback);
+  const channel: any = useChannelMetadata(data.event_id);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;

src/components/channels/channelProfile.tsx

@@ -0,0 +1,23 @@
+import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
+
+import { nip19 } from 'nostr-tools';
+import Skeleton from 'react-loading-skeleton';
+
+export const ChannelProfile = ({ id }: { id: string }) => {
+  const metadata = useChannelMetadata(id);
+  const noteID = nip19.noteEncode(id);
+
+  return (
+    <div className="inline-flex items-center gap-2">
+      <div className="relative shrink-0 rounded-md">
+        <img src={metadata?.picture || <Skeleton />} alt={id} className="h-8 w-8 rounded bg-zinc-900 object-cover" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <h5 className="truncate font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
+        <p className="text-xs leading-none text-zinc-400">
+          {metadata?.about || noteID.substring(0, 24) + '...' || <Skeleton />}
+        </p>
+      </div>
+    </div>
+  );
+};

src/components/layouts/newsfeed.tsx

@@ -20,9 +20,7 @@ export default function NewsfeedLayout({ children }: { children: React.ReactNode
             <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
               <Navigation />
             </div>
-            <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-4 xl:mr-1.5">
-              <div className="h-full w-full rounded-lg">{children}</div>
-            </div>
+            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
           </div>
         </div>
       </div>