feat: refactor

packages/ui/package.json

@@ -7,6 +7,7 @@
 		"@dnd-kit/core": "^6.1.0",
 		"@lume/ark": "workspace:^",
 		"@lume/icons": "workspace:^",
+		"@lume/storage": "workspace:^",
 		"@lume/utils": "workspace:^",
 		"@nostr-dev-kit/ndk": "^2.3.2",
 		"@radix-ui/react-accordion": "^1.1.2",

packages/ui/src/account/active.tsx

@@ -1,19 +1,18 @@
-import { useProfile, useStorage } from "@lume/ark";
+import { useArk, useProfile } from "@lume/ark";
 import { useNetworkStatus } from "@lume/utils";
 import * as Avatar from "@radix-ui/react-avatar";
 import { minidenticon } from "minidenticons";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
-import { AccountMoreActions } from "./more";
 
 export function ActiveAccount() {
-	const storage = useStorage();
+	const ark = useArk();
 	const isOnline = useNetworkStatus();
 
-	const { user } = useProfile(storage.account.pubkey);
+	const { user } = useProfile(ark.account.pubkey);
 
 	const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
-		minidenticon(storage.account.pubkey, 90, 50),
+		minidenticon(ark.account.pubkey, 90, 50),
 	)}`;
 
 	return (
@@ -21,7 +20,7 @@ export function ActiveAccount() {
 			<Avatar.Root>
 				<Avatar.Image
 					src={user?.picture || user?.image}
-					alt={storage.account.pubkey}
+					alt={ark.account.pubkey}
 					loading="lazy"
 					decoding="async"
 					style={{ contentVisibility: "auto" }}
@@ -30,7 +29,7 @@ export function ActiveAccount() {
 				<Avatar.Fallback delayMs={150}>
 					<img
 						src={svgURI}
-						alt={storage.account.pubkey}
+						alt={ark.account.pubkey}
 						className="aspect-square h-auto w-full rounded-xl bg-black dark:bg-white"
 					/>
 				</Avatar.Fallback>

packages/ui/src/account/logout.tsx

@@ -1,4 +1,4 @@
-import { useStorage } from "@lume/ark";
+import { useStorage } from "@lume/storage";
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";

packages/ui/src/activity/content.tsx

@@ -1,10 +1,9 @@
-import { useArk, useStorage } from "@lume/ark";
+import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
-import { FETCH_LIMIT } from "@lume/utils";
+import { useStorage } from "@lume/storage";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
-import { VList } from "virtua";
 import { ReplyActivity } from "./reply";
 import { RepostActivity } from "./repost";
 import { ZapActivity } from "./zap";
@@ -27,7 +26,7 @@ export function ActivityContent() {
 				const events = await ark.getInfiniteEvents({
 					filter: {
 						kinds: [NDKKind.Zap],
-						"#p": [storage.account.pubkey],
+						"#p": [ark.account.pubkey],
 					},
 					limit: 100,
 					pageParam,
@@ -52,7 +51,7 @@ export function ActivityContent() {
 	);
 
 	const renderEvent = useCallback((event: NDKEvent) => {
-		if (event.pubkey === storage.account.pubkey) return null;
+		if (event.pubkey === ark.account.pubkey) return null;
 
 		switch (event.kind) {
 			case NDKKind.Text:

packages/ui/src/editor/form.tsx

@@ -1,5 +1,6 @@
-import { MentionNote, useArk, useColumnContext, useStorage } from "@lume/ark";
+import { MentionNote, useArk, useColumnContext } from "@lume/ark";
 import { LoaderIcon, TrashIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
 import { NDKCacheUserProfile } from "@lume/types";
 import { COL_TYPES, cn, editorValueAtom } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";

packages/ui/src/onboarding/finish.tsx

@@ -1,5 +1,5 @@
-import { useStorage } from "@lume/ark";
 import { CheckIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
 import { onboardingAtom } from "@lume/utils";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
@@ -20,7 +20,7 @@ export function OnboardingFinishScreen() {
 		const queryKeys = queryCache.getAll().map((cache) => cache.queryKey);
 
 		await queryClient.refetchQueries({
-			queryKey: ["user", storage.account.pubkey],
+			queryKey: ["user", ark.account.pubkey],
 		});
 
 		for (const key of queryKeys) {

packages/ui/src/onboarding/profileSettings.tsx

@@ -1,5 +1,6 @@
-import { useArk, useStorage } from "@lume/ark";
+import { useArk } from "@lume/ark";
 import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
 import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
 import { motion } from "framer-motion";
 import { minidenticon } from "minidenticons";

packages/ui/src/routes/user.tsx

@@ -1,10 +1,4 @@
-import {
-	RepostNote,
-	TextNote,
-	useArk,
-	useProfile,
-	useStorage,
-} from "@lume/ark";
+import { RepostNote, TextNote, useArk, useProfile } from "@lume/ark";
 import {
 	ArrowLeftIcon,
 	ArrowRightCircleIcon,
@@ -22,7 +16,6 @@ import { NIP05 } from "../nip05";
 
 export function UserRoute() {
 	const ark = useArk();
-	const storage = useStorage();
 	const navigate = useNavigate();
 
 	const { id } = useParams();
@@ -101,7 +94,7 @@ export function UserRoute() {
 	};
 
 	useEffect(() => {
-		if (storage.account.contacts.includes(id)) {
+		if (ark.account.contacts.includes(id)) {
 			setFollowed(true);
 		}
 	}, []);