wip: new ui

src/app/auth/unlock.tsx

@@ -81,65 +81,61 @@ export function UnlockScreen() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md">
-        <div className="mb-8 text-center">
-          <h1 className="text-xl font-semibold text-zinc-100">
-            Enter password to unlock
-          </h1>
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
         </div>
-        <div className="flex flex-col gap-4">
-          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
-            <div className="flex flex-col gap-1">
-              <div className="relative">
-                <input
-                  {...register('password', { required: true })}
-                  type={passwordInput}
-                  className="relative w-full rounded-lg bg-zinc-800 py-3 text-center text-zinc-100 !outline-none placeholder:text-zinc-400"
-                />
-                <button
-                  type="button"
-                  onClick={() => showPassword()}
-                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
-                >
-                  {passwordInput === 'password' ? (
-                    <EyeOffIcon
-                      width={20}
-                      height={20}
-                      className="text-zinc-500 group-hover:text-zinc-100"
-                    />
-                  ) : (
-                    <EyeOnIcon
-                      width={20}
-                      height={20}
-                      className="text-zinc-500 group-hover:text-zinc-100"
-                    />
-                  )}
-                </button>
-              </div>
-              <span className="text-sm text-red-400">
-                {errors.password && <p>{errors.password.message}</p>}
-              </span>
-            </div>
-            <div className="flex flex-col items-center justify-center">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <div className="relative">
+              <input
+                {...register('password', { required: true })}
+                type={passwordInput}
+                className="relative w-full rounded-lg bg-white/10 py-3 text-center text-white !outline-none placeholder:text-white/10"
+              />
               <button
