update channel model

src/components/channels/channelList.tsx

@@ -1,24 +1,17 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
-import { channelsAtom, defaultChannelsAtom } from '@stores/channel';
+let channels: any = [];
 
-import { useAtomValue } from 'jotai';
+if (typeof window !== 'undefined') {
+  const { getChannels } = await import('@utils/storage');
+  channels = await getChannels(100, 0);
+}
 
 export default function ChannelList() {
-  let atom;
-
-  if (typeof window !== 'undefined') {
-    atom = channelsAtom;
-  } else {
-    atom = defaultChannelsAtom;
-  }
-
-  const list: any = useAtomValue(atom);
-
   return (
     <div className="flex flex-col gap-px">
-      {list.map((item: { event_id: string }) => (
+      {channels.map((item: { event_id: string }) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
       <CreateChannelModal />

src/components/channels/channelListItem.tsx

@@ -20,12 +20,8 @@ export const ChannelListItem = ({ data }: { data: any }) => {
         pageID === data.event_id ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
       )}
     >
-      <div className="relative h-5 w-5 shrink-0 rounded">
-        <img
-          src={channel?.picture || DEFAULT_AVATAR}
-          alt={data.event_id}
-          className="h-5 w-5 rounded bg-zinc-900 object-cover"
-        />
+      <div className="relative h-5 w-5 shrink-0 rounded bg-zinc-900">
+        <img src={channel?.picture || DEFAULT_AVATAR} alt={data.event_id} className="h-5 w-5 rounded object-contain" />
       </div>
       <div>
         <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name}</h5>

src/components/channels/channelProfile.tsx

@@ -1,5 +1,6 @@
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
 
+import { Copy } from 'iconoir-react';
 import { nip19 } from 'nostr-tools';
 import Skeleton from 'react-loading-skeleton';
 
@@ -7,13 +8,23 @@ export const ChannelProfile = ({ id }: { id: string }) => {
   const metadata = useChannelMetadata(id);
   const noteID = nip19.noteEncode(id);
 
+  const copyNoteID = async () => {
+    const { writeText } = await import('@tauri-apps/api/clipboard');
+    await writeText(noteID);
+  };
+
   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" />
+        <img src={metadata?.picture || <Skeleton />} alt={id} className="h-8 w-8 rounded bg-zinc-900 object-contain" />
       </div>
       <div className="flex flex-col gap-1">
-        <h5 className="truncate font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
+        <div className="flex items-center gap-1">
+          <h5 className="truncate text-sm font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
+          <button onClick={() => copyNoteID()}>
+            <Copy width={14} height={14} className="text-zinc-400" />
+          </button>
+        </div>
         <p className="text-xs leading-none text-zinc-400">
           {metadata?.about || noteID.substring(0, 24) + '...' || <Skeleton />}
         </p>