feat: use negentropy (#182)

* feat: use negentropy

* chore: polish

apps/desktop2/src/app.tsx

@@ -12,21 +12,13 @@ import { routeTree } from "./router.gen"; // auto generated file
 import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
 import { Ark } from "@lume/ark";
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours
-      staleTime: 1000 * 60 * 5, // 5 minutes
-    },
-  },
-});
+const ark = new Ark();
+const queryClient = new QueryClient();
 
 const persister = createSyncStoragePersister({
   storage: window.localStorage,
 });
 
-const ark = new Ark();
-
 // Set up a Router instance
 const router = createRouter({
   routeTree,

apps/desktop2/src/components/col.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
-import { Spinner } from "@lume/ui";
-import { cn } from "@lume/utils";
 
 export function Col({
   column,
@@ -81,20 +79,5 @@ export function Col({
     };
   }, [webview]);
 
-  return (
-    <div ref={container} className="h-full w-[440px] shrink-0 p-2">
-      {column.label !== "open" ? (
-        <div
-          className={cn(
-            "w-full h-full flex items-center justify-center rounded-xl flex-col",
-            !webview ? "bg-black/5 dark:bg-white/5 backdrop-blur-lg" : "",
-          )}
-        >
-          <button type="button" className="size-5" disabled>
-            <Spinner className="size-5" />
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
+  return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
 }

apps/desktop2/src/routes/__root.tsx

@@ -2,7 +2,13 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
 import { type Platform } from "@tauri-apps/plugin-os";
-import type { Account, Interests, Metadata, Settings } from "@lume/types";
+import type {
+  Account,
+  Contact,
+  Interests,
+  Metadata,
+  Settings,
+} from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { type Descendant } from "slate";
 
@@ -22,6 +28,7 @@ interface RouterContext {
   accounts?: Account[];
   initialValue?: EditorElement[];
   profile?: Metadata;
+  contacts?: Contact[];
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({

apps/desktop2/src/routes/editor/index.tsx

@@ -1,4 +1,4 @@
-import { ComposeFilledIcon, NsfwIcon, TrashIcon } from "@lume/icons";
+import { ComposeFilledIcon, TrashIcon } from "@lume/icons";
 import {
   Portal,
   cn,
@@ -33,7 +33,6 @@ import {
 import { Contact } from "@lume/types";
 import { Spinner, User } from "@lume/ui";
 import { nip19 } from "nostr-tools";
-import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
 import { NsfwToggle } from "./-components/nsfw";
 
@@ -42,14 +41,6 @@ type EditorSearch = {
   quote: boolean;
 };
 
-const contactQueryOptions = queryOptions({
-  queryKey: ["contacts"],
-  queryFn: () => invoke("get_contact_metadata"),
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-  refetchOnWindowFocus: false,
-});
-
 export const Route = createFileRoute("/editor/")({
   validateSearch: (search: Record<string, string>): EditorSearch => {
     return {
@@ -58,7 +49,10 @@ export const Route = createFileRoute("/editor/")({
     };
   },
   beforeLoad: async ({ search }) => {
+    const contacts: Contact[] = await invoke("get_contact_metadata");
+
     return {
+      contacts,
       initialValue: search.quote
         ? [
             {
@@ -83,16 +77,14 @@ export const Route = createFileRoute("/editor/")({
           ],
     };
   },
-  loader: ({ context }) => {
-    context.queryClient.ensureQueryData(contactQueryOptions);
-  },
   component: Screen,
   pendingComponent: Pending,
 });
 
 function Screen() {
+  const ref = useRef<HTMLDivElement | null>();
   const { reply_to, quote } = Route.useSearch();
-  const { ark, initialValue } = Route.useRouteContext();
+  const { ark, initialValue, contacts } = Route.useRouteContext();
 
   const [t] = useTranslation();
   const [editorValue, setEditorValue] = useState(initialValue);
@@ -105,9 +97,6 @@ function Screen() {
     withMentions(withNostrEvent(withImages(withReact(createEditor())))),
   );
 
-  const ref = useRef<HTMLDivElement | null>();
-  const contacts = useSuspenseQuery(contactQueryOptions).data as Contact[];
-
   const filters = contacts
     ?.filter((c) =>
       c?.profile.name?.toLowerCase().startsWith(search.toLowerCase()),

apps/desktop2/src/routes/newsfeed.tsx

@@ -27,21 +27,26 @@ export const Route = createFileRoute("/newsfeed")({
 export function Screen() {
   const { label, name, account } = Route.useSearch();
   const { ark } = Route.useRouteContext();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: [label, account],
-      initialPageParam: 0,
-      queryFn: async ({ pageParam }: { pageParam: number }) => {
-        const events = await ark.get_events(20, pageParam);
-        return events;
-      },
-      getNextPageParam: (lastPage) => {
-        const lastEvent = lastPage?.at(-1);
-        return lastEvent ? lastEvent.created_at - 1 : null;
-      },
-      select: (data) => data?.pages.flatMap((page) => page),
-      refetchOnWindowFocus: false,
-    });
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: [label, account],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      const events = await ark.get_events(20, pageParam);
+      return events;
+    },
+    getNextPageParam: (lastPage) => {
+      const lastEvent = lastPage?.at(-1);
+      return lastEvent ? lastEvent.created_at - 1 : null;
+    },
+    select: (data) => data?.pages.flatMap((page) => page),
+  });
 
   const renderItem = (event: Event) => {
     if (!event) return;
@@ -57,9 +62,18 @@ export function Screen() {
     <Column.Root>
       <Column.Header label={label} name={name} />
       <Column.Content>
+        {isFetching && !isLoading && !isFetchingNextPage ? (
+          <div className="w-full h-16 flex items-center justify-center border-b border-neutral-100 dark:border-neutral-900">
+            <div className="flex items-center justify-center gap-2">
+              <Spinner className="size-5" />
+              <span className="text-sm font-medium">Fetching new notes...</span>
+            </div>
+          </div>
+        ) : null}
         {isLoading ? (
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+          <div className="flex h-16 w-full items-center justify-center gap-2">
             <Spinner className="size-5" />
+            <span className="text-sm font-medium">Loading...</span>
           </div>
         ) : !data.length ? (
           <Empty />