feat: add empty state and polish trending column

apps/desktop2/src/components/repost.tsx

@@ -13,7 +13,7 @@ export function RepostNote({
   event: Event;
   className?: string;
 }) {
-  const { ark } = useRouteContext({ strict: false });
+  const { ark, settings } = useRouteContext({ strict: false });
   const { t } = useTranslation();
   const {
     isLoading,
@@ -104,7 +104,7 @@ export function RepostNote({
                 <div className="-ml-1 inline-flex items-center gap-4">
                   <Note.Reply />
                   <Note.Repost />
-                  <Note.Zap />
+                  {settings.zap ? <Note.Zap /> : null}
                 </div>
                 <Note.Menu />
               </div>

apps/desktop2/src/components/suggest.tsx

@@ -1,56 +0,0 @@
-import { LoaderIcon } from "@lume/icons";
-import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import { User } from "@lume/ui";
-
-export function Suggest() {
-  const { t } = useTranslation();
-  const { isLoading, isError, data } = useQuery({
-    queryKey: ["trending-users"],
-    queryFn: async ({ signal }: { signal: AbortSignal }) => {
-      const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
-        signal,
-      });
-      if (!res.ok) {
-        throw new Error("Failed to fetch trending users from nostr.band API.");
-      }
-      return res.json();
-    },
-  });
-
-  return (
-    <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900">
-      <div className="h-10 shrink-0 text-lg font-semibold">
-        Suggested Follows
-      </div>
-      {isLoading ? (
-        <div className="flex h-44 w-full items-center justify-center">
-          <LoaderIcon className="size-4 animate-spin" />
-        </div>
-      ) : isError ? (
-        <div className="flex h-44 w-full items-center justify-center">
-          {t("suggestion.error")}
-        </div>
-      ) : (
-        data?.profiles.map((item: { pubkey: string }) => (
-          <div key={item.pubkey} className="h-max w-full overflow-hidden py-5">
-            <User.Provider pubkey={item.pubkey}>
-              <User.Root>
-                <div className="flex h-full w-full flex-col gap-2">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2.5">
-                      <User.Avatar className="size-10 shrink-0 rounded-full" />
-                      <User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
-                    </div>
-                    <User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800" />
-                  </div>
-                  <User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
-                </div>
-              </User.Root>
-            </User.Provider>
-          </div>
-        ))
-      )}
-    </div>
-  );
-}

apps/desktop2/src/components/text.tsx

@@ -1,6 +1,7 @@
 import { Event } from "@lume/types";
 import { Note } from "@lume/ui";
 import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
 
 export function TextNote({
   event,
@@ -9,6 +10,8 @@ export function TextNote({
   event: Event;
   className?: string;
 }) {
+  const { settings } = useRouteContext({ strict: false });
+
   return (
     <Note.Provider event={event}>
       <Note.Root
@@ -27,7 +30,7 @@ export function TextNote({
               <div className="-ml-1 inline-flex items-center gap-4">
                 <Note.Reply />
                 <Note.Repost />
-                <Note.Zap />
+                {settings.zap ? <Note.Zap /> : null}
               </div>
               <Note.Menu />
             </div>