wip: update chats to new ui

src/shared/mediaUploader.tsx

@@ -26,26 +26,22 @@ export function MediaUploader({ setState }: { setState: any }) {
           <button
             type="button"
             onClick={() => uploadMedia()}
-            className="group inline-flex h-6 w-6 items-center justify-center rounded bg-zinc-700 hover:bg-zinc-600"
+            className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
           >
             {loading ? (
-              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
             ) : (
-              <MediaIcon
-                width={14}
-                height={14}
-                className="text-white/50 group-hover:text-zinc-200"
-              />
+              <MediaIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
             )}
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-white backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+            className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
             sideOffset={5}
           >
             Upload media
-            <Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
+            <Tooltip.Arrow className="fill-black" />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>

src/shared/notes/kinds/repost.tsx

@@ -17,7 +17,7 @@ export function Repost({ event }: { event: LumeEvent }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3">
         <NoteSkeleton />
       </div>
     );
@@ -25,7 +25,7 @@ export function Repost({ event }: { event: LumeEvent }) {
 
   if (status === 'error') {
     return (
-      <div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+      <div className="flex items-center justify-center overflow-hidden rounded-xl bg-white/10 px-3 py-3">
         <p className="text-white/50">Failed to fetch</p>
       </div>
     );

src/shared/notes/kinds/sub.tsx

@@ -8,7 +8,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative mb-5 overflow-hidden rounded-xl bg-zinc-900 pt-3">
+      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 py-3">
         <NoteSkeleton />
       </div>
     );
@@ -16,7 +16,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-5 flex overflow-hidden rounded-xl bg-zinc-800 px-3 py-3">
+      <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3">
         <p className="text-white/50">Failed to fetch</p>
       </div>
     );

src/shared/notes/kinds/unsupport.tsx

@@ -13,11 +13,11 @@ export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <div className="mt-3 flex w-full flex-col gap-2">
-                <div className="inline-flex flex-col gap-1 rounded-md bg-zinc-800 px-2 py-2">
-                  <span className="text-sm font-medium leading-none text-zinc-500">
+                <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
+                  <span className="text-sm font-medium leading-none text-white/50">
                     Kind: {event.kind}
                   </span>
-                  <p className="text-sm leading-none text-fuchsia-500">
+                  <p className="text-sm leading-none text-white">
                     Lume isn&apos;t fully support this kind
                   </p>
                 </div>

src/shared/notes/preview/image.tsx

@@ -22,7 +22,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
               alt="image"
               className={`${
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
-              } w-full rounded-lg border border-zinc-800/50 object-cover`}
+              } w-full rounded-lg border border-white/10 object-cover`}
             />
             <button
               type="button"

src/shared/notes/skeleton.tsx

@@ -1,17 +1,15 @@
 export function NoteSkeleton() {
   return (
-    <div className="flex h-min flex-col pb-3">
+    <div className="flex h-min flex-col">
       <div className="flex items-start gap-3">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-zinc-700" />
-        <div className="flex flex-col gap-0.5">
-          <div className="h-3 w-20 rounded bg-zinc-700" />
-        </div>
+        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10" />
+        <div className="h-3 w-20 rounded bg-white/10" />
       </div>
-      <div className="-mt-5 animate-pulse pl-[49px]">
+      <div className="-mt-6 animate-pulse pl-[49px]">
         <div className="flex flex-col gap-1">
-          <div className="h-3 w-full rounded bg-zinc-700" />
-          <div className="h-3 w-2/3 rounded bg-zinc-700" />
-          <div className="h-3 w-1/2 rounded bg-zinc-700" />
+          <div className="h-3 w-full rounded bg-white/10" />
+          <div className="h-3 w-2/3 rounded bg-white/10" />
+          <div className="h-3 w-1/2 rounded bg-white/10" />
         </div>
       </div>
     </div>

src/shared/user.tsx

@@ -2,7 +2,6 @@ import * as Popover from '@radix-ui/react-popover';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { VerticalDotsIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
@@ -40,10 +39,10 @@ export function User({
         <div
           className={`${avatarWidth} ${avatarHeight}  ${
             size === 'small' ? 'rounded' : 'rounded-lg'
-          } relative z-10 shrink-0 animate-pulse overflow-hidden bg-zinc-800`}
+          } relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10`}
         />
         <div className="flex flex-wrap items-baseline gap-1">
-          <div className="h-3.5 w-36 animate-pulse rounded bg-zinc-800" />
+          <div className="h-3.5 w-36 animate-pulse rounded bg-white/10" />
         </div>
       </div>
     );
@@ -107,7 +106,7 @@ export function User({
             <div className="flex flex-1 flex-col gap-2">
               <div className="inline-flex flex-col gap-1">
                 <h5 className="text-sm font-semibold leading-none">
-                  {user?.displayName || user?.name}
+                  {user?.display_name || user?.name || user?.username}
                 </h5>
                 <span className="max-w-[10rem] truncate text-sm leading-none text-white/50">
                   {user?.nip05 || displayNpub(pubkey, 16)}