feat: add create account flow

packages/ark/src/ark.ts

@@ -6,6 +6,7 @@ import type {
 	EventWithReplies,
 	Keys,
 	Metadata,
+	Settings,
 } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from "@tauri-apps/plugin-dialog";
@@ -338,6 +339,25 @@ export class Ark {
 		}
 	}
 
+	public async create_profile(profile: Metadata) {
+		try {
+			const event: string = await invoke("create_profile", {
+				name: profile.name || "",
+				display_name: profile.display_name || "",
+				displayName: profile.display_name || "",
+				about: profile.about || "",
+				picture: profile.picture || "",
+				banner: profile.banner || "",
+				nip05: profile.nip05 || "",
+				lud16: profile.lud16 || "",
+				website: profile.website || "",
+			});
+			return event;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
 	public async get_contact_list() {
 		try {
 			const cmd: string[] = await invoke("get_contact_list");
@@ -499,6 +519,30 @@ export class Ark {
 		}
 	}
 
+	public async get_settings(id: string) {
+		try {
+			const cmd: string = await invoke("get_settings", { id });
+			if (!cmd) return null;
+			if (!cmd.length) return null;
+
+			const settings: Settings = JSON.parse(cmd);
+			return settings;
+		} catch (e) {
+			throw new Error(e);
+		}
+	}
+
+	public async set_settings(settings: Settings) {
+		try {
+			const cmd: string = await invoke("set_settings", {
+				content: JSON.stringify(settings),
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(e);
+		}
+	}
+
 	public open_thread(id: string) {
 		return new WebviewWindow(`event-${id}`, {
 			title: "Thread",

packages/icons/src/check.tsx

@@ -1,24 +1,16 @@
 import { SVGProps } from "react";
 
 export function CheckIcon(
-	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			fill="none"
-			viewBox="0 0 24 24"
-			{...props}
-		>
-			<path
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				d="M5 12.713l5.017 5.012.4-.701a28.598 28.598 0 018.7-9.42L20 7"
-			/>
-		</svg>
-	);
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+        d="M4.75 12.777 10 19.25l9.25-14.5"
+      />
+    </svg>
+  );
 }

packages/types/index.d.ts

@@ -1,13 +1,7 @@
 export interface Settings {
-	autoupdate: boolean;
-	nsecbunker: boolean;
-	media: boolean;
-	hashtag: boolean;
-	lowPower: boolean;
-	translation: boolean;
-	translateApiKey: string;
-	instantZap: boolean;
-	defaultZapAmount: number;
+	notification: boolean;
+	enhancedPrivacy: boolean;
+	autoUpdate: boolean;
 }
 
 export interface Keys {

packages/ui/src/container.tsx

@@ -1,13 +1,16 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { ReactNode } from "react";
 
 export function Container({
   children,
   withDrag = false,
+  withNavigate = true,
   className,
 }: {
   children: ReactNode;
   withDrag?: boolean;
+  withNavigate?: boolean;
   className?: string;
 }) {
   return (
@@ -18,7 +21,29 @@ export function Container({
       )}
     >
       {withDrag ? (
-        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+        <div
+          data-tauri-drag-region
+          className="flex h-11 w-full shrink-0 items-center justify-end pr-2"
+        >
+          {withNavigate ? (
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => window.history.back()}
+                className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+              >
+                <ArrowLeftIcon className="size-5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => window.history.forward()}
+                className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+              >
+                <ArrowRightIcon className="size-5" />
+              </button>
+            </div>
+          ) : null}
+        </div>
       ) : null}
       {children}
     </div>

packages/utils/src/formater.ts

@@ -45,6 +45,21 @@ export function formatCreatedAt(time: number, message = false) {
 	return formated;
 }
 
+export function displayNsec(key: string, len: number) {
+	if (key.length <= len) return key;
+
+	const separator = " ... ";
+
+	const sepLen = separator.length;
+	const charsToShow = len - sepLen;
+	const frontChars = Math.ceil(charsToShow / 2);
+	const backChars = Math.floor(charsToShow / 2);
+
+	return (
+		key.substr(0, frontChars) + separator + key.substr(key.length - backChars)
+	);
+}
+
 export function displayNpub(pubkey: string, len: number) {
 	const npub = pubkey.startsWith("npub1")
 		? pubkey