-                type="submit"
-                disabled={!isDirty || !isValid}
-                className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
+                type="button"
+                onClick={() => showPassword()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
               >
-                {loading ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                {passwordInput === 'password' ? (
+                  <EyeOffIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
                 ) : (
-                  'Continue →'
+                  <EyeOnIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
                 )}
               </button>
-              <Link
-                to="/auth/reset"
-                className="inline-flex h-12 items-center justify-center text-center text-sm text-zinc-400"
-              >
-                Reset password
-              </Link>
             </div>
-          </form>
-        </div>
+            <span className="text-sm text-red-400">
+              {errors.password && <p>{errors.password.message}</p>}
+            </span>
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <button
+              type="submit"
+              disabled={!isDirty || !isValid}
+              className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600"
+            >
+              {loading ? (
+                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+              ) : (
+                'Continue →'
+              )}
+            </button>
+            <Link
+              to="/auth/reset"
+              className="inline-flex h-14 items-center justify-center text-center text-white/50"
+            >
+              Reset password
+            </Link>
+          </div>
+        </form>
       </div>
     </div>
   );

src/app/space/components/blocks/following.tsx

@@ -125,13 +125,12 @@ export function FollowingBlock() {
   );
 
   return (
-    <div className="relative w-[400px] shrink-0 border-r border-zinc-900">
+    <div
+      ref={parentRef}
+      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
+    >
       <TitleBar title="Your Circle" />
-      <div
-        ref={parentRef}
-        className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
-        style={{ contain: 'strict' }}
-      >
+      <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">

src/app/space/index.tsx

@@ -57,12 +57,11 @@ export function SpaceScreen() {
     <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
       <FollowingBlock />
       {status === 'loading' ? (
-        <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+        <div className="flex w-[350px] shrink-0 flex-col">
           <div
             data-tauri-drag-region
-            className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
+            className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
           />
-
           <div className="flex w-full flex-1 items-center justify-center p-3">
             <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
           </div>
@@ -71,18 +70,17 @@ export function SpaceScreen() {
         blocks.map((block: Block) => renderBlock(block))
       )}
       {isFetching && (
-        <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+        <div className="flex w-[350px] shrink-0 flex-col">
           <div
             data-tauri-drag-region
-            className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
+            className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
           />
-
           <div className="flex w-full flex-1 items-center justify-center p-3">
             <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
           </div>
         </div>
       )}
-      <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+      <div className="flex w-[350px] shrink-0 flex-col">
         <div className="inline-flex h-full w-full items-center justify-center">
           <AddBlock />
         </div>

src/index.css

@@ -15,7 +15,7 @@ button {
 }
 
 .markdown {
-  @apply prose prose-zinc max-w-none select-text hyphens-auto dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose max-w-none select-text hyphens-auto text-white dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {

src/shared/appLayout.tsx

@@ -8,7 +8,7 @@ export function AppLayout() {
       <div className="shrink-0">
         <Navigation />
       </div>
-      <div className="h-full w-full flex-1 bg-black">
+      <div className="h-full w-full flex-1 bg-black/90">
         <Outlet />
         <ScrollRestoration />
       </div>

src/shared/authLayout.tsx

@@ -1,12 +1,10 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router-dom';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen">
+    <div className="relative h-screen w-screen bg-black/90">
       <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
-      <div className="relative flex min-h-0 w-full flex-1">
-        <Outlet />
-      </div>
+      <Outlet />
     </div>
   );
 }

src/shared/notes/actions.tsx

@@ -36,7 +36,7 @@ export function NoteActions({
         </div>
         {!noOpenThread && (
           <>
-            <div className="mx-2 block h-4 w-px bg-zinc-800" />
+            <div className="mx-2 block h-4 w-px bg-white/10" />
             <Tooltip.Root delayDuration={150}>
               <Tooltip.Trigger asChild>
                 <button
@@ -50,13 +50,13 @@ export function NoteActions({
                   }
                   className="group inline-flex h-7 w-7 items-center justify-center"
                 >
-                  <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
+                  <ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
                 </button>
               </Tooltip.Trigger>
               <Tooltip.Portal>
-                <Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 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">
+                <Tooltip.Content 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">
                   Open thread
-                  <Tooltip.Arrow className="fill-zinc-700" />
+                  <Tooltip.Arrow className="fill-black" />
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>

src/shared/notes/actions/reaction.tsx

@@ -66,13 +66,13 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
           {reaction ? (
             <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
           ) : (
-            <ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" />
+            <ReactionIcon className="h-5 w-5 text-white group-hover:text-red-400" />
           )}
         </button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
-          className="select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-1 py-1 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
+          className="select-none rounded-md bg-black px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
           sideOffset={0}
           side="top"
         >
@@ -133,7 +133,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               />
             </button>
           </div>
-          <Popover.Arrow className="fill-zinc-700" />
+          <Popover.Arrow className="fill-black" />
         </Popover.Content>
       </Popover.Portal>
     </Popover.Root>

src/shared/notes/actions/reply.tsx

@@ -23,13 +23,13 @@ export function NoteReply({
           onClick={() => setReply(id, pubkey, root)}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
-          <ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />
+          <ReplyIcon className="h-5 w-5 text-white group-hover:text-green-500" />
         </button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 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">
+        <Tooltip.Content 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">
           Quick reply
-          <Tooltip.Arrow className="fill-zinc-700" />
+          <Tooltip.Arrow className="fill-black" />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>

src/shared/notes/actions/repost.tsx

@@ -25,13 +25,13 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
           onClick={() => submit()}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
-          <RepostIcon className="h-5 w-5 text-zinc-300 group-hover:text-blue-400" />
+          <RepostIcon className="h-5 w-5 text-white group-hover:text-blue-400" />
         </button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 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">
+        <Tooltip.Content 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">
           Repost
-          <Tooltip.Arrow className="fill-zinc-700" />
+          <Tooltip.Arrow className="fill-black" />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>

src/shared/notes/kinds/kind1.tsx

@@ -17,7 +17,7 @@ export function NoteKind_1({
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <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 pt-3">
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/kinds/kind1063.tsx

@@ -13,7 +13,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <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 pt-3">
         <div className="flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/kinds/repost.tsx

@@ -33,7 +33,7 @@ export function Repost({ event }: { event: LumeEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <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 pt-3">
         <div className="flex flex-col">
           <div className="isolate flex flex-col -space-y-4 overflow-hidden">
             <RepostUser pubkey={event.pubkey} />

src/shared/notes/kinds/sub.tsx

@@ -24,7 +24,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
 
   return (
     <>
-      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
+      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
       <div className="mb-5 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
         <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/kinds/thread.tsx

@@ -19,7 +19,7 @@ export function NoteThread({
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+      <div className="overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
         <div className="relative">{root && <SubNote id={root} />}</div>
         <div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">

src/shared/notes/kinds/unsupport.tsx

@@ -6,7 +6,7 @@ import { LumeEvent } from '@utils/types';
 export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <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 pt-3">
         <div className="flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/metadata.tsx

@@ -79,8 +79,8 @@ export function NoteMetadata({ id }: { id: string }) {
     <div>
       {data.replies > 0 ? (
         <>
-          <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
-          <div className="relative z-10 flex items-center gap-3 bg-zinc-900 pb-3">
+          <div className="absolute left-[18px] top-14 h-[calc(100%-6.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+          <div className="relative z-10 flex items-center gap-3 pb-3">
             <div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
               <div className="isolate flex -space-x-1 overflow-hidden">
                 {data.users?.map((user, index) => (
@@ -94,14 +94,13 @@ export function NoteMetadata({ id }: { id: string }) {
                 onClick={() =>
                   add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
                 }
-                className="text-zinc-500"
+                className="text-white/50"
               >
-                <span className="font-semibold text-zinc-300">{data.replies}</span>{' '}
-                replies
+                <span className="font-semibold text-white">{data.replies}</span> replies
               </button>
-              <span className="text-zinc-500">·</span>
-              <p className="text-zinc-500">
-                <span className="font-semibold text-zinc-300">
+              <span className="text-white/50">·</span>
+              <p className="text-white/50">
+                <span className="font-semibold text-white">
                   {compactNumber.format(data.zap)}
                 </span>{' '}
                 zaps

src/shared/notes/preview/link.tsx

@@ -7,7 +7,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
   const domain = new URL(urls[0]);
 
   return (
-    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
+    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
       {status === 'loading' ? (
         <div className="flex flex-col">
           <div className="h-44 w-full animate-pulse bg-zinc-700" />
@@ -21,7 +21,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
         </div>
       ) : (
         <a
-          className="flex flex-col rounded-lg border-t border-zinc-700/50"
+          className="flex flex-col rounded-lg"
           href={urls[0]}
           target="_blank"
           rel="noreferrer"
@@ -43,15 +43,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                 />
               )}
               <div className="flex flex-col gap-2 px-3 py-3">
-                <h5 className="line-clamp-1 font-medium leading-none text-zinc-200">
+                <h5 className="line-clamp-1 font-medium leading-none text-white">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-zinc-400">
+                  <p className="line-clamp-3 break-all text-sm text-white/50">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm leading-none text-zinc-500">
+                <span className="mt-2.5 text-sm leading-none text-white/50">
                   {domain.hostname}
                 </span>
               </div>

src/shared/titleBar.tsx

@@ -8,7 +8,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
   return (
     <div
       data-tauri-drag-region
-      className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
+      className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
     >
       <div className="w-6" />
       <h3 className="text-sm font-medium text-zinc-200">{title}</h3>

src/shared/user.tsx

@@ -81,12 +81,12 @@ export function User({
             shortenKey(pubkey)}
         </h5>
         <div className="inline-flex items-center gap-2">
-          <span className="leading-none text-zinc-500">{createdAt}</span>
+          <span className="leading-none text-white/50">{createdAt}</span>
           <button
             type="button"
-            className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-zinc-800"
+            className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-white/20"
           >
-            <VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-zinc-200" />
+            <VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-white/50" />
           </button>
         </div>
       </div>

src/utils/types.d.ts

@@ -16,7 +16,7 @@ export interface LumeEvent extends NDKEvent {
   content: Content;
 }
 
-export interface Account {
+export interface Account extends NDKUserProfile {
   id: number;
   npub: string;
   pubkey: string;