feat: fix typos and other stuffs

apps/desktop/src/routes/auth/create.tsx

@@ -326,11 +326,12 @@ export function CreateAccountScreen() {
 									Generate Nostr Keys
 								</button>
 								<p className="text-sm text-center text-neutral-500">
-									If you are using this option, please make sure keep your keys
+									If you are using this option, please make sure to store your
-									in safe place. You{" "}
+									keys safely. You{" "}
-									<span className="text-red-600">cannot recover</span> if it
+									<span className="text-red-600">cannot recover</span> them if
-									lost, all your data will be{" "}
+									they're lost, and will be{" "}
-									<span className="text-red-600">lost forever.</span>
+									<span className="text-red-600">unable</span> to access your
+									account.
 								</p>
 							</div>
 						</div>

apps/desktop/src/routes/auth/onboarding.tsx

@@ -194,7 +194,7 @@ export function OnboardingScreen() {
 									</div>
 									<div className="relative flex justify-center">
 										<span className="px-2 text-sm font-medium bg-neutral-950 text-neutral-600">
-											Not have API ?
+											Don't have an API key?
 										</span>
 									</div>
 								</div>

apps/desktop/src/routes/home/index.tsx

@@ -10,7 +10,7 @@ import { useColumnContext } from "@lume/ark";
 import {
 	ArrowLeftIcon,
 	ArrowRightIcon,
-	NewColumnIcon,
+	PlusIcon,
 	PlusSquareIcon,
 } from "@lume/icons";
 import { IColumn } from "@lume/types";
@@ -96,9 +96,9 @@ export function HomeScreen() {
 								content: "",
 							})
 						}
-						className="size-16 inline-flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 text-white"
+						className="size-16 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-900 rounded-2xl"
 					>
-						<NewColumnIcon className="size-7" />
+						<PlusIcon className="size-6" />
 					</button>
 				</div>
 			</VList>

packages/ark/src/components/column/interestModal.tsx

