revamp

2024-10-05 08:49:09 +07:00
parent 8398ae80d3
commit d841163ba7
28 changed files with 527 additions and 461 deletions
--- a/src/routes/columns/_layout/notification.lazy.tsx
+++ b/src/routes/columns/_layout/notification.lazy.tsx
@@ -1,9 +1,9 @@
 import { commands } from "@/commands.gen";
 import { decodeZapInvoice, formatCreatedAt } from "@/commons";
-import { Note, Spinner, User } from "@/components";
+import { Note, RepostIcon, Spinner, User } from "@/components";
 import { LumeEvent, LumeWindow, useEvent } from "@/system";
 import { Kind, type NostrEvent } from "@/types";
-import { Info, Repeat } from "@phosphor-icons/react";
+import { Info } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useQuery } from "@tanstack/react-query";
@@ -99,110 +99,114 @@ function Screen() {
 	}

 	return (
-		<Tabs.Root defaultValue="replies" className="flex flex-col h-full">
-			<Tabs.List className="h-8 shrink-0 flex items-center">
-				<Tabs.Trigger
-					className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 data-[state=inactive]:opacity-50"
-					value="replies"
-				>
-					Replies
-				</Tabs.Trigger>
-				<Tabs.Trigger
-					className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 data-[state=inactive]:opacity-50"
-					value="reactions"
-				>
-					Reactions
-				</Tabs.Trigger>
-				<Tabs.Trigger
-					className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 data-[state=inactive]:opacity-50"
-					value="zaps"
-				>
-					Zaps
-				</Tabs.Trigger>
-			</Tabs.List>
-			<ScrollArea.Root
-				type={"scroll"}
-				scrollHideDelay={300}
-				className="min-h-0 flex-1 overflow-x-hidden"
+		<div className="px-3 h-full overflow-y-auto">
+			<Tabs.Root
+				defaultValue="replies"
+				className="flex flex-col 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"
 			>
-				<Tab value="replies">
-					{data.texts.map((event, index) => (
-						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-						<TextNote key={event.id + index} event={event} />
-					))}
-				</Tab>
-				<Tab value="reactions">
-					{[...data.reactions.entries()].map(([root, events]) => (
-						<div
-							key={root}
-							className="flex flex-col gap-1 p-3 mb-3 bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5"
-						>
-							<div className="flex flex-col flex-1 min-w-0 gap-2">
-								<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
-									<RootNote id={root} />
-								</div>
-								<div className="flex flex-wrap items-center gap-3">
-									{events.map((event) => (
-										<User.Provider key={event.id} pubkey={event.pubkey}>
-											<User.Root className="shrink-0 flex rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-												<User.Avatar className="flex-1 rounded-full size-6" />
-												<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-7">
-													{event.kind === Kind.Reaction ? (
-														event.content === "+" ? (
-															"👍"
-														) : (
-															event.content
-														)
-													) : (
-														<Repeat className="text-teal-400 size-4 dark:text-teal-600" />
-													)}
-												</div>
-											</User.Root>
-										</User.Provider>
-									))}
-								</div>
-							</div>
-						</div>
-					))}
-				</Tab>
-				<Tab value="zaps">
-					{[...data.zaps.entries()].map(([root, events]) => (
-						<div
-							key={root}
-							className="flex flex-col gap-1 p-3 mb-3 bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5"
-						>
-							<div className="flex flex-col flex-1 min-w-0 gap-2">
-								<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
-									<RootNote id={root} />
-								</div>
-								<div className="flex flex-wrap items-center gap-3">
-									{events.map((event) => (
-										<User.Provider
-											key={event.id}
-											pubkey={event.tags.find((tag) => tag[0] === "P")[1]}
-										>
-											<User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-												<User.Avatar className="rounded-full size-6" />
-												<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
-													₿ {decodeZapInvoice(event.tags).bitcoinFormatted}
-												</div>
-											</User.Root>
-										</User.Provider>
-									))}
-								</div>
-							</div>
-						</div>
-					))}
-				</Tab>
-				<ScrollArea.Scrollbar
-					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-					orientation="vertical"
+				<Tabs.List className="h-11 shrink-0 flex items-center">
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="replies"
+					>
+						Replies
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="reactions"
+					>
+						Reactions
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="zaps"
+					>
+						Zaps
+					</Tabs.Trigger>
+				</Tabs.List>
+				<ScrollArea.Root
+					type={"scroll"}
+					scrollHideDelay={300}
+					className="min-h-0 flex-1 overflow-x-hidden"
 				>
-					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-				</ScrollArea.Scrollbar>
-				<ScrollArea.Corner className="bg-transparent" />
-			</ScrollArea.Root>
-		</Tabs.Root>
+					<Tab value="replies">
+						{data.texts.map((event, index) => (
+							<TextNote key={event.id + index} event={event} />
+						))}
+					</Tab>
+					<Tab value="reactions">
+						{[...data.reactions.entries()].map(([root, events]) => (
+							<div
+								key={root}
+								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2">
+										<RootNote id={root} />
+									</div>
+									<div className="flex flex-wrap items-center gap-3">
+										{events.map((event) => (
+											<User.Provider key={event.id} pubkey={event.pubkey}>
+												<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
+													<User.Avatar className="flex-1 rounded-full size-6" />
+													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
+														{event.kind === Kind.Reaction ? (
+															event.content === "+" ? (
+																"👍"
+															) : (
+																event.content
+															)
+														) : (
+															<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
+														)}
+													</div>
+												</User.Root>
+											</User.Provider>
+										))}
+									</div>
+								</div>
+							</div>
+						))}
+					</Tab>
+					<Tab value="zaps">
+						{[...data.zaps.entries()].map(([root, events]) => (
+							<div
+								key={root}
+								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2">
+										<RootNote id={root} />
+									</div>
+									<div className="flex flex-wrap items-center gap-3">
+										{events.map((event) => (
+											<User.Provider
+												key={event.id}
+												pubkey={event.tags.find((tag) => tag[0] === "P")[1]}
+											>
+												<User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
+													<User.Avatar className="rounded-full size-6" />
+													<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
+														₿ {decodeZapInvoice(event.tags).bitcoinFormatted}
+													</div>
+												</User.Root>
+											</User.Provider>
+										))}
+									</div>
+								</div>
+							</div>
+						))}
+					</Tab>
+					<ScrollArea.Scrollbar
+						className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+						orientation="vertical"
+					>
+						<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+					</ScrollArea.Scrollbar>
+					<ScrollArea.Corner className="bg-transparent" />
+				</ScrollArea.Root>
+			</Tabs.Root>
+		</div>
 	);
 }

@@ -211,7 +215,7 @@ function Tab({ value, children }: { value: string; children: ReactNode[] }) {

 	return (
 		<Tabs.Content value={value} className="size-full">
-			<ScrollArea.Viewport ref={ref} className="h-full p-3">
+			<ScrollArea.Viewport ref={ref} className="h-full">
 				<Virtualizer scrollRef={ref}>{children}</Virtualizer>
 			</ScrollArea.Viewport>
 		</Tabs.Content>
@@ -267,10 +271,10 @@ function TextNote({ event }: { event: LumeEvent }) {
 		<button
 			type="button"
 			onClick={() => LumeWindow.openEvent(event)}
-			className="w-full rounded-xl hover:ring-1 ring-blue-500 mb-3"
+			className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
 		>
 			<Note.Provider event={event}>
-				<Note.Root className="flex flex-col p-3 rounded-xl bg-white dark:bg-black/20 shadow-primary dark:ring-1 dark:ring-white/5">
+				<Note.Root className="flex flex-col">
 					<User.Provider pubkey={event.pubkey}>
 						<User.Root className="inline-flex items-center gap-2">
 							<User.Avatar className="rounded-full size-9" />