reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat: update ui

Browse Source
This commit is contained in:
reya
2024-07-28 20:23:54 +07:00
parent fe0864c0ee
commit c791ea802c
9 changed files with 178 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src-tauri/src/commands/chat.rs
View File

@@ -54,9 +54,9 @@ pub async fn get_chats(db_only: bool, state: State<'_, Nostr>) -> Result<Vec<Str
let uniqs = events
.into_iter()
.sorted_by_key(|ev| Reverse(ev.created_at))
.filter(|ev| ev.pubkey != public_key)
.unique_by(|ev| ev.pubkey)
.sorted_by_key(|ev| Reverse(ev.created_at))
.map(|ev| ev.as_json())
.collect::<Vec<_>>();
@@ -102,9 +102,17 @@ pub async fn get_chat_messages(id: String, state: State<'_, Nostr>) -> Result<Ve
#[tauri::command]
#[specta::specta]
pub async fn get_inboxes(id: String, state: State<'_, Nostr>) -> Result<Vec<String>, String> {
pub async fn connect_inbox(id: String, state: State<'_, Nostr>) -> Result<Vec<String>, String> {
let client = &state.client;
let public_key = PublicKey::parse(&id).map_err(|e| e.to_string())?;
let mut inbox_relays = state.inbox_relays.lock().await;
if let Some(relays) = inbox_relays.get(&public_key) {
for relay in relays {
let _ = client.connect_relay(relay).await;
}
return Ok(relays.to_owned());
}
let inbox = Filter::new().kind(Kind::Custom(10050)).author(public_key).limit(1);
@@ -123,7 +131,6 @@ pub async fn get_inboxes(id: String, state: State<'_, Nostr>) -> Result<Vec<Stri
}
}
let mut inbox_relays = state.inbox_relays.lock().await;
inbox_relays.insert(public_key, relays.clone());
}
@@ -133,6 +140,22 @@ pub async fn get_inboxes(id: String, state: State<'_, Nostr>) -> Result<Vec<Stri
}
}
#[tauri::command]
#[specta::specta]
pub async fn disconnect_inbox(id: String, state: State<'_, Nostr>) -> Result<(), String> {
let client = &state.client;
let public_key = PublicKey::parse(&id).map_err(|e| e.to_string())?;
let inbox_relays = state.inbox_relays.lock().await;
if let Some(relays) = inbox_relays.get(&public_key) {
for relay in relays {
let _ = client.disconnect_relay(relay).await;
}
}
Ok(())
}
#[tauri::command]
#[specta::specta]
pub async fn send_message(

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

@@ -14,6 +14,7 @@ mod common;
pub struct Nostr {
client: Client,
contact_list: Mutex<Vec<Contact>>,
inbox_relays: Mutex<HashMap<PublicKey, Vec<String>>>,
}
@@ -28,7 +29,8 @@ fn main() {
get_metadata,
get_chats,
get_chat_messages,
get_inboxes,
connect_inbox,
disconnect_inbox,
send_message,
]);
@@ -84,7 +86,9 @@ fn main() {
let client = ClientBuilder::default().opts(opts).database(database).build();
// Add bootstrap relay
let _ = client.add_relays(["wss://relay.damus.io", "wss://relay.nostr.net"]).await;
let _ = client
.add_relays(["wss://relay.poster.place/", "wss://bostr.nokotaro.com/"])
.await;
// Connect
client.connect().await;
@@ -93,7 +97,11 @@ fn main() {
});
// Create global state
app.manage(Nostr { client, inbox_relays: Mutex::new(HashMap::new()) });
app.manage(Nostr {
client,
contact_list: Mutex::new(Vec::new()),
inbox_relays: Mutex::new(HashMap::new()),
});
Ok(())
})

12
src/commands.ts
View File

