nostr
/
lume
mirror of https://github.com/luminous-devs/lume.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

polish

This commit is contained in:
Ren Amamiya 2023-08-19 15:27:10 +07:00
parent 08e3a66ece
commit bac70b19ec
20 changed files with 117 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.github/workflows/main.yml vendored
View File

@ -1,8 +1,5 @@
name: 'publish'
on:
push:
branches:
- main
on: workflow_dispatch
env:
CARGO_INCREMENTAL: 0
@ -27,7 +24,7 @@ jobs:
- name: setup node
uses: actions/setup-node@v3
with:
node-version: 18
node-version: 20
- uses: dtolnay/rust-toolchain@stable
with:
targets: aarch64-apple-darwin

7
src/app.tsx
View File

@ -54,13 +54,6 @@ const router = createBrowserRouter([
return { Component: SpaceScreen };
},
},
{
path: 'trending',
async lazy() {
const { TrendingScreen } = await import('@app/trending');
return { Component: TrendingScreen };
},
},
{
path: 'events/:id',
async lazy() {

18
src/app/auth/unlock.tsx
View File

@ -74,17 +74,17 @@ export function UnlockScreen() {
<div className="mb-6 text-center">
<h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
</div>
<div className="mb-4 w-full rounded-xl bg-white/5 p-4">
<User pubkey={db.account.pubkey} />
</div>
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
<div className="flex flex-col gap-1">
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-1">
<div className="flex flex-col rounded-lg bg-white/5">
<div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
<User pubkey={db.account.pubkey} />
</div>
<div className="relative">
<input
{...register('password', { required: true, minLength: 4 })}
type={'password'}
placeholder="Password"
className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
/>
<button
type="button"
@ -98,11 +98,11 @@ export function UnlockScreen() {
)}
</button>
</div>
<span className="text-sm text-red-400">
{errors.password && <p>{errors.password.message}</p>}
</span>
</div>
<div className="flex flex-col items-center justify-center">
<span className="mb-3 text-sm text-red-400">
{errors.password && <p>{errors.password.message}</p>}
</span>
<button
type="submit"
disabled={!isDirty || !isValid}

4
src/app/error.tsx
View File

@ -33,8 +33,8 @@ export function ErrorScreen() {
}, []);
return (
<div className="flex h-full w-full items-center justify-center bg-black/90">
<div className="flex flex-col gap-4">
<div className="flex h-full items-center justify-center bg-black/90">
<div className="flex max-w-lg flex-col gap-4">
<div className="flex flex-col">
<h1 className="mb-1 text-2xl font-semibold text-white">
Sorry, an unexpected error has occurred.

7
src/app/trending/components/profile.tsx → src/app/space/components/userProfile.tsx
View File

@ -8,7 +8,12 @@ import { useSocial } from '@utils/hooks/useSocial';
import { compactNumber } from '@utils/number';
import { shortenKey } from '@utils/shortenKey';
export function Profile({ data }: { data: any }) {
export interface Profile {
pubkey: string;
profile: { content: string };
}
export function UserProfile({ data }: { data: Profile }) {
const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
const { status, data: userStats } = useQuery(
['user-stats', data.pubkey],

4
src/app/space/components/widgets/thread.tsx
View File

@ -15,11 +15,11 @@ import { useEvent } from '@utils/hooks/useEvent';
import { Widget } from '@utils/types';
export function ThreadBlock({ params }: { params: Widget }) {
const { status, data } = useEvent(params.content);
const { db } = useStorage();
const { status, data } = useEvent(params.content);
return (
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
{status === 'loading' ? (

19
src/app/trending/components/trendingNotes.tsx → src/app/space/components/widgets/trendingNotes.tsx
View File

@ -1,20 +1,21 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { NoteKind_1 } from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { LumeEvent } from '@utils/types';
import { Widget } from '@utils/types';
interface Response {
notes: Array<{ event: LumeEvent }>;
notes: Array<{ event: NDKEvent }>;
}
export function TrendingNotes() {
export function TrendingNotesWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-notes'],
async () => {
const res = await fetch('https://api.nostr.band/v0/trending/notes');
const res = await fetch(params.content);
if (!res.ok) {
throw new Error('failed to fecht trending notes');
}
@ -32,7 +33,7 @@ export function TrendingNotes() {
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<TitleBar title="Trending Posts" />
<TitleBar title={params.title} />
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
@ -41,7 +42,13 @@ export function TrendingNotes() {
</div>
</div>
) : status === 'error' ? (
<p>Failed to fetch</p>
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">
<p className="text-center text-sm font-medium text-white">
Sorry, an unexpected error has occurred.
</p>
</div>
</div>
) : (
<div className="relative flex w-full flex-col">
{data.map((item) => (

24
src/app/trending/components/trendingProfiles.tsx → src/app/space/components/widgets/trendingProfile.tsx
View File

@ -1,24 +1,26 @@
import { useQuery } from '@tanstack/react-query';
import { Profile } from '@app/trending/components/profile';
import { type Profile, UserProfile } from '@app/space/components/userProfile';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { Widget } from '@utils/types';
interface Response {
profiles: Array<{ pubkey: string }>;
}
export function TrendingProfiles() {
export function TrendingProfilesWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-profiles'],
async () => {
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
const res = await fetch(params.content);
if (!res.ok) {
throw new Error('Error');
}
const json: Response = await res.json();
if (!json.profiles) return null;
if (!json.profiles) return [];
return json.profiles;
},
{
@ -31,7 +33,7 @@ export function TrendingProfiles() {
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<TitleBar title="Trending Profiles" />
<TitleBar title={params.title} />
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
@ -40,11 +42,17 @@ export function TrendingProfiles() {
</div>
</div>
) : status === 'error' ? (
<p>Failed to fetch</p>
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">
<p className="text-center text-sm font-medium text-white">
Sorry, an unexpected error has occurred.
</p>
</div>
</div>
) : (
<div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
{data.map((item) => (
<Profile key={item.pubkey} data={item} />
{data.map((item: Profile) => (
<UserProfile key={item.pubkey} data={item} />
))}
</div>
)}

15
src/app/space/components/widgets/user.tsx
View File

@ -11,7 +11,7 @@ import { TitleBar } from '@shared/titleBar';
import { UserProfile } from '@shared/userProfile';
import { nHoursAgo } from '@utils/date';
import { DBEvent, Widget } from '@utils/types';
import { Widget } from '@utils/types';
export function UserWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
@ -19,13 +19,18 @@ export function UserWidget({ params }: { params: Widget }) {
['user-widget', params.content],
async () => {
const events = await ndk.fetchEvents({
kinds: [1],
kinds: [1, 6],
authors: [params.content],
since: nHoursAgo(24),
});
return [...events] as unknown as DBEvent[];
return [...events] as unknown as NDKEvent[];
},
{ refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false }
{
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
);
const parentRef = useRef<HTMLDivElement>(null);
@ -87,7 +92,7 @@ export function UserWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-md bg-white/10 px-3 py-3">
<div className="rounded-xl bg-white/10 px-3 py-3">
<NoteSkeleton />
</div>
</div>

2
src/app/space/index.tsx
View File

@ -68,7 +68,7 @@ export function SpaceScreen() {
<HashtagModal />
</div>
</div>
<div className="w-[150px] shrink-0" />
<div className="w-[250px] shrink-0" />
</div>
);
}

11
src/app/trending/index.tsx
View File

@ -1,11 +0,0 @@
import { TrendingNotes } from '@app/trending/components/trendingNotes';
import { TrendingProfiles } from '@app/trending/components/trendingProfiles';
export function TrendingScreen() {
return (
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
<TrendingProfiles />
<TrendingNotes />
</div>
);
}

17
src/libs/storage/instance.ts
View File

@ -1,3 +1,4 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { BaseDirectory, removeFile } from '@tauri-apps/plugin-fs';
import Database from '@tauri-apps/plugin-sql';
import { Stronghold } from '@tauri-apps/plugin-stronghold';
@ -114,16 +115,16 @@ export class LumeStorage {
public async createWidget(kind: number, title: string, content: string | string[]) {
const insert = await this.db.execute(
'INSERT OR IGNORE INTO widgets (account_id, kind, title, content) VALUES ($1, $2, $3, $4);',
'INSERT INTO widgets (account_id, kind, title, content) VALUES ($1, $2, $3, $4);',
[this.account.id, kind, title, content]
);
if (insert) {
const widget: Widget = await this.db.select(
const widgets: Array<Widget> = await this.db.select(
'SELECT * FROM widgets ORDER BY id DESC LIMIT 1;'
)?.[0];
if (!widget) console.error('get created widget failed');
return widget;
);
if (widgets.length < 1) console.error('get created widget failed');
return widgets[0];
} else {
console.error('create widget failed');
}
@ -150,12 +151,12 @@ export class LumeStorage {
public async getEventByID(id: string) {
const results: DBEvent[] = await this.db.select(
'SELECT * FROM events WHERE id = $1 ORDER BY id DESC LIMIT 1;',
'SELECT * FROM events WHERE id = $1 LIMIT 1;',
[id]
);
if (results.length < 1) return null;
return results[0];
return JSON.parse(results[0].event as string) as NDKEvent;
}
public async countTotalEvents() {
@ -175,7 +176,7 @@ export class LumeStorage {
};
const query: DBEvent[] = await this.db.select(
'SELECT * FROM events ORDER BY created_at DESC LIMIT $1 OFFSET $2;',
'SELECT * FROM events GROUP BY root_id ORDER BY created_at DESC LIMIT $1 OFFSET $2;',
[limit, offset]
);

6
src/shared/composer/composer.tsx
View File

@ -87,13 +87,13 @@ export function Composer() {
if (reply.id && reply.pubkey) {
if (reply.root && reply.root.length > 1) {
tags = [
['e', reply.root, 'wss://relayable.org', 'root'],
['e', reply.id, 'wss://relayable.org', 'reply'],
['e', reply.root, '', 'root'],
['e', reply.id, '', 'reply'],
['p', reply.pubkey],
];
} else {
tags = [
['e', reply.id, 'wss://relayable.org', 'reply'],
['e', reply.id, '', 'reply'],
['p', reply.pubkey],
];
}

11
src/shared/image.tsx
View File

@ -1,16 +1,12 @@
import { minidenticon } from 'minidenticons';
import { ImgHTMLAttributes, useState } from 'react';
import { useMemo } from 'react';
export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
const [isError, setIsError] = useState(false);
if (isError || !src) {
const svgURI = useMemo(
() =>
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50)),
[props.alt]
);
const svgURI =
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50));
return (
<img src={svgURI} alt={props.alt} {...props} style={{ backgroundColor: '#000' }} />
);
@ -20,7 +16,8 @@ export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
<img
{...props}
src={src}
onError={() => {
onError={({ currentTarget }) => {
currentTarget.onerror = null;
setIsError(true);
}}
decoding="async"

59
src/shared/navigation.tsx
View File

@ -3,15 +3,13 @@ import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ChatsList } from '@app/chats/components/list';
// import { ChatsList } from '@app/chats/components/list';
import { ComposerModal } from '@shared/composer/modal';
import {
ArrowLeftIcon,
ArrowRightIcon,
NavArrowDownIcon,
SpaceIcon,
TrendingIcon,
} from '@shared/icons';
import { LumeBar } from '@shared/lumeBar';
@ -19,7 +17,7 @@ export function Navigation() {
const navigate = useNavigate();
const [feeds, setFeeds] = useState(true);
const [chats, setChats] = useState(true);
// const [chats, setChats] = useState(true);
return (
<div className="relative h-full w-[232px] bg-black/80">
@ -54,10 +52,15 @@ export function Navigation() {
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon className="h-3 w-3 text-white/50" />
<NavArrowDownIcon
className={twMerge(
'h-3 w-3 text-white/50',
feeds ? '' : 'rotate-180'
)}
/>
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Feeds
Personal
</h3>
</button>
</Collapsible.Trigger>
@ -76,54 +79,12 @@ export function Navigation() {
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<SpaceIcon className="h-3 w-3 text-white" />
</span>
<span className="font-medium">Spaces</span>
</NavLink>
<NavLink
to="/trending"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2 ',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<TrendingIcon className="h-3 w-3 text-white" />
</span>
<span className="font-medium">Trending</span>
<span className="font-medium">Space</span>
</NavLink>
</div>
</Collapsible.Content>
</div>
</Collapsible.Root>
{/* Channels
<Disclosure defaultOpen={true}>
{({ open }) => (
<div className="flex flex-col gap-0.5 px-1.5">
<Disclosure.Button className="flex items-center gap-1 px-3">
<div
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? "" : "rotate-180"
}`}
>
<NavArrowDownIcon
width={12}
height={12}
className="text-zinc-700"
/>
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
Channels
</h3>
</Disclosure.Button>
<Disclosure.Panel>
<ChannelsList />
</Disclosure.Panel>
</div>
)}
</Disclosure>
*/}
</div>
<div className="absolute bottom-3 left-0 w-full px-10">
<LumeBar />

14
src/shared/notes/replies/list.tsx
View File

@ -1,10 +1,13 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { NoteSkeleton, Reply } from '@shared/notes';
import { LumeEvent } from '@utils/types';
interface ReplyEvent extends NDKEvent {
replies: Array<NDKEvent>;
}
export function RepliesList({ id }: { id: string }) {
const { ndk } = useNDK();
@ -12,10 +15,9 @@ export function RepliesList({ id }: { id: string }) {
const events = await ndk.fetchEvents({
kinds: [1],
'#e': [id],
since: 0,
});
const array = [...events] as unknown as LumeEvent[];
const array = [...events] as unknown as ReplyEvent[];
if (array.length > 0) {
const replies = new Set();
@ -55,7 +57,7 @@ export function RepliesList({ id }: { id: string }) {
}
return (
<div className="mt-3">
<div className="mt-3 pb-10">
<div className="mb-2">
<h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
</div>
@ -71,8 +73,8 @@ export function RepliesList({ id }: { id: string }) {
</div>
) : (
data
?.reverse()
.map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
.reverse()
.map((event: NDKEvent) => <Reply key={event.id} event={event} root={id} />)
)}
</div>
</div>

7
src/shared/notification/modal.tsx
View File

@ -9,7 +9,6 @@ import { BellIcon, CancelIcon, LoaderIcon } from '@shared/icons';
import { NotiMention, NotiReaction, NotiRepost } from '@shared/notification';
import { nHoursAgo } from '@utils/date';
import { LumeEvent } from '@utils/types';
export function NotificationModal({ pubkey }: { pubkey: string }) {
const { ndk } = useNDK();
@ -23,10 +22,12 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
});
const filterSelf = [...events].filter((el) => el.pubkey !== pubkey);
const sorted = filterSelf.sort((a, b) => a.created_at - b.created_at);
return sorted as unknown as LumeEvent[];
return sorted as unknown as NDKEvent[];
},
{
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
}
);
@ -80,7 +81,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
<div className="inline-flex items-center justify-center px-4 py-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
</div>
) : data.length < 1 ? (
) : data?.length < 1 ? (
<div className="flex h-full w-full flex-col items-center justify-center">
<p className="mb-1 text-4xl">🎉</p>
<p className="font-medium text-white/50">

2
src/shared/user.tsx
View File

@ -90,7 +90,7 @@ export function User({
</div>
<Popover.Portal>
<Popover.Content
className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none"
className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
sideOffset={5}
>
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">

2
src/stores/widgets.tsx
View File

@ -22,7 +22,7 @@ export const useWidgets = create<WidgetState>()(
// default: add network widget
dbWidgets.unshift({
id: String(dbWidgets.length + 1),
id: '9999',
title: 'Network',
content: '',
kind: 9999,

23
src/utils/hooks/useEvent.tsx
View File

@ -2,29 +2,38 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { parser } from '@utils/parser';
import { RichContent } from '@utils/types';
export function useEvent(id: string, embed?: string) {
const { db } = useStorage();
const { ndk } = useNDK();
const { status, data, error } = useQuery(
['event', id],
async () => {
let richContent: RichContent;
// return embed event (nostr.band api)
if (embed) {
const event: NDKEvent = JSON.parse(embed);
let richContent: RichContent;
if (event.kind === 1) richContent = parser(event);
return { event: event as NDKEvent, richContent: richContent };
return { event: event, richContent: richContent };
}
const event = (await ndk.fetchEvent(id)) as NDKEvent;
if (!event) throw new Error('event not found');
let richContent: RichContent;
if (event.kind === 1) richContent = parser(event);
// get event from db
const dbEvent = await db.getEventByID(id);
if (dbEvent) {
if (dbEvent.kind === 1) richContent = parser(dbEvent);
return { event: dbEvent, richContent: richContent };
} else {
// get event from relay if event in db not present
const event = await ndk.fetchEvent(id);
if (event.kind === 1) richContent = parser(event);
return { event: event as NDKEvent, richContent: richContent };
return { event: event, richContent: richContent };
}
},
{
staleTime: Infinity,