refactor all widgets

src/shared/notes/mentions/hashtag.tsx

@@ -1,24 +1,15 @@
-import { useStorage } from '@libs/storage/provider';
+import { WidgetKinds } from '@stores/constants';
 
-import { WidgetKinds, useWidgets } from '@stores/widgets';
+import { useWidget } from '@utils/hooks/useWidget';
 
 export function Hashtag({ tag }: { tag: string }) {
-  const { db } = useStorage();
-  const setWidget = useWidgets((state) => state.setWidget);
+  const { addWidget } = useWidget();
 
   return (
-    <span
-      role="button"
-      tabIndex={0}
+    <button
+      type="button"
       onClick={() =>
-        setWidget(db, {
-          kind: WidgetKinds.global.hashtag,
-          title: tag,
-          content: tag.replace('#', ''),
-        })
-      }
-      onKeyDown={() =>
-        setWidget(db, {
+        addWidget.mutate({
           kind: WidgetKinds.global.hashtag,
           title: tag,
           content: tag.replace('#', ''),
@@ -27,6 +18,6 @@ export function Hashtag({ tag }: { tag: string }) {
       className="cursor-default break-all text-blue-500 hover:text-blue-600"
     >
       {tag}
-    </span>
+    </button>
   );
 }

src/shared/notes/mentions/invoice.tsx

@@ -3,8 +3,8 @@ import { memo } from 'react';
 
 export const Invoice = memo(function Invoice({ invoice }: { invoice: string }) {
   return (
-    <span className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
+    <div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
       <QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
-    </span>
+    </div>
   );
 });

src/shared/notes/mentions/note.tsx

@@ -2,8 +2,6 @@ import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { nip19 } from 'nostr-tools';
 import { memo } from 'react';
 
-import { useStorage } from '@libs/storage/provider';
-
 import {
   ArticleNote,
   FileNote,
@@ -14,20 +12,23 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { WidgetKinds, useWidgets } from '@stores/widgets';
+import { WidgetKinds } from '@stores/constants';
 
 import { useEvent } from '@utils/hooks/useEvent';
+import { useWidget } from '@utils/hooks/useWidget';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
-  const { db } = useStorage();
   const { status, data } = useEvent(id);
-
-  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();
     }
@@ -74,15 +75,13 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   }
 
   return (
-    <div
+    <button
+      type="button"
       onClick={(e) => openThread(e, id)}
-      onKeyDown={(e) => openThread(e, id)}
-      role="button"
-      tabIndex={0}
       className="mt-3 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" />
-      <div className="mt-1">{renderKind(data)}</div>
-    </div>
+      <div className="mt-1 text-left">{renderKind(data)}</div>
+    </button>
   );
 });

src/shared/notes/mentions/user.tsx

@@ -1,30 +1,26 @@
 import { memo } from 'react';
 
-import { useStorage } from '@libs/storage/provider';
-
-import { WidgetKinds, useWidgets } from '@stores/widgets';
+import { WidgetKinds } from '@stores/constants';
 
 import { useProfile } from '@utils/hooks/useProfile';
+import { useWidget } from '@utils/hooks/useWidget';
 
 export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: string }) {
-  const { db } = useStorage();
   const { user } = useProfile(pubkey);
-
-  const setWidget = useWidgets((state) => state.setWidget);
+  const { addWidget } = useWidget();
 
   return (
-    <span
-      role="button"
-      tabIndex={0}
+    <button
+      type="button"
       onClick={() =>
-        setWidget(db, {
+        addWidget.mutate({
           kind: WidgetKinds.local.user,
           title: user?.name || user?.display_name || user?.displayName,
           content: pubkey,
         })
       }
       onKeyDown={() =>
-        setWidget(db, {
+        addWidget.mutate({
           kind: WidgetKinds.local.user,
           title: user?.name || user?.display_name || user?.displayName,
           content: pubkey,
@@ -38,6 +34,6 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
           user?.displayName ||
           user?.username ||
           'unknown')}
-    </span>
+    </button>
   );
 });