feat: add commands

src/commands.ts

@@ -0,0 +1,97 @@
+
+         // This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
+
+         /** user-defined commands **/
+
+         export const commands = {
+async getAccounts() : Promise<string[]> {
+return await TAURI_INVOKE("get_accounts");
+},
+async login(id: string) : Promise<Result<null, string>> {
+try {
+    return { status: "ok", data: await TAURI_INVOKE("login", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async getProfile(id: string) : Promise<Result<string, null>> {
+try {
+    return { status: "ok", data: await TAURI_INVOKE("get_profile", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+}
+}
+
+         /** user-defined events **/
+
+
+
+         /** user-defined statics **/
+
+         
+
+/** user-defined types **/
+
+
+
+/** tauri-specta globals **/
+
+         import { invoke as TAURI_INVOKE } from "@tauri-apps/api/core";
+import * as TAURI_API_EVENT from "@tauri-apps/api/event";
+import { type WebviewWindow as __WebviewWindow__ } from "@tauri-apps/api/webviewWindow";
+
+type __EventObj__<T> = {
+  listen: (
+    cb: TAURI_API_EVENT.EventCallback<T>
+  ) => ReturnType<typeof TAURI_API_EVENT.listen<T>>;
+  once: (
+    cb: TAURI_API_EVENT.EventCallback<T>
+  ) => ReturnType<typeof TAURI_API_EVENT.once<T>>;
+  emit: T extends null
+    ? (payload?: T) => ReturnType<typeof TAURI_API_EVENT.emit>
+    : (payload: T) => ReturnType<typeof TAURI_API_EVENT.emit>;
+};
+
+export type Result<T, E> =
+  | { status: "ok"; data: T }
+  | { status: "error"; error: E };
+
+function __makeEvents__<T extends Record<string, any>>(
+  mappings: Record<keyof T, string>
+) {
+  return new Proxy(
+    {} as unknown as {
+      [K in keyof T]: __EventObj__<T[K]> & {
+        (handle: __WebviewWindow__): __EventObj__<T[K]>;
+      };
+    },
+    {
+      get: (_, event) => {
+        const name = mappings[event as keyof T];
+
+        return new Proxy((() => {}) as any, {
+          apply: (_, __, [window]: [__WebviewWindow__]) => ({
+            listen: (arg: any) => window.listen(name, arg),
+            once: (arg: any) => window.once(name, arg),
+            emit: (arg: any) => window.emit(name, arg),
+          }),
+          get: (_, command: keyof __EventObj__<any>) => {
+            switch (command) {
+              case "listen":
+                return (arg: any) => TAURI_API_EVENT.listen(name, arg);
+              case "once":
+                return (arg: any) => TAURI_API_EVENT.once(name, arg);
+              case "emit":
+                return (arg: any) => TAURI_API_EVENT.emit(name, arg);
+            }
+          },
+        });
+      },
+    }
+  );
+}
+
+     

src/components/frame.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/commons";
+import { useRouteContext } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+
+export function Frame({
+	children,
+	shadow,
+	className,
+}: { children: ReactNode; shadow?: boolean; className?: string }) {
+	const { platform } = useRouteContext({ strict: false });
+
+	return (
+		<div
+			className={cn(
+				className,
+				platform === "linux"
+					? "bg-white dark:bg-neutral-950"
+					: "bg-white dark:bg-white/10",
+				shadow
+					? "shadow-lg shadow-neutral-500/10 dark:shadow-none dark:ring-1 dark:ring-white/20"
+					: "",
+			)}
+		>
+			{children}
+		</div>
+	);
+}

src/components/user/avatar.tsx

@@ -22,7 +22,7 @@ export function UserAvatar({ className }: { className?: string }) {
 			)}
 		>
 			<Avatar.Image
-				src={user.profile?.picture}
+				src={`//wsrv.nl/?url=${user.profile?.picture}&w=200&h=200`}
 				alt={user.pubkey}
 				loading="lazy"
 				decoding="async"

src/components/user/name.tsx

@@ -1,21 +1,12 @@
-import { cn, npub } from "@/commons";
+import { cn } from "@/commons";
 import { useUserContext } from "./provider";
 
-export function UserName({
-	className,
-	prefix,
-}: {
-	className?: string;
-	prefix?: string;
-}) {
+export function UserName({ className }: { className?: string }) {
 	const user = useUserContext();
 
 	return (
 		<div className={cn("max-w-[12rem] truncate", className)}>
-			{prefix}
-			{user.profile?.display_name ||
-				user.profile?.name ||
-				npub(user.pubkey, 16)}
+			{user.profile?.display_name || user.profile?.name || "Anon"}
 		</div>
 	);
 }

src/main.tsx

@@ -1,4 +1,5 @@
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { type } from "@tauri-apps/plugin-os";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import "./app.css";
@@ -9,10 +10,12 @@ import { routeTree } from "./routes.gen";
 
 // Create a new router instance
 const queryClient = new QueryClient();
+const platform = type();
 const router = createRouter({
 	routeTree,
 	context: {
 		queryClient,
+		platform,
 	},
 });
 

src/routes/__root.tsx

@@ -1,10 +1,30 @@
+import { cn } from "@/commons";
 import type { QueryClient } from "@tanstack/react-query";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import type { OsType } from "@tauri-apps/plugin-os";
 
 interface RouterContext {
 	queryClient: QueryClient;
+	platform: OsType;
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({
-	component: () => <Outlet />,
+	component: RootComponent,
 });
+
+function RootComponent() {
+	const { platform } = Route.useRouteContext();
+
+	return (
+		<div
+			className={cn(
+				"size-full",
+				platform === "linux"
+					? "bg-neutral-50 dark:bg-neutral-950"
+					: "bg-transparent",
+			)}
+		>
+			<Outlet />
+		</div>
+	);
+}

src/routes/index.tsx

@@ -1,14 +1,16 @@
+import { commands } from "@/commands";
 import { npub } from "@/commons";
+import { Frame } from "@/components/frame";
 import { Spinner } from "@/components/spinner";
 import { User } from "@/components/user";
 import { Plus } from "@phosphor-icons/react";
 import { Link, createFileRoute, redirect } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
-import { useMemo, useState } from "react";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useMemo, useState, useTransition } from "react";
 
 export const Route = createFileRoute("/")({
 	beforeLoad: async () => {
-		const accounts: string[] = await invoke("get_accounts");
+		const accounts = await commands.getAccounts();
 
 		if (!accounts.length) {
 			throw redirect({
@@ -36,24 +38,28 @@ function Screen() {
 		[],
 	);
 
-	const [loading, setLoading] = useState({ npub: "", status: false });
+	const [value, setValue] = useState("");
+	const [isPending, startTransition] = useTransition();
 
-	const login = async (npub: string) => {
-		try {
-			setLoading({ npub, status: true });
+	const loginWith = async (npub: string) => {
+		setValue(npub);
+		startTransition(async () => {
+			const run = await commands.login(npub);
 
-			const status = await invoke("login", { id: npub });
-
-			if (status) {
-				return navigate({
+			if (run.status === "ok") {
+				navigate({
 					to: "/$account/chats",
 					params: { account: npub },
 					replace: true,
 				});
+			} else {
+				setValue("");
+				await message(run.error, {
+					title: "Login",
+					kind: "error",
+				});
 			}
-		} catch (e) {
-			setLoading({ npub: "", status: false });
-		}
+		});
 	};
 
 	return (
@@ -65,12 +71,15 @@ function Screen() {
 					</h3>
 					<h1 className="leading-tight text-xl font-semibold">Welcome back!</h1>
 				</div>
-				<div className="flex flex-col w-full bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-lg shadow-neutral-500/10 dark:shadow-none dark:bg-white/10 dark:ring-1 dark:ring-white/5">
+				<Frame
+					className="flex flex-col w-full divide-y divide-neutral-100 dark:divide-white/5 rounded-xl overflow-hidden"
+					shadow
+				>
 					{context.accounts.map((account) => (
 						<div
 							key={account}
-							onClick={() => login(account)}
-							onKeyDown={() => login(account)}
+							onClick={() => loginWith(account)}
+							onKeyDown={() => loginWith(account)}
 							className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
 						>
 							<User.Provider pubkey={account}>
@@ -85,9 +94,7 @@ function Screen() {
 								</User.Root>
 							</User.Provider>
 							<div className="inline-flex items-center justify-center size-10">
-								{loading.npub === account && loading.status ? (
-									<Spinner />
-								) : null}
+								{value === account && isPending ? <Spinner /> : null}
 							</div>
 						</div>
 					))}
@@ -99,12 +106,12 @@ function Screen() {
 							<div className="inline-flex items-center justify-center rounded-full size-10 bg-neutral-200 dark:bg-white/10">
 								<Plus className="size-5" />
 							</div>
-							<span className="max-w-[6rem] truncate text-sm font-medium leading-tight">
+							<span className="truncate text-sm font-medium leading-tight">
 								Add an account
 							</span>
 						</div>
 					</Link>
-				</div>
+				</Frame>
 			</div>
 		</div>
 	);