feat: improve home screen

apps/desktop2/src/app.css

@@ -24,7 +24,7 @@ input::-ms-clear {
 }
 
 media-controller {
-  @apply w-full;
+  @apply w-full overflow-hidden rounded-xl;
 }
 
 @layer utilities {

apps/desktop2/src/app.tsx

@@ -12,6 +12,7 @@ import { locale, platform } from "@tauri-apps/plugin-os";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { routeTree } from "./router.gen"; // auto generated file
+import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -72,7 +73,16 @@ if (!rootElement.innerHTML) {
         persistOptions={{ persister }}
       >
         <StrictMode>
-          <Toaster position="top-center" richColors />
+          <Toaster
+            position="bottom-right"
+            icons={{
+              success: <CheckCircleIcon className="size-5" />,
+              info: <InfoCircleIcon className="size-5" />,
+              error: <CancelCircleIcon className="size-5" />,
+            }}
+            closeButton
+            theme="system"
+          />
           <App />
         </StrictMode>
       </PersistQueryClientProvider>

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))
       )}