feat: use negentropy (#182)

* feat: use negentropy

* chore: polish

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 />