feat: add negentropy sync to settings

This commit is contained in:
reya 2024-11-11 10:02:19 +07:00
parent c93edde7d2
commit c5d06a2492
12 changed files with 388 additions and 142 deletions

View File

@ -2,4 +2,5 @@ pub mod account;
pub mod event;
pub mod metadata;
pub mod relay;
pub mod sync;
pub mod window;

View File

@ -0,0 +1,71 @@
use nostr_sdk::prelude::*;
use std::collections::HashSet;
use tauri::State;
use crate::Nostr;
#[tauri::command]
#[specta::specta]
pub async fn sync_all(
state: State<'_, Nostr>,
reader: tauri::ipc::Channel<f64>,
) -> Result<(), String> {
let client = &state.client;
// Create a filter for get all public keys
let filter = Filter::new().kinds(vec![
Kind::TextNote,
Kind::Repost,
Kind::FollowSet,
Kind::ContactList,
Kind::MuteList,
]);
let events = client
.database()
.query(vec![filter])
.await
.map_err(|err| err.to_string())?;
let public_keys: Vec<PublicKey> = events
.iter()
.flat_map(|ev| ev.tags.public_keys().copied())
.collect::<HashSet<_>>()
.into_iter()
.collect();
let (tx, mut rx) = SyncProgress::channel();
let opts = SyncOptions::default().progress(tx);
tauri::async_runtime::spawn(async move {
while rx.changed().await.is_ok() {
let progress = *rx.borrow_and_update();
if progress.total > 0 {
reader.send(progress.percentage() * 100.0).unwrap();
}
}
});
for chunk in public_keys.chunks(200) {
let authors = chunk.to_owned();
let filter = Filter::new().authors(authors).kinds(vec![
Kind::Metadata,
Kind::ContactList,
Kind::FollowSet,
Kind::Interests,
Kind::InterestSet,
Kind::EventDeletion,
Kind::TextNote,
Kind::Repost,
Kind::Comment,
]);
let _ = client
.sync(filter, &opts)
.await
.map_err(|err| err.to_string())?;
}
Ok(())
}

View File

