add strangers section to chats sidebar

src/app/chat/components/list.tsx

@@ -6,7 +6,10 @@ import { ChatsListSelfItem } from '@app/chat/components/self';
 
 import { getChats } from '@libs/storage';
 
+import { StrangersIcon } from '@shared/icons';
+
 import { useAccount } from '@utils/hooks/useAccount';
+import { compactNumber } from '@utils/number';
 
 export function ChatsList() {
   const { account } = useAccount();
@@ -15,11 +18,7 @@ export function ChatsList() {
     data: chats,
     isFetching,
   } = useQuery(['chats'], async () => {
-    const chats = await getChats();
-    const sorted = chats.sort(
-      (a, b) => parseInt(a.new_messages) - parseInt(b.new_messages)
-    );
-    return sorted;
+    return await getChats();
   });
 
   if (status === 'loading') {
@@ -39,7 +38,6 @@ export function ChatsList() {
 
   return (
     <div className="flex flex-col">
-      <NewMessageModal />
       {account ? (
         <ChatsListSelfItem data={account} />
       ) : (
@@ -48,11 +46,25 @@ export function ChatsList() {
           <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
         </div>
       )}
-      {chats.map((item) => {
+      {chats.follows.map((item) => {
         if (account.pubkey !== item.sender_pubkey) {
           return <ChatsListItem key={item.sender_pubkey} data={item} />;
         }
       })}
+      <button
+        type="button"
+        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
+      >
+        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
+          <StrangersIcon className="h-3 w-3 text-zinc-200" />
+        </div>
+        <div>
+          <h5 className="font-medium text-zinc-400">
+            {compactNumber.format(chats.unknown)} strangers
+          </h5>
+        </div>
+      </button>
+      <NewMessageModal />
       {isFetching && (
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
           <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />

src/app/chat/components/modal.tsx

@@ -36,7 +36,7 @@ export function NewMessageModal() {
         className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
       >
         <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-          <PlusIcon width={12} height={12} className="text-zinc-500" />
+          <PlusIcon className="h-3 w-3 text-zinc-200" />
         </div>
         <div>
           <h5 className="font-medium text-zinc-400">New chat</h5>