@@ -40,7 +40,7 @@ export function InterestModal({
 			);
 
 			if (save) {
-				storage.interests.hashtags = hashtags;
+				storage.interests = { hashtags, users: [], words: [] };
 				await queryClient.refetchQueries({ queryKey });
 			}
 
@@ -86,11 +86,8 @@ export function InterestModal({
 							<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
 								<div className="flex-1 min-h-0 overflow-y-auto px-8 py-8">
 									<div className="flex flex-col gap-8">
-										{TOPICS.map((topic, index) => (
+										{TOPICS.map((topic) => (
-											<div
+											<div key={topic.title} className="flex flex-col gap-4">
-												key={topic.title + index}
-												className="flex flex-col gap-4"
-											>
 												<div className="w-full flex items-center justify-between">
 													<div className="inline-flex items-center gap-2.5">
 														<img

packages/ark/src/components/column/live.tsx

@@ -1,4 +1,4 @@
-import { ArrowUpIcon, ChevronUpIcon } from "@lume/icons";
+import { ArrowUpIcon } from "@lume/icons";
 import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
 import { useEffect, useState } from "react";
 import { useArk } from "../../hooks/useArk";

packages/ark/src/components/column/provider.tsx

@@ -55,7 +55,10 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
 			column.title,
 			column.content,
 		);
-		if (result) setColumns((prev) => [...prev, result]);
+		if (result) {
+			setColumns((prev) => [...prev, result]);
+			vlistRef?.current.scrollToIndex(columns.length);
+		}
 	}, []);
 
 	const removeColumn = useCallback(async (id: number) => {

packages/ark/src/components/note/buttons/repost.tsx

@@ -88,12 +88,12 @@ export function NoteRepost() {
 				</Tooltip.Root>
 			</Tooltip.Provider>
 			<DropdownMenu.Portal>
-				<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
+				<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none">
 					<DropdownMenu.Item asChild>
 						<button
 							type="button"
 							onClick={repost}
-							className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+							className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 						>
 							<RepostIcon className="size-4" />
 							Repost
@@ -103,7 +103,7 @@ export function NoteRepost() {
 						<button
 							type="button"
 							onClick={quote}
-							className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+							className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 						>
 							<ReplyIcon className="size-4" />
 							Quote

packages/ark/src/components/note/mentions/user.tsx

@@ -14,18 +14,18 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
 
 	return (
 		<DropdownMenu.Root>
-			<DropdownMenu.Trigger className="text-blue-500 break-words hover:text-blue-600">
+			<DropdownMenu.Trigger className="text-start text-blue-500 break-words hover:text-blue-600">
 				{isLoading
 					? "@anon"
 					: isError
 					  ? pubkey
 					  : `@${user?.name || user?.displayName || user?.username || "anon"}`}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content className="left-[50px] z-50 relative flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
+			<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none">
 				<DropdownMenu.Item asChild>
 					<Link
 						to={`/users/${cleanPubkey}`}
-						className="inline-flex items-center h-10 px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+						className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 					>
 						View profile
 					</Link>
@@ -40,7 +40,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
 								content: cleanPubkey,
 							})
 						}
-						className="inline-flex items-center h-10 px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+						className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
 					>
 						Pin
 					</button>

packages/lume-column-activity/package.json

@@ -1,26 +0,0 @@
-{
-	"name": "@columns/activity",
-	"version": "0.0.0",
-	"private": true,
-	"main": "./src/index.tsx",
-	"dependencies": {
-		"@lume/ark": "workspace:^",
-		"@lume/icons": "workspace:^",
-		"@lume/ui": "workspace:^",
-		"@lume/utils": "workspace:^",
-		"@nostr-dev-kit/ndk": "^2.3.3",
-		"@tanstack/react-query": "^5.17.19",
-		"react": "^18.2.0",
-		"react-router-dom": "^6.21.3",
-		"sonner": "^1.3.1",
-		"virtua": "^0.21.1"
-	},
-	"devDependencies": {
-		"@lume/tailwindcss": "workspace:^",
-		"@lume/tsconfig": "workspace:^",
-		"@lume/types": "workspace:^",
-		"@types/react": "^18.2.48",
-		"tailwind": "^4.0.0",
-		"typescript": "^5.3.3"
-	}
-}

packages/lume-column-activity/tailwind.config.js

@@ -1,8 +0,0 @@
-import sharedConfig from "@lume/tailwindcss";
-
-const config = {
-	content: ["./src/**/*.{js,ts,jsx,tsx}"],
-	presets: [sharedConfig],
-};
-
-export default config;

packages/lume-column-activity/tsconfig.json

@@ -1,8 +0,0 @@
-{
-	"extends": "@lume/tsconfig/base.json",
-	"compilerOptions": {
-		"outDir": "dist"
-	},
-	"include": ["src"],
-	"exclude": ["node_modules", "dist"]
-}

packages/lume-column-default/src/index.tsx

@@ -14,19 +14,36 @@ export function Default({ column }: { column: IColumn }) {
 				icon={<ColumnIcon className="size-4" />}
 			/>
 			<div className="h-full px-3 mt-3 flex flex-col gap-3 overflow-y-auto scrollbar-none">
-				<div className="flex flex-col rounded-xl overflow-hidden">
+				<div className="h-11 flex items-center gap-5">
-					<div className="h-[100px] w-full">
+					<button
+						type="button"
+						className="h-9 w-max px-3 text-sm font-semibold inline-flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-lg"
+					>
+						Official
+					</button>
+					<button
+						type="button"
+						disabled
+						className="h-9 w-max px-3 text-sm inline-flex items-center justify-center rounded-lg disabled:opacity-50"
+					>
+						Community (Coming Soon)
+					</button>
+				</div>
+				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
+					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/group.jpg"
 							srcSet="/columns/group@2x.jpg 2x"
 							alt="group"
-							className="w-full h-auto object-cover"
+							loading="lazy"
+							decoding="async"
+							className="w-full h-auto object-cover rounded-lg"
 						/>
 					</div>
-					<div className="h-16 shrink-0 px-3 flex items-center justify-between bg-neutral-50 dark:bg-neutral-950">
+					<div className="h-16 shrink-0 px-3 flex items-center justify-between">
 						<div>
 							<h1 className="font-semibold">Group Feeds</h1>
-							<p className="max-w-[18rem] truncate text-sm text-neutral-500 dark:text-neutral-600">
+							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
 								Collective of people you're interested in.
 							</p>
 						</div>
@@ -41,19 +58,21 @@ export function Default({ column }: { column: IColumn }) {
 						</button>
 					</div>
 				</div>
-				<div className="flex flex-col rounded-xl overflow-hidden">
+				<div className="flex flex-col rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 ring-1 ring-neutral-100 dark:ring-neutral-900">
-					<div className="h-[100px] w-full">
+					<div className="h-[100px] w-full px-3 pt-3">
 						<img
 							src="/columns/antenas.jpg"
 							srcSet="/columns/antenas@2x.jpg 2x"
 							alt="antenas"
-							className="w-full h-auto object-cover"
+							loading="lazy"
+							decoding="async"
+							className="w-full h-auto object-cover rounded-lg"
 						/>
 					</div>
-					<div className="h-16 shrink-0 px-3 flex items-center justify-between bg-neutral-50 dark:bg-neutral-950">
+					<div className="h-16 shrink-0 px-3 flex items-center justify-between">
 						<div>
 							<h1 className="font-semibold">Antenas</h1>
-							<p className="max-w-[18rem] truncate text-sm text-neutral-500 dark:text-neutral-600">
+							<p className="max-w-[18rem] truncate text-sm text-neutral-600 dark:text-neutral-500">
 								Keep track to specific content.
 							</p>
 						</div>

packages/ui/src/translateRegisterModal.tsx

@@ -68,9 +68,9 @@ export function TranslateRegisterModal({ setAPIKey }) {
 						<div className="flex-1 min-h-0 flex flex-col justify-between px-8 py-8">
 							<div className="flex flex-col gap-1.5">
 								<p className="text-sm text-neutral-500">
-									Translate Service is provided by{" "}
+									Translation Service is provided by{" "}
-									<span className="text-blue-500">nostr.wine</span>, you need to
+									<span className="text-blue-500">nostr.wine</span>. Prices
-									deposit at least 2,500 sats to use translate 50,000 characters
+									start at 2,500 sats for 50,000 characters of translated text.
 								</p>
 								<p className="text-sm text-neutral-500">
 									You can learn more about nostr.wine{" "}

packages/ui/src/tutorial/manageColumn.tsx

@@ -5,13 +5,9 @@ export function TutorialManageColumnScreen() {
 		<div className="px-5 h-full flex flex-col justify-between">
 			<div className="h-full min-h-0 flex flex-col gap-2">
 				<p>
-					Lume is also provide simple way to customize column after creation.
+					Once a new column is created, you can click on the title in its header
+					to find options to <span className="font-semibold">customize</span> it
 				</p>
-				<p>
-					<span className="font-semibold">To customize each column,</span> you
-					can go to header of each column
-				</p>
-				<p>Click to "Three Dots" icon</p>
 				<img
 					src="/tutorial-3.gif"
 					alt="tutorial-3"

packages/ui/src/tutorial/newColumn.tsx

@@ -4,10 +4,10 @@ export function TutorialNewColumnScreen() {
 	return (
 		<div className="px-5 h-full flex flex-col justify-between">
 			<div className="h-full min-h-0 flex flex-col gap-2">
-				<p>Lume is column based, each column is each experience</p>
+				<p>Lume is column based, each column is its own experience.</p>
 				<p>
-					<span className="font-semibold">To create new column,</span> you can
+					<span className="font-semibold">To create a new column</span>, you can
-					look into bottom right part of screen
+					click on the "Plus" icon at bottom right corner of this window.
 				</p>
 				<p>Click to "Plus" icon</p>
 				<img