revamp

src/routes/columns/_layout/newsfeed.lazy.tsx

@@ -3,7 +3,7 @@ import { toLumeEvents } from "@/commons";
 import { Quote, RepostNote, Spinner, TextNote } from "@/components";
 import { LumeEvent } from "@/system";
 import { Kind, type Meta } from "@/types";
-import { ArrowCircleRight, ArrowUp } from "@phosphor-icons/react";
+import { ArrowDown, ArrowUp } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { type InfiniteData, useInfiniteQuery } from "@tanstack/react-query";
 import {
@@ -68,12 +68,30 @@ export function Screen() {
 			if (!event) return;
 			switch (event.kind) {
 				case Kind.Repost:
-					return <RepostNote key={event.id} event={event} className="mb-3" />;
+					return (
+						<RepostNote
+							key={event.id}
+							event={event}
+							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+						/>
+					);
 				default: {
 					if (event.isQuote) {
-						return <Quote key={event.id} event={event} className="mb-3" />;
+						return (
+							<Quote
+								key={event.id}
+								event={event}
+								className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+							/>
+						);
 					} else {
-						return <TextNote key={event.id} event={event} className="mb-3" />;
+						return (
+							<TextNote
+								key={event.id}
+								event={event}
+								className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+							/>
+						);
 					}
 				}
 			}
@@ -95,6 +113,7 @@ export function Screen() {
 		return (
 			<Navigate
 				to="/columns/create-newsfeed/users"
+				// @ts-ignore, tanstack router bug.
 				search={{ label, account, redirect: location.href }}
 			/>
 		);
@@ -104,10 +123,13 @@ export function Screen() {
 		<ScrollArea.Root
 			type={"scroll"}
 			scrollHideDelay={300}
-			className="overflow-hidden size-full"
+			className="overflow-hidden size-full px-3"
 		>
-			<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
-				<Listerner />
+			<ScrollArea.Viewport
+				ref={ref}
+				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+			>
+				<Listener />
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
@@ -119,11 +141,11 @@ export function Screen() {
 					) : null}
 					{isLoading ? (
 						<div className="flex items-center justify-center w-full h-16 gap-2">
-							<Spinner className="size-5" />
+							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
 					) : !data.length ? (
-						<div className="mb-3 flex items-center justify-center h-20 text-sm rounded-xl bg-black/5 dark:bg-white/5">
+						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>
 					) : (
@@ -135,13 +157,13 @@ export function Screen() {
 								type="button"
 								onClick={() => fetchNextPage()}
 								disabled={isFetchingNextPage || isLoading}
-								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+								className="inline-flex items-center justify-center w-full gap-2 px-3 text-sm font-medium text-blue-500 h-11 focus:outline-none"
 							>
 								{isFetchingNextPage ? (
-									<Spinner className="size-5" />
+									<Spinner className="size-4" />
 								) : (
 									<>
-										<ArrowCircleRight className="size-5" />
+										<ArrowDown className="size-4" />
 										Load more
 									</>
 								)}
@@ -161,7 +183,7 @@ export function Screen() {
 	);
 }
 
-const Listerner = memo(function Listerner() {
+const Listener = memo(function Listerner() {
 	const { queryClient } = Route.useRouteContext();
 	const { label, account } = Route.useSearch();