revamp

package.json

@@ -37,7 +37,6 @@
 		"@tauri-apps/plugin-upload": "^2.0.0",
 		"@tauri-apps/plugin-window-state": "^2.0.0",
 		"bitcoin-units": "^1.0.0",
-		"boring-avatars": "^1.11.2",
 		"dayjs": "^1.11.13",
 		"embla-carousel-react": "^8.3.0",
 		"i18next": "^23.15.1",

src-tauri/src/commands/event.rs

@@ -290,13 +290,7 @@ pub async fn get_group_events(
 
     let authors: Vec<PublicKey> = public_keys
         .iter()
-        .map(|p| {
-            if p.starts_with("npub1") {
-                PublicKey::from_bech32(p).map_err(|err| err.to_string())
-            } else {
-                PublicKey::from_hex(p).map_err(|err| err.to_string())
-            }
-        })
+        .map(|p| PublicKey::from_str(p).map_err(|err| err.to_string()))
         .collect::<Result<Vec<_>, _>>()?;
 
     let filter = Filter::new()
@@ -340,6 +334,7 @@ pub async fn get_global_events(
     state: State<'_, Nostr>,
 ) -> Result<Vec<RichEvent>, String> {
     let client = &state.client;
+
     let as_of = match until {
         Some(until) => Timestamp::from_str(until).map_err(|err| err.to_string())?,
         None => Timestamp::now(),

src/components/column.tsx

@@ -1,6 +1,6 @@
 import { commands } from "@/commands.gen";
 import type { LumeColumn } from "@/types";
-import { Check, DotsThree } from "@phosphor-icons/react";
+import { CaretDown, Check } from "@phosphor-icons/react";
 import { useParams } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
@@ -86,10 +86,10 @@ export const Column = memo(function Column({ column }: { column: LumeColumn }) {
 	}, [params.account]);
 
 	return (
-		<div className="h-full w-[440px] shrink-0 p-2">
-			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/20">
+		<div className="h-full w-[440px] shrink-0 border-r border-black/5 dark:border-white/5">
+			<div className="flex flex-col gap-px size-full">
 				<Header label={column.label} name={column.name} />
-				<div ref={container} className="flex-1 w-full h-full">
+				<div ref={container} className="flex-1 size-full">
 					{!isCreated ? (
 						<div className="size-full flex items-center justify-center">
 							<Spinner />
@@ -102,7 +102,7 @@ export const Column = memo(function Column({ column }: { column: LumeColumn }) {
 });
 
 function Header({ label, name }: { label: string; name: string }) {
-	const [title, setTitle] = useState(name);
+	const [title, setTitle] = useState("");
 	const [isChanged, setIsChanged] = useState(false);
 
 	const saveNewTitle = async () => {
@@ -173,39 +173,38 @@ function Header({ label, name }: { label: string; name: string }) {
 	}, []);
 
 	useEffect(() => {
-		if (title.length !== name.length) setIsChanged(true);
-	}, [title]);
+		if (title.length > 0) setIsChanged(true);
+	}, [title.length]);
 
 	return (
-		<div className="flex items-center justify-between w-full px-1 h-9 shrink-0">
-			<div className="size-7" />
+		<div className="group flex items-center justify-center gap-2 w-full h-9 shrink-0">
 			<div className="flex items-center justify-center shrink-0 h-7">
 				<div className="relative flex items-center gap-2">
 					<div
 						contentEditable
 						suppressContentEditableWarning={true}
 						onBlur={(e) => setTitle(e.currentTarget.textContent)}
-						className="text-sm font-medium focus:outline-none"
+						className="text-[12px] font-semibold focus:outline-none"
 					>
 						{name}
 					</div>
 					{isChanged ? (
 						<button
 							type="button"
 							onClick={() => saveNewTitle()}
-							className="text-teal-500 hover:text-teal-600"
+							className="text-teal-500 hover:text-teal-600 inline-flex items-center justify-center size-6 border-[.5px] border-neutral-200 dark:border-neutral-800 shadow shadow-neutral-200/50 dark:shadow-none rounded-full bg-white dark:bg-black"
 						>
-							<Check className="size-4" />
+							<Check className="size-3" weight="bold" />
 						</button>
 					) : null}
 				</div>
 			</div>
 			<button
 				type="button"
 				onClick={(e) => showContextMenu(e)}
-				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
+				className="hidden shrink-0 group-hover:inline-flex items-center justify-center size-6 border-[.5px] border-neutral-200 dark:border-neutral-800 shadow shadow-neutral-200/50 dark:shadow-none rounded-full bg-white dark:bg-black"
 			>
-				<DotsThree className="size-5" />
+				<CaretDown className="size-3" weight="bold" />
 			</button>
 		</div>
 	);

src/components/note/content.tsx

@@ -94,7 +94,6 @@ export function NoteContent({
 			<div
 				className={cn(
 					"select-text text-pretty content-break overflow-hidden",
-					event.content.length > 500 ? "max-h-[250px] gradient-mask-b-0" : "",
 					className,
 				)}
 			>

src/components/quote.tsx

@@ -13,12 +13,7 @@ export const Quote = memo(function Quote({
 }) {
 	return (
 		<Note.Provider event={event}>
-			<Note.Root
-				className={cn(
-					"bg-white dark:bg-black/20 rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
-					className,
-				)}
-			>
+			<Note.Root className={cn("", className)}>
 				<div className="flex flex-col gap-3">
 					<Note.Child event={event.quote} isRoot />
 					<div className="flex items-center gap-2 px-3">

src/components/repost.tsx

@@ -15,12 +15,7 @@ export const RepostNote = memo(function RepostNote({
 	const { isLoading, isError, data } = useEvent(event.repostId);
 
 	return (
-		<Note.Root
-			className={cn(
-				"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
-				className,
-			)}
-		>
+		<Note.Root className={cn("", className)}>
 			{isLoading ? (
 				<div className="flex items-center justify-center h-20 gap-2">
 					<Spinner />

src/components/text.tsx

@@ -12,12 +12,7 @@ export const TextNote = memo(function TextNote({
 }) {
 	return (
 		<Note.Provider event={event}>
-			<Note.Root
-				className={cn(
-					"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
-					className,
-				)}
-			>
+			<Note.Root className={cn("", className)}>
 				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 					<Note.Menu />

src/routes/$account/_app.lazy.tsx

@@ -1,9 +1,8 @@
-import { appSettings, cn } from "@/commons";
+import { cn } from "@/commons";
 import { User } from "@/components/user";
 import { LumeWindow } from "@/system";
 import { CaretDown, Feather, MagnifyingGlass } from "@phosphor-icons/react";
 import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { memo, useCallback } from "react";
@@ -14,7 +13,6 @@ export const Route = createLazyFileRoute("/$account/_app")({
 
 function Screen() {
 	const context = Route.useRouteContext();
-	const transparent = useStore(appSettings, (state) => state.transparent);
 
 	return (
 		<div className="flex flex-col w-screen h-screen">
@@ -54,14 +52,7 @@ function Screen() {
 					className="relative z-[200] flex-1 flex items-center justify-end gap-1"
 				/>
 			</div>
-			<div
-				className={cn(
-					"flex-1",
-					transparent
-						? ""
-						: "bg-white dark:bg-black border-t border-black/20 dark:border-white/20",
-				)}
-			>
+			<div className="flex-1 bg-neutral-100 dark:bg-neutral-900 border-t-[.5px] border-black/20 dark:border-white/20">
 				<Outlet />
 			</div>
 		</div>

src/routes/$account/_app/home.lazy.tsx

@@ -179,8 +179,8 @@ function Screen() {
 							<Column key={column.label} column={column} />
 						))
 					)}
-					<div className="shrink-0 p-2 h-full w-[450px]">
-						<div className="size-full bg-black/5 dark:bg-white/15 rounded-xl flex items-center justify-center">
+					<div className="shrink-0 p-2 h-full w-[440px]">
+						<div className="size-full flex items-center justify-center">
 							<button
 								type="button"
 								onClick={() => LumeWindow.openColumnsGallery()}

src/routes/columns/_layout/create-group.lazy.tsx

@@ -49,6 +49,7 @@ function Screen() {
 				await queryClient.invalidateQueries({
 					queryKey: [search.label, search.account],
 				});
+				// @ts-ignore, tanstack router bug.
 				navigate({ to: search.redirect, search: { ...search, name: title } });
 			} else {
 				await message(res.error, {
@@ -69,10 +70,10 @@ function Screen() {
 				</p>
 			</div>
 			<div className="flex flex-col w-4/5 max-w-full gap-3">
-				<div className="flex items-center w-full rounded-lg h-9 shrink-0 bg-black/5 dark:bg-white/5">
+				<div className="flex items-center w-full rounded-lg h-9 shrink-0 bg-neutral-200 dark:bg-neutral-800">
 					<label
 						htmlFor="name"
-						className="w-16 text-sm font-semibold text-center border-r border-black/10 dark:border-white/10 shrink-0"
+						className="w-16 text-sm font-semibold text-center border-r border-neutral-300 dark:border-neutral-700 shrink-0"
 					>
 						Name
 					</label>
@@ -85,19 +86,19 @@ function Screen() {
 					/>
 				</div>
 				<div className="flex flex-col items-center w-full gap-3">
-					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-black/5 dark:bg-white/5 rounded-xl">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-neutral-200 dark:bg-neutral-900 rounded-xl">
 						<div className="flex gap-2">
 							<input
 								name="npub"
 								value={npub}
 								onChange={(e) => setNpub(e.target.value)}
 								placeholder="npub1..."
-								className="w-full px-3 text-sm border-none rounded-lg h-9 bg-black/10 dark:bg-white/10 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+								className="w-full px-3 text-sm border-none rounded-lg h-9 bg-neutral-300 dark:bg-neutral-700 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
 							/>
 							<button
 								type="button"
 								onClick={() => addUser()}
-								className="inline-flex items-center justify-center text-white rounded-lg size-9 bg-black/20 dark:bg-white/20 shrink-0 hover:bg-blue-500"
+								className="inline-flex items-center justify-center text-neutral-500 rounded-lg size-9 bg-neutral-300 dark:bg-neutral-700 shrink-0 hover:bg-blue-500 hover:text-white"
 							>
 								<Plus className="size-5" />
 							</button>
@@ -125,7 +126,7 @@ function Screen() {
 										</button>
 									))
 								) : (
-									<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
+									<div className="flex items-center justify-center text-sm rounded-lg bg-neutral-300 dark:bg-neutral-700 h-14">
 										Empty.
 									</div>
 								)}

src/routes/columns/_layout/events.$id.lazy.tsx

@@ -29,9 +29,12 @@ function Screen() {
 		<ScrollArea.Root
 			type={"scroll"}
 			scrollHideDelay={300}
-			className="overflow-hidden size-full flex-1"
+			className="overflow-hidden size-full px-3"
 		>
-			<ScrollArea.Viewport ref={ref} className="h-full pt-1 px-3 pb-3">
+			<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"
+			>
 				<Virtualizer scrollRef={ref}>
 					<RootEvent />
 					<ReplyList />
@@ -54,28 +57,24 @@ function RootEvent() {
 
 	if (isLoading) {
 		return (
-			<div className="bg-white flex items-center justify-center h-32 dark:bg-black/10 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
-				<div className="flex items-center gap-2 text-sm">
-					<Spinner />
-					Loading...
-				</div>
+			<div className="flex items-center gap-2 text-sm">
+				<Spinner />
+				Loading...
 			</div>
 		);
 	}
 
 	if (isError) {
 		return (
-			<div className="bg-white flex items-center justify-center h-32 dark:bg-black/10 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
-				<div className="flex items-center gap-2 text-sm text-red-500">
-					{error.message}
-				</div>
+			<div className="flex items-center gap-2 text-sm text-red-500">
+				{error.message}
 			</div>
 		);
 	}
 
 	return (
 		<Note.Provider event={event}>
-			<Note.Root className="bg-white dark:bg-white/10 rounded-xl shadow-primary dark:shadow-none">
+			<Note.Root className="border-b-[.5px] border-neutral-300 dark:border-neutral-700">
 				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 					<Note.Menu />
@@ -217,7 +216,7 @@ function ReplyList() {
 	}, []);
 
 	return (
-		<div>
+		<div className="px-3">
 			<div className="flex items-center text-sm font-semibold h-14 text-neutral-600 dark:text-white/30">
 				All replies
 			</div>

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

@@ -2,7 +2,6 @@ import type { LumeColumn } from "@/types";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import Avatar from "boring-avatars";
 
 export const Route = createLazyFileRoute("/columns/_layout/gallery")({
 	component: Screen,
@@ -26,31 +25,14 @@ function Screen() {
 				{columns.map((column) => (
 					<div
 						key={column.label}
-						className="mb-3 group flex px-2 items-center justify-between h-16 rounded-xl bg-white dark:bg-white/20 shadow-sm shadow-neutral-500/10"
+						className="mb-3 group flex px-4 items-center justify-between h-16 rounded-xl bg-white dark:bg-black border-[.5px] border-neutral-300 dark:border-neutral-700"
 					>
-						<div className="inline-flex items-center gap-2">
-							<div className="size-11 bg-neutral-200 rounded-lg overflow-hidden">
-								<Avatar
-									name={column.name}
-									size={44}
-									square={true}
-									variant="pixel"
-									colors={[
-										"#84cc16",
-										"#22c55e",
-										"#0ea5e9",
-										"#3b82f6",
-										"#6366f1",
-									]}
-								/>
+						<div className="text-sm">
+							<div className="mb-px leading-tight font-semibold">
+								{column.name}
 							</div>
-							<div className="text-sm">
-								<div className="mb-px leading-tight font-semibold">
-									{column.name}
-								</div>
-								<div className="leading-tight text-neutral-500 dark:text-neutral-400">
-									{column.description}
-								</div>
+							<div className="leading-tight text-neutral-500 dark:text-neutral-400">
+								{column.description}
 							</div>
 						</div>
 						<button