rename blocks to widgets

src/app/auth/onboarding/step-2.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
-import { createBlock } from '@libs/storage';
+import { createWidget } from '@libs/storage';
 
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 
@@ -50,7 +50,7 @@ export function OnboardStep2Screen() {
       setLoading(true);
 
       for (const tag of tags) {
-        await createBlock(BLOCK_KINDS.hashtag, tag, tag.replace('#', ''));
+        await createWidget(BLOCK_KINDS.hashtag, tag, tag.replace('#', ''));
       }
 
       setTimeout(() => navigate('/auth/onboarding/step-3', { replace: true }), 1000);

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

@@ -9,11 +9,11 @@ import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
-import { Block, LumeEvent } from '@utils/types';
+import { LumeEvent, Widget } from '@utils/types';
 
 const ITEM_PER_PAGE = 10;
 
-export function FeedBlock({ params }: { params: Block }) {
+export function FeedBlock({ params }: { params: Widget }) {
   const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed', params.content],

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

@@ -8,9 +8,9 @@ import { NoteKind_1, NoteSkeleton } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 
 import { nHoursAgo } from '@utils/date';
-import { Block, LumeEvent } from '@utils/types';
+import { LumeEvent, Widget } from '@utils/types';
 
-export function HashtagBlock({ params }: { params: Block }) {
+export function HashtagBlock({ params }: { params: Widget }) {
   const { relayUrls, fetcher } = useNDK();
   const { status, data } = useQuery(['hashtag', params.content], async () => {
     const events = (await fetcher.fetchAllEvents(

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

@@ -1,13 +1,13 @@
 import { CancelIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
-import { useBlocks } from '@stores/blocks';
 import { DEFAULT_AVATAR } from '@stores/constants';
+import { useWidgets } from '@stores/widgets';
 
-import { Block } from '@utils/types';
+import { Widget } from '@utils/types';
 
-export function ImageBlock({ params }: { params: Block }) {
-  const removeBlock = useBlocks((state) => state.removeBlock);
+export function ImageBlock({ params }: { params: Widget }) {
+  const remove = useWidgets((state) => state.removeWidget);
 
   return (
     <div className="flex h-full w-[400px] shrink-0 flex-col justify-between">
@@ -17,7 +17,7 @@ export function ImageBlock({ params }: { params: Block }) {
             <h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
             <button
               type="button"
-              onClick={() => removeBlock(params.id)}
+              onClick={() => remove(params.id)}
               className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
             >
               <CancelIcon width={16} height={16} className="text-white" />

src/app/space/components/blocks/thread.tsx

@@ -12,9 +12,9 @@ import { TitleBar } from '@shared/titleBar';
 
 import { useAccount } from '@utils/hooks/useAccount';
 import { useEvent } from '@utils/hooks/useEvent';
-import { Block } from '@utils/types';
+import { Widget } from '@utils/types';
 
-export function ThreadBlock({ params }: { params: Block }) {
+export function ThreadBlock({ params }: { params: Widget }) {
   const { status, data } = useEvent(params.content);
   const { account } = useAccount();
 

src/app/space/components/blocks/user.tsx

@@ -9,9 +9,9 @@ import { TitleBar } from '@shared/titleBar';
 import { UserProfile } from '@shared/userProfile';
 
 import { nHoursAgo } from '@utils/date';
-import { Block, LumeEvent } from '@utils/types';
+import { LumeEvent, Widget } from '@utils/types';
 
-export function UserBlock({ params }: { params: Block }) {
+export function UserBlock({ params }: { params: Widget }) {
   const parentRef = useRef<HTMLDivElement>(null);
 
   const { fetcher, relayUrls } = useNDK();

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

@@ -8,7 +8,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 import { User } from '@app/auth/components/user';
 
-import { createBlock } from '@libs/storage';
+import { createWidget } from '@libs/storage';
 
 import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 
@@ -31,7 +31,7 @@ export function FeedModal() {
 
   const block = useMutation({
     mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
+      return createWidget(data.kind, data.title, data.content);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['blocks'] });

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { createBlock } from '@libs/storage';
+import { createWidget } from '@libs/storage';
 
 import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 
@@ -28,7 +28,7 @@ export function HashtagModal() {
 
   const block = useMutation({
     mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
+      return createWidget(data.kind, data.title, data.content);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['blocks'] });

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

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { createBlock } from '@libs/storage';
+import { createWidget } from '@libs/storage';
 
 import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 import { Image } from '@shared/image';
@@ -39,7 +39,7 @@ export function ImageModal() {
 
   const block = useMutation({
     mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
+      return createWidget(data.kind, data.title, data.content);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['blocks'] });

src/app/space/index.tsx

@@ -12,48 +12,51 @@ import { ImageModal } from '@app/space/components/modals/image';
 
 import { LoaderIcon } from '@shared/icons';
 
-import { useBlocks } from '@stores/blocks';
+import { useWidgets } from '@stores/widgets';
 
-import { Block } from '@utils/types';
+import { Widget } from '@utils/types';
 
 export function SpaceScreen() {
-  const [blocks, fetchBlocks] = useBlocks((state) => [state.blocks, state.fetchBlocks]);
+  const [widgets, fetchWidgets] = useWidgets((state) => [
+    state.widgets,
+    state.fetchWidgets,
+  ]);
 
-  const renderBlock = useCallback(
-    (block: Block) => {
-      switch (block.kind) {
+  const renderItem = useCallback(
+    (widget: Widget) => {
+      switch (widget.kind) {
         case 0:
-          return <ImageBlock key={block.id} params={block} />;
+          return <ImageBlock key={widget.id} params={widget} />;
         case 1:
-          return <FeedBlock key={block.id} params={block} />;
+          return <FeedBlock key={widget.id} params={widget} />;
         case 2:
-          return <ThreadBlock key={block.id} params={block} />;
+          return <ThreadBlock key={widget.id} params={widget} />;
         case 3:
-          return <HashtagBlock key={block.id} params={block} />;
+          return <HashtagBlock key={widget.id} params={widget} />;
         case 5:
-          return <UserBlock key={block.id} params={block} />;
+          return <UserBlock key={widget.id} params={widget} />;
         default:
           break;
       }
     },
-    [blocks]
+    [widgets]
   );
 
   useEffect(() => {
-    fetchBlocks();
-  }, [fetchBlocks]);
+    fetchWidgets();
+  }, [fetchWidgets]);
 
   return (
     <div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
       <NetworkBlock />
-      {!blocks ? (
+      {!widgets ? (
         <div className="flex w-[350px] shrink-0 flex-col">
           <div className="flex w-full flex-1 items-center justify-center p-3">
             <LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
           </div>
         </div>
       ) : (
-        blocks.map((block) => renderBlock(block))
+        widgets.map((widget) => renderItem(widget))
       )}
       <div className="flex w-[350px] shrink-0 flex-col">
         <div className="inline-flex h-full w-full flex-col items-center justify-center gap-1">