refactor: use specta for commands (#192)

* feat: add tauri-specta

* refactor: system library

* chore: format

apps/desktop2/src/routes/settings/backup.tsx

@@ -1,5 +1,5 @@
 import { User } from "@/components/user";
-import type { Account } from "@lume/types";
+import { NostrAccount } from "@lume/system";
 import { displayNsec } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
@@ -7,19 +7,20 @@ import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { useState } from "react";
 import { toast } from "sonner";
 
+interface Account {
+	npub: string;
+	nsec: string;
+}
+
 export const Route = createFileRoute("/settings/backup")({
 	component: Screen,
-	loader: async ({ context }) => {
-		const ark = context.ark;
-		const npubs = await ark.get_accounts();
-
+	loader: async () => {
+		const npubs = await NostrAccount.getAccounts();
 		const accounts: Account[] = [];
 
-		for (const account of npubs) {
-			const nsec: string = await invoke("get_stored_nsec", {
-				npub: account.npub,
-			});
-			accounts.push({ ...account, nsec });
+		for (const npub of npubs) {
+			const nsec: string = await invoke("get_stored_nsec", { npub });
+			accounts.push({ npub, nsec });
 		}
 
 		return accounts;
@@ -33,14 +34,14 @@ function Screen() {
 		<div className="mx-auto w-full max-w-xl">
 			<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
 				{accounts.map((account) => (
-					<NostrAccount key={account.npub} account={account} />
+					<List key={account.npub} account={account} />
 				))}
 			</div>
 		</div>
 	);
 }
 
-function NostrAccount({ account }: { account: Account }) {
+function List({ account }: { account: Account }) {
 	const [key, setKey] = useState(account.nsec);
 	const [copied, setCopied] = useState(false);
 	const [passphase, setPassphase] = useState("");

apps/desktop2/src/routes/settings/general.tsx

@@ -1,28 +1,24 @@
+import { NostrQuery } from "@lume/system";
 import type { Settings } from "@lume/types";
 import * as Switch from "@radix-ui/react-switch";
 import { createFileRoute } from "@tanstack/react-router";
-import {
-	isPermissionGranted,
-	requestPermission,
-} from "@tauri-apps/plugin-notification";
+import { requestPermission } from "@tauri-apps/plugin-notification";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 export const Route = createFileRoute("/settings/general")({
-	beforeLoad: async ({ context }) => {
-		const permissionGranted = await isPermissionGranted(); // get notification permission
-		const ark = context.ark;
-		const settings = await ark.get_settings();
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getSettings();
 
 		return {
-			settings: { ...settings, notification: permissionGranted },
+			settings,
 		};
 	},
 	component: Screen,
 });
 
 function Screen() {
-	const { ark, settings } = Route.useRouteContext();
+	const { settings } = Route.useRouteContext();
 	const [newSettings, setNewSettings] = useState<Settings>(settings);
 
 	const toggleNofitication = async () => {
@@ -62,7 +58,7 @@ function Screen() {
 	};
 
 	const updateSettings = useDebouncedCallback(() => {
-		ark.set_settings(newSettings);
+		NostrQuery.setSettings(newSettings);
 	}, 200);
 
 	useEffect(() => {

apps/desktop2/src/routes/settings/relay.tsx

@@ -1,14 +1,13 @@
 import { CancelIcon, PlusIcon } from "@lume/icons";
+import { NostrQuery } from "@lume/system";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/settings/relay")({
-	loader: async ({ context }) => {
-		const ark = context.ark;
-		const relays = await ark.get_relays();
-
+	loader: async () => {
+		const relays = await NostrQuery.getRelays();
 		return relays;
 	},
 	component: Screen,
@@ -18,12 +17,11 @@ function Screen() {
 	const relayList = Route.useLoaderData();
 	const [relays, setRelays] = useState(relayList.connected);
 
-	const { ark } = Route.useRouteContext();
 	const { register, reset, handleSubmit } = useForm();
 
 	const onSubmit = async (data: { url: string }) => {
 		try {
-			const add = await ark.add_relay(data.url);
+			const add = await NostrQuery.connectRelay(data.url);
 			if (add) {
 				setRelays((prev) => [...prev, data.url]);
 				reset();
@@ -56,6 +54,7 @@ function Screen() {
 								<div>
 									<button
 										type="button"
+										onClick={() => NostrQuery.removeRelay(relay)}
 										className="inline-flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10"
 									>
 										<CancelIcon className="size-4" />

apps/desktop2/src/routes/settings/user.tsx

@@ -1,5 +1,6 @@
 import { AvatarUploader } from "@/components/avatarUploader";
 import { PlusIcon } from "@lume/icons";
+import { NostrAccount } from "@lume/system";
 import type { Metadata } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { Link } from "@tanstack/react-router";
@@ -9,16 +10,15 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/settings/user")({
-	beforeLoad: async ({ context }) => {
-		const ark = context.ark;
-		const profile = await ark.get_current_user_profile();
+	beforeLoad: async () => {
+		const profile = await NostrAccount.getProfile();
 		return { profile };
 	},
 	component: Screen,
 });
 
 function Screen() {
-	const { ark, profile } = Route.useRouteContext();
+	const { profile } = Route.useRouteContext();
 	const { register, handleSubmit } = useForm({ defaultValues: profile });
 
 	const [loading, setLoading] = useState(false);
@@ -29,7 +29,7 @@ function Screen() {
 			setLoading(true);
 
 			const newProfile: Metadata = { ...profile, ...data, picture };
-			await ark.create_profile(newProfile);
+			await NostrAccount.createProfile(newProfile);
 
 			setLoading(false);
 		} catch (e) {