ok fine

src/app/chats/chat.tsx

@@ -29,12 +29,7 @@ export function ChatScreen() {
   const renderItem = useCallback(
     (message: NDKEvent) => {
       return (
-        <ChatMessage
-          message={message}
-          userPubkey={db.account.pubkey}
-          userPrivkey={''}
-          self={message.pubkey === db.account.pubkey}
-        />
+        <ChatMessage message={message} self={message.pubkey === db.account.pubkey} />
       );
     },
     [data]
@@ -91,17 +86,12 @@ export function ChatScreen() {
                 </p>
               </div>
             ) : (
-              <VList
-                ref={listRef}
-                className="h-full scrollbar-none"
-                mode="reverse"
-                shift={true}
-              >
+              <VList ref={listRef} className="h-full scrollbar-none" shift={true} reverse>
                 {data.map((message) => renderItem(message))}
               </VList>
             )}
           </div>
-          <div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-800">
+          <div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
             <ChatForm
               receiverPubkey={pubkey}
               userPubkey={db.account.pubkey}

src/app/chats/components/chatForm.tsx

@@ -57,12 +57,12 @@ export function ChatForm({
           autoCorrect="off"
           autoCapitalize="off"
           placeholder="Message"
-          className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
         />
         <button
           type="button"
           onClick={submit}
-          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-300"
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-600 dark:text-neutral-300"
         >
           <EnterIcon className="h-5 w-5" />
           Send

src/app/chats/components/mediaUploader.tsx

@@ -29,7 +29,7 @@ export function MediaUploader({
           <button
             type="button"
             onClick={() => uploadMedia()}
-            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
+            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-600 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
           >
             {loading ? (
               <LoaderIcon className="h-4 w-4 animate-spin" />

src/app/chats/components/message.tsx

@@ -7,18 +7,8 @@ import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/no
 
 import { parser } from '@utils/parser';
 
-export function ChatMessage({
-  message,
-  userPubkey,
-  userPrivkey,
-  self,
-}: {
-  message: NDKEvent;
-  userPubkey: string;
-  userPrivkey: string;
-  self: boolean;
-}) {
-  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
+export function ChatMessage({ message, self }: { message: NDKEvent; self: boolean }) {
+  const decryptedContent = useDecryptMessage(message);
   const richContent = parser(decryptedContent) ?? null;
 
   return (
@@ -26,17 +16,15 @@ export function ChatMessage({
       className={twMerge(
         'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
         self
-          ? 'ml-auto rounded-l-xl bg-blue-500'
-          : 'rounded-r-xl bg-neutral-200 dark:bg-neutral-800'
+          ? 'ml-auto rounded-l-xl bg-blue-500 text-white'
+          : 'rounded-r-xl bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
       )}
     >
       {!richContent ? (
-        <p className="text-neutral-900 dark:text-neutral-100">Decrypting...</p>
+        <p>Decrypting...</p>
       ) : (
         <div>
-          <p className="select-text whitespace-pre-line text-neutral-900 dark:text-neutral-100">
-            {richContent.parsed}
-          </p>
+          <p className="select-text whitespace-pre-line">{richContent.parsed}</p>
           <div>
             {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
             {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}

src/app/chats/hooks/useDecryptMessage.tsx

@@ -11,7 +11,7 @@ export function useDecryptMessage(message: NDKEvent) {
   useEffect(() => {
     async function decryptContent() {
       try {
-        const privkey = await db.secureLoad();
+        const privkey = await db.secureLoad(db.account.pubkey);
         const sender =
           db.account.pubkey === message.pubkey
             ? message.tags.find((el) => el[0] === 'p')[1]

src/app/chats/index.tsx

@@ -36,9 +36,9 @@ export function ChatsScreen() {
       <div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
         <div
           data-tauri-drag-region
-          className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
+          className="flex h-11 w-full shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800"
         >
-          <h3 className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text font-semibold text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
+          <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
             All chats
           </h3>
         </div>