yup, lume is very solid now

src/shared/composer/modal.tsx

@@ -4,13 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { useStorage } from '@libs/storage/provider';
 
 import { Composer, ComposerUser } from '@shared/composer';
-import {
-  CancelIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ComposeIcon,
-  ExpandIcon,
-} from '@shared/icons';
+import { CancelIcon, ChevronDownIcon, ChevronRightIcon, ExpandIcon } from '@shared/icons';
 
 import { useComposer } from '@stores/composer';
 
@@ -30,7 +24,6 @@ export function ComposerModal() {
           type="button"
           className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 px-4 font-bold text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
         >
-          <ComposeIcon className="h-5 w-5" />
           Postr
         </button>
       </Dialog.Trigger>

src/shared/icons/addWidget.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function AddWidgetIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12.25 21.25h-6.5a1 1 0 01-1-1V3.75a1 1 0 011-1h12.5a1 1 0 011 1v8.5m-1 3v3m0 0v3m0-3h-3m3 0h3"
+      ></path>
+    </svg>
+  );
+}

src/shared/icons/index.tsx

@@ -1,3 +1,4 @@
+export * from './addWidget';
 export * from './arrowLeft';
 export * from './arrowRight';
 export * from './bell';

src/shared/notes/actions.tsx

@@ -28,7 +28,7 @@ export function NoteActions({
 
   return (
     <Tooltip.Provider>
-      <div className="-ml-1 mt-2 inline-flex w-full items-center">
+      <div className="-ml-1 mt-4 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
           <NoteReply id={id} pubkey={pubkey} root={root} />
           <NoteReaction id={id} pubkey={pubkey} />

src/shared/notes/actions/more.tsx

@@ -50,7 +50,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyLink()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
             >
               Copy shareable link
             </button>
@@ -59,7 +59,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyID()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
             >
               Copy ID
             </button>
@@ -67,7 +67,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
           <DropdownMenu.Item asChild>
             <Link
               to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
             >
               View profile
             </Link>

src/shared/notes/actions/zap.tsx

@@ -4,7 +4,6 @@ import { QRCodeSVG } from 'qrcode.react';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { Button } from '@shared/button';
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
 import { useEvent } from '@utils/hooks/useEvent';
@@ -42,7 +41,7 @@ export function NoteZap({ id }: { id: string }) {
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            <div className="relative h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
+            <div className="relative h-min w-full shrink-0 border-b border-white/5 bg-white/5 px-5 py-5">
               <div className="flex flex-col items-center gap-1.5">
                 <Dialog.Title className="font-medium leading-none text-white">
                   Zap (Beta)
@@ -63,7 +62,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(21000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(21000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -76,7 +75,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(69000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(69000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -89,7 +88,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(100000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(100000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -102,7 +101,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(200000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(200000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -115,7 +114,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(500000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(500000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -128,7 +127,7 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(1000000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-lg px-2 py-2 backdrop-blur-xl hover:bg-white/10',
                         `${selected(1000000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
@@ -139,9 +138,13 @@ export function NoteZap({ id }: { id: string }) {
                     </button>
                   </div>
                   <div className="mt-4 flex w-full">
-                    <Button onClick={() => createZapRequest()} preset="large">
+                    <button
+                      type="button"
+                      onClick={() => createZapRequest()}
+                      className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 hover:bg-fuchsia-600"
+                    >
                       Create invoice
-                    </Button>
+                    </button>
                   </div>
                 </>
               ) : (

src/shared/notes/child.tsx

@@ -25,8 +25,13 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-        <p className="break-all text-white/50">Failed to fetch event: {id}</p>
+      <div className="mb-5 flex flex-col gap-1.5 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <p className="text-sm font-bold text-white">
+          Lume cannot found the event with ID
+        </p>
+        <div className="inline-flex items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 p-2">
+          <p className="select-text break-all text-sm font-medium text-red-400">{id}</p>
+        </div>
       </div>
     );
   }

src/shared/notes/wrapper.tsx

@@ -19,7 +19,7 @@ export function NoteWrapper({
   reply?: string;
 }) {
   return (
-    <div className="h-min w-full px-3 py-1.5">
+    <div className="h-min w-full px-3 pb-3">
       <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>

src/shared/titleBar.tsx

@@ -11,15 +11,15 @@ 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 px-3"
+      className="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-white">{title}</h3>
+      <h3 className="text-sm font-bold text-white">{title}</h3>
       {id ? (
         <button
           type="button"
           onClick={() => remove(db, id)}
-          className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded backdrop-blur-xl transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
+          className="inline-flex h-6 w-6 shrink-0 transform items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
         >
           <CancelIcon className="h-3 w-3 text-white" />
         </button>