polish

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

@@ -34,6 +34,7 @@ export function FeedBlock({ params }: { params: Block }) {
   });
 
   const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
 
   useEffect(() => {
     const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
@@ -113,12 +114,9 @@ export function FeedBlock({ params }: { params: Block }) {
   );
 
   return (
-    <div
-      ref={parentRef}
-      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
-    >
+    <div className="relative w-[400px] shrink-0 bg-white/10">
       <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-white/10 px-3 py-3">
@@ -139,7 +137,7 @@ export function FeedBlock({ params }: { params: Block }) {
           <div
             className="relative w-full"
             style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
+              height: `${totalSize}px`,
             }}
           >
             <div

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

@@ -16,7 +16,7 @@ export function HashtagBlock({ params }: { params: Block }) {
     const events = (await fetcher.fetchAllEvents(
       relayUrls,
       { kinds: [1], '#t': [params.content] },
-      { since: nHoursAgo(48) }
+      { since: nHoursAgo(24) }
     )) as unknown as LumeEvent[];
     return events;
   });
@@ -29,17 +29,15 @@ export function HashtagBlock({ params }: { params: Block }) {
   });
 
   const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
 
   return (
-    <div
-      ref={parentRef}
-      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
-    >
-      <TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
-      <div className="h-full">
+    <div className="relative w-[400px] shrink-0 bg-white/10">
+      <TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 pt-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>
@@ -47,8 +45,8 @@ export function HashtagBlock({ params }: { params: Block }) {
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-white/10 px-3 py-6">
               <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm text-white">
-                  No new posts about this hashtag in 48 hours ago
+                <p className="text-center text-sm font-medium text-white">
+                  No new posts about this hashtag in 24 hours ago
                 </p>
               </div>
             </div>
@@ -57,7 +55,7 @@ export function HashtagBlock({ params }: { params: Block }) {
           <div
             className="relative w-full"
             style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
+              height: `${totalSize}px`,
             }}
           >
             <div

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 { useBlock } from '@utils/hooks/useBlock';
 import { Block } from '@utils/types';
 
 export function ImageBlock({ params }: { params: Block }) {
-  const { remove } = useBlock();
+  const removeBlock = useBlocks((state) => state.removeBlock);
 
   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={() => remove.mutate(params.id)}
+              onClick={() => removeBlock(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/network.tsx

@@ -126,12 +126,9 @@ export function NetworkBlock() {
   );
 
   return (
-    <div
-      ref={parentRef}
-      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
-    >
+    <div className="relative w-[400px] shrink-0 bg-white/10">
       <TitleBar title="Network" />
-      <div className="h-full">
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-white/10 px-3 py-3">

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

@@ -46,7 +46,7 @@ export function ThreadBlock({ params }: { params: Block }) {
           </div>
         )}
         <div className="px-3">
-          <NoteReplyForm id={params.content} pubkey={account.pubkey} />
+          {account && <NoteReplyForm id={params.content} pubkey={account.pubkey} />}
           <RepliesList id={params.content} />
         </div>
       </div>

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

@@ -35,12 +35,9 @@ export function UserBlock({ params }: { params: Block }) {
   const itemsVirtualizer = rowVirtualizer.getVirtualItems();
 
   return (
-    <div
-      ref={parentRef}
-      className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
-    >
+    <div className="relative w-[400px] shrink-0 bg-white/10">
       <TitleBar id={params.id} title={params.title} />
-      <div className="h-full">
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         <div className="px-3 pt-1.5">
           <UserProfile pubkey={params.content} />
         </div>

src/app/space/index.tsx

@@ -1,5 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { FeedBlock } from '@app/space/components/blocks/feed';
 import { HashtagBlock } from '@app/space/components/blocks/hashtag';
@@ -11,25 +10,14 @@ import { FeedModal } from '@app/space/components/modals/feed';
 import { HashtagModal } from '@app/space/components/modals/hashtag';
 import { ImageModal } from '@app/space/components/modals/image';
 
-import { getBlocks } from '@libs/storage';
-
 import { LoaderIcon } from '@shared/icons';
 
+import { useBlocks } from '@stores/blocks';
+
 import { Block } from '@utils/types';
 
 export function SpaceScreen() {
-  const { status, data: blocks } = useQuery(
-    ['blocks'],
-    async () => {
-      return await getBlocks();
-    },
-    {
-      staleTime: Infinity,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-    }
-  );
+  const [blocks, fetchBlocks] = useBlocks((state) => [state.blocks, state.fetchBlocks]);
 
   const renderBlock = useCallback(
     (block: Block) => {
@@ -51,10 +39,14 @@ export function SpaceScreen() {
     [blocks]
   );
 
+  useEffect(() => {
+    fetchBlocks();
+  }, [fetchBlocks]);
+
   return (
     <div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
       <NetworkBlock />
-      {status === 'loading' ? (
+      {!blocks ? (
         <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" />