add members to channel and update note

src/app/channel/components/members.tsx

@@ -0,0 +1,39 @@
+import MiniMember from '@lume/app/channel/components/miniMember';
+import { channelMembersAtom } from '@lume/stores/channel';
+
+import { useAtomValue } from 'jotai';
+
+export default function ChannelMembers() {
+  const membersAsSet = useAtomValue(channelMembersAtom);
+  const membersAsArray = [...membersAsSet];
+  const miniMembersList = membersAsArray.slice(0, 4);
+  const totalMembers =
+    membersAsArray.length > 0
+      ? '+' +
+        Intl.NumberFormat('en-US', {
+          notation: 'compact',
+          maximumFractionDigits: 1,
+        }).format(membersAsArray.length)
+      : 0;
+
+  return (
+    <div>
+      <div className="group flex -space-x-2 overflow-hidden hover:-space-x-1">
+        {miniMembersList.map((member, index) => (
+          <MiniMember key={index} pubkey={member} />
+        ))}
+        {totalMembers > 0 ? (
+          <div className="inline-block inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 ring-2 ring-zinc-950 transition-all duration-150 ease-in-out group-hover:bg-zinc-800">
+            <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-200">{totalMembers}</span>
+          </div>
+        ) : (
+          <div>
+            <button className="inline-flex h-8 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm text-white shadow-button">
+              Invite
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}