feat: ensure user have inbox relays
This commit is contained in:
@@ -36,7 +36,7 @@ pub fn set_bootstrap_relays(relays: String, app: tauri::AppHandle) -> Result<(),
|
|||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
#[specta::specta]
|
#[specta::specta]
|
||||||
pub async fn collect_inbox_relays(
|
pub async fn get_inbox_relays(
|
||||||
user_id: String,
|
user_id: String,
|
||||||
state: State<'_, Nostr>,
|
state: State<'_, Nostr>,
|
||||||
) -> Result<Vec<String>, String> {
|
) -> Result<Vec<String>, String> {
|
||||||
@@ -69,6 +69,27 @@ pub async fn collect_inbox_relays(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
#[specta::specta]
|
||||||
|
pub async fn ensure_inbox_relays(
|
||||||
|
user_id: String,
|
||||||
|
state: State<'_, Nostr>,
|
||||||
|
) -> Result<Vec<String>, String> {
|
||||||
|
let public_key = PublicKey::parse(user_id).map_err(|e| e.to_string())?;
|
||||||
|
let relays = state.inbox_relays.lock().await;
|
||||||
|
|
||||||
|
match relays.get(&public_key) {
|
||||||
|
Some(relays) => {
|
||||||
|
if relays.is_empty() {
|
||||||
|
Err("404".into())
|
||||||
|
} else {
|
||||||
|
Ok(relays.to_owned())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
None => Err("404".into()),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
#[specta::specta]
|
#[specta::specta]
|
||||||
pub async fn set_inbox_relays(relays: Vec<String>, state: State<'_, Nostr>) -> Result<(), String> {
|
pub async fn set_inbox_relays(relays: Vec<String>, state: State<'_, Nostr>) -> Result<(), String> {
|
||||||
|
|||||||
@@ -35,8 +35,9 @@ fn main() {
|
|||||||
let builder = Builder::<tauri::Wry>::new().commands(collect_commands![
|
let builder = Builder::<tauri::Wry>::new().commands(collect_commands![
|
||||||
get_bootstrap_relays,
|
get_bootstrap_relays,
|
||||||
set_bootstrap_relays,
|
set_bootstrap_relays,
|
||||||
collect_inbox_relays,
|
get_inbox_relays,
|
||||||
set_inbox_relays,
|
set_inbox_relays,
|
||||||
|
ensure_inbox_relays,
|
||||||
connect_inbox_relays,
|
connect_inbox_relays,
|
||||||
disconnect_inbox_relays,
|
disconnect_inbox_relays,
|
||||||
login,
|
login,
|
||||||
|
|||||||
@@ -21,9 +21,9 @@ async setBootstrapRelays(relays: string) : Promise<Result<null, string>> {
|
|||||||
else return { status: "error", error: e as any };
|
else return { status: "error", error: e as any };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async collectInboxRelays(userId: string) : Promise<Result<string[], string>> {
|
async getInboxRelays(userId: string) : Promise<Result<string[], string>> {
|
||||||
try {
|
try {
|
||||||
return { status: "ok", data: await TAURI_INVOKE("collect_inbox_relays", { userId }) };
|
return { status: "ok", data: await TAURI_INVOKE("get_inbox_relays", { userId }) };
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if(e instanceof Error) throw e;
|
if(e instanceof Error) throw e;
|
||||||
else return { status: "error", error: e as any };
|
else return { status: "error", error: e as any };
|
||||||
@@ -37,6 +37,14 @@ async setInboxRelays(relays: string[]) : Promise<Result<null, string>> {
|
|||||||
else return { status: "error", error: e as any };
|
else return { status: "error", error: e as any };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async ensureInboxRelays(userId: string) : Promise<Result<string[], string>> {
|
||||||
|
try {
|
||||||
|
return { status: "ok", data: await TAURI_INVOKE("ensure_inbox_relays", { userId }) };
|
||||||
|
} catch (e) {
|
||||||
|
if(e instanceof Error) throw e;
|
||||||
|
else return { status: "error", error: e as any };
|
||||||
|
}
|
||||||
|
},
|
||||||
async connectInboxRelays(userId: string, ignoreCache: boolean) : Promise<Result<string[], string>> {
|
async connectInboxRelays(userId: string, ignoreCache: boolean) : Promise<Result<string[], string>> {
|
||||||
try {
|
try {
|
||||||
return { status: "ok", data: await TAURI_INVOKE("connect_inbox_relays", { userId, ignoreCache }) };
|
return { status: "ok", data: await TAURI_INVOKE("connect_inbox_relays", { userId, ignoreCache }) };
|
||||||
|
|||||||
@@ -13,24 +13,35 @@ import { createFileRoute } from '@tanstack/react-router'
|
|||||||
// Import Routes
|
// Import Routes
|
||||||
|
|
||||||
import { Route as rootRoute } from './routes/__root'
|
import { Route as rootRoute } from './routes/__root'
|
||||||
|
import { Route as InboxRelaysImport } from './routes/inbox-relays'
|
||||||
import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
|
import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
|
||||||
import { Route as IndexImport } from './routes/index'
|
import { Route as IndexImport } from './routes/index'
|
||||||
import { Route as AuthNewImport } from './routes/auth/new'
|
import { Route as AuthNewImport } from './routes/auth/new'
|
||||||
import { Route as AuthImportImport } from './routes/auth/import'
|
import { Route as AuthImportImport } from './routes/auth/import'
|
||||||
import { Route as AuthConnectImport } from './routes/auth/connect'
|
import { Route as AuthConnectImport } from './routes/auth/connect'
|
||||||
import { Route as AccountRelaysImport } from './routes/$account.relays'
|
import { Route as AccountLayoutImport } from './routes/$account/_layout'
|
||||||
import { Route as AccountContactsImport } from './routes/$account.contacts'
|
import { Route as AccountLayoutContactsImport } from './routes/$account/_layout/contacts'
|
||||||
import { Route as AccountChatsIdImport } from './routes/$account.chats.$id'
|
import { Route as AccountLayoutChatsIdImport } from './routes/$account/_layout/chats.$id'
|
||||||
|
|
||||||
// Create Virtual Routes
|
// Create Virtual Routes
|
||||||
|
|
||||||
|
const AccountImport = createFileRoute('/$account')()
|
||||||
const ResetLazyImport = createFileRoute('/reset')()
|
const ResetLazyImport = createFileRoute('/reset')()
|
||||||
const NewLazyImport = createFileRoute('/new')()
|
const NewLazyImport = createFileRoute('/new')()
|
||||||
const AccountChatsLazyImport = createFileRoute('/$account/chats')()
|
const AccountLayoutChatsLazyImport = createFileRoute(
|
||||||
const AccountChatsNewLazyImport = createFileRoute('/$account/chats/new')()
|
'/$account/_layout/chats',
|
||||||
|
)()
|
||||||
|
const AccountLayoutChatsNewLazyImport = createFileRoute(
|
||||||
|
'/$account/_layout/chats/new',
|
||||||
|
)()
|
||||||
|
|
||||||
// Create/Update Routes
|
// Create/Update Routes
|
||||||
|
|
||||||
|
const AccountRoute = AccountImport.update({
|
||||||
|
path: '/$account',
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
} as any)
|
||||||
|
|
||||||
const ResetLazyRoute = ResetLazyImport.update({
|
const ResetLazyRoute = ResetLazyImport.update({
|
||||||
path: '/reset',
|
path: '/reset',
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
@@ -41,6 +52,11 @@ const NewLazyRoute = NewLazyImport.update({
|
|||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route))
|
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route))
|
||||||
|
|
||||||
|
const InboxRelaysRoute = InboxRelaysImport.update({
|
||||||
|
path: '/inbox-relays',
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
} as any).lazy(() => import('./routes/inbox-relays.lazy').then((d) => d.Route))
|
||||||
|
|
||||||
const BootstrapRelaysRoute = BootstrapRelaysImport.update({
|
const BootstrapRelaysRoute = BootstrapRelaysImport.update({
|
||||||
path: '/bootstrap-relays',
|
path: '/bootstrap-relays',
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
@@ -53,13 +69,6 @@ const IndexRoute = IndexImport.update({
|
|||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
|
} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
|
||||||
|
|
||||||
const AccountChatsLazyRoute = AccountChatsLazyImport.update({
|
|
||||||
path: '/$account/chats',
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
} as any).lazy(() =>
|
|
||||||
import('./routes/$account.chats.lazy').then((d) => d.Route),
|
|
||||||
)
|
|
||||||
|
|
||||||
const AuthNewRoute = AuthNewImport.update({
|
const AuthNewRoute = AuthNewImport.update({
|
||||||
path: '/auth/new',
|
path: '/auth/new',
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
@@ -75,32 +84,37 @@ const AuthConnectRoute = AuthConnectImport.update({
|
|||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => rootRoute,
|
||||||
} as any)
|
} as any)
|
||||||
|
|
||||||
const AccountRelaysRoute = AccountRelaysImport.update({
|
const AccountLayoutRoute = AccountLayoutImport.update({
|
||||||
path: '/$account/relays',
|
id: '/_layout',
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => AccountRoute,
|
||||||
|
} as any)
|
||||||
|
|
||||||
|
const AccountLayoutChatsLazyRoute = AccountLayoutChatsLazyImport.update({
|
||||||
|
path: '/chats',
|
||||||
|
getParentRoute: () => AccountLayoutRoute,
|
||||||
} as any).lazy(() =>
|
} as any).lazy(() =>
|
||||||
import('./routes/$account.relays.lazy').then((d) => d.Route),
|
import('./routes/$account/_layout/chats.lazy').then((d) => d.Route),
|
||||||
)
|
)
|
||||||
|
|
||||||
const AccountContactsRoute = AccountContactsImport.update({
|
const AccountLayoutContactsRoute = AccountLayoutContactsImport.update({
|
||||||
path: '/$account/contacts',
|
path: '/contacts',
|
||||||
getParentRoute: () => rootRoute,
|
getParentRoute: () => AccountLayoutRoute,
|
||||||
} as any).lazy(() =>
|
} as any).lazy(() =>
|
||||||
import('./routes/$account.contacts.lazy').then((d) => d.Route),
|
import('./routes/$account/_layout/contacts.lazy').then((d) => d.Route),
|
||||||
)
|
)
|
||||||
|
|
||||||
const AccountChatsNewLazyRoute = AccountChatsNewLazyImport.update({
|
const AccountLayoutChatsNewLazyRoute = AccountLayoutChatsNewLazyImport.update({
|
||||||
path: '/new',
|
path: '/new',
|
||||||
getParentRoute: () => AccountChatsLazyRoute,
|
getParentRoute: () => AccountLayoutChatsLazyRoute,
|
||||||
} as any).lazy(() =>
|
} as any).lazy(() =>
|
||||||
import('./routes/$account.chats.new.lazy').then((d) => d.Route),
|
import('./routes/$account/_layout/chats.new.lazy').then((d) => d.Route),
|
||||||
)
|
)
|
||||||
|
|
||||||
const AccountChatsIdRoute = AccountChatsIdImport.update({
|
const AccountLayoutChatsIdRoute = AccountLayoutChatsIdImport.update({
|
||||||
path: '/$id',
|
path: '/$id',
|
||||||
getParentRoute: () => AccountChatsLazyRoute,
|
getParentRoute: () => AccountLayoutChatsLazyRoute,
|
||||||
} as any).lazy(() =>
|
} as any).lazy(() =>
|
||||||
import('./routes/$account.chats.$id.lazy').then((d) => d.Route),
|
import('./routes/$account/_layout/chats.$id.lazy').then((d) => d.Route),
|
||||||
)
|
)
|
||||||
|
|
||||||
// Populate the FileRoutesByPath interface
|
// Populate the FileRoutesByPath interface
|
||||||
@@ -121,6 +135,13 @@ declare module '@tanstack/react-router' {
|
|||||||
preLoaderRoute: typeof BootstrapRelaysImport
|
preLoaderRoute: typeof BootstrapRelaysImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof rootRoute
|
||||||
}
|
}
|
||||||
|
'/inbox-relays': {
|
||||||
|
id: '/inbox-relays'
|
||||||
|
path: '/inbox-relays'
|
||||||
|
fullPath: '/inbox-relays'
|
||||||
|
preLoaderRoute: typeof InboxRelaysImport
|
||||||
|
parentRoute: typeof rootRoute
|
||||||
|
}
|
||||||
'/new': {
|
'/new': {
|
||||||
id: '/new'
|
id: '/new'
|
||||||
path: '/new'
|
path: '/new'
|
||||||
@@ -135,19 +156,19 @@ declare module '@tanstack/react-router' {
|
|||||||
preLoaderRoute: typeof ResetLazyImport
|
preLoaderRoute: typeof ResetLazyImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof rootRoute
|
||||||
}
|
}
|
||||||
'/$account/contacts': {
|
'/$account': {
|
||||||
id: '/$account/contacts'
|
id: '/$account'
|
||||||
path: '/$account/contacts'
|
path: '/$account'
|
||||||
fullPath: '/$account/contacts'
|
fullPath: '/$account'
|
||||||
preLoaderRoute: typeof AccountContactsImport
|
preLoaderRoute: typeof AccountImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof rootRoute
|
||||||
}
|
}
|
||||||
'/$account/relays': {
|
'/$account/_layout': {
|
||||||
id: '/$account/relays'
|
id: '/$account/_layout'
|
||||||
path: '/$account/relays'
|
path: '/$account'
|
||||||
fullPath: '/$account/relays'
|
fullPath: '/$account'
|
||||||
preLoaderRoute: typeof AccountRelaysImport
|
preLoaderRoute: typeof AccountLayoutImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof AccountRoute
|
||||||
}
|
}
|
||||||
'/auth/connect': {
|
'/auth/connect': {
|
||||||
id: '/auth/connect'
|
id: '/auth/connect'
|
||||||
@@ -170,89 +191,128 @@ declare module '@tanstack/react-router' {
|
|||||||
preLoaderRoute: typeof AuthNewImport
|
preLoaderRoute: typeof AuthNewImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof rootRoute
|
||||||
}
|
}
|
||||||
'/$account/chats': {
|
'/$account/_layout/contacts': {
|
||||||
id: '/$account/chats'
|
id: '/$account/_layout/contacts'
|
||||||
path: '/$account/chats'
|
path: '/contacts'
|
||||||
fullPath: '/$account/chats'
|
fullPath: '/$account/contacts'
|
||||||
preLoaderRoute: typeof AccountChatsLazyImport
|
preLoaderRoute: typeof AccountLayoutContactsImport
|
||||||
parentRoute: typeof rootRoute
|
parentRoute: typeof AccountLayoutImport
|
||||||
}
|
}
|
||||||
'/$account/chats/$id': {
|
'/$account/_layout/chats': {
|
||||||
id: '/$account/chats/$id'
|
id: '/$account/_layout/chats'
|
||||||
|
path: '/chats'
|
||||||
|
fullPath: '/$account/chats'
|
||||||
|
preLoaderRoute: typeof AccountLayoutChatsLazyImport
|
||||||
|
parentRoute: typeof AccountLayoutImport
|
||||||
|
}
|
||||||
|
'/$account/_layout/chats/$id': {
|
||||||
|
id: '/$account/_layout/chats/$id'
|
||||||
path: '/$id'
|
path: '/$id'
|
||||||
fullPath: '/$account/chats/$id'
|
fullPath: '/$account/chats/$id'
|
||||||
preLoaderRoute: typeof AccountChatsIdImport
|
preLoaderRoute: typeof AccountLayoutChatsIdImport
|
||||||
parentRoute: typeof AccountChatsLazyImport
|
parentRoute: typeof AccountLayoutChatsLazyImport
|
||||||
}
|
}
|
||||||
'/$account/chats/new': {
|
'/$account/_layout/chats/new': {
|
||||||
id: '/$account/chats/new'
|
id: '/$account/_layout/chats/new'
|
||||||
path: '/new'
|
path: '/new'
|
||||||
fullPath: '/$account/chats/new'
|
fullPath: '/$account/chats/new'
|
||||||
preLoaderRoute: typeof AccountChatsNewLazyImport
|
preLoaderRoute: typeof AccountLayoutChatsNewLazyImport
|
||||||
parentRoute: typeof AccountChatsLazyImport
|
parentRoute: typeof AccountLayoutChatsLazyImport
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create and export the route tree
|
// Create and export the route tree
|
||||||
|
|
||||||
interface AccountChatsLazyRouteChildren {
|
interface AccountLayoutChatsLazyRouteChildren {
|
||||||
AccountChatsIdRoute: typeof AccountChatsIdRoute
|
AccountLayoutChatsIdRoute: typeof AccountLayoutChatsIdRoute
|
||||||
AccountChatsNewLazyRoute: typeof AccountChatsNewLazyRoute
|
AccountLayoutChatsNewLazyRoute: typeof AccountLayoutChatsNewLazyRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
const AccountChatsLazyRouteChildren: AccountChatsLazyRouteChildren = {
|
const AccountLayoutChatsLazyRouteChildren: AccountLayoutChatsLazyRouteChildren =
|
||||||
AccountChatsIdRoute: AccountChatsIdRoute,
|
{
|
||||||
AccountChatsNewLazyRoute: AccountChatsNewLazyRoute,
|
AccountLayoutChatsIdRoute: AccountLayoutChatsIdRoute,
|
||||||
|
AccountLayoutChatsNewLazyRoute: AccountLayoutChatsNewLazyRoute,
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountLayoutChatsLazyRouteWithChildren =
|
||||||
|
AccountLayoutChatsLazyRoute._addFileChildren(
|
||||||
|
AccountLayoutChatsLazyRouteChildren,
|
||||||
|
)
|
||||||
|
|
||||||
|
interface AccountLayoutRouteChildren {
|
||||||
|
AccountLayoutContactsRoute: typeof AccountLayoutContactsRoute
|
||||||
|
AccountLayoutChatsLazyRoute: typeof AccountLayoutChatsLazyRouteWithChildren
|
||||||
}
|
}
|
||||||
|
|
||||||
const AccountChatsLazyRouteWithChildren =
|
const AccountLayoutRouteChildren: AccountLayoutRouteChildren = {
|
||||||
AccountChatsLazyRoute._addFileChildren(AccountChatsLazyRouteChildren)
|
AccountLayoutContactsRoute: AccountLayoutContactsRoute,
|
||||||
|
AccountLayoutChatsLazyRoute: AccountLayoutChatsLazyRouteWithChildren,
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountLayoutRouteWithChildren = AccountLayoutRoute._addFileChildren(
|
||||||
|
AccountLayoutRouteChildren,
|
||||||
|
)
|
||||||
|
|
||||||
|
interface AccountRouteChildren {
|
||||||
|
AccountLayoutRoute: typeof AccountLayoutRouteWithChildren
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountRouteChildren: AccountRouteChildren = {
|
||||||
|
AccountLayoutRoute: AccountLayoutRouteWithChildren,
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountRouteWithChildren =
|
||||||
|
AccountRoute._addFileChildren(AccountRouteChildren)
|
||||||
|
|
||||||
export interface FileRoutesByFullPath {
|
export interface FileRoutesByFullPath {
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||||
|
'/inbox-relays': typeof InboxRelaysRoute
|
||||||
'/new': typeof NewLazyRoute
|
'/new': typeof NewLazyRoute
|
||||||
'/reset': typeof ResetLazyRoute
|
'/reset': typeof ResetLazyRoute
|
||||||
'/$account/contacts': typeof AccountContactsRoute
|
'/$account': typeof AccountLayoutRouteWithChildren
|
||||||
'/$account/relays': typeof AccountRelaysRoute
|
|
||||||
'/auth/connect': typeof AuthConnectRoute
|
'/auth/connect': typeof AuthConnectRoute
|
||||||
'/auth/import': typeof AuthImportRoute
|
'/auth/import': typeof AuthImportRoute
|
||||||
'/auth/new': typeof AuthNewRoute
|
'/auth/new': typeof AuthNewRoute
|
||||||
'/$account/chats': typeof AccountChatsLazyRouteWithChildren
|
'/$account/contacts': typeof AccountLayoutContactsRoute
|
||||||
'/$account/chats/$id': typeof AccountChatsIdRoute
|
'/$account/chats': typeof AccountLayoutChatsLazyRouteWithChildren
|
||||||
'/$account/chats/new': typeof AccountChatsNewLazyRoute
|
'/$account/chats/$id': typeof AccountLayoutChatsIdRoute
|
||||||
|
'/$account/chats/new': typeof AccountLayoutChatsNewLazyRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FileRoutesByTo {
|
export interface FileRoutesByTo {
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||||
|
'/inbox-relays': typeof InboxRelaysRoute
|
||||||
'/new': typeof NewLazyRoute
|
'/new': typeof NewLazyRoute
|
||||||
'/reset': typeof ResetLazyRoute
|
'/reset': typeof ResetLazyRoute
|
||||||
'/$account/contacts': typeof AccountContactsRoute
|
'/$account': typeof AccountLayoutRouteWithChildren
|
||||||
'/$account/relays': typeof AccountRelaysRoute
|
|
||||||
'/auth/connect': typeof AuthConnectRoute
|
'/auth/connect': typeof AuthConnectRoute
|
||||||
'/auth/import': typeof AuthImportRoute
|
'/auth/import': typeof AuthImportRoute
|
||||||
'/auth/new': typeof AuthNewRoute
|
'/auth/new': typeof AuthNewRoute
|
||||||
'/$account/chats': typeof AccountChatsLazyRouteWithChildren
|
'/$account/contacts': typeof AccountLayoutContactsRoute
|
||||||
'/$account/chats/$id': typeof AccountChatsIdRoute
|
'/$account/chats': typeof AccountLayoutChatsLazyRouteWithChildren
|
||||||
'/$account/chats/new': typeof AccountChatsNewLazyRoute
|
'/$account/chats/$id': typeof AccountLayoutChatsIdRoute
|
||||||
|
'/$account/chats/new': typeof AccountLayoutChatsNewLazyRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FileRoutesById {
|
export interface FileRoutesById {
|
||||||
__root__: typeof rootRoute
|
__root__: typeof rootRoute
|
||||||
'/': typeof IndexRoute
|
'/': typeof IndexRoute
|
||||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||||
|
'/inbox-relays': typeof InboxRelaysRoute
|
||||||
'/new': typeof NewLazyRoute
|
'/new': typeof NewLazyRoute
|
||||||
'/reset': typeof ResetLazyRoute
|
'/reset': typeof ResetLazyRoute
|
||||||
'/$account/contacts': typeof AccountContactsRoute
|
'/$account': typeof AccountRouteWithChildren
|
||||||
'/$account/relays': typeof AccountRelaysRoute
|
'/$account/_layout': typeof AccountLayoutRouteWithChildren
|
||||||
'/auth/connect': typeof AuthConnectRoute
|
'/auth/connect': typeof AuthConnectRoute
|
||||||
'/auth/import': typeof AuthImportRoute
|
'/auth/import': typeof AuthImportRoute
|
||||||
'/auth/new': typeof AuthNewRoute
|
'/auth/new': typeof AuthNewRoute
|
||||||
'/$account/chats': typeof AccountChatsLazyRouteWithChildren
|
'/$account/_layout/contacts': typeof AccountLayoutContactsRoute
|
||||||
'/$account/chats/$id': typeof AccountChatsIdRoute
|
'/$account/_layout/chats': typeof AccountLayoutChatsLazyRouteWithChildren
|
||||||
'/$account/chats/new': typeof AccountChatsNewLazyRoute
|
'/$account/_layout/chats/$id': typeof AccountLayoutChatsIdRoute
|
||||||
|
'/$account/_layout/chats/new': typeof AccountLayoutChatsNewLazyRoute
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FileRouteTypes {
|
export interface FileRouteTypes {
|
||||||
@@ -260,13 +320,14 @@ export interface FileRouteTypes {
|
|||||||
fullPaths:
|
fullPaths:
|
||||||
| '/'
|
| '/'
|
||||||
| '/bootstrap-relays'
|
| '/bootstrap-relays'
|
||||||
|
| '/inbox-relays'
|
||||||
| '/new'
|
| '/new'
|
||||||
| '/reset'
|
| '/reset'
|
||||||
| '/$account/contacts'
|
| '/$account'
|
||||||
| '/$account/relays'
|
|
||||||
| '/auth/connect'
|
| '/auth/connect'
|
||||||
| '/auth/import'
|
| '/auth/import'
|
||||||
| '/auth/new'
|
| '/auth/new'
|
||||||
|
| '/$account/contacts'
|
||||||
| '/$account/chats'
|
| '/$account/chats'
|
||||||
| '/$account/chats/$id'
|
| '/$account/chats/$id'
|
||||||
| '/$account/chats/new'
|
| '/$account/chats/new'
|
||||||
@@ -274,13 +335,14 @@ export interface FileRouteTypes {
|
|||||||
to:
|
to:
|
||||||
| '/'
|
| '/'
|
||||||
| '/bootstrap-relays'
|
| '/bootstrap-relays'
|
||||||
|
| '/inbox-relays'
|
||||||
| '/new'
|
| '/new'
|
||||||
| '/reset'
|
| '/reset'
|
||||||
| '/$account/contacts'
|
| '/$account'
|
||||||
| '/$account/relays'
|
|
||||||
| '/auth/connect'
|
| '/auth/connect'
|
||||||
| '/auth/import'
|
| '/auth/import'
|
||||||
| '/auth/new'
|
| '/auth/new'
|
||||||
|
| '/$account/contacts'
|
||||||
| '/$account/chats'
|
| '/$account/chats'
|
||||||
| '/$account/chats/$id'
|
| '/$account/chats/$id'
|
||||||
| '/$account/chats/new'
|
| '/$account/chats/new'
|
||||||
@@ -288,43 +350,43 @@ export interface FileRouteTypes {
|
|||||||
| '__root__'
|
| '__root__'
|
||||||
| '/'
|
| '/'
|
||||||
| '/bootstrap-relays'
|
| '/bootstrap-relays'
|
||||||
|
| '/inbox-relays'
|
||||||
| '/new'
|
| '/new'
|
||||||
| '/reset'
|
| '/reset'
|
||||||
| '/$account/contacts'
|
| '/$account'
|
||||||
| '/$account/relays'
|
| '/$account/_layout'
|
||||||
| '/auth/connect'
|
| '/auth/connect'
|
||||||
| '/auth/import'
|
| '/auth/import'
|
||||||
| '/auth/new'
|
| '/auth/new'
|
||||||
| '/$account/chats'
|
| '/$account/_layout/contacts'
|
||||||
| '/$account/chats/$id'
|
| '/$account/_layout/chats'
|
||||||
| '/$account/chats/new'
|
| '/$account/_layout/chats/$id'
|
||||||
|
| '/$account/_layout/chats/new'
|
||||||
fileRoutesById: FileRoutesById
|
fileRoutesById: FileRoutesById
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RootRouteChildren {
|
export interface RootRouteChildren {
|
||||||
IndexRoute: typeof IndexRoute
|
IndexRoute: typeof IndexRoute
|
||||||
BootstrapRelaysRoute: typeof BootstrapRelaysRoute
|
BootstrapRelaysRoute: typeof BootstrapRelaysRoute
|
||||||
|
InboxRelaysRoute: typeof InboxRelaysRoute
|
||||||
NewLazyRoute: typeof NewLazyRoute
|
NewLazyRoute: typeof NewLazyRoute
|
||||||
ResetLazyRoute: typeof ResetLazyRoute
|
ResetLazyRoute: typeof ResetLazyRoute
|
||||||
AccountContactsRoute: typeof AccountContactsRoute
|
AccountRoute: typeof AccountRouteWithChildren
|
||||||
AccountRelaysRoute: typeof AccountRelaysRoute
|
|
||||||
AuthConnectRoute: typeof AuthConnectRoute
|
AuthConnectRoute: typeof AuthConnectRoute
|
||||||
AuthImportRoute: typeof AuthImportRoute
|
AuthImportRoute: typeof AuthImportRoute
|
||||||
AuthNewRoute: typeof AuthNewRoute
|
AuthNewRoute: typeof AuthNewRoute
|
||||||
AccountChatsLazyRoute: typeof AccountChatsLazyRouteWithChildren
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const rootRouteChildren: RootRouteChildren = {
|
const rootRouteChildren: RootRouteChildren = {
|
||||||
IndexRoute: IndexRoute,
|
IndexRoute: IndexRoute,
|
||||||
BootstrapRelaysRoute: BootstrapRelaysRoute,
|
BootstrapRelaysRoute: BootstrapRelaysRoute,
|
||||||
|
InboxRelaysRoute: InboxRelaysRoute,
|
||||||
NewLazyRoute: NewLazyRoute,
|
NewLazyRoute: NewLazyRoute,
|
||||||
ResetLazyRoute: ResetLazyRoute,
|
ResetLazyRoute: ResetLazyRoute,
|
||||||
AccountContactsRoute: AccountContactsRoute,
|
AccountRoute: AccountRouteWithChildren,
|
||||||
AccountRelaysRoute: AccountRelaysRoute,
|
|
||||||
AuthConnectRoute: AuthConnectRoute,
|
AuthConnectRoute: AuthConnectRoute,
|
||||||
AuthImportRoute: AuthImportRoute,
|
AuthImportRoute: AuthImportRoute,
|
||||||
AuthNewRoute: AuthNewRoute,
|
AuthNewRoute: AuthNewRoute,
|
||||||
AccountChatsLazyRoute: AccountChatsLazyRouteWithChildren,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const routeTree = rootRoute
|
export const routeTree = rootRoute
|
||||||
@@ -341,14 +403,13 @@ export const routeTree = rootRoute
|
|||||||
"children": [
|
"children": [
|
||||||
"/",
|
"/",
|
||||||
"/bootstrap-relays",
|
"/bootstrap-relays",
|
||||||
|
"/inbox-relays",
|
||||||
"/new",
|
"/new",
|
||||||
"/reset",
|
"/reset",
|
||||||
"/$account/contacts",
|
"/$account",
|
||||||
"/$account/relays",
|
|
||||||
"/auth/connect",
|
"/auth/connect",
|
||||||
"/auth/import",
|
"/auth/import",
|
||||||
"/auth/new",
|
"/auth/new"
|
||||||
"/$account/chats"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"/": {
|
"/": {
|
||||||
@@ -357,17 +418,28 @@ export const routeTree = rootRoute
|
|||||||
"/bootstrap-relays": {
|
"/bootstrap-relays": {
|
||||||
"filePath": "bootstrap-relays.tsx"
|
"filePath": "bootstrap-relays.tsx"
|
||||||
},
|
},
|
||||||
|
"/inbox-relays": {
|
||||||
|
"filePath": "inbox-relays.tsx"
|
||||||
|
},
|
||||||
"/new": {
|
"/new": {
|
||||||
"filePath": "new.lazy.tsx"
|
"filePath": "new.lazy.tsx"
|
||||||
},
|
},
|
||||||
"/reset": {
|
"/reset": {
|
||||||
"filePath": "reset.lazy.tsx"
|
"filePath": "reset.lazy.tsx"
|
||||||
},
|
},
|
||||||
"/$account/contacts": {
|
"/$account": {
|
||||||
"filePath": "$account.contacts.tsx"
|
"filePath": "$account",
|
||||||
|
"children": [
|
||||||
|
"/$account/_layout"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"/$account/relays": {
|
"/$account/_layout": {
|
||||||
"filePath": "$account.relays.tsx"
|
"filePath": "$account/_layout.tsx",
|
||||||
|
"parent": "/$account",
|
||||||
|
"children": [
|
||||||
|
"/$account/_layout/contacts",
|
||||||
|
"/$account/_layout/chats"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"/auth/connect": {
|
"/auth/connect": {
|
||||||
"filePath": "auth/connect.tsx"
|
"filePath": "auth/connect.tsx"
|
||||||
@@ -378,20 +450,25 @@ export const routeTree = rootRoute
|
|||||||
"/auth/new": {
|
"/auth/new": {
|
||||||
"filePath": "auth/new.tsx"
|
"filePath": "auth/new.tsx"
|
||||||
},
|
},
|
||||||
"/$account/chats": {
|
"/$account/_layout/contacts": {
|
||||||
"filePath": "$account.chats.lazy.tsx",
|
"filePath": "$account/_layout/contacts.tsx",
|
||||||
|
"parent": "/$account/_layout"
|
||||||
|
},
|
||||||
|
"/$account/_layout/chats": {
|
||||||
|
"filePath": "$account/_layout/chats.lazy.tsx",
|
||||||
|
"parent": "/$account/_layout",
|
||||||
"children": [
|
"children": [
|
||||||
"/$account/chats/$id",
|
"/$account/_layout/chats/$id",
|
||||||
"/$account/chats/new"
|
"/$account/_layout/chats/new"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"/$account/chats/$id": {
|
"/$account/_layout/chats/$id": {
|
||||||
"filePath": "$account.chats.$id.tsx",
|
"filePath": "$account/_layout/chats.$id.tsx",
|
||||||
"parent": "/$account/chats"
|
"parent": "/$account/_layout/chats"
|
||||||
},
|
},
|
||||||
"/$account/chats/new": {
|
"/$account/_layout/chats/new": {
|
||||||
"filePath": "$account.chats.new.lazy.tsx",
|
"filePath": "$account/_layout/chats.new.lazy.tsx",
|
||||||
"parent": "/$account/chats"
|
"parent": "/$account/_layout/chats"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,377 +0,0 @@
|
|||||||
import { commands } from "@/commands";
|
|
||||||
import { cn, getReceivers, groupEventByDate, time, upload } from "@/commons";
|
|
||||||
import { Spinner } from "@/components/spinner";
|
|
||||||
import { User } from "@/components/user";
|
|
||||||
import { CoopIcon } from "@/icons/coop";
|
|
||||||
import { ArrowUp, Paperclip, X } from "@phosphor-icons/react";
|
|
||||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
||||||
import { listen } from "@tauri-apps/api/event";
|
|
||||||
import { message } from "@tauri-apps/plugin-dialog";
|
|
||||||
import type { NostrEvent } from "nostr-tools";
|
|
||||||
import {
|
|
||||||
type Dispatch,
|
|
||||||
type SetStateAction,
|
|
||||||
useCallback,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
useTransition,
|
|
||||||
} from "react";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
import { Virtualizer, type VirtualizerHandle } from "virtua";
|
|
||||||
|
|
||||||
type EventPayload = {
|
|
||||||
event: string;
|
|
||||||
sender: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/$account/chats/$id")({
|
|
||||||
component: Screen,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Screen() {
|
|
||||||
return (
|
|
||||||
<div className="size-full flex flex-col">
|
|
||||||
<Header />
|
|
||||||
<List />
|
|
||||||
<Form />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Header() {
|
|
||||||
const { account, id } = Route.useParams();
|
|
||||||
const { platform } = Route.useRouteContext();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className={cn(
|
|
||||||
"h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800",
|
|
||||||
platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="z-[200]">
|
|
||||||
<div className="flex -space-x-1 overflow-hidden">
|
|
||||||
<User.Provider pubkey={account}>
|
|
||||||
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
|
|
||||||
<User.Avatar className="size-8 rounded-full" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
<User.Provider pubkey={id}>
|
|
||||||
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
|
|
||||||
<User.Avatar className="size-8 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({
|
|
||||||
queryKey: ["chats", id],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await commands.getChatMessages(id);
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
const raw = res.data;
|
|
||||||
const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
|
|
||||||
|
|
||||||
return events;
|
|
||||||
} else {
|
|
||||||
throw new Error(res.error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
select: (data) => {
|
|
||||||
const groups = groupEventByDate(data);
|
|
||||||
return Object.entries(groups).reverse();
|
|
||||||
},
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
|
||||||
const ref = useRef<VirtualizerHandle>(null);
|
|
||||||
const shouldStickToBottom = useRef(true);
|
|
||||||
|
|
||||||
const renderItem = useCallback(
|
|
||||||
(item: NostrEvent, idx: number) => {
|
|
||||||
const self = account === item.pubkey;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={idx + item.id}
|
|
||||||
className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex-1 min-w-0 inline-flex",
|
|
||||||
self ? "justify-end" : "justify-start",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"py-2 px-3 w-fit max-w-[400px] text-pretty break-message",
|
|
||||||
!self
|
|
||||||
? "bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md"
|
|
||||||
: "bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{item.content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="shrink-0 w-16 flex items-center justify-end">
|
|
||||||
<span className="text-xs text-right text-neutral-600 dark:text-neutral-400">
|
|
||||||
{time(item.created_at)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
[data],
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const unlisten = listen<EventPayload>("event", async (data) => {
|
|
||||||
const event: NostrEvent = JSON.parse(data.payload.event);
|
|
||||||
const sender = data.payload.sender;
|
|
||||||
const receivers = getReceivers(event.tags);
|
|
||||||
const group = [account, id];
|
|
||||||
|
|
||||||
if (!group.includes(sender)) return;
|
|
||||||
if (!group.some((item) => receivers.includes(item))) return;
|
|
||||||
|
|
||||||
await queryClient.setQueryData(
|
|
||||||
["chats", id],
|
|
||||||
(prevEvents: NostrEvent[]) => {
|
|
||||||
if (!prevEvents) return [event];
|
|
||||||
return [event, ...prevEvents];
|
|
||||||
},
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unlisten.then((f) => f());
|
|
||||||
};
|
|
||||||
}, [account, id]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!data?.length) return;
|
|
||||||
if (!ref.current) return;
|
|
||||||
if (!shouldStickToBottom.current) return;
|
|
||||||
|
|
||||||
ref.current.scrollToIndex(data.length - 1, {
|
|
||||||
align: "end",
|
|
||||||
});
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ScrollArea.Root
|
|
||||||
type={"scroll"}
|
|
||||||
scrollHideDelay={300}
|
|
||||||
className="overflow-hidden flex-1 w-full"
|
|
||||||
>
|
|
||||||
<ScrollArea.Viewport
|
|
||||||
ref={scrollRef}
|
|
||||||
className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full"
|
|
||||||
>
|
|
||||||
<Virtualizer
|
|
||||||
scrollRef={scrollRef}
|
|
||||||
ref={ref}
|
|
||||||
shift={true}
|
|
||||||
onScroll={(offset) => {
|
|
||||||
if (!ref.current) return;
|
|
||||||
shouldStickToBottom.current =
|
|
||||||
offset - ref.current.scrollSize + ref.current.viewportSize >=
|
|
||||||
-1.5;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
<div className="flex items-center gap-3 my-1.5 px-3">
|
|
||||||
<div className="flex-1 min-w-0 inline-flex">
|
|
||||||
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3 my-1.5 px-3">
|
|
||||||
<div className="flex-1 min-w-0 inline-flex justify-end">
|
|
||||||
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : isError ? (
|
|
||||||
<div className="w-full h-56 flex items-center justify-center">
|
|
||||||
<div className="text-sm flex items-center gap-1.5">
|
|
||||||
Cannot load message. Please try again later.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : !data.length ? (
|
|
||||||
<div className="h-20 flex items-center justify-center">
|
|
||||||
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item[0]}
|
|
||||||
className="w-full flex flex-col items-center mt-3 gap-3"
|
|
||||||
>
|
|
||||||
<div className="text-xs text-center text-neutral-600 dark:text-neutral-400">
|
|
||||||
{item[0]}
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
{item[1]
|
|
||||||
.sort((a, b) => a.created_at - b.created_at)
|
|
||||||
.map((item, idx) => renderItem(item, idx))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</Virtualizer>
|
|
||||||
</ScrollArea.Viewport>
|
|
||||||
<ScrollArea.Scrollbar
|
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
||||||
orientation="vertical"
|
|
||||||
>
|
|
||||||
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
||||||
</ScrollArea.Scrollbar>
|
|
||||||
<ScrollArea.Corner className="bg-transparent" />
|
|
||||||
</ScrollArea.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Form() {
|
|
||||||
const { id } = Route.useParams();
|
|
||||||
const inboxRelays = Route.useLoaderData();
|
|
||||||
|
|
||||||
const [newMessage, setNewMessage] = useState("");
|
|
||||||
const [attaches, setAttaches] = useState<string[]>([]);
|
|
||||||
const [isPending, startTransition] = useTransition();
|
|
||||||
|
|
||||||
const remove = (item: string) => {
|
|
||||||
setAttaches((prev) => prev.filter((att) => att !== item));
|
|
||||||
};
|
|
||||||
|
|
||||||
const submit = () => {
|
|
||||||
startTransition(async () => {
|
|
||||||
if (!newMessage.length) return;
|
|
||||||
|
|
||||||
const content = `${newMessage}\r\n${attaches.join("\r\n")}`;
|
|
||||||
const res = await commands.sendMessage(id, content);
|
|
||||||
|
|
||||||
if (res.status === "error") {
|
|
||||||
await message(res.error, {
|
|
||||||
title: "Send mesaage failed",
|
|
||||||
kind: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setNewMessage("");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="shrink-0 flex items-center justify-center px-3.5">
|
|
||||||
{!inboxRelays.length ? (
|
|
||||||
<div className="text-xs">
|
|
||||||
This user doesn't have inbox relays. You cannot send messages to them.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex-1 flex flex-col justify-end">
|
|
||||||
{attaches?.length ? (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{attaches.map((item, index) => (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
key={item}
|
|
||||||
onClick={() => remove(item)}
|
|
||||||
className="relative"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={item}
|
|
||||||
alt={`File ${index}`}
|
|
||||||
className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50"
|
|
||||||
loading="lazy"
|
|
||||||
decoding="async"
|
|
||||||
/>
|
|
||||||
<span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800">
|
|
||||||
<X className="size-2" />
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="h-12 w-full flex items-center gap-2">
|
|
||||||
<div className="inline-flex gap-1">
|
|
||||||
<AttachMedia onUpload={setAttaches} />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
placeholder="Message..."
|
|
||||||
value={newMessage}
|
|
||||||
onChange={(e) => setNewMessage(e.target.value)}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") submit();
|
|
||||||
}}
|
|
||||||
className="flex-1 h-9 rounded-full px-3.5 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:outline-none focus:border-blue-500 placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title="Send message"
|
|
||||||
disabled={isPending}
|
|
||||||
onClick={() => submit()}
|
|
||||||
className="rounded-full size-9 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
|
|
||||||
>
|
|
||||||
{isPending ? <Spinner /> : <ArrowUp className="size-5" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AttachMedia({
|
|
||||||
onUpload,
|
|
||||||
}: { onUpload: Dispatch<SetStateAction<string[]>> }) {
|
|
||||||
const [isPending, startTransition] = useTransition();
|
|
||||||
|
|
||||||
const attach = () => {
|
|
||||||
startTransition(async () => {
|
|
||||||
const file = await upload();
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
onUpload((prev) => [...prev, file]);
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title="Attach media"
|
|
||||||
onClick={() => attach()}
|
|
||||||
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
|
|
||||||
>
|
|
||||||
{isPending ? (
|
|
||||||
<Spinner className="size-4" />
|
|
||||||
) : (
|
|
||||||
<Paperclip className="size-5" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import { commands } from "@/commands";
|
|
||||||
import { Spinner } from "@/components/spinner";
|
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/$account/chats/$id")({
|
|
||||||
loader: async ({ params, context }) => {
|
|
||||||
const res = await commands.connectInboxRelays(params.id, false);
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
// Add id to chat manager to unsubscribe later.
|
|
||||||
context.chatManager.set(params.id, params.id);
|
|
||||||
|
|
||||||
return res.data;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pendingComponent: Pending,
|
|
||||||
pendingMs: 200,
|
|
||||||
pendingMinMs: 100,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Pending() {
|
|
||||||
return (
|
|
||||||
<div className="size-full flex items-center justify-center">
|
|
||||||
<div className="flex flex-col gap-2 items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
<span className="text-xs text-center text-neutral-600 dark:text-neutral-400">
|
|
||||||
Connection in progress. Please wait ...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,505 +0,0 @@
|
|||||||
import { commands } from "@/commands";
|
|
||||||
import { ago, cn } from "@/commons";
|
|
||||||
import { Spinner } from "@/components/spinner";
|
|
||||||
import { User } from "@/components/user";
|
|
||||||
import {
|
|
||||||
ArrowRight,
|
|
||||||
CaretDown,
|
|
||||||
CirclesFour,
|
|
||||||
Plus,
|
|
||||||
X,
|
|
||||||
} from "@phosphor-icons/react";
|
|
||||||
import * as Dialog from "@radix-ui/react-dialog";
|
|
||||||
import * as Progress from "@radix-ui/react-progress";
|
|
||||||
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 { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
|
|
||||||
import { message } from "@tauri-apps/plugin-dialog";
|
|
||||||
import { open } from "@tauri-apps/plugin-shell";
|
|
||||||
import { type NostrEvent, nip19 } from "nostr-tools";
|
|
||||||
import { useCallback, useEffect, useRef, useState, useTransition } from "react";
|
|
||||||
import { Virtualizer } from "virtua";
|
|
||||||
|
|
||||||
type EventPayload = {
|
|
||||||
event: string;
|
|
||||||
sender: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/$account/chats")({
|
|
||||||
component: Screen,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Screen() {
|
|
||||||
return (
|
|
||||||
<div className="size-full flex">
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
|
|
||||||
>
|
|
||||||
<Header />
|
|
||||||
<ChatList />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Header() {
|
|
||||||
const { platform } = Route.useRouteContext();
|
|
||||||
const { account } = Route.useParams();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className={cn(
|
|
||||||
"z-[200] shrink-0 h-12 flex items-center justify-between",
|
|
||||||
platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CurrentUser />
|
|
||||||
<div className="flex items-center justify-end gap-2">
|
|
||||||
<Link
|
|
||||||
to="/$account/contacts"
|
|
||||||
params={{ account }}
|
|
||||||
className="size-8 rounded-full inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
|
|
||||||
>
|
|
||||||
<CirclesFour className="size-4" />
|
|
||||||
</Link>
|
|
||||||
<Compose />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ChatList() {
|
|
||||||
const { account } = Route.useParams();
|
|
||||||
const { queryClient } = Route.useRouteContext();
|
|
||||||
const { isLoading, data } = useQuery({
|
|
||||||
queryKey: ["chats"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await commands.getChats();
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
const raw = res.data;
|
|
||||||
const events = raw.map((item) => JSON.parse(item) as NostrEvent);
|
|
||||||
|
|
||||||
return events;
|
|
||||||
} else {
|
|
||||||
throw new Error(res.error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
select: (data) => data.sort((a, b) => b.created_at - a.created_at),
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [isSync, setIsSync] = useState(false);
|
|
||||||
const [progress, setProgress] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(
|
|
||||||
() => setProgress((prev) => (prev <= 100 ? prev + 4 : 100)),
|
|
||||||
1200,
|
|
||||||
);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const unlisten = listen("synchronized", async () => {
|
|
||||||
await queryClient.refetchQueries({ queryKey: ["chats"] });
|
|
||||||
setIsSync(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unlisten.then((f) => f());
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const unlisten = listen<EventPayload>("event", async (data) => {
|
|
||||||
const event: NostrEvent = JSON.parse(data.payload.event);
|
|
||||||
const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
|
|
||||||
|
|
||||||
if (chats) {
|
|
||||||
const index = chats.findIndex((item) => item.pubkey === event.pubkey);
|
|
||||||
|
|
||||||
if (index === -1) {
|
|
||||||
await queryClient.setQueryData(
|
|
||||||
["chats"],
|
|
||||||
(prevEvents: NostrEvent[]) => {
|
|
||||||
if (!prevEvents) return prevEvents;
|
|
||||||
if (event.pubkey === account) return;
|
|
||||||
|
|
||||||
return [event, ...prevEvents];
|
|
||||||
},
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const newEvents = [...chats];
|
|
||||||
newEvents[index] = {
|
|
||||||
...event,
|
|
||||||
};
|
|
||||||
|
|
||||||
await queryClient.setQueryData(["chats"], newEvents);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unlisten.then((f) => f());
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ScrollArea.Root
|
|
||||||
type={"scroll"}
|
|
||||||
scrollHideDelay={300}
|
|
||||||
className="relative overflow-hidden flex-1 w-full"
|
|
||||||
>
|
|
||||||
<ScrollArea.Viewport className="relative h-full px-1.5">
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
{[...Array(5).keys()].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="flex items-center rounded-lg p-2 mb-1 gap-2"
|
|
||||||
>
|
|
||||||
<div className="size-9 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
|
|
||||||
<div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : isSync && !data.length ? (
|
|
||||||
<div className="p-2">
|
|
||||||
<div className="px-2 h-12 w-full rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center text-sm">
|
|
||||||
No chats.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.map((item) => (
|
|
||||||
<Link
|
|
||||||
key={item.id + item.pubkey}
|
|
||||||
to="/$account/chats/$id"
|
|
||||||
params={{ account, id: item.pubkey }}
|
|
||||||
>
|
|
||||||
{({ isActive, isTransitioning }) => (
|
|
||||||
<User.Provider pubkey={item.pubkey}>
|
|
||||||
<User.Root
|
|
||||||
className={cn(
|
|
||||||
"flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5",
|
|
||||||
isActive ? "bg-black/5 dark:bg-white/5" : "",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
<span className="ml-1.5 text-neutral-500">
|
|
||||||
{account === item.pubkey ? "(you)" : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{isTransitioning ? (
|
|
||||||
<Spinner className="size-4" />
|
|
||||||
) : (
|
|
||||||
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
|
||||||
{ago(item.created_at)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</ScrollArea.Viewport>
|
|
||||||
{!isSync ? <SyncPopup progress={progress} /> : null}
|
|
||||||
<ScrollArea.Scrollbar
|
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
||||||
orientation="vertical"
|
|
||||||
>
|
|
||||||
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
||||||
</ScrollArea.Scrollbar>
|
|
||||||
<ScrollArea.Corner className="bg-transparent" />
|
|
||||||
</ScrollArea.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SyncPopup({ progress }: { progress: number }) {
|
|
||||||
return (
|
|
||||||
<div className="absolute bottom-0 w-full p-4">
|
|
||||||
<div className="relative flex flex-col items-center gap-1.5">
|
|
||||||
<Progress.Root
|
|
||||||
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
|
|
||||||
style={{
|
|
||||||
transform: "translateZ(0)",
|
|
||||||
}}
|
|
||||||
value={progress}
|
|
||||||
>
|
|
||||||
<Progress.Indicator
|
|
||||||
className="bg-blue-500 size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
|
||||||
style={{ transform: `translateX(-${100 - progress}%)` }}
|
|
||||||
/>
|
|
||||||
</Progress.Root>
|
|
||||||
<span className="text-center text-xs">Syncing message...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Compose() {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [target, setTarget] = useState("");
|
|
||||||
const [newMessage, setNewMessage] = useState("");
|
|
||||||
const [isPending, startTransition] = useTransition();
|
|
||||||
|
|
||||||
const { account } = Route.useParams();
|
|
||||||
const { isLoading, data: contacts } = useQuery({
|
|
||||||
queryKey: ["contacts", account],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await commands.getContactList();
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
return res.data;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
enabled: isOpen,
|
|
||||||
});
|
|
||||||
|
|
||||||
const navigate = Route.useNavigate();
|
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const pasteFromClipboard = async () => {
|
|
||||||
const val = await readText();
|
|
||||||
setTarget(val);
|
|
||||||
};
|
|
||||||
|
|
||||||
const sendMessage = () => {
|
|
||||||
startTransition(async () => {
|
|
||||||
if (!newMessage.length) return;
|
|
||||||
if (!target.length) return;
|
|
||||||
if (!target.startsWith("npub1")) {
|
|
||||||
await message("You must enter the public key as npub", {
|
|
||||||
title: "Send Message",
|
|
||||||
kind: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const decoded = nip19.decode(target);
|
|
||||||
let id: string;
|
|
||||||
|
|
||||||
if (decoded.type !== "npub") {
|
|
||||||
await message("You must enter the public key as npub", {
|
|
||||||
title: "Send Message",
|
|
||||||
kind: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
id = decoded.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Connect to user's inbox relays
|
|
||||||
const connect = await commands.connectInboxRelays(target, false);
|
|
||||||
|
|
||||||
// Send message
|
|
||||||
if (connect.status === "ok") {
|
|
||||||
const res = await commands.sendMessage(id, newMessage);
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
setTarget("");
|
|
||||||
setNewMessage("");
|
|
||||||
setIsOpen(false);
|
|
||||||
|
|
||||||
navigate({
|
|
||||||
to: "/$account/chats/$id",
|
|
||||||
params: { account, id },
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await message(res.error, { title: "Send Message", kind: "error" });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
await message(connect.error, {
|
|
||||||
title: "Connect Inbox Relays",
|
|
||||||
kind: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
|
||||||
<Dialog.Trigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="size-8 rounded-full inline-flex items-center justify-center bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
|
||||||
>
|
|
||||||
<Plus className="size-4" weight="bold" />
|
|
||||||
</button>
|
|
||||||
</Dialog.Trigger>
|
|
||||||
<Dialog.Portal>
|
|
||||||
<Dialog.Overlay className="bg-black/20 dark:bg-white/20 data-[state=open]:animate-overlay fixed inset-0" />
|
|
||||||
<Dialog.Content className="flex flex-col data-[state=open]:animate-content fixed top-[50%] left-[50%] w-full h-full max-h-[500px] max-w-[400px] translate-x-[-50%] translate-y-[-50%] rounded-xl bg-white dark:bg-neutral-900 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
|
|
||||||
<div className="h-28 shrink-0 flex flex-col justify-end">
|
|
||||||
<div className="h-10 inline-flex items-center justify-between px-3.5 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
<Dialog.Title>Send to</Dialog.Title>
|
|
||||||
<Dialog.Close asChild>
|
|
||||||
<button type="button">
|
|
||||||
<X className="size-4" />
|
|
||||||
</button>
|
|
||||||
</Dialog.Close>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
|
||||||
<span className="shrink-0 font-medium">To:</span>
|
|
||||||
<div className="flex-1 relative">
|
|
||||||
<input
|
|
||||||
placeholder="npub1..."
|
|
||||||
value={target}
|
|
||||||
onChange={(e) => setTarget(e.target.value)}
|
|
||||||
disabled={isPending}
|
|
||||||
className="w-full pr-14 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => pasteFromClipboard()}
|
|
||||||
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
|
|
||||||
>
|
|
||||||
Paste
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
|
||||||
<span className="shrink-0 font-medium">Message:</span>
|
|
||||||
<input
|
|
||||||
placeholder="hello..."
|
|
||||||
value={newMessage}
|
|
||||||
onChange={(e) => setNewMessage(e.target.value)}
|
|
||||||
disabled={isPending}
|
|
||||||
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
disabled={isPending || isLoading || !newMessage.length}
|
|
||||||
onClick={() => sendMessage()}
|
|
||||||
className="rounded-full size-7 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
|
|
||||||
>
|
|
||||||
{isPending ? (
|
|
||||||
<Spinner className="size-4" />
|
|
||||||
) : (
|
|
||||||
<ArrowRight className="size-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ScrollArea.Root
|
|
||||||
type={"scroll"}
|
|
||||||
scrollHideDelay={300}
|
|
||||||
className="overflow-hidden flex-1 size-full"
|
|
||||||
>
|
|
||||||
<ScrollArea.Viewport
|
|
||||||
ref={scrollRef}
|
|
||||||
className="relative h-full p-2"
|
|
||||||
>
|
|
||||||
<Virtualizer scrollRef={scrollRef} overscan={1}>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="h-[400px] flex items-center justify-center">
|
|
||||||
<Spinner className="size-4" />
|
|
||||||
</div>
|
|
||||||
) : !contacts?.length ? (
|
|
||||||
<div className="h-[400px] flex items-center justify-center">
|
|
||||||
<p className="text-sm">Contact is empty.</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
contacts?.map((contact) => (
|
|
||||||
<button
|
|
||||||
key={contact}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setTarget(contact)}
|
|
||||||
className="block w-full p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<User.Provider pubkey={contact}>
|
|
||||||
<User.Root className="flex items-center gap-2">
|
|
||||||
<User.Avatar className="size-8 rounded-full" />
|
|
||||||
<User.Name className="text-sm font-medium" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
</button>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</Virtualizer>
|
|
||||||
</ScrollArea.Viewport>
|
|
||||||
<ScrollArea.Scrollbar
|
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
||||||
orientation="vertical"
|
|
||||||
>
|
|
||||||
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
||||||
</ScrollArea.Scrollbar>
|
|
||||||
<ScrollArea.Corner className="bg-transparent" />
|
|
||||||
</ScrollArea.Root>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Portal>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function CurrentUser() {
|
|
||||||
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: "Copy Public Key",
|
|
||||||
action: async () => {
|
|
||||||
const npub = nip19.npubEncode(params.account);
|
|
||||||
await writeText(npub);
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
MenuItem.new({
|
|
||||||
text: "Settings",
|
|
||||||
action: () => navigate({ to: "/" }),
|
|
||||||
}),
|
|
||||||
MenuItem.new({
|
|
||||||
text: "Feedback",
|
|
||||||
action: async () => await open("https://github.com/lumehq/coop/issues"),
|
|
||||||
}),
|
|
||||||
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 (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={(e) => showContextMenu(e)}
|
|
||||||
className="h-8 inline-flex items-center gap-1.5"
|
|
||||||
>
|
|
||||||
<User.Provider pubkey={params.account}>
|
|
||||||
<User.Root className="shrink-0">
|
|
||||||
<User.Avatar className="size-8 rounded-full" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
<CaretDown className="size-3 text-neutral-600 dark:text-neutral-400" />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import { CoopIcon } from "@/icons/coop";
|
|
||||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/$account/chats/new")({
|
|
||||||
component: Screen,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Screen() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className="size-full flex flex-col gap-3 items-center justify-center"
|
|
||||||
>
|
|
||||||
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
|
|
||||||
<h1 className="text-center font-bold text-neutral-300 dark:text-neutral-700">
|
|
||||||
coop on nostr.
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import { User } from "@/components/user";
|
|
||||||
import { X } from "@phosphor-icons/react";
|
|
||||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
|
||||||
import { Link, createLazyFileRoute } from "@tanstack/react-router";
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/$account/contacts")({
|
|
||||||
component: Screen,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Screen() {
|
|
||||||
const params = Route.useParams();
|
|
||||||
const contacts = Route.useLoaderData();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ScrollArea.Root
|
|
||||||
type={"scroll"}
|
|
||||||
scrollHideDelay={300}
|
|
||||||
className="overflow-hidden size-full flex flex-col"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className="h-12 shrink-0 flex items-center justify-between px-3.5"
|
|
||||||
>
|
|
||||||
<div />
|
|
||||||
<div className="text-sm font-semibold uppercase">Contact List</div>
|
|
||||||
<div className="inline-flex items-center justify-end">
|
|
||||||
<Link
|
|
||||||
to="/$account/chats/new"
|
|
||||||
params={{ account: params.account }}
|
|
||||||
className="size-7 inline-flex items-center justify-center rounded-md hover:bg-black/5 dark:hover:bg-white/5"
|
|
||||||
>
|
|
||||||
<X className="size-5" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ScrollArea.Viewport className="relative h-full flex-1 px-3.5 pb-3.5">
|
|
||||||
<div className="grid grid-cols-4 gap-3">
|
|
||||||
{contacts.map((contact) => (
|
|
||||||
<Link
|
|
||||||
key={contact}
|
|
||||||
to="/$account/chats/$id"
|
|
||||||
params={{ account: params.account, id: contact }}
|
|
||||||
>
|
|
||||||
<User.Provider key={contact} pubkey={contact}>
|
|
||||||
<User.Root className="h-44 flex flex-col items-center justify-center gap-3 p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5">
|
|
||||||
<User.Avatar className="size-16 rounded-full" />
|
|
||||||
<User.Name className="text-sm font-medium" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ScrollArea.Viewport>
|
|
||||||
<ScrollArea.Scrollbar
|
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
||||||
orientation="vertical"
|
|
||||||
>
|
|
||||||
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
||||||
</ScrollArea.Scrollbar>
|
|
||||||
<ScrollArea.Corner className="bg-transparent" />
|
|
||||||
</ScrollArea.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { commands } from "@/commands";
|
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/$account/contacts")({
|
|
||||||
loader: async () => {
|
|
||||||
const res = await commands.getContactList();
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
return res.data;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { commands } from "@/commands";
|
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/$account/relays")({
|
|
||||||
loader: async ({ params }) => {
|
|
||||||
const res = await commands.collectInboxRelays(params.account);
|
|
||||||
|
|
||||||
if (res.status === "ok") {
|
|
||||||
return res.data;
|
|
||||||
} else {
|
|
||||||
throw new Error(res.error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
16
src/routes/$account/_layout.tsx
Normal file
16
src/routes/$account/_layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { commands } from "@/commands";
|
||||||
|
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||||
|
|
||||||
|
export const Route = createFileRoute("/$account/_layout")({
|
||||||
|
beforeLoad: async ({ params }) => {
|
||||||
|
const res = await commands.ensureInboxRelays(params.account);
|
||||||
|
|
||||||
|
if (res.status === "error") {
|
||||||
|
throw redirect({
|
||||||
|
to: "/inbox-relays",
|
||||||
|
search: { account: params.account, redirect: window.location.href },
|
||||||
|
replace: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
378
src/routes/$account/_layout/chats.$id.lazy.tsx
Normal file
378
src/routes/$account/_layout/chats.$id.lazy.tsx
Normal file
@@ -0,0 +1,378 @@
|
|||||||
|
import { commands } from '@/commands'
|
||||||
|
import { cn, getReceivers, groupEventByDate, time, upload } from '@/commons'
|
||||||
|
import { Spinner } from '@/components/spinner'
|
||||||
|
import { User } from '@/components/user'
|
||||||
|
import { CoopIcon } from '@/icons/coop'
|
||||||
|
import { ArrowUp, Paperclip, X } from '@phosphor-icons/react'
|
||||||
|
import * as ScrollArea from '@radix-ui/react-scroll-area'
|
||||||
|
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||||
|
import { listen } from '@tauri-apps/api/event'
|
||||||
|
import { message } from '@tauri-apps/plugin-dialog'
|
||||||
|
import type { NostrEvent } from 'nostr-tools'
|
||||||
|
import {
|
||||||
|
type Dispatch,
|
||||||
|
type SetStateAction,
|
||||||
|
useCallback,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
useTransition,
|
||||||
|
} from 'react'
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { Virtualizer, type VirtualizerHandle } from 'virtua'
|
||||||
|
|
||||||
|
type EventPayload = {
|
||||||
|
event: string
|
||||||
|
sender: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute('/$account/_layout/chats/$id')({
|
||||||
|
component: Screen,
|
||||||
|
})
|
||||||
|
|
||||||
|
function Screen() {
|
||||||
|
return (
|
||||||
|
<div className="size-full flex flex-col">
|
||||||
|
<Header />
|
||||||
|
<List />
|
||||||
|
<Form />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
const { account, id } = Route.useParams()
|
||||||
|
const { platform } = Route.useRouteContext()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className={cn(
|
||||||
|
'h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800',
|
||||||
|
platform === 'windows' ? 'pl-3.5 pr-[150px]' : 'px-3.5',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="z-[200]">
|
||||||
|
<div className="flex -space-x-1 overflow-hidden">
|
||||||
|
<User.Provider pubkey={account}>
|
||||||
|
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
|
||||||
|
<User.Avatar className="size-8 rounded-full" />
|
||||||
|
</User.Root>
|
||||||
|
</User.Provider>
|
||||||
|
<User.Provider pubkey={id}>
|
||||||
|
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
|
||||||
|
<User.Avatar className="size-8 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({
|
||||||
|
queryKey: ['chats', id],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await commands.getChatMessages(id)
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
const raw = res.data
|
||||||
|
const events: NostrEvent[] = raw.map((item) => JSON.parse(item))
|
||||||
|
|
||||||
|
return events
|
||||||
|
} else {
|
||||||
|
throw new Error(res.error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
select: (data) => {
|
||||||
|
const groups = groupEventByDate(data)
|
||||||
|
return Object.entries(groups).reverse()
|
||||||
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null)
|
||||||
|
const ref = useRef<VirtualizerHandle>(null)
|
||||||
|
const shouldStickToBottom = useRef(true)
|
||||||
|
|
||||||
|
const renderItem = useCallback(
|
||||||
|
(item: NostrEvent, idx: number) => {
|
||||||
|
const self = account === item.pubkey
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={idx + item.id}
|
||||||
|
className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex-1 min-w-0 inline-flex',
|
||||||
|
self ? 'justify-end' : 'justify-start',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'py-2 px-3 w-fit max-w-[400px] text-pretty break-message',
|
||||||
|
!self
|
||||||
|
? 'bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md'
|
||||||
|
: 'bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="shrink-0 w-16 flex items-center justify-end">
|
||||||
|
<span className="text-xs text-right text-neutral-600 dark:text-neutral-400">
|
||||||
|
{time(item.created_at)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
[data],
|
||||||
|
)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unlisten = listen<EventPayload>('event', async (data) => {
|
||||||
|
const event: NostrEvent = JSON.parse(data.payload.event)
|
||||||
|
const sender = data.payload.sender
|
||||||
|
const receivers = getReceivers(event.tags)
|
||||||
|
const group = [account, id]
|
||||||
|
|
||||||
|
if (!group.includes(sender)) return
|
||||||
|
if (!group.some((item) => receivers.includes(item))) return
|
||||||
|
|
||||||
|
await queryClient.setQueryData(
|
||||||
|
['chats', id],
|
||||||
|
(prevEvents: NostrEvent[]) => {
|
||||||
|
if (!prevEvents) return [event]
|
||||||
|
return [event, ...prevEvents]
|
||||||
|
},
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unlisten.then((f) => f())
|
||||||
|
}
|
||||||
|
}, [account, id])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!data?.length) return
|
||||||
|
if (!ref.current) return
|
||||||
|
if (!shouldStickToBottom.current) return
|
||||||
|
|
||||||
|
ref.current.scrollToIndex(data.length - 1, {
|
||||||
|
align: 'end',
|
||||||
|
})
|
||||||
|
}, [data])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollArea.Root
|
||||||
|
type={'scroll'}
|
||||||
|
scrollHideDelay={300}
|
||||||
|
className="overflow-hidden flex-1 w-full"
|
||||||
|
>
|
||||||
|
<ScrollArea.Viewport
|
||||||
|
ref={scrollRef}
|
||||||
|
className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full"
|
||||||
|
>
|
||||||
|
<Virtualizer
|
||||||
|
scrollRef={scrollRef}
|
||||||
|
ref={ref}
|
||||||
|
shift={true}
|
||||||
|
onScroll={(offset) => {
|
||||||
|
if (!ref.current) return
|
||||||
|
shouldStickToBottom.current =
|
||||||
|
offset - ref.current.scrollSize + ref.current.viewportSize >= -1.5
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-3 my-1.5 px-3">
|
||||||
|
<div className="flex-1 min-w-0 inline-flex">
|
||||||
|
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 my-1.5 px-3">
|
||||||
|
<div className="flex-1 min-w-0 inline-flex justify-end">
|
||||||
|
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : isError ? (
|
||||||
|
<div className="w-full h-56 flex items-center justify-center">
|
||||||
|
<div className="text-sm flex items-center gap-1.5">
|
||||||
|
Cannot load message. Please try again later.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : !data.length ? (
|
||||||
|
<div className="h-20 flex items-center justify-center">
|
||||||
|
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item[0]}
|
||||||
|
className="w-full flex flex-col items-center mt-3 gap-3"
|
||||||
|
>
|
||||||
|
<div className="text-xs text-center text-neutral-600 dark:text-neutral-400">
|
||||||
|
{item[0]}
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
{item[1]
|
||||||
|
.sort((a, b) => a.created_at - b.created_at)
|
||||||
|
.map((item, idx) => renderItem(item, idx))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</Virtualizer>
|
||||||
|
</ScrollArea.Viewport>
|
||||||
|
<ScrollArea.Scrollbar
|
||||||
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
|
orientation="vertical"
|
||||||
|
>
|
||||||
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
||||||
|
</ScrollArea.Scrollbar>
|
||||||
|
<ScrollArea.Corner className="bg-transparent" />
|
||||||
|
</ScrollArea.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Form() {
|
||||||
|
const { id } = Route.useParams()
|
||||||
|
const inboxRelays = Route.useLoaderData()
|
||||||
|
|
||||||
|
const [newMessage, setNewMessage] = useState('')
|
||||||
|
const [attaches, setAttaches] = useState<string[]>([])
|
||||||
|
const [isPending, startTransition] = useTransition()
|
||||||
|
|
||||||
|
const remove = (item: string) => {
|
||||||
|
setAttaches((prev) => prev.filter((att) => att !== item))
|
||||||
|
}
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
startTransition(async () => {
|
||||||
|
if (!newMessage.length) return
|
||||||
|
|
||||||
|
const content = `${newMessage}\r\n${attaches.join('\r\n')}`
|
||||||
|
const res = await commands.sendMessage(id, content)
|
||||||
|
|
||||||
|
if (res.status === 'error') {
|
||||||
|
await message(res.error, {
|
||||||
|
title: 'Send mesaage failed',
|
||||||
|
kind: 'error',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setNewMessage('')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="shrink-0 flex items-center justify-center px-3.5">
|
||||||
|
{!inboxRelays.length ? (
|
||||||
|
<div className="text-xs">
|
||||||
|
This user doesn't have inbox relays. You cannot send messages to them.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex-1 flex flex-col justify-end">
|
||||||
|
{attaches?.length ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{attaches.map((item, index) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={item}
|
||||||
|
onClick={() => remove(item)}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={item}
|
||||||
|
alt={`File ${index}`}
|
||||||
|
className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800">
|
||||||
|
<X className="size-2" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="h-12 w-full flex items-center gap-2">
|
||||||
|
<div className="inline-flex gap-1">
|
||||||
|
<AttachMedia onUpload={setAttaches} />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
placeholder="Message..."
|
||||||
|
value={newMessage}
|
||||||
|
onChange={(e) => setNewMessage(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') submit()
|
||||||
|
}}
|
||||||
|
className="flex-1 h-9 rounded-full px-3.5 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:outline-none focus:border-blue-500 placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title="Send message"
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={() => submit()}
|
||||||
|
className="rounded-full size-9 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
|
||||||
|
>
|
||||||
|
{isPending ? <Spinner /> : <ArrowUp className="size-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AttachMedia({
|
||||||
|
onUpload,
|
||||||
|
}: {
|
||||||
|
onUpload: Dispatch<SetStateAction<string[]>>
|
||||||
|
}) {
|
||||||
|
const [isPending, startTransition] = useTransition()
|
||||||
|
|
||||||
|
const attach = () => {
|
||||||
|
startTransition(async () => {
|
||||||
|
const file = await upload()
|
||||||
|
|
||||||
|
if (file) {
|
||||||
|
onUpload((prev) => [...prev, file])
|
||||||
|
} else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title="Attach media"
|
||||||
|
onClick={() => attach()}
|
||||||
|
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<Spinner className="size-4" />
|
||||||
|
) : (
|
||||||
|
<Paperclip className="size-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
34
src/routes/$account/_layout/chats.$id.tsx
Normal file
34
src/routes/$account/_layout/chats.$id.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { commands } from '@/commands'
|
||||||
|
import { Spinner } from '@/components/spinner'
|
||||||
|
import { createFileRoute } from '@tanstack/react-router'
|
||||||
|
|
||||||
|
export const Route = createFileRoute('/$account/_layout/chats/$id')({
|
||||||
|
loader: async ({ params, context }) => {
|
||||||
|
const res = await commands.connectInboxRelays(params.id, false)
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
// Add id to chat manager to unsubscribe later.
|
||||||
|
context.chatManager.set(params.id, params.id)
|
||||||
|
|
||||||
|
return res.data
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pendingComponent: Pending,
|
||||||
|
pendingMs: 200,
|
||||||
|
pendingMinMs: 100,
|
||||||
|
})
|
||||||
|
|
||||||
|
function Pending() {
|
||||||
|
return (
|
||||||
|
<div className="size-full flex items-center justify-center">
|
||||||
|
<div className="flex flex-col gap-2 items-center justify-center">
|
||||||
|
<Spinner />
|
||||||
|
<span className="text-xs text-center text-neutral-600 dark:text-neutral-400">
|
||||||
|
Connection in progress. Please wait ...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
505
src/routes/$account/_layout/chats.lazy.tsx
Normal file
505
src/routes/$account/_layout/chats.lazy.tsx
Normal file
@@ -0,0 +1,505 @@
|
|||||||
|
import { commands } from '@/commands'
|
||||||
|
import { ago, cn } from '@/commons'
|
||||||
|
import { Spinner } from '@/components/spinner'
|
||||||
|
import { User } from '@/components/user'
|
||||||
|
import {
|
||||||
|
ArrowRight,
|
||||||
|
CaretDown,
|
||||||
|
CirclesFour,
|
||||||
|
Plus,
|
||||||
|
X,
|
||||||
|
} from '@phosphor-icons/react'
|
||||||
|
import * as Dialog from '@radix-ui/react-dialog'
|
||||||
|
import * as Progress from '@radix-ui/react-progress'
|
||||||
|
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 { readText, writeText } from '@tauri-apps/plugin-clipboard-manager'
|
||||||
|
import { message } from '@tauri-apps/plugin-dialog'
|
||||||
|
import { open } from '@tauri-apps/plugin-shell'
|
||||||
|
import { type NostrEvent, nip19 } from 'nostr-tools'
|
||||||
|
import { useCallback, useEffect, useRef, useState, useTransition } from 'react'
|
||||||
|
import { Virtualizer } from 'virtua'
|
||||||
|
|
||||||
|
type EventPayload = {
|
||||||
|
event: string
|
||||||
|
sender: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute('/$account/_layout/chats')({
|
||||||
|
component: Screen,
|
||||||
|
})
|
||||||
|
|
||||||
|
function Screen() {
|
||||||
|
return (
|
||||||
|
<div className="size-full flex">
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
|
||||||
|
>
|
||||||
|
<Header />
|
||||||
|
<ChatList />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
const { platform } = Route.useRouteContext()
|
||||||
|
const { account } = Route.useParams()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className={cn(
|
||||||
|
'z-[200] shrink-0 h-12 flex items-center justify-between',
|
||||||
|
platform === 'macos' ? 'pl-[78px] pr-3.5' : 'px-3.5',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CurrentUser />
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<Link
|
||||||
|
to="/$account/contacts"
|
||||||
|
params={{ account }}
|
||||||
|
className="size-8 rounded-full inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<CirclesFour className="size-4" />
|
||||||
|
</Link>
|
||||||
|
<Compose />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChatList() {
|
||||||
|
const { account } = Route.useParams()
|
||||||
|
const { queryClient } = Route.useRouteContext()
|
||||||
|
const { isLoading, data } = useQuery({
|
||||||
|
queryKey: ['chats'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await commands.getChats()
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
const raw = res.data
|
||||||
|
const events = raw.map((item) => JSON.parse(item) as NostrEvent)
|
||||||
|
|
||||||
|
return events
|
||||||
|
} else {
|
||||||
|
throw new Error(res.error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
select: (data) => data.sort((a, b) => b.created_at - a.created_at),
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const [isSync, setIsSync] = useState(false)
|
||||||
|
const [progress, setProgress] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(
|
||||||
|
() => setProgress((prev) => (prev <= 100 ? prev + 4 : 100)),
|
||||||
|
1200,
|
||||||
|
)
|
||||||
|
return () => clearInterval(timer)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unlisten = listen('synchronized', async () => {
|
||||||
|
await queryClient.refetchQueries({ queryKey: ['chats'] })
|
||||||
|
setIsSync(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unlisten.then((f) => f())
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unlisten = listen<EventPayload>('event', async (data) => {
|
||||||
|
const event: NostrEvent = JSON.parse(data.payload.event)
|
||||||
|
const chats: NostrEvent[] = await queryClient.getQueryData(['chats'])
|
||||||
|
|
||||||
|
if (chats) {
|
||||||
|
const index = chats.findIndex((item) => item.pubkey === event.pubkey)
|
||||||
|
|
||||||
|
if (index === -1) {
|
||||||
|
await queryClient.setQueryData(
|
||||||
|
['chats'],
|
||||||
|
(prevEvents: NostrEvent[]) => {
|
||||||
|
if (!prevEvents) return prevEvents
|
||||||
|
if (event.pubkey === account) return
|
||||||
|
|
||||||
|
return [event, ...prevEvents]
|
||||||
|
},
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
const newEvents = [...chats]
|
||||||
|
newEvents[index] = {
|
||||||
|
...event,
|
||||||
|
}
|
||||||
|
|
||||||
|
await queryClient.setQueryData(['chats'], newEvents)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unlisten.then((f) => f())
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollArea.Root
|
||||||
|
type={'scroll'}
|
||||||
|
scrollHideDelay={300}
|
||||||
|
className="relative overflow-hidden flex-1 w-full"
|
||||||
|
>
|
||||||
|
<ScrollArea.Viewport className="relative h-full px-1.5">
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
{[...Array(5).keys()].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="flex items-center rounded-lg p-2 mb-1 gap-2"
|
||||||
|
>
|
||||||
|
<div className="size-9 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
|
||||||
|
<div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : isSync && !data.length ? (
|
||||||
|
<div className="p-2">
|
||||||
|
<div className="px-2 h-12 w-full rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center text-sm">
|
||||||
|
No chats.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.id + item.pubkey}
|
||||||
|
to="/$account/chats/$id"
|
||||||
|
params={{ account, id: item.pubkey }}
|
||||||
|
>
|
||||||
|
{({ isActive, isTransitioning }) => (
|
||||||
|
<User.Provider pubkey={item.pubkey}>
|
||||||
|
<User.Root
|
||||||
|
className={cn(
|
||||||
|
'flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5',
|
||||||
|
isActive ? 'bg-black/5 dark:bg-white/5' : '',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
<span className="ml-1.5 text-neutral-500">
|
||||||
|
{account === item.pubkey ? '(you)' : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{isTransitioning ? (
|
||||||
|
<Spinner className="size-4" />
|
||||||
|
) : (
|
||||||
|
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
||||||
|
{ago(item.created_at)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</User.Root>
|
||||||
|
</User.Provider>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</ScrollArea.Viewport>
|
||||||
|
{!isSync ? <SyncPopup progress={progress} /> : null}
|
||||||
|
<ScrollArea.Scrollbar
|
||||||
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
|
orientation="vertical"
|
||||||
|
>
|
||||||
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
||||||
|
</ScrollArea.Scrollbar>
|
||||||
|
<ScrollArea.Corner className="bg-transparent" />
|
||||||
|
</ScrollArea.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SyncPopup({ progress }: { progress: number }) {
|
||||||
|
return (
|
||||||
|
<div className="absolute bottom-0 w-full p-4">
|
||||||
|
<div className="relative flex flex-col items-center gap-1.5">
|
||||||
|
<Progress.Root
|
||||||
|
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
|
||||||
|
style={{
|
||||||
|
transform: 'translateZ(0)',
|
||||||
|
}}
|
||||||
|
value={progress}
|
||||||
|
>
|
||||||
|
<Progress.Indicator
|
||||||
|
className="bg-blue-500 size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
||||||
|
style={{ transform: `translateX(-${100 - progress}%)` }}
|
||||||
|
/>
|
||||||
|
</Progress.Root>
|
||||||
|
<span className="text-center text-xs">Syncing message...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Compose() {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const [target, setTarget] = useState('')
|
||||||
|
const [newMessage, setNewMessage] = useState('')
|
||||||
|
const [isPending, startTransition] = useTransition()
|
||||||
|
|
||||||
|
const { account } = Route.useParams()
|
||||||
|
const { isLoading, data: contacts } = useQuery({
|
||||||
|
queryKey: ['contacts', account],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await commands.getContactList()
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
return res.data
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
enabled: isOpen,
|
||||||
|
})
|
||||||
|
|
||||||
|
const navigate = Route.useNavigate()
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const pasteFromClipboard = async () => {
|
||||||
|
const val = await readText()
|
||||||
|
setTarget(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendMessage = () => {
|
||||||
|
startTransition(async () => {
|
||||||
|
if (!newMessage.length) return
|
||||||
|
if (!target.length) return
|
||||||
|
if (!target.startsWith('npub1')) {
|
||||||
|
await message('You must enter the public key as npub', {
|
||||||
|
title: 'Send Message',
|
||||||
|
kind: 'error',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const decoded = nip19.decode(target)
|
||||||
|
let id: string
|
||||||
|
|
||||||
|
if (decoded.type !== 'npub') {
|
||||||
|
await message('You must enter the public key as npub', {
|
||||||
|
title: 'Send Message',
|
||||||
|
kind: 'error',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
id = decoded.data
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connect to user's inbox relays
|
||||||
|
const connect = await commands.connectInboxRelays(target, false)
|
||||||
|
|
||||||
|
// Send message
|
||||||
|
if (connect.status === 'ok') {
|
||||||
|
const res = await commands.sendMessage(id, newMessage)
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
setTarget('')
|
||||||
|
setNewMessage('')
|
||||||
|
setIsOpen(false)
|
||||||
|
|
||||||
|
navigate({
|
||||||
|
to: '/$account/chats/$id',
|
||||||
|
params: { account, id },
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await message(res.error, { title: 'Send Message', kind: 'error' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
await message(connect.error, {
|
||||||
|
title: 'Connect Inbox Relays',
|
||||||
|
kind: 'error',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<Dialog.Trigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="size-8 rounded-full inline-flex items-center justify-center bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
||||||
|
>
|
||||||
|
<Plus className="size-4" weight="bold" />
|
||||||
|
</button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
<Dialog.Portal>
|
||||||
|
<Dialog.Overlay className="bg-black/20 dark:bg-white/20 data-[state=open]:animate-overlay fixed inset-0" />
|
||||||
|
<Dialog.Content className="flex flex-col data-[state=open]:animate-content fixed top-[50%] left-[50%] w-full h-full max-h-[500px] max-w-[400px] translate-x-[-50%] translate-y-[-50%] rounded-xl bg-white dark:bg-neutral-900 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
|
||||||
|
<div className="h-28 shrink-0 flex flex-col justify-end">
|
||||||
|
<div className="h-10 inline-flex items-center justify-between px-3.5 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||||
|
<Dialog.Title>Send to</Dialog.Title>
|
||||||
|
<Dialog.Close asChild>
|
||||||
|
<button type="button">
|
||||||
|
<X className="size-4" />
|
||||||
|
</button>
|
||||||
|
</Dialog.Close>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
||||||
|
<span className="shrink-0 font-medium">To:</span>
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<input
|
||||||
|
placeholder="npub1..."
|
||||||
|
value={target}
|
||||||
|
onChange={(e) => setTarget(e.target.value)}
|
||||||
|
disabled={isPending}
|
||||||
|
className="w-full pr-14 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => pasteFromClipboard()}
|
||||||
|
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
|
||||||
|
>
|
||||||
|
Paste
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
||||||
|
<span className="shrink-0 font-medium">Message:</span>
|
||||||
|
<input
|
||||||
|
placeholder="hello..."
|
||||||
|
value={newMessage}
|
||||||
|
onChange={(e) => setNewMessage(e.target.value)}
|
||||||
|
disabled={isPending}
|
||||||
|
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={isPending || isLoading || !newMessage.length}
|
||||||
|
onClick={() => sendMessage()}
|
||||||
|
className="rounded-full size-7 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<Spinner className="size-4" />
|
||||||
|
) : (
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ScrollArea.Root
|
||||||
|
type={'scroll'}
|
||||||
|
scrollHideDelay={300}
|
||||||
|
className="overflow-hidden flex-1 size-full"
|
||||||
|
>
|
||||||
|
<ScrollArea.Viewport
|
||||||
|
ref={scrollRef}
|
||||||
|
className="relative h-full p-2"
|
||||||
|
>
|
||||||
|
<Virtualizer scrollRef={scrollRef} overscan={1}>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="h-[400px] flex items-center justify-center">
|
||||||
|
<Spinner className="size-4" />
|
||||||
|
</div>
|
||||||
|
) : !contacts?.length ? (
|
||||||
|
<div className="h-[400px] flex items-center justify-center">
|
||||||
|
<p className="text-sm">Contact is empty.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
contacts?.map((contact) => (
|
||||||
|
<button
|
||||||
|
key={contact}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setTarget(contact)}
|
||||||
|
className="block w-full p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<User.Provider pubkey={contact}>
|
||||||
|
<User.Root className="flex items-center gap-2">
|
||||||
|
<User.Avatar className="size-8 rounded-full" />
|
||||||
|
<User.Name className="text-sm font-medium" />
|
||||||
|
</User.Root>
|
||||||
|
</User.Provider>
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</Virtualizer>
|
||||||
|
</ScrollArea.Viewport>
|
||||||
|
<ScrollArea.Scrollbar
|
||||||
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
|
orientation="vertical"
|
||||||
|
>
|
||||||
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
||||||
|
</ScrollArea.Scrollbar>
|
||||||
|
<ScrollArea.Corner className="bg-transparent" />
|
||||||
|
</ScrollArea.Root>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Portal>
|
||||||
|
</Dialog.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CurrentUser() {
|
||||||
|
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: 'Copy Public Key',
|
||||||
|
action: async () => {
|
||||||
|
const npub = nip19.npubEncode(params.account)
|
||||||
|
await writeText(npub)
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
MenuItem.new({
|
||||||
|
text: 'Settings',
|
||||||
|
action: () => navigate({ to: '/' }),
|
||||||
|
}),
|
||||||
|
MenuItem.new({
|
||||||
|
text: 'Feedback',
|
||||||
|
action: async () => await open('https://github.com/lumehq/coop/issues'),
|
||||||
|
}),
|
||||||
|
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 (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => showContextMenu(e)}
|
||||||
|
className="h-8 inline-flex items-center gap-1.5"
|
||||||
|
>
|
||||||
|
<User.Provider pubkey={params.account}>
|
||||||
|
<User.Root className="shrink-0">
|
||||||
|
<User.Avatar className="size-8 rounded-full" />
|
||||||
|
</User.Root>
|
||||||
|
</User.Provider>
|
||||||
|
<CaretDown className="size-3 text-neutral-600 dark:text-neutral-400" />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
20
src/routes/$account/_layout/chats.new.lazy.tsx
Normal file
20
src/routes/$account/_layout/chats.new.lazy.tsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { CoopIcon } from '@/icons/coop'
|
||||||
|
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute('/$account/_layout/chats/new')({
|
||||||
|
component: Screen,
|
||||||
|
})
|
||||||
|
|
||||||
|
function Screen() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className="size-full flex flex-col gap-3 items-center justify-center"
|
||||||
|
>
|
||||||
|
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
|
||||||
|
<h1 className="text-center font-bold text-neutral-300 dark:text-neutral-700">
|
||||||
|
coop on nostr.
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
63
src/routes/$account/_layout/contacts.lazy.tsx
Normal file
63
src/routes/$account/_layout/contacts.lazy.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { User } from '@/components/user'
|
||||||
|
import { X } from '@phosphor-icons/react'
|
||||||
|
import * as ScrollArea from '@radix-ui/react-scroll-area'
|
||||||
|
import { Link, createLazyFileRoute } from '@tanstack/react-router'
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute('/$account/_layout/contacts')({
|
||||||
|
component: Screen,
|
||||||
|
})
|
||||||
|
|
||||||
|
function Screen() {
|
||||||
|
const params = Route.useParams()
|
||||||
|
const contacts = Route.useLoaderData()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollArea.Root
|
||||||
|
type={'scroll'}
|
||||||
|
scrollHideDelay={300}
|
||||||
|
className="overflow-hidden size-full flex flex-col"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-tauri-drag-region
|
||||||
|
className="h-12 shrink-0 flex items-center justify-between px-3.5"
|
||||||
|
>
|
||||||
|
<div />
|
||||||
|
<div className="text-sm font-semibold uppercase">Contact List</div>
|
||||||
|
<div className="inline-flex items-center justify-end">
|
||||||
|
<Link
|
||||||
|
to="/$account/chats/new"
|
||||||
|
params={{ account: params.account }}
|
||||||
|
className="size-7 inline-flex items-center justify-center rounded-md hover:bg-black/5 dark:hover:bg-white/5"
|
||||||
|
>
|
||||||
|
<X className="size-5" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ScrollArea.Viewport className="relative h-full flex-1 px-3.5 pb-3.5">
|
||||||
|
<div className="grid grid-cols-4 gap-3">
|
||||||
|
{contacts.map((contact) => (
|
||||||
|
<Link
|
||||||
|
key={contact}
|
||||||
|
to="/$account/chats/$id"
|
||||||
|
params={{ account: params.account, id: contact }}
|
||||||
|
>
|
||||||
|
<User.Provider key={contact} pubkey={contact}>
|
||||||
|
<User.Root className="h-44 flex flex-col items-center justify-center gap-3 p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5">
|
||||||
|
<User.Avatar className="size-16 rounded-full" />
|
||||||
|
<User.Name className="text-sm font-medium" />
|
||||||
|
</User.Root>
|
||||||
|
</User.Provider>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea.Viewport>
|
||||||
|
<ScrollArea.Scrollbar
|
||||||
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
|
orientation="vertical"
|
||||||
|
>
|
||||||
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
||||||
|
</ScrollArea.Scrollbar>
|
||||||
|
<ScrollArea.Corner className="bg-transparent" />
|
||||||
|
</ScrollArea.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
14
src/routes/$account/_layout/contacts.tsx
Normal file
14
src/routes/$account/_layout/contacts.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { commands } from '@/commands'
|
||||||
|
import { createFileRoute } from '@tanstack/react-router'
|
||||||
|
|
||||||
|
export const Route = createFileRoute('/$account/_layout/contacts')({
|
||||||
|
loader: async () => {
|
||||||
|
const res = await commands.getContactList()
|
||||||
|
|
||||||
|
if (res.status === 'ok') {
|
||||||
|
return res.data
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -2,28 +2,47 @@ import { commands } from "@/commands";
|
|||||||
import { Frame } from "@/components/frame";
|
import { Frame } from "@/components/frame";
|
||||||
import { Spinner } from "@/components/spinner";
|
import { Spinner } from "@/components/spinner";
|
||||||
import { Plus, X } from "@phosphor-icons/react";
|
import { Plus, X } from "@phosphor-icons/react";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
import { message } from "@tauri-apps/plugin-dialog";
|
import { message } from "@tauri-apps/plugin-dialog";
|
||||||
import { useEffect, useState, useTransition } from "react";
|
import { useState, useTransition } from "react";
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/$account/relays")({
|
export const Route = createLazyFileRoute("/inbox-relays")({
|
||||||
component: Screen,
|
component: Screen,
|
||||||
});
|
});
|
||||||
|
|
||||||
function Screen() {
|
function Screen() {
|
||||||
const navigate = Route.useNavigate();
|
const { account, redirect } = Route.useSearch();
|
||||||
const inboxRelays = Route.useLoaderData();
|
const { queryClient } = Route.useRouteContext();
|
||||||
const { account } = Route.useParams();
|
const {
|
||||||
|
data: relays,
|
||||||
|
error,
|
||||||
|
isError,
|
||||||
|
isLoading,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["relays", account],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await commands.getInboxRelays(account);
|
||||||
|
|
||||||
|
if (res.status === "ok") {
|
||||||
|
return res.data;
|
||||||
|
} else {
|
||||||
|
throw new Error(res.error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
|
||||||
const [newRelay, setNewRelay] = useState("");
|
const [newRelay, setNewRelay] = useState("");
|
||||||
const [relays, setRelays] = useState<string[]>([]);
|
|
||||||
const [isPending, startTransition] = useTransition();
|
const [isPending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
const navigate = Route.useNavigate();
|
||||||
|
|
||||||
const add = () => {
|
const add = () => {
|
||||||
try {
|
try {
|
||||||
let url = newRelay;
|
let url = newRelay;
|
||||||
|
|
||||||
if (relays.length >= 3) {
|
if (relays?.length >= 3) {
|
||||||
return message("You should keep relay lists small (1 - 3 relays).", {
|
return message("You should keep relay lists small (1 - 3 relays).", {
|
||||||
kind: "info",
|
kind: "info",
|
||||||
});
|
});
|
||||||
@@ -37,7 +56,10 @@ function Screen() {
|
|||||||
const relay = new URL(url);
|
const relay = new URL(url);
|
||||||
|
|
||||||
// Update
|
// Update
|
||||||
setRelays((prev) => [...prev, relay.toString()]);
|
queryClient.setQueryData(["relays", account], (prev: string[]) => [
|
||||||
|
...prev,
|
||||||
|
relay.toString(),
|
||||||
|
]);
|
||||||
setNewRelay("");
|
setNewRelay("");
|
||||||
} catch {
|
} catch {
|
||||||
message("URL is not valid.", { kind: "error" });
|
message("URL is not valid.", { kind: "error" });
|
||||||
@@ -45,12 +67,14 @@ function Screen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const remove = (relay: string) => {
|
const remove = (relay: string) => {
|
||||||
setRelays((prev) => prev.filter((item) => item !== relay));
|
queryClient.setQueryData(["relays", account], (prev: string[]) =>
|
||||||
|
prev.filter((item) => item !== relay),
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
if (!relays.length) {
|
if (!relays?.length) {
|
||||||
await message("You need to add at least 1 relay", { kind: "info" });
|
await message("You need to add at least 1 relay", { kind: "info" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -59,8 +83,7 @@ function Screen() {
|
|||||||
|
|
||||||
if (res.status === "ok") {
|
if (res.status === "ok") {
|
||||||
navigate({
|
navigate({
|
||||||
to: "/",
|
to: redirect,
|
||||||
params: { account },
|
|
||||||
replace: true,
|
replace: true,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@@ -73,9 +96,21 @@ function Screen() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
if (isLoading) {
|
||||||
setRelays(inboxRelays);
|
return (
|
||||||
}, [inboxRelays]);
|
<div className="size-full flex items-center justify-center">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div className="size-full flex items-center justify-center">
|
||||||
|
<p className="text-sm">{error.message}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="size-full flex items-center justify-center">
|
<div className="size-full flex items-center justify-center">
|
||||||
@@ -151,7 +186,7 @@ function Screen() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
disabled={isPending || !relays.length}
|
disabled={isPending || !relays?.length}
|
||||||
className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{isPending ? <Spinner /> : "Continue"}
|
{isPending ? <Spinner /> : "Continue"}
|
||||||
15
src/routes/inbox-relays.tsx
Normal file
15
src/routes/inbox-relays.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
|
|
||||||
|
type RouteSearch = {
|
||||||
|
account: string;
|
||||||
|
redirect: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Route = createFileRoute("/inbox-relays")({
|
||||||
|
validateSearch: (search: Record<string, string>): RouteSearch => {
|
||||||
|
return {
|
||||||
|
account: search.account,
|
||||||
|
redirect: search.redirect,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/")({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Workaround for keyring bug on Windows
|
// Workaround for keyring bug on Windows and Linux
|
||||||
const fil = accounts.filter((item) => !item.includes("Coop"));
|
const fil = accounts.filter((item) => !item.includes("Coop"));
|
||||||
|
|
||||||
return { accounts: fil };
|
return { accounts: fil };
|
||||||
|
|||||||
Reference in New Issue
Block a user