feat(depot): add setting run depot at launch

src/app/depot/index.tsx

@@ -15,7 +15,8 @@ export function DepotScreen() {
       setLoading(true);
 
       await ark.launchDepot();
-      await delay(5000); // delay 5s to make sure depot is running
+      await ark.createSetting('depot', '1');
+      await delay(2000); // delay 2s to make sure depot is running
 
       // default depot url: ws://localhost:6090
       // #TODO: user can custom depot url

src/libs/ark/ark.ts

@@ -51,6 +51,7 @@ export class Ark {
     outbox: boolean;
     media: boolean;
     hashtag: boolean;
+    depot: boolean;
   };
 
   constructor({ storage, platform }: { storage: Database; platform: Platform }) {
@@ -62,6 +63,7 @@ export class Ark {
       outbox: false,
       media: true,
       hashtag: true,
+      depot: false,
     };
   }
 
@@ -162,6 +164,7 @@ export class Ark {
       if (item.key === 'media') this.settings.media = !!parseInt(item.value);
       if (item.key === 'hashtag') this.settings.hashtag = !!parseInt(item.value);
       if (item.key === 'autoupdate') this.settings.autoupdate = !!parseInt(item.value);
+      if (item.key === 'depot') this.settings.depot = !!parseInt(item.value);
     }
 
     const explicitRelayUrls = normalizeRelayUrlSet([

src/libs/ark/provider.tsx

@@ -8,6 +8,7 @@ import { PropsWithChildren, createContext, useContext, useEffect, useState } fro
 import { Ark } from '@libs/ark';
 import { LoaderIcon } from '@shared/icons';
 import { QUOTES } from '@utils/constants';
+import { delay } from '@utils/delay';
 
 const ArkContext = createContext<Ark>(undefined);
 
@@ -23,8 +24,8 @@ const ArkProvider = ({ children }: PropsWithChildren<object>) => {
       const _ark = new Ark({ storage: sqlite, platform: platformName });
       await _ark.init();
 
+      // check update
       if (_ark.settings.autoupdate) {
-        // check update
         const update = await check();
         // install new version
         if (update) {
@@ -35,6 +36,12 @@ const ArkProvider = ({ children }: PropsWithChildren<object>) => {
         }
       }
 
+      // start depot
+      if (_ark.settings.depot) {
+        await ark.launchDepot();
+        await delay(2000);
+      }
+
       setArk(_ark);
     } catch (e) {
       console.error(e);

src/main.jsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { Toaster } from 'sonner';
 import { ArkProvider } from '@libs/ark/provider';
@@ -19,7 +18,6 @@ const root = createRoot(container);
 
 root.render(
   <QueryClientProvider client={queryClient}>
-    <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-right" />
     <Toaster position="top-center" theme="system" closeButton />
     <ArkProvider>
       <App />

src/shared/widgets/index.ts

@@ -7,6 +7,7 @@ export * from './file';
 export * from './hashtag';
 export * from './thread';
 export * from './group';
+export * from './titleBar';
 export * from './nostrBand/trendingAccounts';
 export * from './nostrBand/trendingNotes';
 export * from './other/wrapper';
@@ -16,5 +17,4 @@ export * from './other/widgetList';
 export * from './other/addGroupFeeds';
 export * from './other/addHashtagFeeds';
 export * from './other/userProfile';
-export * from './titleBar';
 export * from './other/nostrBandUserProfile';

src/shared/widgets/newsfeed.tsx

@@ -1,6 +1,6 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { VList, VListHandle } from 'virtua';
 import { useArk } from '@libs/ark';
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
@@ -15,6 +15,8 @@ import { FETCH_LIMIT } from '@utils/constants';
 
 export function NewsfeedWidget() {
   const ark = useArk();
+  const ref = useRef<VListHandle>();
+
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed'],
@@ -48,31 +50,27 @@ export function NewsfeedWidget() {
       refetchOnWindowFocus: false,
     });
 
-  const ref = useRef<VListHandle>();
   const allEvents = useMemo(
     () => (data ? data.pages.flatMap((page) => page) : []),
     [data]
   );
 
-  const renderItem = useCallback(
-    (event: NDKEvent) => {
-      switch (event.kind) {
-        case NDKKind.Text:
-          return <MemoizedTextNote key={event.id} event={event} />;
-        case NDKKind.Repost:
-          return <MemoizedRepost key={event.id} event={event} />;
-        default:
-          return <UnknownNote key={event.id} event={event} />;
-      }
-    },
-    [data]
-  );
+  const renderItem = (event: NDKEvent) => {
+    switch (event.kind) {
+      case NDKKind.Text:
+        return <MemoizedTextNote key={event.id} event={event} />;
+      case NDKKind.Repost:
+        return <MemoizedRepost key={event.id} event={event} />;
+      default:
+        return <UnknownNote key={event.id} event={event} />;
+    }
+  };
 
   return (
     <WidgetWrapper>
       <TitleBar id="9999" isLive />
       <LiveUpdater status={status} />
-      <VList className="flex-1" ref={ref} overscan={2}>
+      <VList ref={ref} overscan={2} className="flex-1">
         {status === 'pending' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
@@ -91,7 +89,7 @@ export function NewsfeedWidget() {
               className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="h-4 w-4 animate-spin" />
+                <LoaderIcon className="h-5 w-5 animate-spin" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="h-5 w-5" />

src/shared/widgets/other/liveUpdater.tsx

@@ -6,9 +6,10 @@ import { ChevronUpIcon } from '@shared/icons';
 
 export function LiveUpdater({ status }: { status: QueryStatus }) {
   const ark = useArk();
-  const [events, setEvents] = useState<NDKEvent[]>([]);
   const queryClient = useQueryClient();
 
+  const [events, setEvents] = useState<NDKEvent[]>([]);
+
   const update = async () => {
     await queryClient.setQueryData(
       ['newsfeed'],