fix: chat page styles for dark theme

src/app/[name]/(Main)/chat/[id]/page.tsx

@@ -1,52 +1,53 @@
-'use client';
+'use client'
 
-import { ef } from '@/lib/helpers/utfNumbers';
+import { ef } from '@/lib/helpers/utfNumbers'
-import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react';
+import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react'
 import React, { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 type Props = object
 
 type MessageModel = {
-    type: "sender" | "receiver",
+  type: 'sender' | 'receiver'
-    senderName: string,
+  senderName: string
-    content: string,
+  content: string
-    date: string,
+  date: string
-    time: string,
+  time: string
 }
 
 function ChatIndex ({}: Props) {
-
+  const { t } = useTranslation('chat')
-    const { t } = useTranslation('chat');
 
   const [messages, setMessages] = useState<Array<MessageModel>>([
     {
-            type: "sender",
+      type: 'sender',
-            senderName: "علی مصلحی",
+      senderName: 'علی مصلحی',
-            content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
+      content:
+        'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
       date: '1403/09/30',
       time: '10:07'
     },
     {
       type: 'receiver',
       senderName: 'سیما فرهادی',
-            content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
+      content:
+        'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
       date: '1403/09/30',
       time: '10:07'
-        },
+    }
-    ]);
+  ])
 
   const addMessageOutgoing = (model: MessageModel) => {
-        setMessages((previous) => {
+    setMessages(previous => {
       return [...previous, model]
     })
   }
 
   const submitMessage = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
+    e.preventDefault()
-        const formData = new FormData(e.currentTarget);
+    const formData = new FormData(e.currentTarget)
-        const content = formData.get('textMessage');
+    const content = formData.get('textMessage')
-        if (!content) return;
+    if (!content) return
     const model: MessageModel = {
       type: 'sender',
       senderName: 'علی مصلحی',
@@ -54,47 +55,51 @@ function ChatIndex({ }: Props) {
       date: '1403/09/30',
       time: '10:07'
     }
-        addMessageOutgoing(model);
+    addMessageOutgoing(model)
-    };
+  }
 
-
+  const messagesMemo = useMemo(() => messages, [messages])
-    const messagesMemo = useMemo(() => messages, [messages]);
 
   return (
-        <section className="flex flex-col h-full pt-6">
+    <section className='flex flex-col h-full pt-6'>
-            <h1 className="font-medium">علی مصلحی</h1>
+      <h1 className='font-medium'>علی مصلحی</h1>
 
-            <div className="bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden">
+      <div className='bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden'>
-                <div className="overflow-y-auto flex flex-col-reverse">
+        <div className='overflow-y-auto flex flex-col-reverse'>
-                    <ul className="grid gap-6 pb-6 ">
+          <ul className='grid gap-6 pb-6 '>
             {messagesMemo.map((v, i) => {
-                            if (v.type === "sender") {
+              if (v.type === 'sender') {
                 return (
-                                    <li key={i} className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
+                  <li
+                    key={i}
+                    className='bg-[#F6F7FA] dark:bg-gray-700 rounded-[30px] rounded-tr-none p-6'
+                  >
                     <article>
-                                            <p className='text-xs2'>
+                      <p className='text-xs2'>{v.content}</p>
-                                                {v.content}
-                                            </p>
 
-                                            <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                      <span
+                        dir='ltr'
+                        className='text-[11px] float-end text-disabled-text mt-2.5'
+                      >
                         {ef(`${v.time}  |  ${v.date}`)}
                       </span>
                     </article>
                   </li>
                 )
-                            }
+              } else {
-                            else {
                 return (
-                                    <li key={i} className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
+                  <li
+                    key={i}
+                    className='bg-[#EBEDF5] dark:bg-gray-600 rounded-[30px] rounded-tl-none p-6'
+                  >
                     <article>
-                                            <h6 className='text-xs font-medium'>
+                      <h6 className='text-xs font-medium'>{v.senderName}</h6>
-                                                {v.senderName}
+                      <p className='text-xs2 mt-2.5'>{v.content}</p>
-                                            </h6>
-                                            <p className='text-xs2 mt-2.5'>
-                                                {v.content}
-                                            </p>
 
-                                            <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                      <span
+                        dir='ltr'
+                        className='text-[11px] float-end text-disabled-text mt-2.5'
+                      >
                         {ef(`${v.time}  |  ${v.date}`)}
                       </span>
                     </article>
@@ -105,27 +110,45 @@ function ChatIndex({ }: Props) {
           </ul>
         </div>
 
-                <section aria-labelledby={t("InputMessage.AriaLabelBy")} className="w-full">
+        <section
+          aria-labelledby={t('InputMessage.AriaLabelBy')}
+          className='w-full'
+        >
           <form
             onSubmit={submitMessage}
-                        className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2"
+            className='focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-border h-12 rounded-xl py-2.5 px-2'
           >
-                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1">
+            <button
-                            <Microphone2 className="stroke-foreground" size={24} />
+              type='button'
+              className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1'
+            >
+              <Microphone2 className='stroke-foreground' size={24} />
             </button>
             <input
-                            name="textMessage"
+              name='textMessage'
-                            role="textbox"
+              role='textbox'
-                            autoComplete="off"
+              autoComplete='off'
-                            className="w-full text-[11px] h-full outline-none ms-1"
+              className='w-full text-[11px] h-full outline-none ms-1'
-                            type="text"
+              type='text'
-                            placeholder={t("InputMessage.Placeholder")}
+              placeholder={t('InputMessage.Placeholder')}
+            />
+            <button
+              type='button'
+              className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
+            >
+              <EmojiHappy
+                className='stroke-disabled2 dark:stroke-neutral-400'
+                size={20}
               />
-                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
-                            <EmojiHappy className="stroke-disabled2" size={20} />
             </button>
-                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
+            <button
-                            <Paperclip2 className="stroke-disabled2" size={20} />
+              type='button'
+              className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
+            >
+              <Paperclip2
+                className='stroke-disabled2 dark:stroke-neutral-400'
+                size={20}
+              />
             </button>
           </form>
         </section>

src/app/[name]/(Main)/chat/nearby/page.tsx

@@ -1,118 +1,153 @@
-'use client';
+'use client'
 
-import { motion } from 'framer-motion';
+import { motion } from 'framer-motion'
-import Image from 'next/image';
+import Image from 'next/image'
-import Link from 'next/link';
+import Link from 'next/link'
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react'
 
 const users = [
-    { id: 0, name: '1 علی مصلحی', table: 12, avatar: '/assets/images/user-avatar.png' },
+  {
-    { id: 1, name: '2 علی مصلحی', table: 10, avatar: '/assets/images/user-avatar.png' },
+    id: 0,
-    { id: 2, name: '3 علی مصلحی', table: 11, avatar: '/assets/images/user-avatar.png' },
+    name: '1 علی مصلحی',
-    { id: 3, name: '4 علی مصلحی', table: 5, avatar: '/assets/images/user-avatar.png' },
+    table: 12,
-    { id: 4, name: '5 علی مصلحی', table: 2, avatar: '/assets/images/user-avatar.png' },
+    avatar: '/assets/images/user-avatar.png'
-    { id: 5, name: '6 علی مصلحی', table: 1, avatar: '/assets/images/user-avatar.png' },
+  },
-];
+  {
+    id: 1,
+    name: '2 علی مصلحی',
+    table: 10,
+    avatar: '/assets/images/user-avatar.png'
+  },
+  {
+    id: 2,
+    name: '3 علی مصلحی',
+    table: 11,
+    avatar: '/assets/images/user-avatar.png'
+  },
+  {
+    id: 3,
+    name: '4 علی مصلحی',
+    table: 5,
+    avatar: '/assets/images/user-avatar.png'
+  },
+  {
+    id: 4,
+    name: '5 علی مصلحی',
+    table: 2,
+    avatar: '/assets/images/user-avatar.png'
+  },
+  {
+    id: 5,
+    name: '6 علی مصلحی',
+    table: 1,
+    avatar: '/assets/images/user-avatar.png'
+  }
+]
 
 function ChatNearby () {
-    const containerRef = useRef<HTMLElement>(null);
+  const containerRef = useRef<HTMLElement>(null)
-    const [positions, setPositions] = useState<{ top: number; left: number }[]>([]);
+  const [positions, setPositions] = useState<{ top: number; left: number }[]>(
+    []
+  )
 
   useEffect(() => {
     if (containerRef.current) {
-            const maxW = containerRef.current.offsetWidth - 50;
+      const maxW = containerRef.current.offsetWidth - 50
-            const maxH = containerRef.current.offsetHeight - 180;
+      const maxH = containerRef.current.offsetHeight - 180
-            const elementSize = 110; // approximate size of each user element
+      const elementSize = 110 // approximate size of each user element
-            const padding = 80; // minimum distance between elements
+      const padding = 80 // minimum distance between elements
 
-            const positions: { top: number; left: number }[] = [];
+      const positions: { top: number; left: number }[] = []
 
       const isTooClose = (top: number, left: number) => {
         return positions.some(p => {
-                    const dx = p.left - left;
+          const dx = p.left - left
-                    const dy = p.top - top;
+          const dy = p.top - top
-                    const distance = Math.sqrt(dx * dx + dy * dy);
+          const distance = Math.sqrt(dx * dx + dy * dy)
-                    return distance < padding;
+          return distance < padding
-                });
+        })
-            };
+      }
 
       users.forEach(() => {
-                let top = 0;
+        let top = 0
-                let left = 0;
+        let left = 0
-                let tries = 0;
+        let tries = 0
 
         do {
-                    top = Math.random() * Math.abs(maxH - elementSize);
+          top = Math.random() * Math.abs(maxH - elementSize)
-                    left = Math.random() * Math.abs(maxW - elementSize);
+          left = Math.random() * Math.abs(maxW - elementSize)
-                    tries++;
+          tries++
-                } while (isTooClose(top, left) && tries < 100);
+        } while (isTooClose(top, left) && tries < 100)
 
-                positions.push({ top, left });
+        positions.push({ top, left })
-            });
+      })
 
-            setPositions(positions);
+      setPositions(positions)
     }
-    }, []);
+  }, [])
-
 
   return (
-        <section ref={containerRef} className="h-svh relative">s
+    <section ref={containerRef} className='h-svh relative'>
-            <section className="relative h-full w-full mt-7">
+      <section className='relative h-full w-full mt-7'>
         <motion.div
-                    className='size-[1145px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+          className='w-[1145px] h-[1145px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    style={{ background: 'linear-gradient(180deg, #EAECF0 4.52%, #DBDEE8 95.02%)', willChange: 'transform' }}
+             bg-[linear-gradient(180deg,#EAECF0_4.52%,#DBDEE8_95.02%)] 
-                >
+             dark:bg-[linear-gradient(180deg,#1F2937_4.52%,#374151_95.02%)]'
-                </motion.div>
+          style={{ willChange: 'transform' }}
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [1, 0.95, 1] }}
           transition={{ repeat: Infinity, duration: 13 }}
-                    className='size-[824px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+          className='w-[824px] h-[824px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    style={{ background: 'linear-gradient(180deg, #EBF0FC 4.52%, #EBF0FC 95.02%)', willChange: 'transform' }}
+             bg-[linear-gradient(180deg,#EBF0FC_4.52%,#EBF0FC_95.02%)] 
-                >
+             dark:bg-[linear-gradient(180deg,#111827_4.52%,#1E293B_95.02%)]'
-                </motion.div>
+          style={{ willChange: 'transform' }}
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [0.9, 1] }}
           transition={{ repeat: Infinity, duration: 4, repeatType: 'reverse' }}
-                    className='size-[617px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+          className='w-[617px] h-[617px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    style={{ background: 'linear-gradient(180deg, #E6EBFA 0%, #DFE2EC 100%)', willChange: 'transform' }}
+             bg-[linear-gradient(180deg,#E6EBFA_0%,#DFE2EC_100%)] 
-                >
+             dark:bg-[linear-gradient(180deg,#1E293B_0%,#111827_100%)]'
-                </motion.div>
+          style={{ willChange: 'transform' }}
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [1.02, 0.95] }}
           transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
-                    className='size-[425px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+          className='w-[425px] h-[425px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    style={{ background: 'linear-gradient(180deg, #E1E5EF 0%, #D8DDE8 60.2%, #D2D7E3 100%)', willChange: 'transform' }}
+             bg-[linear-gradient(180deg,#E1E5EF_0%,#D8DDE8_60.2%,#D2D7E3_100%)] 
-                >
+             dark:bg-[linear-gradient(180deg,#1F2937_0%,#374151_60.2%,#1E293B_100%)]'
-                </motion.div>
+          style={{ willChange: 'transform' }}
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [1.05, 1] }}
           transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
-                    className='size-[292px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+          className='w-[292px] h-[292px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    style={{ background: 'linear-gradient(180deg, #EAEDF5 0%, #E4E7F0 46.52%, #DDDFEB 100%)', willChange: 'transform' }}
+             bg-[linear-gradient(180deg,#EAEDF5_0%,#E4E7F0_46.52%,#DDDFEB_100%)] 
-                >
+             dark:bg-[linear-gradient(180deg,#111827_0%,#1E293B_46.52%,#1F2937_100%)]'
-                </motion.div>
+          style={{ willChange: 'transform' }}
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [1, 1.05] }}
           transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
-
+          className='w-[174px] h-[174px] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    className='size-[174px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+             bg-[linear-gradient(180deg,#F3F7FF_0%,#F2F5FC_100%)] 
-                    style={{ background: 'linear-gradient(180deg, #F3F7FF 0%, #F2F5FC 100%)', willChange: 'transform' }}
+             dark:bg-[linear-gradient(180deg,#1E293B_0%,#111827_100%)]'
-                >
+          style={{ willChange: 'transform' }}
-                </motion.div>
+        ></motion.div>
 
         <motion.div
           animate={{ scale: [0, 1.2], opacity: [1, 0] }}
           transition={{ repeat: Infinity, duration: 2 }}
-
+          className='h-full w-[100dvh] rounded-full fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-                    className='h-full w-dvh rounded-full fixed top-1/2 left-1/2 -translate-1/2 outline outline-solid outline-blue-400'
+             outline outline-solid outline-blue-400'
           style={{ willChange: 'transform, opacity' }}
-                >
+        ></motion.div>
-                </motion.div>
 
         <div>
           {positions.length === users.length &&
@@ -121,12 +156,21 @@ function ChatNearby() {
                 href={`${v.id}`}
                 prefetch={false}
                 key={v.id}
-                                style={{ position: 'absolute', top: positions[i].top, left: positions[i].left }}
+                style={{
-                                className="justify-items-center"
+                  position: 'absolute',
+                  top: positions[i].top,
+                  left: positions[i].left
+                }}
+                className='justify-items-center'
               >
-                                <Image height={46} width={46} alt="user avatar" src={v.avatar} />
+                <Image
-                                <h6 className="mt-2 text-xs font-medium">{v.name}</h6>
+                  height={46}
-                                <div className="mt-[3px] text-xs2 font-medium bg-disabled-text text-accent rounded-[5px] px-[5px] py-[3px]">
+                  width={46}
+                  alt='user avatar'
+                  src={v.avatar}
+                />
+                <h6 className='mt-2 text-xs font-medium'>{v.name}</h6>
+                <div className='mt-[3px] text-xs2 font-medium bg-disabled-text dark:bg-neutral-800 text-accent rounded-[5px] px-[5px] py-[3px]'>
                   میز {v.table}
                 </div>
               </Link>
@@ -134,7 +178,7 @@ function ChatNearby() {
         </div>
       </section>
     </section>
-    );
+  )
 }
 
-export default ChatNearby;
+export default ChatNearby

src/app/[name]/(Main)/chat/page.tsx

@@ -1,41 +1,45 @@
-'use client';
+'use client'
 
-import SearchBox from '@/components/input/SearchBox';
+import SearchBox from '@/components/input/SearchBox'
-import { ScrollArea } from '@/components/ui/scrollarea';
+import { ScrollArea } from '@/components/ui/scrollarea'
-import { Radar2, Trash } from 'iconsax-react';
+import { Radar2, Trash } from 'iconsax-react'
-import { Check, CheckCheck } from 'lucide-react';
+import { Check, CheckCheck } from 'lucide-react'
-import Image from 'next/image';
+import Image from 'next/image'
-import Link from 'next/link';
+import Link from 'next/link'
 import React, { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
-import { LongPressCallbackMeta, LongPressReactEvents, useLongPress } from 'use-long-press'
+import {
-import { useRouter } from 'next/navigation';
+  LongPressCallbackMeta,
-import useToggle from '@/hooks/helpers/useToggle';
+  LongPressReactEvents,
-import Prompt from '@/components/utils/Prompt';
+  useLongPress
+} from 'use-long-press'
+import { useRouter } from 'next/navigation'
+import useToggle from '@/hooks/helpers/useToggle'
+import Prompt from '@/components/utils/Prompt'
 
 type Props = object
 
 type ChatEntryModel = {
-    id: string,
+  id: string
-    username: string,
+  username: string
-    avatarUrl: string,
+  avatarUrl: string
   update?: {
-        time: string,
+    time: string
-        content: string,
+    content: string
-        count?: number,
+    count?: number
     seen?: boolean
   }
 }
 
 function ChatIndex ({}: Props) {
-    const { t } = useTranslation('chat');
+  const { t } = useTranslation('chat')
   const { t: tDeleteModal } = useTranslation('common', {
     keyPrefix: 'DeleteChatModal'
-    });
+  })
-    const [search, setSearch] = useState('');
+  const [search, setSearch] = useState('')
-    const [selectedChats, setSelectedChats] = useState<Array<string>>([]);
+  const [selectedChats, setSelectedChats] = useState<Array<string>>([])
-    const router = useRouter();
+  const router = useRouter()
-    const { state: deleteModal, toggle: toggleDeleteModal } = useToggle();
+  const { state: deleteModal, toggle: toggleDeleteModal } = useToggle()
 
   const [chatsList, setChatList] = useState<Array<ChatEntryModel>>([
     {
@@ -45,7 +49,7 @@ function ChatIndex({ }: Props) {
       update: {
         time: '12:03',
         content: 'چه خبر',
-                count: 2,
+        count: 2
       }
     },
     {
@@ -55,7 +59,7 @@ function ChatIndex({ }: Props) {
       update: {
         time: '12:03',
         content: 'چه خبر',
-                count: 2,
+        count: 2
       }
     },
     {
@@ -97,70 +101,93 @@ function ChatIndex({ }: Props) {
         content: 'چه خبر',
         seen: false
       }
-        },
+    }
-    ]);
+  ])
 
   const toggleDeleteModalVisiblity = (e?: React.MouseEvent) => {
-        e?.preventDefault();
+    e?.preventDefault()
-        e?.stopPropagation();
+    e?.stopPropagation()
     if (deleteModal) {
-            setSelectedChats([]);
+      setSelectedChats([])
     }
     toggleDeleteModal()
-    };
-
-    const deleteSelectedChats = () => {
-        if (setSelectedChats.length <= 0) return;
-        setChatList((prev) => {
-            return prev.filter(x => !selectedChats.includes(x.id));
-        })
-        toggleDeleteModalVisiblity();
   }
 
-    const longPressCallback = useCallback((e: LongPressReactEvents<Element>, ctx: LongPressCallbackMeta<unknown>) => {
+  const deleteSelectedChats = () => {
-        e.preventDefault();
+    if (setSelectedChats.length <= 0) return
-        if (!ctx?.context) return;
+    setChatList(prev => {
-        const id = String(ctx.context);
+      return prev.filter(x => !selectedChats.includes(x.id))
-        setSelectedChats((prev) => {
+    })
-            if (prev.includes(id)) return prev.filter(x => x !== id);
+    toggleDeleteModalVisiblity()
+  }
+
+  const longPressCallback = useCallback(
+    (e: LongPressReactEvents<Element>, ctx: LongPressCallbackMeta<unknown>) => {
+      e.preventDefault()
+      if (!ctx?.context) return
+      const id = String(ctx.context)
+      setSelectedChats(prev => {
+        if (prev.includes(id)) return prev.filter(x => x !== id)
         return [...prev, id]
       })
-    }, [])
+    },
+    []
+  )
 
-    const longPressCancelledCallback = useCallback((id: string, reason?: string) => {
+  const longPressCancelledCallback = useCallback(
-        if (reason && reason !== 'cancelled-by-release') return;
+    (id: string, reason?: string) => {
+      if (reason && reason !== 'cancelled-by-release') return
       if (selectedChats.length > 0) {
-            setSelectedChats((prev) => {
+        setSelectedChats(prev => {
-                if (prev.includes(id)) return prev.filter(x => x !== id);
+          if (prev.includes(id)) return prev.filter(x => x !== id)
           return [...prev, id]
         })
       } else {
         router.push(`chat/${id}`)
       }
-    }, [router, selectedChats.length])
+    },
+    [router, selectedChats.length]
+  )
 
   const longPress = useLongPress(longPressCallback, {
-        onCancel: (event, ctx) => longPressCancelledCallback(String(ctx.context), String(ctx.reason)),
+    onCancel: (event, ctx) =>
+      longPressCancelledCallback(String(ctx.context), String(ctx.reason)),
     threshold: 500, // In milliseconds
     captureEvent: true, // Event won't get cleared after React finish processing it
     cancelOnMovement: 100, // Square side size (in pixels) inside which movement won't cancel long press
-        cancelOutsideElement: true, // Cancel long press when moved mouse / pointer outside element while pressing
+    cancelOutsideElement: true // Cancel long press when moved mouse / pointer outside element while pressing
-    });
+  })
 
   return (
     <div className='pt-8 mb-8'>
       <section className='flex justify-between items-center gap-x-4'>
-                <SearchBox placeholder={t('InputSearch.Placeholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
+        <SearchBox
+          placeholder={t('InputSearch.Placeholder')}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
 
-                {selectedChats.length > 0 ?
+        {selectedChats.length > 0 ? (
-                    <span onClick={toggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
+          <span
-                        <Trash size={24} className='stroke-primary' />
+            onClick={toggleDeleteModal}
+            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+          >
+            <Trash
+              size={24}
+              className='stroke-primary dark:stroke-disabled-text'
+            />
           </span>
-                    :
+        ) : (
-                    <Link href={'chat/nearby'} className='bg-container p-2 rounded-xl active:bg-gray-50'>
+          <Link
-                        <Radar2 size={24} className='stroke-primary' />
+            href={'chat/nearby'}
+            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+          >
+            <Radar2
+              size={24}
+              className='stroke-primary dark:stroke-disabled-text'
+            />
           </Link>
-                }
+        )}
       </section>
 
       <section>
@@ -174,22 +201,19 @@ function ChatIndex({ }: Props) {
                   className='select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 bg-background rounded-xl'
                 >
                   <div className='size-[49px] min-w-[49px]'>
-                                        {
+                    {selectedChats.includes(chat.id) ? (
-                                            selectedChats.includes(chat.id) ?
                       <div className='size-[49px] relative bg-primary rounded-full'>
                         <Check className='absolute top-1/2 left-1/2 -translate-1/2 stroke-white' />
                       </div>
-                                                :
+                    ) : (
                       <Image
                         src={chat.avatarUrl}
                         height={49}
                         width={49}
-
                         alt={`${chat.username}'s avatar`}
                         unoptimized
                       />
-                                        }
+                    )}
-
                   </div>
 
                   <div className='flex flex-col justify-between w-full gap-2'>
@@ -198,18 +222,21 @@ function ChatIndex({ }: Props) {
                   </div>
 
                   <div className='flex flex-col justify-between items-end gap-2'>
-                                        <span className='text-sm2 text-disabled2'>{chat.update?.time}</span>
+                    <span className='text-sm2 text-disabled2'>
-                                        {chat.update?.count !== undefined && chat.update?.count > 0 ?
+                      {chat.update?.time}
-                                            <span className='text-xs w-5 h-5 relative bg-foreground text-white rounded-full'>
-                                                <span className='absolute top-1/2 left-1/2 -translate-1/2 pt-1'>{chat.update?.count}</span>
                     </span>
-                                            :
+                    {chat.update?.count !== undefined &&
-                                            chat.update?.seen !== undefined &&
+                    chat.update?.count > 0 ? (
-                                                chat.update?.seen ?
+                      <span className='text-xs w-5 h-5 relative bg-foreground dark:bg-neutral-700 text-white rounded-full'>
-                                                <CheckCheck className='stroke-foreground' size={16} /> :
+                        <span className='absolute top-1/2 left-1/2 -translate-1/2 pt-1'>
+                          {chat.update?.count}
+                        </span>
+                      </span>
+                    ) : chat.update?.seen !== undefined && chat.update?.seen ? (
+                      <CheckCheck className='stroke-foreground' size={16} />
+                    ) : (
                       <Check className='stroke-foreground' size={16} />
-                                        }
+                    )}
-
                   </div>
                 </li>
               )
@@ -220,7 +247,10 @@ function ChatIndex({ }: Props) {
 
       <Prompt
         title={tDeleteModal('Heading')}
-                description={tDeleteModal('Description').replace('{count}', String(selectedChats.length))}
+        description={tDeleteModal('Description').replace(
+          '{count}',
+          String(selectedChats.length)
+        )}
         textConfirm={tDeleteModal('ButtonOk')}
         textCancel={tDeleteModal('ButtonCancel')}
         onConfirm={deleteSelectedChats}