@ -5,7 +5,7 @@
#[cfg(target_os = "macos")]
use border::WebviewWindowExt as BorderWebviewWindowExt;
use commands::{account::*, event::*, metadata::*, relay::*, window::*};
use commands::{account::*, event::*, metadata::*, relay::*, sync::*, window::*};
use common::{get_all_accounts, parse_event};
use nostr_sdk::prelude::{Profile as DatabaseProfile, *};
use serde::{Deserialize, Serialize};
@ -76,6 +76,7 @@ fn main() {
tracing_subscriber::fmt::init();
let builder = Builder::<tauri::Wry>::new().commands(collect_commands![
sync_all,
get_all_relays,
get_all_relay_lists,
is_relay_connected,
@ -365,6 +366,8 @@ fn main() {
// Set interval
let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(600));
// Skip the first tick
interval.tick().await;
loop {
interval.tick().await;

View File

@ -5,6 +5,14 @@
export const commands = {
async syncAll(reader: TAURI_CHANNEL<number>) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("sync_all", { reader }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async getAllRelays() : Promise<Result<string[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_all_relays") };
@ -554,6 +562,7 @@ export type Meta = { content: string; images: string[]; events: string[]; mentio
export type NewWindow = { label: string; title: string; url: string; width: number; height: number; maximizable: boolean; minimizable: boolean; hidden_title: boolean; closable: boolean }
export type RichEvent = { raw: string; parsed: Meta | null }
export type Settings = { resize_service: boolean; content_warning: boolean; display_avatar: boolean; display_zap_button: boolean; display_repost_button: boolean; display_media: boolean }
export type TAURI_CHANNEL<TSend> = null
/** tauri-specta globals **/

View File

@ -19,7 +19,6 @@ import { Route as AppIndexImport } from './routes/_app/index'
import { Route as ZapIdImport } from './routes/zap.$id'
import { Route as SettingsWalletImport } from './routes/settings/wallet'
import { Route as SettingsRelaysImport } from './routes/settings/relays'
import { Route as SettingsGeneralImport } from './routes/settings/general'
import { Route as ColumnsLayoutImport } from './routes/columns/_layout'
import { Route as IdSetProfileImport } from './routes/$id.set-profile'
import { Route as IdSetInterestImport } from './routes/$id.set-interest'
@ -39,6 +38,8 @@ import { Route as ColumnsLayoutCreateNewsfeedF2fImport } from './routes/columns/
const ColumnsImport = createFileRoute('/columns')()
const SettingsLazyImport = createFileRoute('/settings')()
const NewLazyImport = createFileRoute('/new')()
const SettingsSyncLazyImport = createFileRoute('/settings/sync')()
const SettingsGeneralLazyImport = createFileRoute('/settings/general')()
const NewAccountWatchLazyImport = createFileRoute('/new-account/watch')()
const NewAccountImportLazyImport = createFileRoute('/new-account/import')()
const NewAccountConnectLazyImport = createFileRoute('/new-account/connect')()
@ -118,6 +119,20 @@ const AppIndexRoute = AppIndexImport.update({
getParentRoute: () => AppRoute,
} as any).lazy(() => import('./routes/_app/index.lazy').then((d) => d.Route))
const SettingsSyncLazyRoute = SettingsSyncLazyImport.update({
id: '/sync',
path: '/sync',
getParentRoute: () => SettingsLazyRoute,
} as any).lazy(() => import('./routes/settings/sync.lazy').then((d) => d.Route))
const SettingsGeneralLazyRoute = SettingsGeneralLazyImport.update({
id: '/general',
path: '/general',
getParentRoute: () => SettingsLazyRoute,
} as any).lazy(() =>
import('./routes/settings/general.lazy').then((d) => d.Route),
)
const NewAccountWatchLazyRoute = NewAccountWatchLazyImport.update({
id: '/new-account/watch',
path: '/new-account/watch',
@ -164,14 +179,6 @@ const SettingsRelaysRoute = SettingsRelaysImport.update({
import('./routes/settings/relays.lazy').then((d) => d.Route),
)
const SettingsGeneralRoute = SettingsGeneralImport.update({
id: '/general',
path: '/general',
getParentRoute: () => SettingsLazyRoute,
} as any).lazy(() =>
import('./routes/settings/general.lazy').then((d) => d.Route),
)
const ColumnsLayoutRoute = ColumnsLayoutImport.update({
id: '/_layout',
getParentRoute: () => ColumnsRoute,
@ -440,13 +447,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ColumnsLayoutImport
parentRoute: typeof ColumnsRoute
}
'/settings/general': {
id: '/settings/general'
path: '/general'
fullPath: '/settings/general'
preLoaderRoute: typeof SettingsGeneralImport
parentRoute: typeof SettingsLazyImport
}
'/settings/relays': {
id: '/settings/relays'
path: '/relays'
@ -489,6 +489,20 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof NewAccountWatchLazyImport
parentRoute: typeof rootRoute
}
'/settings/general': {
id: '/settings/general'
path: '/general'
fullPath: '/settings/general'
preLoaderRoute: typeof SettingsGeneralLazyImport
parentRoute: typeof SettingsLazyImport
}
'/settings/sync': {
id: '/settings/sync'
path: '/sync'
fullPath: '/settings/sync'
preLoaderRoute: typeof SettingsSyncLazyImport
parentRoute: typeof SettingsLazyImport
}
'/_app/': {
id: '/_app/'
path: '/'
@ -666,15 +680,17 @@ const AppRouteChildren: AppRouteChildren = {
const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)
interface SettingsLazyRouteChildren {
SettingsGeneralRoute: typeof SettingsGeneralRoute
SettingsRelaysRoute: typeof SettingsRelaysRoute
SettingsWalletRoute: typeof SettingsWalletRoute
SettingsGeneralLazyRoute: typeof SettingsGeneralLazyRoute
SettingsSyncLazyRoute: typeof SettingsSyncLazyRoute
}
const SettingsLazyRouteChildren: SettingsLazyRouteChildren = {
SettingsGeneralRoute: SettingsGeneralRoute,
SettingsRelaysRoute: SettingsRelaysRoute,
SettingsWalletRoute: SettingsWalletRoute,
SettingsGeneralLazyRoute: SettingsGeneralLazyRoute,
SettingsSyncLazyRoute: SettingsSyncLazyRoute,
}
const SettingsLazyRouteWithChildren = SettingsLazyRoute._addFileChildren(
@ -768,13 +784,14 @@ export interface FileRoutesByFullPath {
'/$id/set-interest': typeof IdSetInterestRoute
'/$id/set-profile': typeof IdSetProfileRoute
'/columns': typeof ColumnsLayoutRouteWithChildren
'/settings/general': typeof SettingsGeneralRoute
'/settings/relays': typeof SettingsRelaysRoute
'/settings/wallet': typeof SettingsWalletRoute
'/zap/$id': typeof ZapIdRoute
'/new-account/connect': typeof NewAccountConnectLazyRoute
'/new-account/import': typeof NewAccountImportLazyRoute
'/new-account/watch': typeof NewAccountWatchLazyRoute
'/settings/general': typeof SettingsGeneralLazyRoute
'/settings/sync': typeof SettingsSyncLazyRoute
'/': typeof AppIndexRoute
'/new-post': typeof NewPostIndexRoute
'/columns/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
@ -807,13 +824,14 @@ export interface FileRoutesByTo {
'/$id/set-interest': typeof IdSetInterestRoute
'/$id/set-profile': typeof IdSetProfileRoute
'/columns': typeof ColumnsLayoutRouteWithChildren
'/settings/general': typeof SettingsGeneralRoute
'/settings/relays': typeof SettingsRelaysRoute
'/settings/wallet': typeof SettingsWalletRoute
'/zap/$id': typeof ZapIdRoute
'/new-account/connect': typeof NewAccountConnectLazyRoute
'/new-account/import': typeof NewAccountImportLazyRoute
'/new-account/watch': typeof NewAccountWatchLazyRoute
'/settings/general': typeof SettingsGeneralLazyRoute
'/settings/sync': typeof SettingsSyncLazyRoute
'/': typeof AppIndexRoute
'/new-post': typeof NewPostIndexRoute
'/columns/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
@ -849,13 +867,14 @@ export interface FileRoutesById {
'/$id/set-profile': typeof IdSetProfileRoute
'/columns': typeof ColumnsRouteWithChildren
'/columns/_layout': typeof ColumnsLayoutRouteWithChildren
'/settings/general': typeof SettingsGeneralRoute
'/settings/relays': typeof SettingsRelaysRoute
'/settings/wallet': typeof SettingsWalletRoute
'/zap/$id': typeof ZapIdRoute
'/new-account/connect': typeof NewAccountConnectLazyRoute
'/new-account/import': typeof NewAccountImportLazyRoute
'/new-account/watch': typeof NewAccountWatchLazyRoute
'/settings/general': typeof SettingsGeneralLazyRoute
'/settings/sync': typeof SettingsSyncLazyRoute
'/_app/': typeof AppIndexRoute
'/new-post/': typeof NewPostIndexRoute
'/columns/_layout/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
@ -891,13 +910,14 @@ export interface FileRouteTypes {
| '/$id/set-interest'
| '/$id/set-profile'
| '/columns'
| '/settings/general'
| '/settings/relays'
| '/settings/wallet'
| '/zap/$id'
| '/new-account/connect'
| '/new-account/import'
| '/new-account/watch'
| '/settings/general'
| '/settings/sync'
| '/'
| '/new-post'
| '/columns/create-newsfeed'
@ -929,13 +949,14 @@ export interface FileRouteTypes {
| '/$id/set-interest'
| '/$id/set-profile'
| '/columns'
| '/settings/general'
| '/settings/relays'
| '/settings/wallet'
| '/zap/$id'
| '/new-account/connect'
| '/new-account/import'
| '/new-account/watch'
| '/settings/general'
| '/settings/sync'
| '/'
| '/new-post'
| '/columns/create-newsfeed'
@ -969,13 +990,14 @@ export interface FileRouteTypes {
| '/$id/set-profile'
| '/columns'
| '/columns/_layout'
| '/settings/general'
| '/settings/relays'
| '/settings/wallet'
| '/zap/$id'
| '/new-account/connect'
| '/new-account/import'
| '/new-account/watch'
| '/settings/general'
| '/settings/sync'
| '/_app/'
| '/new-post/'
| '/columns/_layout/create-newsfeed'
@ -1068,9 +1090,10 @@ export const routeTree = rootRoute
"/settings": {
"filePath": "settings.lazy.tsx",
"children": [
"/settings/general",
"/settings/relays",
"/settings/wallet"
"/settings/wallet",
"/settings/general",
"/settings/sync"
]
},
"/$id/set-group": {
@ -1113,10 +1136,6 @@ export const routeTree = rootRoute
"/columns/_layout/users/$id"
]
},
"/settings/general": {
"filePath": "settings/general.tsx",
"parent": "/settings"
},
"/settings/relays": {
"filePath": "settings/relays.tsx",
"parent": "/settings"
@ -1137,6 +1156,14 @@ export const routeTree = rootRoute
"/new-account/watch": {
"filePath": "new-account/watch.lazy.tsx"
},
"/settings/general": {
"filePath": "settings/general.lazy.tsx",
"parent": "/settings"
},
"/settings/sync": {
"filePath": "settings/sync.lazy.tsx",
"parent": "/settings"
},
"/_app/": {
"filePath": "_app/index.tsx",
"parent": "/_app"

View File

@ -118,7 +118,7 @@ function Account({ pubkey }: { pubkey: string }) {
const items = await Promise.all([
MenuItem.new({
text: "Unlock",
enabled: !isActive || true,
enabled: !isActive,
action: async () => await commands.setSigner(pubkey),
}),
PredefinedMenuItem.new({ item: "Separator" }),
@ -183,7 +183,7 @@ function Account({ pubkey }: { pubkey: string }) {
await menu.popup().catch((e) => console.error(e));
},
[pubkey],
[isActive, pubkey],
);
useEffect(() => {

View File

@ -1,96 +1,118 @@
import { cn } from '@/commons'
import { CurrencyBtc, GearSix, HardDrives } from '@phosphor-icons/react'
import * as ScrollArea from '@radix-ui/react-scroll-area'
import { Link } from '@tanstack/react-router'
import { Outlet, createLazyFileRoute } from '@tanstack/react-router'
import { cn } from "@/commons";
import {
CloudArrowDown,
CurrencyBtc,
GearSix,
HardDrives,
} from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { Link } from "@tanstack/react-router";
import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute('/settings')({
component: Screen,
})
export const Route = createLazyFileRoute("/settings")({
component: Screen,
});
function Screen() {
const { platform } = Route.useRouteContext()
const { platform } = Route.useRouteContext();
return (
<div className="flex size-full">
<div
data-tauri-drag-region
className={cn(
'w-[200px] shrink-0 flex flex-col gap-1 border-r border-black/10 dark:border-white/10 p-2',
platform === 'macos' ? 'pt-11' : '',
)}
>
<div className="h-8 px-1.5">
<h1 className="text-lg font-semibold">Settings</h1>
</div>
<Link to="/settings/general">
{({ isActive }) => {
return (
<div
className={cn(
'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
isActive
? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
: 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
)}
>
<GearSix className="size-5 shrink-0" />
<p className="text-sm font-medium">General</p>
</div>
)
}}
</Link>
<Link to="/settings/relays">
{({ isActive }) => {
return (
<div
className={cn(
'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
isActive
? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
: 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
)}
>
<HardDrives className="size-5 shrink-0" />
<p className="text-sm font-medium">Relays</p>
</div>
)
}}
</Link>
<Link to="/settings/wallet">
{({ isActive }) => {
return (
<div
className={cn(
'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
isActive
? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
: 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
)}
>
<CurrencyBtc className="size-5 shrink-0" />
<p className="text-sm font-medium">Wallet</p>
</div>
)
}}
</Link>
</div>
<ScrollArea.Root
type={'scroll'}
scrollHideDelay={300}
className="flex-1 overflow-hidden size-full"
>
<ScrollArea.Viewport className="relative h-full pt-12">
<Outlet />
</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/10 dark:bg-white/10 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>
</div>
)
return (
<div className="flex size-full">
<div
data-tauri-drag-region
className={cn(
"w-[200px] shrink-0 flex flex-col gap-1 border-r border-black/10 dark:border-white/10 p-2",
platform === "macos" ? "pt-11" : "",
)}
>
<div className="h-8 px-1.5">
<h1 className="text-lg font-semibold">Settings</h1>
</div>
<Link to="/settings/general">
{({ isActive }) => {
return (
<div
className={cn(
"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
isActive
? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
)}
>
<GearSix className="size-5 shrink-0" />
<p className="text-sm font-medium">General</p>
</div>
);
}}
</Link>
<Link to="/settings/sync">
{({ isActive }) => {
return (
<div
className={cn(
"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
isActive
? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
)}
>
<CloudArrowDown className="size-5 shrink-0" />
<p className="text-sm font-medium">Sync</p>
</div>
);
}}
</Link>
<Link to="/settings/relays">
{({ isActive }) => {
return (
<div
className={cn(
"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
isActive
? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
)}
>
<HardDrives className="size-5 shrink-0" />
<p className="text-sm font-medium">Relays</p>
</div>
);
}}
</Link>
<Link to="/settings/wallet">
{({ isActive }) => {
return (
<div
className={cn(
"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
isActive
? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
)}
>
<CurrencyBtc className="size-5 shrink-0" />
<p className="text-sm font-medium">Wallet</p>
</div>
);
}}
</Link>
</div>
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="flex-1 overflow-hidden size-full"
>
<ScrollArea.Viewport className="relative h-full pt-12">
<Outlet />
</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/10 dark:bg-white/10 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>
</div>
);
}

View File

@ -69,9 +69,7 @@ function Screen() {
<div className="relative w-full">
<div className="flex flex-col gap-6 px-3 pb-3">
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
General
</h2>
<h2 className="text-sm font-semibold">General</h2>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<Setting
name="Content Warning"
@ -92,9 +90,7 @@ function Screen() {
</div>
</div>
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
Appearance
</h2>
<h2 className="text-sm font-semibold">Appearance</h2>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<div className="flex items-start justify-between w-full gap-4 py-3">
<div className="flex-1">
@ -140,9 +136,7 @@ function Screen() {
</div>
</div>
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
Privacy & Performance
</h2>
<h2 className="text-sm font-semibold">Privacy & Performance</h2>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<Setting
name="Resize Service"

View File

@ -1,3 +0,0 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/settings/general")();

View File

@ -53,9 +53,20 @@ function Screen() {
<div className="w-full px-3 pb-3">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
Connected Relays
</h2>
<div>
<h2 className="text-sm font-semibold">Connected Relays</h2>
<p className="text-sm text-neutral-500">
Learn more about Relays{" "}
<a
href="https://nostr.how/en/relays"
target="_blank"
rel="noreferrer"
className="text-blue-500 !underline"
>
here
</a>
</p>
</div>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<div className="flex items-center h-14">
<div className="flex items-center w-full gap-2 mb-0">

View File

@ -0,0 +1,100 @@
import { createLazyFileRoute } from "@tanstack/react-router";
import { useEffect, useState, useTransition } from "react";
import * as Progress from "@radix-ui/react-progress";
import { Channel } from "@tauri-apps/api/core";
import { commands } from "@/commands.gen";
import { message } from "@tauri-apps/plugin-dialog";
import { Spinner } from "@/components";
export const Route = createLazyFileRoute("/settings/sync")({
component: Screen,
});
function Screen() {
const [channel, _setChannel] = useState<Channel<number>>(
() => new Channel<number>(),
);
const [progress, setProgress] = useState(0);
const [isPending, startTransition] = useTransition();
const runSync = () => {
startTransition(async () => {
const res = await commands.syncAll(channel);
if (res.status === "error") {
await message(res.error, { kind: "error" });
}
return;
});
};
useEffect(() => {
channel.onmessage = (message) => {
setProgress(message);
};
}, [channel]);
return (
<div className="w-full h-full px-3 pb-3">
<div className="h-full flex flex-col w-full gap-2">
<div>
<h2 className="text-sm font-semibold">Sync events with Negentropy</h2>
<p className="text-sm text-neutral-500">
Learn more about negentropy{" "}
<a
href="https://github.com/hoytech/strfry/blob/nextneg/docs/negentropy.md"
target="_blank"
rel="noreferrer"
className="text-blue-500 !underline"
>
here
</a>
</p>
</div>
<div className="text-sm flex flex-col gap-2">
<h5 className="font-semibold">Data will be sync:</h5>
<div className="w-full h-9 inline-flex items-center px-2 bg-black/5 dark:bg-white/5 rounded-lg text-neutral-700 dark:text-neutral-300">
Metadata of all public keys that found in database.
</div>
<div className="w-full h-9 inline-flex items-center px-2 bg-black/5 dark:bg-white/5 rounded-lg text-neutral-700 dark:text-neutral-300">
Contact list of all public keys that found in database.
</div>
<div className="w-full h-9 inline-flex items-center px-2 bg-black/5 dark:bg-white/5 rounded-lg text-neutral-700 dark:text-neutral-300">
Follow and interest sets of all public keys that found in database.
</div>
<div className="w-full h-9 inline-flex items-center px-2 bg-black/5 dark:bg-white/5 rounded-lg text-neutral-700 dark:text-neutral-300">
All notes and reposts of all public keys that found in database.
</div>
<div className="w-full h-9 inline-flex items-center px-2 bg-black/5 dark:bg-white/5 rounded-lg text-neutral-700 dark:text-neutral-300">
All comments all public keys that found in database.
</div>
</div>
<div className="relative mt-auto flex items-center gap-4 justify-between">
<div className="flex-1">
<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 rounded-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</Progress.Root>
</div>
<button
type="button"
disabled={isPending}
onClick={() => runSync()}
className="shrink-0 w-20 h-8 rounded-lg inline-flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold"
>
{isPending ? <Spinner className="size-4" /> : "Sync"}
</button>
</div>
</div>
</div>
);
}

View File

@ -33,9 +33,20 @@ function Screen() {
return (
<div className="w-full px-3 pb-3">
<div className="flex flex-col w-full gap-2">
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
Wallet
</h2>
<div>
<h2 className="text-sm font-semibold">Bitcoin Wallet</h2>
<p className="text-sm text-neutral-500">
Learn more about Zap{" "}
<a
href="https://nostr.how/en/zaps"
target="_blank"
rel="noreferrer"
className="text-blue-500 !underline"
>
here
</a>
</p>
</div>
<div className="w-full h-44 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl">
<Button
onConnected={(provider) =>