yup, lume is very solid now

src/app/auth/components/user.tsx

@@ -19,19 +19,17 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
   }
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="relative h-10 w-10 shrink rounded-md">
-        <Image
-          src={user?.picture || user?.image}
-          alt={pubkey}
-          className="h-10 w-10 rounded-md object-cover"
-        />
-      </div>
+    <div className="flex items-center gap-2.5">
+      <Image
+        src={user?.picture || user?.image}
+        alt={pubkey}
+        className="h-10 w-10 shrink-0 rounded-lg object-cover"
+      />
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <p className="max-w-[15rem] truncate font-medium leading-tight text-white">
           {user?.name || user?.display_name || user?.nip05}
         </p>
-        <span className="max-w-[15rem] truncate text-base leading-tight text-white/50">
+        <span className="max-w-[15rem] truncate leading-tight text-white/50">
           {displayNpub(pubkey, 16)}
         </span>
       </div>

src/app/auth/unlock.tsx

@@ -74,7 +74,7 @@ export function UnlockScreen() {
         <div className="mb-6 text-center">
           <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
         </div>
-        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-1">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
           <div className="flex flex-col rounded-lg bg-white/5">
             <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
               <User pubkey={db.account.pubkey} />
@@ -82,7 +82,7 @@ export function UnlockScreen() {
             <div className="relative">
               <input
                 {...register('password', { required: true, minLength: 4 })}
-                type={'password'}
+                type={showPassword ? 'text' : 'password'}
                 placeholder="Password"
                 className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
@@ -124,7 +124,7 @@ export function UnlockScreen() {
             </button>
             <Link
               to="/auth/reset"
-              className="inline-flex h-14 items-center justify-center text-center text-white/50"
+              className="mt-1 inline-flex h-11 w-full items-center justify-center rounded-lg text-center text-white/50 hover:bg-white/10"
             >
               Reset password
             </Link>

src/app/space/components/button.tsx

@@ -3,10 +3,10 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useStorage } from '@libs/storage/provider';
 
 import {
+  AddWidgetIcon,
   FeedIcon,
   FileIcon,
   HashtagIcon,
-  PlusIcon,
   ThreadsIcon,
   TrendingIcon,
 } from '@shared/icons';
@@ -72,7 +72,7 @@ export function AddWidgetButton() {
           <DropdownMenu.Trigger asChild>
             <button type="button" className="flex flex-col items-center gap-2">
               <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 backdrop-blur-xl hover:bg-white/10">
-                <PlusIcon className="h-5 w-5 text-white" />
+                <AddWidgetIcon className="h-5 w-5 text-white" />
               </div>
               <p className="font-medium text-white/50">Add widget</p>
             </button>
@@ -82,7 +82,7 @@ export function AddWidgetButton() {
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           sideOffset={-20}
-          className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none"
+          className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none"
         >
           <DropdownMenu.Item asChild>
             <button

src/app/space/components/widgets/network.tsx

@@ -18,6 +18,7 @@ import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
 import { useNostr } from '@utils/hooks/useNostr';
+import { toRawEvent } from '@utils/rawEvent';
 import { DBEvent } from '@utils/types';
 
 export function NetworkWidget() {
@@ -131,15 +132,19 @@ export function NetworkWidget() {
         async (event) => {
           let root: string;
           let reply: string;
+
           if (event.tags?.[0]?.[0] === 'e' && !event.tags?.[0]?.[3]) {
             root = event.tags[0][1];
           } else {
             root = event.tags.find((el) => el[3] === 'root')?.[1];
             reply = event.tags.find((el) => el[3] === 'reply')?.[1];
           }
+
+          const rawEvent = toRawEvent(event);
+
           await db.createEvent(
             event.id,
-            JSON.stringify(event),
+            JSON.stringify(rawEvent),
             event.pubkey,
             event.kind,
             root,
@@ -154,7 +159,7 @@ export function NetworkWidget() {
 
   return (
     <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
-      <TitleBar title="Network" />
+      <TitleBar title="👋 Network" />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">