feat: fix typos and other stuffs

This commit is contained in:
reya 2024-01-25 09:49:04 +07:00
parent c13aefcd15
commit bd45c36072
16 changed files with 62 additions and 88 deletions

View File

@ -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
in safe place. You{" "}
<span className="text-red-600">cannot recover</span> if it
lost, all your data will be{" "}
<span className="text-red-600">lost forever.</span>
If you are using this option, please make sure to store your
keys safely. You{" "}
<span className="text-red-600">cannot recover</span> them if
they're lost, and will be{" "}
<span className="text-red-600">unable</span> to access your
account.
</p>
</div>
</div>

View File

@ -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>

View File

@ -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>

View File

@ -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) => (
<div
key={topic.title + index}
className="flex flex-col gap-4"
>
{TOPICS.map((topic) => (
<div key={topic.title} 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

View File

@ -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";

View File

@ -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) => {

View File

@ -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

View File

@ -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>

View File

@ -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"
}
}

View File

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

View File

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

View File

@ -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-[100px] w-full">
<div className="h-11 flex items-center gap-5">
<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="h-[100px] w-full">
<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/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>

View File

@ -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{" "}
<span className="text-blue-500">nostr.wine</span>, you need to
deposit at least 2,500 sats to use translate 50,000 characters
Translation Service is provided by{" "}
<span className="text-blue-500">nostr.wine</span>. Prices
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{" "}

View File

@ -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"

View File

@ -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
look into bottom right part of screen
<span className="font-semibold">To create a new column</span>, you can
click on the "Plus" icon at bottom right corner of this window.
</p>
<p>Click to "Plus" icon</p>
<img