feat: polish

apps/desktop/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
+		autoprefixer: {},
 	},
 };

apps/desktop/src/routes/activty/components/list.tsx

@@ -50,7 +50,6 @@ export function ActivityList() {
 					};
 				}
 			},
-
 			staleTime: 360 * 1000,
 			refetchOnWindowFocus: false,
 			refetchOnMount: false,

apps/desktop/src/routes/auth/create.tsx

@@ -145,10 +145,11 @@ export function CreateAccountScreen() {
 
 			// add account to storage
 			await storage.createSetting("nsecbunker", "1");
-			await storage.createAccount({
+			const dbAccount = await storage.createAccount({
 				pubkey: account,
 				privkey: localSigner.privateKey,
 			});
+			ark.account = dbAccount;
 
 			// get final signer with newly created account
 			const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
@@ -156,7 +157,6 @@ export function CreateAccountScreen() {
 
 			// update main ndk instance signer
 			ark.updateNostrSigner({ signer: finalSigner });
-			console.log(ark.ndk.signer);
 
 			// remove default nsecbunker profile and contact list
 			await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });

apps/desktop/src/routes/auth/login-key.tsx

@@ -1,3 +1,4 @@
+import { useArk } from "@lume/ark";
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import { getPublicKey, nip19 } from "nostr-tools";
@@ -7,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
 export function LoginWithKey() {
+	const ark = useArk();
 	const storage = useStorage();
 	const navigate = useNavigate();
 
@@ -30,10 +32,11 @@ export function LoginWithKey() {
 			const privkey = nip19.decode(data.nsec).data as string;
 			const pubkey = getPublicKey(privkey);
 
-			await storage.createAccount({
+			const account = await storage.createAccount({
 				pubkey: pubkey,
 				privkey: privkey,
 			});
+			ark.account = account;
 
 			return navigate("/auth/onboarding", { replace: true });
 		} catch (e) {

apps/desktop/src/routes/auth/login-nsecbunker.tsx

@@ -48,10 +48,11 @@ export function LoginWithNsecbunker() {
 			ark.updateNostrSigner({ signer: remoteSigner });
 
 			await storage.createSetting("nsecbunker", "1");
-			await storage.createAccount({
-				pubkey,
+			const account = await storage.createAccount({
+				pubkey: pubkey,
 				privkey: localSigner.privateKey,
 			});
+			ark.account = account;
 
 			return navigate("/auth/onboarding", { replace: true });
 		} catch (e) {

apps/desktop/src/routes/auth/login-oauth.tsx

@@ -109,10 +109,11 @@ export function LoginWithOAuth() {
 				ark.updateNostrSigner({ signer: remoteSigner });
 
 				await storage.createSetting("nsecbunker", "1");
-				await storage.createAccount({
+				const account = await storage.createAccount({
 					pubkey,
 					privkey: localSigner.privateKey,
 				});
+				ark.account = account;
 
 				return navigate("/auth/onboarding", { replace: true });
 			}

apps/desktop/src/routes/auth/onboarding.tsx

@@ -29,7 +29,7 @@ export function OnboardingScreen() {
 
 	const toggleLowPower = async () => {
 		await storage.createSetting("lowPower", String(+!settings.lowPower));
-		setSettings((state) => ({ ...state, autoupdate: !settings.lowPower }));
+		setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
 	};
 
 	const toggleTranslation = async () => {
@@ -58,7 +58,7 @@ export function OnboardingScreen() {
 		setLoading(true);
 
 		// get account contacts
-		await ark.getUserContacts(ark.account.pubkey);
+		await ark.getUserContacts();
 
 		// refetch newsfeed
 		await queryClient.prefetchInfiniteQuery({
@@ -154,7 +154,7 @@ export function OnboardingScreen() {
 							<h3 className="font-semibold text-lg">Low Power Mode</h3>
 							<p className="text-neutral-500">
 								Limited relay connection and hide all media, sustainable for low
-								network environment
+								network environment.
 							</p>
 						</div>
 					</div>
@@ -171,7 +171,8 @@ export function OnboardingScreen() {
 								Translation (nostr.wine)
 							</h3>
 							<p className="text-neutral-500">
-								Translate text to your preferred language, powered by Nostr Wine
+								Translate text to your preferred language, powered by Nostr
+								Wine.
 							</p>
 						</div>
 					</div>

apps/desktop/src/routes/depot/components/members.tsx

@@ -87,7 +87,7 @@ export function DepotMembers() {
 				</div>
 			</div>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
+				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-black/10" />
 				<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
 					<div className="relative h-min w-full max-w-xl overflow-hidden rounded-xl bg-white dark:bg-black">
 						<div className="inline-flex h-14 w-full shrink-0 items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-900">

apps/desktop/src/routes/settings/advanced.tsx

@@ -13,14 +13,14 @@ export function AdvancedSettingScreen() {
 				<div className="flex w-full items-center justify-between">
 					<div className="flex items-center gap-8">
 						<div className="w-24 shrink-0 text-end text-sm font-semibold">
-							Caches
+							Cache
 						</div>
-						<div className="text-sm">Use for boost up NDK</div>
+						<div className="text-sm">Use for boost up nostr connection</div>
 					</div>
 					<button
 						type="button"
 						onClick={() => clearCache()}
-						className="h-8 w-max rounded-lg bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
+						className="h-8 w-max rounded-lg px-3 text-sm font-semibold text-blue-500 bg-blue-100 hover:bg-blue-200"
 					>
 						Clear
 					</button>

apps/desktop/src/routes/settings/components/postCard.tsx

@@ -1,12 +1,12 @@
+import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
 import { compactNumber } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { fetch } from "@tauri-apps/plugin-http";
 import { Link } from "react-router-dom";
 
 export function PostCard() {
-	const storage = useStorage();
+	const ark = useArk();
 	const { status, data } = useQuery({
 		queryKey: ["user-stats", ark.account.pubkey],
 		queryFn: async ({ signal }: { signal: AbortSignal }) => {

apps/desktop/src/routes/settings/components/profileCard.tsx

@@ -1,6 +1,5 @@
-import { useProfile } from "@lume/ark";
+import { useArk, useProfile } from "@lume/ark";
 import { EditIcon, LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
 import { displayNpub } from "@lume/utils";
 import * as Avatar from "@radix-ui/react-avatar";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
@@ -9,7 +8,7 @@ import { nip19 } from "nostr-tools";
 import { Link } from "react-router-dom";
 
 export function ProfileCard() {
-	const storage = useStorage();
+	const ark = useArk();
 	const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
 		minidenticon(ark.account.pubkey, 90, 50),
 	)}`;

apps/desktop/src/routes/settings/components/relayCard.tsx

@@ -1,13 +1,11 @@
 import { useArk } from "@lume/ark";
 import { EditIcon, LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
 import { compactNumber } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 
 export function RelayCard() {
 	const ark = useArk();
-	const storage = useStorage();
 
 	const { status, data } = useQuery({
 		queryKey: ["relays", ark.account.pubkey],

apps/desktop/src/routes/settings/components/zapCard.tsx

@@ -1,11 +1,11 @@
+import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
 import { compactNumber } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { fetch } from "@tauri-apps/plugin-http";
 
 export function ZapCard() {
-	const storage = useStorage();
+	const ark = useArk();
 	const { status, data } = useQuery({
 		queryKey: ["user-stats", ark.account.pubkey],
 		queryFn: async ({ signal }: { signal: AbortSignal }) => {

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

@@ -15,6 +15,7 @@ export function GeneralSettingScreen() {
 	const storage = useStorage();
 
 	const [settings, setSettings] = useState({
+		lowPower: false,
 		autoupdate: false,
 		autolaunch: false,
 		outbox: false,
@@ -30,6 +31,11 @@ export function GeneralSettingScreen() {
 		setSettings((prev) => ({ ...prev, appearance: theme }));
 	};
 
+	const toggleLowPower = async () => {
+		await storage.createSetting("lowPower", String(+!settings.lowPower));
+		setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
+	};
+
 	const toggleAutolaunch = async () => {
 		if (!settings.autolaunch) {
 			await enable();
@@ -42,12 +48,6 @@ export function GeneralSettingScreen() {
 		}
 	};
 
-	const toggleOutbox = async () => {
-		await storage.createSetting("outbox", String(+!settings.outbox));
-		// update state
-		setSettings((prev) => ({ ...prev, outbox: !settings.outbox }));
-	};
-
 	const toggleMedia = async () => {
 		await storage.createSetting("media", String(+!settings.media));
 		storage.settings.media = !settings.media;
@@ -98,6 +98,12 @@ export function GeneralSettingScreen() {
 						autoupdate: !!parseInt(item.value),
 					}));
 
+				if (item.key === "lowPower")
+					setSettings((prev) => ({
+						...prev,
+						lowPower: !!parseInt(item.value),
+					}));
+
 				if (item.key === "outbox")
 					setSettings((prev) => ({
 						...prev,
@@ -127,9 +133,9 @@ export function GeneralSettingScreen() {
 				<div className="flex w-full items-center justify-between">
 					<div className="flex items-center gap-8">
 						<div className="w-24 shrink-0 text-end text-sm font-semibold">
-							Updater
+							Update
 						</div>
-						<div className="text-sm">Auto download new update at Login</div>
+						<div className="text-sm">Automatically download new update</div>
 					</div>
 					<Switch.Root
 						checked={settings.autoupdate}
@@ -139,6 +145,23 @@ export function GeneralSettingScreen() {
 						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 					</Switch.Root>
 				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Low Power
+						</div>
+						<div className="text-sm">
+							Sustainable for low network environment.
+						</div>
+					</div>
+					<Switch.Root
+						checked={settings.lowPower}
+						onClick={() => toggleLowPower()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
 				<div className="flex w-full items-center justify-between">
 					<div className="flex items-center gap-8">
 						<div className="w-24 shrink-0 text-end text-sm font-semibold">
@@ -154,21 +177,6 @@ export function GeneralSettingScreen() {
 						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 					</Switch.Root>
 				</div>
-				<div className="flex w-full items-center justify-between">
-					<div className="flex items-center gap-8">
-						<div className="w-24 shrink-0 text-end text-sm font-semibold">
-							Gossip
-						</div>
-						<div className="text-sm">Use Outbox model</div>
-					</div>
-					<Switch.Root
-						checked={settings.outbox}
-						onClick={() => toggleOutbox()}
-						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
-					>
-						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
-					</Switch.Root>
-				</div>
 				<div className="flex w-full items-center justify-between">
 					<div className="flex items-center gap-8">
 						<div className="w-24 shrink-0 text-end text-sm font-semibold">
@@ -189,7 +197,7 @@ export function GeneralSettingScreen() {
 						<div className="w-24 shrink-0 text-end text-sm font-semibold">
 							Hashtag
 						</div>
-						<div className="text-sm">Hide all hashtags in content</div>
+						<div className="text-sm">Show all hashtags in content</div>
 					</div>
 					<Switch.Root
 						checked={settings.hashtag}