wip: update chats to new ui

src/app/chats/components/item.tsx

@@ -7,15 +7,16 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
+import { Chats } from '@utils/types';
 
-export function ChatsListItem({ data }: { data: any }) {
+export function ChatsListItem({ data }: { data: Chats }) {
   const { status, user } = useProfile(data.sender_pubkey);
 
   if (status === 'loading') {
     return (
       <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
+        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
       </div>
     );
   }
@@ -41,7 +42,7 @@ export function ChatsListItem({ data }: { data: any }) {
         <h5 className="max-w-[10rem] truncate">
           {user?.nip05 ||
             user?.name ||
-            user?.displayName ||
+            user?.display_name ||
             displayNpub(data.sender_pubkey, 16)}
         </h5>
         <div className="flex items-center">

src/app/chats/components/messages/form.tsx

@@ -51,10 +51,10 @@ export function ChatMessageForm({
         onKeyDown={handleEnterPress}
         spellCheck={false}
         placeholder="Message"
-        className="relative h-11 w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500"
+        className="relative h-11 w-full resize-none rounded-md bg-white/10 px-5 text-white !outline-none placeholder:text-white/50"
       />
       <div className="absolute right-2 top-0 h-11">
-        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
+        <div className="flex h-full items-center justify-end gap-3 text-white/50">
           <MediaUploader setState={setValue} />
           <button
             type="button"

src/app/chats/components/messages/item.tsx

@@ -26,7 +26,7 @@ export function ChatMessageItem({
   const content = parser(data);
 
   return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
       <div className="flex flex-col">
         <User pubkey={data.sender_pubkey} time={data.created_at} isChat={true} />
         <div className="-mt-[20px] pl-[49px]">

src/app/chats/components/sidebar.tsx

@@ -5,7 +5,7 @@ import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
 
 export function ChatSidebar({ pubkey }: { pubkey: string }) {
   const { user } = useProfile(pubkey);
@@ -24,17 +24,17 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-1">
             <h3 className="text-lg font-semibold leading-none">
-              {user?.displayName || user?.name}
+              {user?.display_name || user?.name}
             </h3>
             <h5 className="leading-none text-white/50">
-              {user?.nip05 || shortenKey(pubkey)}
+              {user?.nip05 || displayNpub(pubkey, 16)}
             </h5>
           </div>
           <div>
             <p className="leading-tight">{user?.bio || user?.about}</p>
             <Link
               to={`/app/users/${pubkey}`}
-              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-zinc-900 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:text-white"
+              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white hover:bg-fuchsia-500"
             >
               View full profile
             </Link>

src/app/chats/index.tsx

@@ -14,6 +14,7 @@ import { createChat, getChatMessages } from '@libs/storage';
 import { useStronghold } from '@stores/stronghold';
 
 import { useAccount } from '@utils/hooks/useAccount';
+import { Chats } from '@utils/types';
 
 export function ChatScreen() {
   const queryClient = useQueryClient();
@@ -34,7 +35,7 @@ export function ChatScreen() {
 
   const userPrivkey = useStronghold((state) => state.privkey);
 
-  const itemContent: any = useCallback(
+  const itemContent = useCallback(
     (index: string | number) => {
       return (
         <ChatMessageItem
@@ -55,7 +56,7 @@ export function ChatScreen() {
   );
 
   const chat = useMutation({
-    mutationFn: (data: any) => {
+    mutationFn: (data: Chats) => {
       return createChat(
         data.id,
         data.receiver_pubkey,
@@ -100,16 +101,10 @@ export function ChatScreen() {
   }, [pubkey]);
 
   return (
-    <div className="grid h-full w-full grid-cols-3">
-      <div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
-        <div
-          data-tauri-drag-region
-          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
-        >
-          <h3 className="font-semibold text-white">Encrypted Chat</h3>
-        </div>
+    <div className="grid h-full w-full grid-cols-3 bg-white/10">
+      <div className="col-span-2 border-r border-white/5">
         <div className="h-full w-full flex-1 p-3">
-          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10">
             <div className="h-full w-full flex-1">
               {status === 'loading' ? (
                 <p>Loading...</p>
@@ -131,7 +126,7 @@ export function ChatScreen() {
                 />
               )}
             </div>
-            <div className="z-50 shrink-0 rounded-b-xl border-t border-zinc-800 bg-zinc-900 p-3 px-5">
+            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5">
               <ChatMessageForm
                 receiverPubkey={pubkey}
                 userPubkey={account.pubkey}
@@ -141,11 +136,7 @@ export function ChatScreen() {
           </div>
         </div>
       </div>
-      <div className="col-span-1">
-        <div
-          data-tauri-drag-region
-          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
-        />
+      <div className="col-span-1 pt-3">
         <ChatSidebar pubkey={pubkey} />
       </div>
     </div>