feat: improve home screen

apps/desktop2/src/routes/$account/home.tsx

@@ -4,7 +4,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/$account/home/local")({
+export const Route = createFileRoute("/$account/home")({
   component: Screen,
 });
 
@@ -18,7 +18,7 @@ function Screen() {
   };
 
   return (
-    <div>
+    <div className="flex flex-col">
       <div className="mx-auto mb-4 flex h-16 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
         <div className="flex items-center gap-2">
           <Link to="/$account/home/local">

apps/desktop2/src/routes/$account/home/local.lazy.tsx

@@ -64,10 +64,10 @@ function Screen() {
           </div>
         ) : !data.length ? (
           <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-              <InfoIcon className="size-5" />
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
+              <InfoIcon className="size-6" />
               <p>
-                Empty newsfeed. Or you can go to{" "}
+                Empty newsfeed. Or you view the{" "}
                 <Link
                   to="/$account/home/global"
                   className="text-blue-500 hover:text-blue-600"

apps/desktop2/src/routes/users/-components/eventList.tsx

@@ -1,9 +1,8 @@
 import { TextNote } from "@/components/text";
 import { RepostNote } from "@/components/repost";
 import { useArk } from "@lume/ark";
-import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, InfoIcon, LoaderIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
-import { EmptyFeed } from "@lume/ui";
 import { FETCH_LIMIT } from "@lume/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
@@ -43,7 +42,10 @@ export function EventList({ id }: { id: string }) {
           <LoaderIcon className="size-5 animate-spin" />
         </div>
       ) : !data.length ? (
-        <EmptyFeed />
+        <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
+          <InfoIcon className="size-6" />
+          <p>Empty newsfeed.</p>
+        </div>
       ) : (
         data.map((item) => renderItem(item))
       )}