reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve search

Browse Source
This commit is contained in:
reya
2024-05-12 08:18:25 +07:00
parent 73f80f27fb
commit 571d4b4004
6 changed files with 1226 additions and 1241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/desktop2/src/routes/search.tsx
View File

@@ -3,6 +3,7 @@ import { type Event, Kind } from "@lume/types";
import { Note, Spinner, User } from "@lume/ui";
import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { useDebounce } from "use-debounce";
export const Route = createFileRoute("/search")({
@@ -10,43 +11,39 @@ export const Route = createFileRoute("/search")({
});
function Screen() {
const { ark } = Route.useRouteContext();
const [loading, setLoading] = useState(false);
const [events, setEvents] = useState<Event[]>([]);
const [search, setSearch] = useState("");
const [value] = useDebounce(search, 500);
const [searchValue] = useDebounce(search, 500);
const searchEvents = async () => {
if (!value.length) return;
// start loading
try {
setLoading(true);
const data = await ark.search(value, 100);
const query = `https://api.nostr.wine/search?query=${searchValue}&kind=0,1`;
const res = await fetch(query);
const content = await res.json();
const events = content.data as Event[];
const sorted = events.sort((a, b) => b.created_at - a.created_at);
// update state
setLoading(false);
setEvents(data);
setEvents(sorted);
} catch (e) {
setLoading(false);
toast.error(String(e));
}
};
useEffect(() => {
if (searchValue.length >= 3 && searchValue.length < 500) {
searchEvents();
}, [value]);
}
}, [searchValue]);
return (
<div
data-tauri-drag-region
className="flex flex-col w-full h-full bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900"
>
<div
data-tauri-drag-region
className="relative h-24 shrink-0 flex items-end border-neutral-300 border-b dark:border-neutral-700"
>
<div
data-tauri-drag-region
className="absolute top-0 left-0 w-full h-4"
/>
<div data-tauri-drag-region className="flex flex-col w-full h-full">
<div className="relative h-24 shrink-0 flex flex-col border-b border-black/5 dark:border-white/5">
<div data-tauri-drag-region className="w-full h-4 shrink-0" />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
@@ -54,7 +51,7 @@ function Screen() {
if (e.key === "Enter") searchEvents();
}}
placeholder="Search anything..."
className="z-10 w-full h-20 pt-10 px-6 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
className="w-full h-20 pt-10 px-3 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
/>
</div>
<div className="flex-1 p-3 overflow-y-auto scrollbar-none">
@@ -62,21 +59,17 @@ function Screen() {
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
) : !events.length ? (
<div className="flex items-center justify-center h-full text-sm">
Empty
</div>
) : (
) : events.length ? (
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-1.5">
<div className="text-sm font-medium text-neutral-700 dark:text-neutral-300 shrink-0">
Users
</div>
<div className="flex-1 flex flex-col gap-3">
<div className="flex-1 flex flex-col gap-1">
{events
.filter((ev) => ev.kind === Kind.Metadata)
.map((event) => (
<SearchUser key={event.id} event={event} />
.map((event, index) => (
<SearchUser key={event.pubkey + index} event={event} />
))}
</div>
</div>
@@ -93,10 +86,10 @@ function Screen() {
</div>
</div>
</div>
)}
) : null}
{!loading && !events.length ? (
<div className="h-full flex items-center justify-center flex-col gap-3">
<div className="size-16 bg-blue-100 dark:bg-blue-900 rounded-full inline-flex items-center justify-center text-blue-500">
<div className="size-16 bg-black/10 dark:bg-white/10 rounded-full inline-flex items-center justify-center">
<SearchIcon className="size-6" />
</div>
Try searching for people, notes, or keywords
@@ -115,12 +108,12 @@ function SearchUser({ event }: { event: Event }) {
key={event.id}
type="button"
onClick={() => ark.open_profile(event.pubkey)}
className="p-3 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg"
className="col-span-1 p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg"
>
<User.Provider pubkey={event.pubkey} embedProfile={event.content}>
<User.Root className="flex items-center gap-2">
<User.Avatar className="size-11 rounded-full shrink-0" />
<div>
<User.Avatar className="size-9 rounded-full shrink-0" />
<div className="inline-flex items-center gap-1.5">
<User.Name className="font-semibold" />
<User.NIP05 />
</div>
@@ -131,20 +124,17 @@ function SearchUser({ event }: { event: Event }) {
}
function SearchNote({ event }: { event: Event }) {
const { ark } = Route.useRouteContext();
return (
<div
key={event.id}
onClick={() => ark.open_event(event)}
onKeyDown={() => ark.open_event(event)}
className="p-3 bg-white rounded-lg dark:bg-black"
>
<div className="bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
<Note.Provider event={event}>
<Note.Root>
<div className="px-3 h-14 flex items-center justify-between">
<Note.User />
<div className="select-text mt-2.5 leading-normal line-clamp-5 text-balance">
{event.content}
<Note.Menu />
</div>
<Note.Content className="px-3" quote={false} mention={false} />
<div className="mt-3 flex items-center gap-4 h-14 px-3">
<Note.Open />
</div>
</Note.Root>
</Note.Provider>

6
apps/desktop2/src/routes/settings/user.tsx
View File

@@ -88,7 +88,6 @@ function Screen() {
<input
name="display_name"
{...register("display_name", { required: true, minLength: 1 })}
value={profile.display_name}
spellCheck={false}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
@@ -104,7 +103,6 @@ function Screen() {
name="name"
{...register("name")}
spellCheck={false}
value={profile.name}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
@@ -120,7 +118,6 @@ function Screen() {
type="url"
{...register("website")}
spellCheck={false}
value={profile.website}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
@@ -136,7 +133,6 @@ function Screen() {
type="url"
{...register("banner")}
spellCheck={false}
value={profile.banner}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
@@ -152,7 +148,6 @@ function Screen() {
type="email"
{...register("nip05")}
spellCheck={false}
value={profile.nip05}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
@@ -167,7 +162,6 @@ function Screen() {
name="lnaddress"
type="email"
{...register("lud16")}
value={profile.lud16}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>

4
packages/ark/src/ark.ts
View File

@@ -899,8 +899,8 @@ export class Ark {
label,
title: "Search",
url: "/search",
width: 750,
height: 470,
width: 400,
height: 600,
});
} catch (e) {
throw new Error(String(e));

2
packages/ui/src/user/avatar.tsx
View File

@@ -23,7 +23,7 @@ export function UserAvatar({ className }: { className?: string }) {
alt={user.pubkey}
loading="eager"
decoding="async"
className={cn("ring-1 ring-black/5 dark:ring-white/5", className)}
className={cn("outline-[.5px] outline-black/5", className)}
/>
<Avatar.Fallback delayMs={120}>
<img

14
src-tauri/src/main.rs
View File

@@ -50,20 +50,22 @@ fn main() {
Err(_) => ClientBuilder::default().build(),
};
// Add some bootstrap relays
// #TODO: Pull bootstrap relays from user's settings
// Add bootstrap relays
client
.add_relay("wss://relay.nostr.net")
.await
.expect("Cannot connect to relay.nostr.net, please try again later.");
client
.add_relay("wss://bostr.nokotaro.work/")
.add_relay("wss://relay.damus.io")
.await
.expect("Cannot connect to bostr.nokotaro.work, please try again later.");
.expect("Cannot connect to relay.damus.io, please try again later.");
client
.add_relay("wss://purplepag.es/")
.add_relay_with_opts(
"wss://directory.yabu.me/",
RelayOptions::new().read(true).write(false),
)
.await
.expect("Cannot connect to purplepag.es, please try again later.");
.expect("Cannot connect to directory.yabu.me, please try again later.");
// Connect
client.connect().await;

5
src-tauri/src/tray.rs
View File

@@ -97,10 +97,9 @@ pub fn create_tray<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
} else {
#[cfg(target_os = "macos")]
let _ = WebviewWindowBuilder::new(app, "search", WebviewUrl::App(PathBuf::from("search")))
.title("Editor")
.inner_size(750., 470.)
.title("Search")
.inner_size(400., 600.)
.minimizable(false)
.resizable(false)
.title_bar_style(TitleBarStyle::Overlay)
.transparent(true)
.effects(WindowEffectsConfig {