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>

src/libs/storage.tsx

@@ -3,7 +3,7 @@ import destr from 'destr';
 import Database from 'tauri-plugin-sql-api';
 
 import { getParentID } from '@utils/transform';
-import { LumeEvent } from '@utils/types';
+import { Chats, LumeEvent } from '@utils/types';
 
 let db: null | Database = null;
 
@@ -295,11 +295,30 @@ export async function getChannelUsers(channel_id: string) {
 export async function getChats() {
   const db = await connect();
   const account = await getActiveAccount();
-  const result: any = await db.select(
+  const follows =
+    typeof account.follows === 'string' ? JSON.parse(account.follows) : account.follows;
+
+  const chats: { follows: Array<Chats> | null; unknown: number } = {
+    follows: [],
+    unknown: 0,
+  };
+
+  let result: Array<Chats> = await db.select(
     `SELECT DISTINCT sender_pubkey FROM chats WHERE receiver_pubkey = "${account.pubkey}" ORDER BY created_at DESC;`
   );
-  const newArr: any = result.map((v) => ({ ...v, new_messages: 0 }));
-  return newArr;
+
+  result = result.map((v) => ({ ...v, new_messages: 0 }));
+  result = result.sort((a, b) => a.new_messages - b.new_messages);
+
+  chats.follows = result.filter((el) => {
+    return follows.some((i) => {
+      return i === el.sender_pubkey;
+    });
+  });
+
+  chats.unknown = result.length - chats.follows.length;
+
+  return chats;
 }
 
 // get chat messages

src/shared/icons/index.tsx

@@ -45,4 +45,5 @@ export * from './follow';
 export * from './unfollow';
 export * from './reaction';
 export * from './thread';
+export * from './strangers';
 // @endindex

src/shared/icons/strangers.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function StrangersIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M17.75 19.25h3.673c.581 0 1.045-.496.947-1.07-.531-3.118-2.351-5.43-5.37-5.43-.446 0-.866.05-1.26.147M11.25 7a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm8.5.5a2.75 2.75 0 11-5.5 0 2.75 2.75 0 015.5 0zM1.87 19.18c.568-3.68 2.647-6.43 6.13-6.43 3.482 0 5.561 2.75 6.13 6.43.088.575-.375 1.07-.956 1.07H2.825c-.58 0-1.043-.495-.955-1.07z"
+      ></path>
+    </svg>
+  );
+}

src/utils/types.d.ts

@@ -0,0 +1,17 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+
+export interface LumeEvent extends NDKEvent {
+  event_id: string;
+  parent_id: string;
+}
+
+export interface Chats {
+  id: string;
+  event_id: string;
+  receiver_pubkey: string;
+  sender_pubkey: string;
+  content: string;
+  tags: string[][];
+  created_at: number;
+  new_messages: number;
+}

src/utils/types.ts

@@ -1,6 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-
-export interface LumeEvent extends NDKEvent {
-  event_id: string;
-  parent_id: string;
-}