mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-01 09:21:07 +00:00
feat: add onboarding modal
This commit is contained in:
parent
aa80301778
commit
c172c0f80f
@ -47,6 +47,7 @@
|
|||||||
"@tauri-apps/plugin-upload": "2.0.0-alpha.5",
|
"@tauri-apps/plugin-upload": "2.0.0-alpha.5",
|
||||||
"@vidstack/react": "^1.9.8",
|
"@vidstack/react": "^1.9.8",
|
||||||
"framer-motion": "^10.17.9",
|
"framer-motion": "^10.17.9",
|
||||||
|
"jotai": "^2.6.1",
|
||||||
"minidenticons": "^4.2.0",
|
"minidenticons": "^4.2.0",
|
||||||
"nanoid": "^5.0.4",
|
"nanoid": "^5.0.4",
|
||||||
"nostr-fetch": "^0.15.0",
|
"nostr-fetch": "^0.15.0",
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { useArk, useStorage } from "@lume/ark";
|
import { useArk, useStorage } from "@lume/ark";
|
||||||
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
||||||
|
import { onboardingAtom } from "@lume/utils";
|
||||||
import NDK, {
|
import NDK, {
|
||||||
NDKEvent,
|
NDKEvent,
|
||||||
NDKKind,
|
NDKKind,
|
||||||
@ -11,6 +12,7 @@ import { downloadDir } from "@tauri-apps/api/path";
|
|||||||
import { Window } from "@tauri-apps/api/window";
|
import { Window } from "@tauri-apps/api/window";
|
||||||
import { save } from "@tauri-apps/plugin-dialog";
|
import { save } from "@tauri-apps/plugin-dialog";
|
||||||
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
||||||
|
import { useSetAtom } from "jotai";
|
||||||
import { getPublicKey, nip19 } from "nostr-tools";
|
import { getPublicKey, nip19 } from "nostr-tools";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
@ -38,6 +40,7 @@ export function CreateAccountScreen() {
|
|||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const services = useLoaderData() as NDKEvent[];
|
const services = useLoaderData() as NDKEvent[];
|
||||||
|
const setOnboarding = useSetAtom(onboardingAtom);
|
||||||
|
|
||||||
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
||||||
const [loading, setIsLoading] = useState(false);
|
const [loading, setIsLoading] = useState(false);
|
||||||
@ -80,6 +83,8 @@ export function CreateAccountScreen() {
|
|||||||
privkey: signer.privateKey,
|
privkey: signer.privateKey,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
setOnboarding(true);
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding");
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -142,9 +147,11 @@ export function CreateAccountScreen() {
|
|||||||
|
|
||||||
ark.updateNostrSigner({ signer: remoteSigner });
|
ark.updateNostrSigner({ signer: remoteSigner });
|
||||||
|
|
||||||
authWindow.close();
|
setOnboarding(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|
||||||
|
authWindow.close();
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { useArk } from "@lume/ark";
|
import { useArk } from "@lume/ark";
|
||||||
import {
|
import {
|
||||||
ArrowLeftIcon,
|
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
CancelIcon,
|
CancelIcon,
|
||||||
ChevronDownIcon,
|
ChevronDownIcon,
|
||||||
@ -40,11 +39,11 @@ export function FollowsScreen() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const { status, data } = useQuery({
|
const { status, data } = useQuery({
|
||||||
queryKey: ["trending-profiles-widget"],
|
queryKey: ["trending-users"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await fetch("https://api.nostr.band/v0/trending/profiles");
|
const res = await fetch("https://api.nostr.band/v0/trending/profiles");
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error("Error");
|
throw new Error("Failed to fetch trending users from nostr.band API.");
|
||||||
}
|
}
|
||||||
return res.json();
|
return res.json();
|
||||||
},
|
},
|
||||||
|
@ -51,7 +51,7 @@ export function ErrorScreen() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="relative flex h-screen w-screen items-center justify-center bg-blue-600"
|
className="relative flex h-screen w-screen items-center justify-center bg-blue-600 overflow-hidden rounded-t-xl"
|
||||||
>
|
>
|
||||||
<div className="flex w-full max-w-2xl flex-col items-start gap-8">
|
<div className="flex w-full max-w-2xl flex-col items-start gap-8">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
@ -103,3 +103,4 @@ export * from "./src/plusSquare";
|
|||||||
export * from "./src/column";
|
export * from "./src/column";
|
||||||
export * from "./src/addMedia";
|
export * from "./src/addMedia";
|
||||||
export * from "./src/check";
|
export * from "./src/check";
|
||||||
|
export * from "./src/popperFilled";
|
||||||
|
17
packages/icons/src/popperFilled.tsx
Normal file
17
packages/icons/src/popperFilled.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export function PopperFilledIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M10.243 1.37a1 1 0 10-1.552 1.26c1.04 1.28 1.377 3.004.86 4.554a1 1 0 001.898.632c.74-2.221.25-4.656-1.206-6.447zM14 3a1 1 0 100 2h.01a1 1 0 100-2H14zM22.288 5.307a1 1 0 00-.575-1.916C18.18 4.452 15.003 6.331 12.7 9.4a1 1 0 001.6 1.2c1.99-2.653 4.764-4.325 7.988-5.293zM6 4a1 1 0 000 2h.01a1 1 0 100-2H6zM12.628 11.372c-1.226-1.227-2.53-2.202-3.674-2.774-.566-.283-1.146-.494-1.688-.558-.528-.062-1.204-.002-1.709.503-.277.277-.42.61-.483.936-.139.194-.275.42-.404.65-.21.373-.44.83-.675 1.34a36.943 36.943 0 00-1.415 3.546c-.429 1.263-.793 2.578-.952 3.7-.08.559-.114 1.11-.064 1.604.048.47.188 1.035.595 1.46.416.434.987.587 1.458.642.493.058 1.047.027 1.607-.05 1.123-.153 2.446-.515 3.717-.944a37.107 37.107 0 003.574-1.417c.513-.237.974-.468 1.35-.678.232-.13.46-.267.655-.406.327-.062.66-.206.937-.483.505-.505.565-1.181.503-1.709-.064-.542-.275-1.122-.559-1.688-.571-1.144-1.546-2.448-2.773-3.674zm-4.568-.985c.904.452 2.037 1.282 3.154 2.399s1.947 2.25 2.399 3.154c.225.45.33.793.36 1.019-.3-.038-.829-.22-1.555-.657C11.616 15.819 10.7 15.1 9.8 14.2c-.9-.9-1.619-1.816-2.102-2.618-.438-.727-.619-1.255-.657-1.554.226.028.57.134 1.019.36zM21 9a1 1 0 100 2h.01a1 1 0 100-2H21zM16 11a1 1 0 100 2h.01a1 1 0 100-2H16zM22.857 16.485c-1.382-2.303-3.812-2.787-5.998-2.475a1 1 0 00.282 1.98c1.746-.25 3.191.174 4.001 1.525a1 1 0 101.715-1.03zM18 18a1 1 0 100 2h.01a1 1 0 100-2H18z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
import { RepostNote, TextNote, useArk, useStorage } from "@lume/ark";
|
import { RepostNote, TextNote, useArk, useStorage } from "@lume/ark";
|
||||||
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
||||||
|
import { EmptyFeed } from "@lume/ui";
|
||||||
import { FETCH_LIMIT } from "@lume/utils";
|
import { FETCH_LIMIT } from "@lume/utils";
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||||
@ -81,6 +82,14 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
if (!storage.account.contacts.length) {
|
||||||
|
return (
|
||||||
|
<div className="px-3 mt-3">
|
||||||
|
<EmptyFeed />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
||||||
|
@ -21,7 +21,6 @@ export class LumeStorage {
|
|||||||
public settings: {
|
public settings: {
|
||||||
autoupdate: boolean;
|
autoupdate: boolean;
|
||||||
bunker: boolean;
|
bunker: boolean;
|
||||||
outbox: boolean;
|
|
||||||
media: boolean;
|
media: boolean;
|
||||||
hashtag: boolean;
|
hashtag: boolean;
|
||||||
depot: boolean;
|
depot: boolean;
|
||||||
@ -35,7 +34,6 @@ export class LumeStorage {
|
|||||||
this.settings = {
|
this.settings = {
|
||||||
autoupdate: false,
|
autoupdate: false,
|
||||||
bunker: false,
|
bunker: false,
|
||||||
outbox: false,
|
|
||||||
media: true,
|
media: true,
|
||||||
hashtag: true,
|
hashtag: true,
|
||||||
depot: false,
|
depot: false,
|
||||||
@ -50,12 +48,11 @@ export class LumeStorage {
|
|||||||
for (const item of settings) {
|
for (const item of settings) {
|
||||||
if (item.key === "nsecbunker")
|
if (item.key === "nsecbunker")
|
||||||
this.settings.bunker = !!parseInt(item.value);
|
this.settings.bunker = !!parseInt(item.value);
|
||||||
if (item.key === "outbox") this.settings.outbox = !!parseInt(item.value);
|
|
||||||
if (item.key === "media") this.settings.media = !!parseInt(item.value);
|
|
||||||
if (item.key === "hashtag")
|
if (item.key === "hashtag")
|
||||||
this.settings.hashtag = !!parseInt(item.value);
|
this.settings.hashtag = !!parseInt(item.value);
|
||||||
if (item.key === "autoupdate")
|
if (item.key === "autoupdate")
|
||||||
this.settings.autoupdate = !!parseInt(item.value);
|
this.settings.autoupdate = !!parseInt(item.value);
|
||||||
|
if (item.key === "media") this.settings.media = !!parseInt(item.value);
|
||||||
if (item.key === "depot") this.settings.depot = !!parseInt(item.value);
|
if (item.key === "depot") this.settings.depot = !!parseInt(item.value);
|
||||||
if (item.key === "tunnel_url") this.settings.tunnelUrl = item.value;
|
if (item.key === "tunnel_url") this.settings.tunnelUrl = item.value;
|
||||||
}
|
}
|
||||||
@ -323,11 +320,11 @@ export class LumeStorage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async getColumns() {
|
public async getColumns() {
|
||||||
const widgets: Array<IColumn> = await this.#db.select(
|
const columns: Array<IColumn> = await this.#db.select(
|
||||||
"SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;",
|
"SELECT * FROM columns WHERE account_id = $1 ORDER BY created_at DESC;",
|
||||||
[this.account.id],
|
[this.account.id],
|
||||||
);
|
);
|
||||||
return widgets;
|
return columns;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async createColumn(
|
public async createColumn(
|
||||||
@ -336,16 +333,16 @@ export class LumeStorage {
|
|||||||
content: string | string[],
|
content: string | string[],
|
||||||
) {
|
) {
|
||||||
const insert = await this.#db.execute(
|
const insert = await this.#db.execute(
|
||||||
"INSERT INTO widgets (account_id, kind, title, content) VALUES ($1, $2, $3, $4);",
|
"INSERT INTO columns (account_id, kind, title, content) VALUES ($1, $2, $3, $4);",
|
||||||
[this.account.id, kind, title, content],
|
[this.account.id, kind, title, content],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (insert) {
|
if (insert) {
|
||||||
const widgets: Array<IColumn> = await this.#db.select(
|
const columns: Array<IColumn> = await this.#db.select(
|
||||||
"SELECT * FROM widgets ORDER BY id DESC LIMIT 1;",
|
"SELECT * FROM columns ORDER BY id DESC LIMIT 1;",
|
||||||
);
|
);
|
||||||
if (widgets.length < 1) console.error("get created widget failed");
|
if (columns.length < 1) console.error("get created widget failed");
|
||||||
return widgets[0];
|
return columns[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
console.error("create widget failed");
|
console.error("create widget failed");
|
||||||
@ -353,13 +350,13 @@ export class LumeStorage {
|
|||||||
|
|
||||||
public async updateColumn(id: number, title: string, content: string) {
|
public async updateColumn(id: number, title: string, content: string) {
|
||||||
return await this.#db.execute(
|
return await this.#db.execute(
|
||||||
"UPDATE widgets SET title = $1, content = $2 WHERE id = $3;",
|
"UPDATE columns SET title = $1, content = $2 WHERE id = $3;",
|
||||||
[title, content, id],
|
[title, content, id],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public async removeColumn(id: number) {
|
public async removeColumn(id: number) {
|
||||||
const res = await this.#db.execute("DELETE FROM widgets WHERE id = $1;", [
|
const res = await this.#db.execute("DELETE FROM columns WHERE id = $1;", [
|
||||||
id,
|
id,
|
||||||
]);
|
]);
|
||||||
if (res) return id;
|
if (res) return id;
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
"@lume/icons": "workspace:^",
|
"@lume/icons": "workspace:^",
|
||||||
"@lume/utils": "workspace:^",
|
"@lume/utils": "workspace:^",
|
||||||
"@nostr-dev-kit/ndk": "^2.3.2",
|
"@nostr-dev-kit/ndk": "^2.3.2",
|
||||||
|
"@radix-ui/react-accordion": "^1.1.2",
|
||||||
"@radix-ui/react-alert-dialog": "^1.0.5",
|
"@radix-ui/react-alert-dialog": "^1.0.5",
|
||||||
"@radix-ui/react-avatar": "^1.0.4",
|
"@radix-ui/react-avatar": "^1.0.4",
|
||||||
"@radix-ui/react-dialog": "^1.0.5",
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
@ -24,6 +25,7 @@
|
|||||||
"nostr-tools": "~1.17.0",
|
"nostr-tools": "~1.17.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.49.2",
|
||||||
"react-hotkeys-hook": "^4.4.3",
|
"react-hotkeys-hook": "^4.4.3",
|
||||||
"react-router-dom": "^6.21.1",
|
"react-router-dom": "^6.21.1",
|
||||||
"slate": "^0.101.5",
|
"slate": "^0.101.5",
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { useArk } from "@lume/ark";
|
import { useArk } from "@lume/ark";
|
||||||
import { LoaderIcon } from "@lume/icons";
|
import { LoaderIcon } from "@lume/icons";
|
||||||
import { message } from "@tauri-apps/plugin-dialog";
|
|
||||||
import { Dispatch, SetStateAction, useState } from "react";
|
import { Dispatch, SetStateAction, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
export function AvatarUploader({
|
export function AvatarUploadButton({
|
||||||
setPicture,
|
setPicture,
|
||||||
}: {
|
}: {
|
||||||
setPicture: Dispatch<SetStateAction<string>>;
|
setPicture: Dispatch<SetStateAction<string>>;
|
||||||
@ -25,12 +25,8 @@ export function AvatarUploader({
|
|||||||
|
|
||||||
return;
|
return;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// stop loading
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
await message(`Upload failed, error: ${e}`, {
|
toast.error(e);
|
||||||
title: "Lume",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -41,7 +37,7 @@ export function AvatarUploader({
|
|||||||
className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
|
className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
<LoaderIcon className="size-4 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
"Change avatar"
|
"Change avatar"
|
||||||
)}
|
)}
|
27
packages/ui/src/emptyFeed.tsx
Normal file
27
packages/ui/src/emptyFeed.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { InfoIcon } from "@lume/icons";
|
||||||
|
import { cn } from "@lume/utils";
|
||||||
|
|
||||||
|
export function EmptyFeed({
|
||||||
|
text,
|
||||||
|
subtext,
|
||||||
|
className,
|
||||||
|
}: { text?: string; subtext?: string; className?: string }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"w-full py-5 flex items-center justify-center flex-col gap-2 rounded-xl bg-neutral-50 dark:bg-neutral-950",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<InfoIcon className="size-8 text-blue-500" />
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="font-semibold text-lg">{text ? text : "No events yet"}</p>
|
||||||
|
<p className="leading-tight text-sm">
|
||||||
|
{subtext
|
||||||
|
? subtext
|
||||||
|
: "You can follow more users to build up your timeline"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -11,5 +11,6 @@ export * from "./layouts/home";
|
|||||||
export * from "./layouts/settings";
|
export * from "./layouts/settings";
|
||||||
export * from "./mentions";
|
export * from "./mentions";
|
||||||
export * from "./replyList";
|
export * from "./replyList";
|
||||||
|
export * from "./emptyFeed";
|
||||||
export * from "./routes/event";
|
export * from "./routes/event";
|
||||||
export * from "./routes/user";
|
export * from "./routes/user";
|
||||||
|
@ -1,9 +1,11 @@
|
|||||||
import { ColumnProvider } from "@lume/ark";
|
import { ColumnProvider } from "@lume/ark";
|
||||||
import { Outlet } from "react-router-dom";
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { OnboardingModal } from "../onboarding/modal";
|
||||||
|
|
||||||
export function HomeLayout() {
|
export function HomeLayout() {
|
||||||
return (
|
return (
|
||||||
<ColumnProvider>
|
<ColumnProvider>
|
||||||
|
<OnboardingModal />
|
||||||
<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
|
42
packages/ui/src/onboarding/finish.tsx
Normal file
42
packages/ui/src/onboarding/finish.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { CheckIcon } from "@lume/icons";
|
||||||
|
import { onboardingAtom } from "@lume/utils";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useSetAtom } from "jotai";
|
||||||
|
|
||||||
|
export function OnboardingFinishScreen() {
|
||||||
|
const setOnboarding = useSetAtom(onboardingAtom);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
className="w-full h-full flex flex-col gap-2 items-center justify-center"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-12 text-teal-500" />
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg font-medium">Profile setup complete!</p>
|
||||||
|
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
||||||
|
You can exit the setup here and start using Lume.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex flex-col gap-2 items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOnboarding(false)}
|
||||||
|
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="https://github.com/luminous-devs/lume/issues"
|
||||||
|
target="_blank"
|
||||||
|
className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
Report a issue
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
277
packages/ui/src/onboarding/follow.tsx
Normal file
277
packages/ui/src/onboarding/follow.tsx
Normal file
@ -0,0 +1,277 @@
|
|||||||
|
import { useArk } from "@lume/ark";
|
||||||
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
CancelIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
LoaderIcon,
|
||||||
|
PlusIcon,
|
||||||
|
} from "@lume/icons";
|
||||||
|
import { cn } from "@lume/utils";
|
||||||
|
import * as Accordion from "@radix-ui/react-accordion";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { nip19 } from "nostr-tools";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { User } from "../user";
|
||||||
|
|
||||||
|
const POPULAR_USERS = [
|
||||||
|
"npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
|
||||||
|
"npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
|
||||||
|
"npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
|
||||||
|
"npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
|
||||||
|
"npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
|
||||||
|
"npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
|
||||||
|
"npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
|
||||||
|
"npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
|
||||||
|
"npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
|
||||||
|
"npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
|
||||||
|
"npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
|
||||||
|
"npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
|
||||||
|
];
|
||||||
|
|
||||||
|
const LUME_USERS = [
|
||||||
|
"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function OnboardingFollowScreen() {
|
||||||
|
const ark = useArk();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { isLoading, isError, data } = useQuery({
|
||||||
|
queryKey: ["trending-users"],
|
||||||
|
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||||
|
const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error("Failed to fetch trending users from nostr.band API.");
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [follows, setFollows] = useState<string[]>([]);
|
||||||
|
|
||||||
|
// toggle follow state
|
||||||
|
const toggleFollow = (pubkey: string) => {
|
||||||
|
const arr = follows.includes(pubkey)
|
||||||
|
? follows.filter((i) => i !== pubkey)
|
||||||
|
: [...follows, pubkey];
|
||||||
|
setFollows(arr);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
if (!follows.length) return navigate("/finish");
|
||||||
|
|
||||||
|
const publish = await ark.newContactList({
|
||||||
|
tags: follows.map((item) => {
|
||||||
|
if (item.startsWith("npub1"))
|
||||||
|
return ["p", nip19.decode(item).data as string];
|
||||||
|
return ["p", item];
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (publish) {
|
||||||
|
setLoading(false);
|
||||||
|
return navigate("/finish");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLoading(false);
|
||||||
|
toast.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div className="w-full h-full flex flex-col">
|
||||||
|
<div className="h-12 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex font-medium text-neutral-700 dark:text-neutral-600 w-full items-center">
|
||||||
|
Dive into the nostrverse
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex-1 mb-0 min-h-0 flex flex-col justify-between h-full">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
className="flex-1 overflow-y-auto px-8"
|
||||||
|
>
|
||||||
|
<p className="leading-snug text-neutral-700 dark:text-neutral-500 my-4">
|
||||||
|
Nostr is fun when we are together. Try following some users that
|
||||||
|
interest you to build up your timeline.
|
||||||
|
</p>
|
||||||
|
<Accordion.Root type="single" defaultValue="recommended" collapsible>
|
||||||
|
<Accordion.Item
|
||||||
|
value="recommended"
|
||||||
|
className="mb-3 overflow-hidden rounded-xl"
|
||||||
|
>
|
||||||
|
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||||
|
Recommended
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</Accordion.Trigger>
|
||||||
|
<Accordion.Content>
|
||||||
|
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||||
|
{POPULAR_USERS.map((pubkey) => (
|
||||||
|
<div
|
||||||
|
key={pubkey}
|
||||||
|
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||||
|
>
|
||||||
|
<User pubkey={pubkey} variant="large" />
|
||||||
|
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleFollow(pubkey)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||||
|
follows.includes(pubkey)
|
||||||
|
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||||
|
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{follows.includes(pubkey) ? (
|
||||||
|
<>
|
||||||
|
<CancelIcon className="size-4" />
|
||||||
|
Unfollow
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PlusIcon className="size-4" />
|
||||||
|
Follow
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Accordion.Content>
|
||||||
|
</Accordion.Item>
|
||||||
|
<Accordion.Item
|
||||||
|
value="trending"
|
||||||
|
className="mb-3 overflow-hidden rounded-xl"
|
||||||
|
>
|
||||||
|
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||||
|
Trending users
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</Accordion.Trigger>
|
||||||
|
<Accordion.Content>
|
||||||
|
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<LoaderIcon className="size-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : isError ? (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
Error. Cannot get trending users
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data?.profiles.map((item: { pubkey: string }) => (
|
||||||
|
<div
|
||||||
|
key={item.pubkey}
|
||||||
|
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||||
|
>
|
||||||
|
<User pubkey={item.pubkey} variant="large" />
|
||||||
|
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleFollow(item.pubkey)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||||
|
follows.includes(item.pubkey)
|
||||||
|
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||||
|
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{follows.includes(item.pubkey) ? (
|
||||||
|
<>
|
||||||
|
<CancelIcon className="size-4" />
|
||||||
|
Unfollow
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PlusIcon className="size-4" />
|
||||||
|
Follow
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Accordion.Content>
|
||||||
|
</Accordion.Item>
|
||||||
|
<Accordion.Item
|
||||||
|
value="lume"
|
||||||
|
className="mb-3 overflow-hidden rounded-xl"
|
||||||
|
>
|
||||||
|
<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
|
||||||
|
Lume HQ
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</Accordion.Trigger>
|
||||||
|
<Accordion.Content>
|
||||||
|
<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
|
||||||
|
{LUME_USERS.map((pubkey) => (
|
||||||
|
<div
|
||||||
|
key={pubkey}
|
||||||
|
className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
|
||||||
|
>
|
||||||
|
<User pubkey={pubkey} variant="large" />
|
||||||
|
<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleFollow(pubkey)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
|
||||||
|
follows.includes(pubkey)
|
||||||
|
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||||
|
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{follows.includes(pubkey) ? (
|
||||||
|
<>
|
||||||
|
<CancelIcon className="size-4" />
|
||||||
|
Unfollow
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PlusIcon className="size-4" />
|
||||||
|
Follow
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Accordion.Content>
|
||||||
|
</Accordion.Item>
|
||||||
|
</Accordion.Root>
|
||||||
|
</motion.div>
|
||||||
|
<div className="h-16 w-full shrink-0 flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-4" />
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => submit()}
|
||||||
|
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="size-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
"Continue"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
46
packages/ui/src/onboarding/home.tsx
Normal file
46
packages/ui/src/onboarding/home.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { ArrowRightIcon, PopperFilledIcon } from "@lume/icons";
|
||||||
|
import { onboardingAtom } from "@lume/utils";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useSetAtom } from "jotai";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export function OnboardingHomeScreen() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const setOnboarding = useSetAtom(onboardingAtom);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
className="w-full h-full flex flex-col gap-2 items-center justify-center"
|
||||||
|
>
|
||||||
|
<PopperFilledIcon className="size-12 text-blue-500" />
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg font-medium">
|
||||||
|
Your account was successfully created!
|
||||||
|
</p>
|
||||||
|
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
||||||
|
For starters, let's set up your profile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex flex-col gap-2 items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigate("/profile-settings")}
|
||||||
|
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
|
||||||
|
>
|
||||||
|
Profile Settings
|
||||||
|
<ArrowRightIcon className="size-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOnboarding(false)}
|
||||||
|
className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
|
||||||
|
>
|
||||||
|
Skip
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
21
packages/ui/src/onboarding/modal.tsx
Normal file
21
packages/ui/src/onboarding/modal.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { onboardingAtom } from "@lume/utils";
|
||||||
|
import * as Dialog from "@radix-ui/react-dialog";
|
||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { OnboardingRouter } from "./router";
|
||||||
|
|
||||||
|
export function OnboardingModal() {
|
||||||
|
const onboarding = useAtomValue(onboardingAtom);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog.Root open={onboarding}>
|
||||||
|
<Dialog.Portal>
|
||||||
|
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-xl dark:bg-white/20" />
|
||||||
|
<Dialog.Content className="fixed inset-0 z-50 flex items-center justify-center min-h-full">
|
||||||
|
<div className="relative w-full max-w-lg bg-white h-[500px] rounded-xl dark:bg-black overflow-hidden">
|
||||||
|
<OnboardingRouter />
|
||||||
|
</div>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Portal>
|
||||||
|
</Dialog.Root>
|
||||||
|
);
|
||||||
|
}
|
147
packages/ui/src/onboarding/profileSettings.tsx
Normal file
147
packages/ui/src/onboarding/profileSettings.tsx
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
import { useArk, useStorage } from "@lume/ark";
|
||||||
|
import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
|
||||||
|
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { minidenticon } from "minidenticons";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { AvatarUploadButton } from "../avatarUploadButton";
|
||||||
|
|
||||||
|
export function OnboardingProfileSettingsScreen() {
|
||||||
|
const [picture, setPicture] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const ark = useArk();
|
||||||
|
const storage = useStorage();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { register, handleSubmit } = useForm();
|
||||||
|
|
||||||
|
const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
|
||||||
|
minidenticon("lume new account", 90, 50),
|
||||||
|
)}`;
|
||||||
|
|
||||||
|
const onSubmit = async (data: { name: string; about: string }) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
if (!data.name.length && !data.about.length) {
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/follow");
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldProfile = await ark.getUserProfile({
|
||||||
|
pubkey: storage.account.pubkey,
|
||||||
|
});
|
||||||
|
const ensureOldProfile = oldProfile ? oldProfile : {};
|
||||||
|
|
||||||
|
const profile = {
|
||||||
|
...data,
|
||||||
|
...ensureOldProfile,
|
||||||
|
display_name: data.name,
|
||||||
|
bio: data.about,
|
||||||
|
picture: picture,
|
||||||
|
avatar: picture,
|
||||||
|
};
|
||||||
|
|
||||||
|
const publish = await ark.createEvent({
|
||||||
|
content: JSON.stringify(profile),
|
||||||
|
kind: NDKKind.Metadata,
|
||||||
|
tags: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
if (publish) {
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/follow");
|
||||||
|
} else {
|
||||||
|
toast.error("Cannot publish your profile, please try again later.");
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return toast.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex flex-col gap-4">
|
||||||
|
<div className="h-12 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex font-medium text-neutral-700 dark:text-neutral-600 w-full items-center">
|
||||||
|
Profile Settings
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
className="w-full flex-1 mb-0 flex flex-col justify-between"
|
||||||
|
>
|
||||||
|
<input type={"hidden"} {...register("picture")} value={picture} />
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
className="flex flex-col px-8 gap-4"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="font-medium">Avatar</span>
|
||||||
|
<div className="flex h-36 w-full flex-col items-center justify-center gap-3 rounded-lg bg-neutral-100 dark:bg-neutral-950">
|
||||||
|
{picture.length ? (
|
||||||
|
<img
|
||||||
|
src={picture}
|
||||||
|
alt="user's avatar"
|
||||||
|
className="size-16 rounded-xl object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={svgURI}
|
||||||
|
alt="user's avatar"
|
||||||
|
className="size-16 rounded-xl bg-black dark:bg-white"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<AvatarUploadButton setPicture={setPicture} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="name" className="font-medium">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={"text"}
|
||||||
|
{...register("name")}
|
||||||
|
spellCheck={false}
|
||||||
|
className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label htmlFor="about" className="font-medium">
|
||||||
|
Bio
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
{...register("about")}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<div className="h-16 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-4" />
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
"Continue"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
31
packages/ui/src/onboarding/router.tsx
Normal file
31
packages/ui/src/onboarding/router.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
MemoryRouter,
|
||||||
|
Route,
|
||||||
|
Routes,
|
||||||
|
UNSAFE_LocationContext,
|
||||||
|
} from "react-router-dom";
|
||||||
|
import { OnboardingFinishScreen } from "./finish";
|
||||||
|
import { OnboardingFollowScreen } from "./follow";
|
||||||
|
import { OnboardingHomeScreen } from "./home";
|
||||||
|
import { OnboardingProfileSettingsScreen } from "./profileSettings";
|
||||||
|
|
||||||
|
export function OnboardingRouter() {
|
||||||
|
return (
|
||||||
|
<UNSAFE_LocationContext.Provider value={null}>
|
||||||
|
<MemoryRouter future={{ v7_startTransition: true }}>
|
||||||
|
<AnimatePresence>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<OnboardingHomeScreen />} />
|
||||||
|
<Route
|
||||||
|
path="/profile-settings"
|
||||||
|
element={<OnboardingProfileSettingsScreen />}
|
||||||
|
/>
|
||||||
|
<Route path="/follow" element={<OnboardingFollowScreen />} />
|
||||||
|
<Route path="/finish" element={<OnboardingFinishScreen />} />
|
||||||
|
</Routes>
|
||||||
|
</AnimatePresence>
|
||||||
|
</MemoryRouter>
|
||||||
|
</UNSAFE_LocationContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
@ -165,32 +165,42 @@ export const User = memo(function User({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-full flex-col gap-2.5">
|
<div>
|
||||||
|
<div className="h-20 bg-gray-200 dark:bg-gray-800 rounded-t-lg">
|
||||||
|
{user?.banner ? (
|
||||||
|
<img
|
||||||
|
src={user.banner}
|
||||||
|
alt="banner"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="flex h-full w-full flex-col gap-2.5 px-3 -mt-6">
|
||||||
<Avatar.Root className="shrink-0">
|
<Avatar.Root className="shrink-0">
|
||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
loading="lazy"
|
|
||||||
decoding="async"
|
decoding="async"
|
||||||
className="h-11 w-11 rounded-lg object-cover"
|
className="size-11 rounded-lg object-cover"
|
||||||
/>
|
/>
|
||||||
<Avatar.Fallback delayMs={300}>
|
<Avatar.Fallback delayMs={300}>
|
||||||
<img
|
<img
|
||||||
src={fallbackAvatar}
|
src={fallbackAvatar}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-11 w-11 rounded-lg bg-black dark:bg-white"
|
className="size-11 rounded-lg bg-black dark:bg-white"
|
||||||
/>
|
/>
|
||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-col items-start text-start gap-1">
|
<div className="flex flex-col items-start text-start">
|
||||||
<p className="max-w-[15rem] truncate text-lg font-semibold leadning-tight">
|
<p className="max-w-[15rem] truncate text-lg font-semibold leadning-tight">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</p>
|
</p>
|
||||||
<p className="break-p text-neutral-500 max-w-none select-text whitespace-pre-line">
|
<p className="break-p text-neutral-700 dark:text-neutral-600 max-w-none select-text whitespace-pre-line">
|
||||||
{user?.about || user?.bio || "No bio"}
|
{user?.about || user?.bio || "No bio"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,3 +7,5 @@ export const editorValueAtom = atom([
|
|||||||
children: [{ text: "" }],
|
children: [{ text: "" }],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
export const onboardingAtom = atom(false);
|
||||||
|
@ -140,6 +140,9 @@ importers:
|
|||||||
framer-motion:
|
framer-motion:
|
||||||
specifier: ^10.17.9
|
specifier: ^10.17.9
|
||||||
version: 10.17.9(react-dom@18.2.0)(react@18.2.0)
|
version: 10.17.9(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
jotai:
|
||||||
|
specifier: ^2.6.1
|
||||||
|
version: 2.6.1(@types/react@18.2.47)(react@18.2.0)
|
||||||
minidenticons:
|
minidenticons:
|
||||||
specifier: ^4.2.0
|
specifier: ^4.2.0
|
||||||
version: 4.2.0
|
version: 4.2.0
|
||||||
@ -882,6 +885,9 @@ importers:
|
|||||||
'@nostr-dev-kit/ndk':
|
'@nostr-dev-kit/ndk':
|
||||||
specifier: ^2.3.2
|
specifier: ^2.3.2
|
||||||
version: 2.3.2(typescript@5.3.3)
|
version: 2.3.2(typescript@5.3.3)
|
||||||
|
'@radix-ui/react-accordion':
|
||||||
|
specifier: ^1.1.2
|
||||||
|
version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@radix-ui/react-alert-dialog':
|
'@radix-ui/react-alert-dialog':
|
||||||
specifier: ^1.0.5
|
specifier: ^1.0.5
|
||||||
version: 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
|
version: 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
|
||||||
@ -927,6 +933,9 @@ importers:
|
|||||||
react-dom:
|
react-dom:
|
||||||
specifier: ^18.2.0
|
specifier: ^18.2.0
|
||||||
version: 18.2.0(react@18.2.0)
|
version: 18.2.0(react@18.2.0)
|
||||||
|
react-hook-form:
|
||||||
|
specifier: ^7.49.2
|
||||||
|
version: 7.49.2(react@18.2.0)
|
||||||
react-hotkeys-hook:
|
react-hotkeys-hook:
|
||||||
specifier: ^4.4.3
|
specifier: ^4.4.3
|
||||||
version: 4.4.3(react-dom@18.2.0)(react@18.2.0)
|
version: 4.4.3(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
Loading…
Reference in New Issue
Block a user