small updates

src/app/space/components/modals/feed.tsx

@@ -1,6 +1,5 @@
 import { Combobox } from '@headlessui/react';
 import * as Dialog from '@radix-ui/react-dialog';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -8,18 +7,15 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 import { User } from '@app/auth/components/user';
 
-import { createWidget } from '@libs/storage';
-
 import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 
 import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
 import { ADD_FEEDBLOCK_SHORTCUT } from '@stores/shortcuts';
+import { useWidgets } from '@stores/widgets';
 
 import { useAccount } from '@utils/hooks/useAccount';
 
 export function FeedModal() {
-  const queryClient = useQueryClient();
-
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [selected, setSelected] = useState([]);
@@ -27,16 +23,9 @@ export function FeedModal() {
 
   const { status, account } = useAccount();
 
-  useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => setOpen(true));
+  const setWidget = useWidgets((state) => state.setWidget);
 
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createWidget(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
+  useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => setOpen(true));
 
   const {
     register,
@@ -55,7 +44,7 @@ export function FeedModal() {
     });
 
     // insert to database
-    block.mutate({
+    setWidget({
       kind: BLOCK_KINDS.feed,
       title: data.title,
       content: JSON.stringify(selected),
@@ -83,7 +72,7 @@ export function FeedModal() {
               <span className="text-sm leading-none text-white">F</span>
             </div>
           </div>
-          <h5 className="font-medium text-white/50">New feed block</h5>
+          <h5 className="font-medium text-white/50">Add newsfeed widget</h5>
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">

src/app/space/components/modals/hashtag.tsx

@@ -1,22 +1,20 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { createWidget } from '@libs/storage';
-
 import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 
 import { BLOCK_KINDS } from '@stores/constants';
 import { ADD_HASHTAGBLOCK_SHORTCUT } from '@stores/shortcuts';
+import { useWidgets } from '@stores/widgets';
 
 export function HashtagModal() {
-  const queryClient = useQueryClient();
-
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
 
+  const setWidget = useWidgets((state) => state.setWidget);
+
   useHotkeys(ADD_HASHTAGBLOCK_SHORTCUT, () => setOpen(false));
 
   const {
@@ -26,20 +24,11 @@ export function HashtagModal() {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createWidget(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
   const onSubmit = async (data: { hashtag: string }) => {
     setLoading(true);
 
     // mutate
-    block.mutate({
+    setWidget({
       kind: BLOCK_KINDS.hashtag,
       title: data.hashtag,
       content: data.hashtag.replace('#', ''),
@@ -67,7 +56,7 @@ export function HashtagModal() {
               <span className="text-sm leading-none text-white">T</span>
             </div>
           </div>
-          <h5 className="font-medium text-white/50">New hashtag block</h5>
+          <h5 className="font-medium text-white/50">Add hashtag widget</h5>
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">

src/app/space/components/modals/image.tsx

@@ -1,32 +1,25 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { createWidget } from '@libs/storage';
-
 import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
 import { ADD_IMAGEBLOCK_SHORTCUT } from '@stores/shortcuts';
+import { useWidgets } from '@stores/widgets';
 
-import { useNostr } from '@utils/hooks/useNostr';
 import { useImageUploader } from '@utils/hooks/useUploader';
 
 export function ImageModal() {
-  const queryClient = useQueryClient();
   const upload = useImageUploader();
-
-  const { publish } = useNostr();
+  const setWidget = useWidgets((state) => state.setWidget);
 
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [image, setImage] = useState('');
 
-  const tags = useRef(null);
-
   useHotkeys(ADD_IMAGEBLOCK_SHORTCUT, () => setOpen(false));
 
   const {
@@ -37,17 +30,8 @@ export function ImageModal() {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createWidget(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
   const uploadImage = async () => {
-    const image = await upload(null);
+    const image = await upload(null, true);
     if (image.url) {
       setImage(image.url);
     }
@@ -56,11 +40,8 @@ export function ImageModal() {
   const onSubmit = async (data: { kind: number; title: string; content: string }) => {
     setLoading(true);
 
-    // publish file metedata
-    await publish({ content: data.title, kind: 1063, tags: tags.current });
-
     // mutate
-    block.mutate({ kind: BLOCK_KINDS.image, title: data.title, content: data.content });
+    setWidget({ kind: BLOCK_KINDS.image, title: data.title, content: data.content });
 
     setLoading(false);
     // reset form
@@ -88,7 +69,7 @@ export function ImageModal() {
               <span className="text-sm leading-none text-white">I</span>
             </div>
           </div>
-          <h5 className="font-medium text-white/50">New image block</h5>
+          <h5 className="font-medium text-white/50">Add image widget</h5>
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">