@@ -63,9 +63,17 @@ try {
else return { status: "error", error: e as any };
}
},
async getInboxes(id: string) : Promise<Result<string[], string>> {
async connectInbox(id: string) : Promise<Result<string[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_inboxes", { id }) };
return { status: "ok", data: await TAURI_INVOKE("connect_inbox", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async disconnectInbox(id: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("disconnect_inbox", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };

6
src/commons.ts
View File

@@ -3,6 +3,7 @@ import { type ClassValue, clsx } from "clsx";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import updateLocale from "dayjs/plugin/updateLocale";
import { nip19 } from "nostr-tools";
import { twMerge } from "tailwind-merge";
import { commands } from "./commands";
@@ -29,6 +30,7 @@ export function cn(...inputs: ClassValue[]) {
export function npub(pubkey: string, len: number) {
if (pubkey.length <= len) return pubkey;
const npub = pubkey.startsWith("npub1") ? pubkey : nip19.npubEncode(pubkey);
const separator = " ... ";
const sepLen = separator.length;
@@ -37,9 +39,9 @@ export function npub(pubkey: string, len: number) {
const backChars = Math.floor(charsToShow / 2);
return (
pubkey.substring(0, frontChars) +
npub.substring(0, frontChars) +
separator +
pubkey.substring(pubkey.length - backChars)
npub.substring(npub.length - backChars)
);
}

12
src/components/user/name.tsx
View File

@@ -1,14 +1,8 @@
import { cn } from "@/commons";
import { cn, npub } from "@/commons";
import { useUserContext } from "./provider";
import { useMemo } from "react";
import { uniqueNamesGenerator, names } from "unique-names-generator";
export function UserName({ className }: { className?: string }) {
const user = useUserContext();
const name = useMemo(
() => uniqueNamesGenerator({ dictionaries: [names] }),
[user.pubkey],
);
if (user.isLoading) {
return (
@@ -18,7 +12,9 @@ export function UserName({ className }: { className?: string }) {
return (
<div className={cn("max-w-[12rem] truncate", className)}>
{user.profile?.display_name || user.profile?.name || name}
{user.profile?.display_name ||
user.profile?.name ||
npub(user.pubkey, 16)}
</div>
);
}

18
src/routes.gen.ts
View File

@@ -22,6 +22,7 @@ const NostrConnectLazyImport = createFileRoute('/nostr-connect')()
const NewLazyImport = createFileRoute('/new')()
const ImportKeyLazyImport = createFileRoute('/import-key')()
const CreateAccountLazyImport = createFileRoute('/create-account')()
const ContactsLazyImport = createFileRoute('/contacts')()
const AccountChatsLazyImport = createFileRoute('/$account/chats')()
const AccountChatsNewLazyImport = createFileRoute('/$account/chats/new')()
@@ -49,6 +50,11 @@ const CreateAccountLazyRoute = CreateAccountLazyImport.update({
import('./routes/create-account.lazy').then((d) => d.Route),
)
const ContactsLazyRoute = ContactsLazyImport.update({
path: '/contacts',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/contacts.lazy').then((d) => d.Route))
const IndexRoute = IndexImport.update({
path: '/',
getParentRoute: () => rootRoute,
@@ -84,6 +90,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof IndexImport
parentRoute: typeof rootRoute
}
'/contacts': {
id: '/contacts'
path: '/contacts'
fullPath: '/contacts'
preLoaderRoute: typeof ContactsLazyImport
parentRoute: typeof rootRoute
}
'/create-account': {
id: '/create-account'
path: '/create-account'
@@ -140,6 +153,7 @@ declare module '@tanstack/react-router' {
export const routeTree = rootRoute.addChildren({
IndexRoute,
ContactsLazyRoute,
CreateAccountLazyRoute,
ImportKeyLazyRoute,
NewLazyRoute,
@@ -159,6 +173,7 @@ export const routeTree = rootRoute.addChildren({
"filePath": "__root.tsx",
"children": [
"/",
"/contacts",
"/create-account",
"/import-key",
"/new",
@@ -169,6 +184,9 @@ export const routeTree = rootRoute.addChildren({
"/": {
"filePath": "index.tsx"
},
"/contacts": {
"filePath": "contacts.lazy.tsx"
},
"/create-account": {
"filePath": "create-account.lazy.tsx"
},

66
src/routes/$account.chats.$id.tsx
View File

@@ -1,7 +1,8 @@
import { commands } from "@/commands";
import { cn, getReceivers, time } from "@/commons";
import { Spinner } from "@/components/spinner";
import { ArrowUp, Paperclip } from "@phosphor-icons/react";
import { User } from "@/components/user";
import { ArrowUp, DotsThree, Paperclip } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
@@ -20,11 +21,8 @@ type Payload = {
export const Route = createFileRoute("/$account/chats/$id")({
beforeLoad: async ({ params }) => {
const inboxRelays: string[] = await invoke("get_inboxes", {
id: params.id,
});
return { inboxRelays };
const inbox: string[] = await invoke("connect_inbox", { id: params.id });
return { inbox };
},
component: Screen,
pendingComponent: Pending,
@@ -41,13 +39,48 @@ function Pending() {
function Screen() {
return (
<div className="size-full flex flex-col">
<div className="h-11 shrink-0 border-b border-neutral-100 dark:border-neutral-800" />
<Header />
<List />
<Form />
</div>
);
}
function Header() {
const { account, id } = Route.useParams();
return (
<div
data-tauri-drag-region
className="h-12 shrink-0 flex items-center justify-between px-3.5 border-b border-neutral-100 dark:border-neutral-800"
>
<div>
<div className="flex -space-x-1 overflow-hidden">
<User.Provider pubkey={account}>
<User.Root className="size-7 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-7 rounded-full" />
</User.Root>
</User.Provider>
<User.Provider pubkey={id}>
<User.Root className="size-7 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-7 rounded-full" />
</User.Root>
</User.Provider>
</div>
</div>
<div className="flex items-center gap-2">
<div className="h-7 inline-flex items-center justify-center gap-1.5 px-2 rounded-full bg-neutral-100 dark:bg-neutral-900">
<span className="relative flex size-2">
<span className="animate-ping absolute inline-flex size-full rounded-full bg-teal-400 opacity-75" />
<span className="relative inline-flex rounded-full size-2 bg-teal-500" />
</span>
<div className="text-xs leading-tight">Connected</div>
</div>
</div>
</div>
);
}
function List() {
const { account, id } = Route.useParams();
const { isLoading, isError, data } = useQuery({
@@ -195,17 +228,14 @@ function List() {
function Form() {
const { id } = Route.useParams();
const { inboxRelays } = Route.useRouteContext();
const { inbox } = Route.useRouteContext();
const [newMessage, setNewMessage] = useState("");
const [isPending, startTransition] = useTransition();
// const queryClient = useQueryClient();
const submit = async () => {
startTransition(async () => {
if (!newMessage.length) return;
if (!inboxRelays?.length) return;
const res = await commands.sendMessage(id, newMessage);
@@ -220,27 +250,19 @@ function Form() {
return (
<div className="h-12 shrink-0 flex items-center justify-center px-3.5">
{!inboxRelays.length ? (
<div className="inline-flex items-center justify-center gap-2 h-9 w-fit px-3 bg-neutral-100 dark:bg-neutral-800 rounded-full text-sm">
{!inbox.length ? (
<div className="text-xs">
This user doesn't have inbox relays. You cannot send messages to them.
</div>
) : (
<div className="flex-1 flex items-center gap-2">
<div className="inline-flex gap-px">
<div className="inline-flex gap-1">
<div
title="Attach media"
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
>
<Paperclip className="size-5" />
</div>
{/*
<div
title="Inbox Relays"
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
>
<CloudArrowUp className="size-5" />
</div>
*/}
</div>
<input
placeholder="Message..."

66
src/routes/$account.chats.lazy.tsx
View File

@@ -1,13 +1,14 @@
import { commands } from "@/commands";
import { ago, cn } from "@/commons";
import { User } from "@/components/user";
import { Plus, UsersThree } from "@phosphor-icons/react";
import { DotsThree, Plus, UsersThree } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
import { listen } from "@tauri-apps/api/event";
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
import type { NostrEvent } from "nostr-tools";
import { useEffect } from "react";
import { useCallback, useEffect } from "react";
type Payload = {
event: string;
@@ -44,14 +45,14 @@ function Header() {
>
<div className="flex items-center gap-2">
<Link
to="/new"
className="size-7 rounded-md inline-flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:bg-black/10 dark:hover:bg-white/10"
to="/contacts"
className="size-7 rounded-lg inline-flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:bg-black/5 dark:hover:bg-white/5"
>
<UsersThree className="size-4" />
</Link>
<Link
to="/new"
className="h-7 w-12 rounded-t-md rounded-b-md rounded-l-md rounded-r inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
className="h-7 w-12 rounded-t-lg rounded-l-lg rounded-r inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
>
<Plus className="size-4" />
</Link>
@@ -82,7 +83,7 @@ function ChatList() {
});
useEffect(() => {
const unlisten = listen<Payload>("event", async (data) => {
const unlisten = listen<Payload>("new_chat", async (data) => {
const event: NostrEvent = JSON.parse(data.payload.event);
const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
@@ -99,6 +100,17 @@ function ChatList() {
return [event, ...prevEvents];
},
);
} else {
const index = chats.findIndex((item) => item.pubkey === event.pubkey);
const newEvents = [...chats];
if (index !== -1) {
newEvents[index] = {
...event,
};
await queryClient.setQueryData(["chats"], newEvents);
}
}
}
});
@@ -142,7 +154,7 @@ function ChatList() {
isActive ? "bg-black/5 dark:bg-white/5" : "",
)}
>
<User.Avatar className="size-9 rounded-full" />
<User.Avatar className="size-8 rounded-full" />
<div className="flex-1 inline-flex items-center justify-between text-sm">
<div className="inline-flex leading-tight">
<User.Name className="max-w-[8rem] truncate font-semibold" />
@@ -173,16 +185,50 @@ function ChatList() {
}
function CurrentUser() {
const { account } = Route.useParams();
const params = Route.useParams();
const navigate = Route.useNavigate();
const showContextMenu = useCallback(async (e: React.MouseEvent) => {
e.preventDefault();
const menuItems = await Promise.all([
MenuItem.new({
text: "Settings",
action: () => navigate({ to: "/" }),
}),
MenuItem.new({
text: "Feedback",
action: () => navigate({ to: "/" }),
}),
PredefinedMenuItem.new({ item: "Separator" }),
MenuItem.new({
text: "Switch account",
action: () => navigate({ to: "/" }),
}),
]);
const menu = await Menu.new({
items: menuItems,
});
await menu.popup().catch((e) => console.error(e));
}, []);
return (
<div className="shrink-0 h-12 flex items-center px-3.5 border-t border-black/5 dark:border-white/5">
<User.Provider pubkey={account}>
<div className="shrink-0 h-12 flex items-center justify-between px-3.5 border-t border-black/5 dark:border-white/5">
<User.Provider pubkey={params.account}>
<User.Root className="inline-flex items-center gap-2">
<User.Avatar className="size-8 rounded-full" />
<User.Name className="text-sm font-medium leading-tight" />
</User.Root>
</User.Provider>
<button
type="button"
onClick={(e) => showContextMenu(e)}
className="size-7 inline-flex items-center justify-center rounded-md text-neutral-700 dark:text-neutral-300 hover:bg-black/5 dark:hover:bg-white/5"
>
<DotsThree className="size-5" />
</button>
</div>
);
}

5
src/routes/contacts.lazy.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { createLazyFileRoute } from '@tanstack/react-router'
export const Route = createLazyFileRoute('/contacts')({
component: () => <div>Hello /contacts!</div>
})