refactor all widgets

src/shared/notification/notifyNote.tsx

@@ -1,7 +1,5 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 
-import { useStorage } from '@libs/storage/provider';
-
 import {
   ArticleNote,
   FileNote,
@@ -11,33 +9,37 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { WidgetKinds, useWidgets } from '@stores/widgets';
+import { WidgetKinds } from '@stores/constants';
 
 import { formatCreatedAt } from '@utils/createdAt';
 import { useEvent } from '@utils/hooks/useEvent';
+import { useWidget } from '@utils/hooks/useWidget';
 
 export function NotifyNote({ event }: { event: NDKEvent }) {
   const createdAt = formatCreatedAt(event.created_at, false);
   const rootEventId = event.tags.find((el) => el[0] === 'e')?.[1];
 
-  const { db } = useStorage();
   const { status, data } = useEvent(rootEventId);
-
-  const setWidget = useWidgets((state) => state.setWidget);
+  const { addWidget } = useWidget();
 
   const openThread = (event, thread: string) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      setWidget(db, { kind: WidgetKinds.local.thread, title: 'Thread', content: thread });
+      addWidget.mutate({
+        kind: WidgetKinds.local.thread,
+        title: 'Thread',
+        content: thread,
+      });
     } else {
       event.stopPropagation();
     }
   };
 
   const renderKind = (event: NDKEvent) => {
+    if (!event) return null;
     switch (event.kind) {
       case NDKKind.Text:
-        return <TextNote content={event.content} />;
+        return <TextNote content={event.content} truncate />;
       case NDKKind.Article:
         return <ArticleNote event={event} />;
       case 1063:
@@ -88,13 +90,13 @@ export function NotifyNote({ event }: { event: NDKEvent }) {
           {event.kind === 1 ? <TextNote content={event.content} /> : null}
         </div>
         <div
-          onClick={(e) => openThread(e, data.id)}
-          onKeyDown={(e) => openThread(e, data.id)}
+          onClick={(e) => openThread(e, data?.id)}
+          onKeyDown={(e) => openThread(e, data?.id)}
           role="button"
           tabIndex={0}
           className="cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800"
         >
-          <User pubkey={data.pubkey} time={data.created_at} variant="mention" />
+          <User pubkey={data?.pubkey} time={data?.created_at} variant="mention" />
           <div className="mt-1">{renderKind(data)}</div>
         </div>
       </div>