reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: app settings

Browse Source
This commit is contained in:
reya
2024-10-30 10:57:43 +07:00
parent 11dcef4e87
commit 618a45d349
33 changed files with 617 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/$id.set-profile.lazy.tsx
+230
View File
@@ -0,0 +1,230 @@
import { commands } from "@/commands.gen";
import { cn, upload } from "@/commons";
import { Spinner } from "@/components";
import type { Metadata } from "@/types";
import { Plus } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { createLazyFileRoute } from "@tanstack/react-router";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { message } from "@tauri-apps/plugin-dialog";
import {
type Dispatch,
type ReactNode,
type SetStateAction,
useState,
useTransition,
} from "react";
import { useForm } from "react-hook-form";
export const Route = createLazyFileRoute("/$id/set-profile")({
component: Screen,
});
function Screen() {
const { id } = Route.useParams();
const { profile, queryClient } = Route.useRouteContext();
const { register, handleSubmit } = useForm({ defaultValues: profile });
const [picture, setPicture] = useState<string>("");
const [isPending, startTransition] = useTransition();
const onSubmit = (data: Metadata) => {
startTransition(async () => {
const signer = await commands.hasSigner(id);
if (signer.status === "ok") {
if (!signer.data) {
const res = await commands.setSigner(id);
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
}
} else {
await message(signer.error, { kind: "error" });
return;
}
const newProfile: Metadata = { ...profile, ...data, picture };
const res = await commands.setProfile(JSON.stringify(newProfile));
if (res.status === "ok") {
// Invalidate cache
await queryClient.invalidateQueries({
queryKey: ["profile", id],
});
// Close current popup
await getCurrentWindow().close();
} else {
await message(res.error, { title: "Profile", kind: "error" });
return;
}
});
};
return (
<div className="flex flex-col size-full">
<div data-tauri-drag-region className="shrink-0 h-11" />
<form
onSubmit={handleSubmit(onSubmit)}
className="min-h-0 flex-1 flex flex-col mb-0"
>
<div className="shrink-0 h-20 flex items-center gap-3 p-3 border-b border-black/5 dark:border-white/5">
<div className="relative rounded-full size-12 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
{profile.picture ? (
<img
src={picture || profile.picture}
alt="avatar"
loading="lazy"
decoding="async"
className="absolute inset-0 z-10 object-cover size-12 rounded-full"
/>
) : null}
<AvatarUploader
setPicture={setPicture}
className="absolute inset-0 z-20 flex items-center justify-center size-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
>
<Plus className="size-5" />
</AvatarUploader>
</div>
<div className="flex-1 flex justify-between items-center">
<div>
<div className="font-semibold">{profile.display_name}</div>
<div className="leading-tight text-sm text-neutral-700 dark:text-neutral-300">
{profile.nip05?.startsWith("_")
? profile.nip05.replace("_@", "")
: profile.nip05}
</div>
</div>
<button
type="submit"
disabled={isPending}
className="inline-flex items-center justify-center w-28 h-8 px-2 text-xs font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner className="size-4" /> : "Update Profile"}
</button>
</div>
</div>
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="min-h-0 flex-1 overflow-hidden"
>
<ScrollArea.Viewport className="bg-white dark:bg-black h-full p-3">
<div className="flex flex-col gap-4">
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="display_name" className="text-sm font-medium">
Display Name
</label>
<input
{...register("display_name")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="name" className="text-sm font-medium">
Name
</label>
<input
{...register("name")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="website" className="text-sm font-medium">
Website
</label>
<input
type="url"
{...register("website")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="banner" className="text-sm font-medium">
Cover
</label>
<input
type="url"
{...register("banner")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="nip05" className="text-sm font-medium">
NIP-05
</label>
<input
type="email"
{...register("nip05")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1.5">
<label htmlFor="lnaddress" className="text-sm font-medium">
Lightning Address
</label>
<input
type="email"
{...register("lud16")}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
</form>
</div>
);
}
function AvatarUploader({
setPicture,
children,
className,
}: {
setPicture: Dispatch<SetStateAction<string>>;
children: ReactNode;
className?: string;
}) {
const [isPending, startTransition] = useTransition();
const uploadAvatar = () => {
startTransition(async () => {
try {
const image = await upload();
if (image) {
setPicture(image);
}
} catch (e) {
await message(String(e));
return;
}
});
};
return (
<button
type="button"
onClick={() => uploadAvatar()}
className={cn("size-4", className)}
>
{isPending ? <Spinner className="size-4" /> : children}
</button>
);
}
src/routes/settings.$id/profile.tsx → src/routes/$id.set-profile.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { type Profile, commands } from "@/commands.gen";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/settings/$id/profile")({
export const Route = createFileRoute("/$id/set-profile")({
beforeLoad: async ({ params }) => {
const res = await commands.getProfile(params.id);
src/routes/__root.tsx
+19 -1
View File
@@ -1,20 +1,38 @@
import { commands } from "@/commands.gen";
import { Spinner } from "@/components";
import type { Metadata, NostrEvent } from "@/types";
import type { QueryClient } from "@tanstack/react-query";
import { type QueryClient, queryOptions } from "@tanstack/react-query";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { getCurrentWindow } from "@tauri-apps/api/window";
import type { OsType } from "@tauri-apps/plugin-os";
import type { Store } from "@tauri-apps/plugin-store";
import { useEffect } from "react";
interface RouterContext {
store: Store;
queryClient: QueryClient;
platform: OsType;
accounts?: string[];
}
export const settingsQueryOptions = queryOptions({
queryKey: ["settings"],
queryFn: async () => {
const res = await commands.getAppSettings();
if (res.status === "ok") {
return res.data;
} else {
throw new Error(res.error);
}
},
});
export const Route = createRootRouteWithContext<RouterContext>()({
component: Screen,
pendingComponent: Pending,
loader: ({ context }) =>
context.queryClient.ensureQueryData(settingsQueryOptions),
});
function Screen() {
src/routes/_app.lazy.tsx
+26 -10
View File
@@ -1,5 +1,5 @@
import { commands } from "@/commands.gen";
import { appColumns, cn } from "@/commons";
import { cn } from "@/commons";
import { PublishIcon } from "@/components";
import { User } from "@/components/user";
import { LumeWindow } from "@/system";
@@ -14,6 +14,7 @@ import {
import { listen } from "@tauri-apps/api/event";
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from "@tauri-apps/plugin-dialog";
import { useCallback, useEffect } from "react";
export const Route = createLazyFileRoute("/_app")({
@@ -107,7 +108,7 @@ function Account({ pubkey }: { pubkey: string }) {
const items = await Promise.all([
MenuItem.new({
text: "Activate",
text: "Unlock",
enabled: !isActive || true,
action: async () => await commands.setSigner(pubkey),
}),
@@ -116,10 +117,31 @@ function Account({ pubkey }: { pubkey: string }) {
text: "View Profile",
action: () => LumeWindow.openProfile(pubkey),
}),
MenuItem.new({
text: "Update Profile",
action: () =>
LumeWindow.openPopup(
`${pubkey}/set-profile`,
"Update Profile",
true,
),
}),
PredefinedMenuItem.new({ item: "Separator" }),
MenuItem.new({
text: "Copy Public Key",
action: async () => await writeText(pubkey),
}),
MenuItem.new({
text: "Copy Private Key",
action: async () => {
const res = await commands.getPrivateKey(pubkey);
if (res.status === "ok") {
await writeText(res.data);
} else {
await message(res.error, { kind: "error" });
}
},
}),
PredefinedMenuItem.new({ item: "Separator" }),
MenuItem.new({
text: "Settings",
@@ -127,20 +149,13 @@ function Account({ pubkey }: { pubkey: string }) {
}),
PredefinedMenuItem.new({ item: "Separator" }),
MenuItem.new({
text: "Delete Account",
text: "Logout",
action: async () => {
const res = await commands.deleteAccount(pubkey);
if (res.status === "ok") {
router.invalidate();
// Delete column associate with this account
appColumns.setState((prev) =>
prev.filter((col) =>
col.account ? col.account !== pubkey : col,
),
);
// Check remain account
const newAccounts = context.accounts.filter(
(account) => account !== pubkey,
@@ -176,6 +191,7 @@ function Account({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={(e) => showContextMenu(e)}
onContextMenu={(e) => showContextMenu(e)}
className="h-10 relative"
>
<User.Provider pubkey={pubkey}>
src/routes/_app/index.lazy.tsx
+12 -13
View File
@@ -1,11 +1,10 @@
import { commands } from "@/commands.gen";
import { appColumns, displayNpub } from "@/commons";
import { displayNpub } from "@/commons";
import { Column, Spinner } from "@/components";
import { LumeWindow } from "@/system";
import type { ColumnEvent, LumeColumn, Metadata } from "@/types";
import { ArrowLeft, ArrowRight, Plus } from "@phosphor-icons/react";
import { createLazyFileRoute, useRouter } from "@tanstack/react-router";
import { useStore } from "@tanstack/react-store";
import { listen } from "@tauri-apps/api/event";
import { Menu, MenuItem } from "@tauri-apps/api/menu";
import { getCurrentWindow } from "@tauri-apps/api/window";
@@ -26,10 +25,11 @@ export const Route = createLazyFileRoute("/_app/")({
});
function Screen() {
const context = Route.useRouteContext();
const initialAppColumns = Route.useLoaderData();
const router = useRouter();
const columns = useStore(appColumns, (state) => state);
const [columns, setColumns] = useState<LumeColumn[]>([]);
const [emblaRef, emblaApi] = useEmblaCarousel({
watchDrag: false,
loop: false,
@@ -52,9 +52,9 @@ function Screen() {
const res = await commands.closeColumn(label);
if (res.status === "ok") {
appColumns.setState((prev) => prev.filter((t) => t.label !== label));
setColumns((prev) => prev.filter((t) => t.label !== label));
} else {
await message(res.error, { kind: "errror" });
await message(res.error, { kind: "error" });
}
},
[columns],
@@ -64,7 +64,7 @@ function Screen() {
const exist = columns.find((col) => col.label === column.label);
if (!exist) {
appColumns.setState((prev) => [column, ...prev]);
setColumns((prev) => [column, ...prev]);
if (emblaApi) {
emblaApi.scrollTo(0, true);
@@ -85,7 +85,7 @@ function Screen() {
if (direction === "left") newCols.splice(colIndex - 1, 0, existColumn);
if (direction === "right") newCols.splice(colIndex + 1, 0, existColumn);
appColumns.setState(() => newCols);
setColumns(() => newCols);
}
},
150,
@@ -100,11 +100,9 @@ function Screen() {
const newCols = columns.slice();
newCols[currentColIndex] = updatedCol;
appColumns.setState(() => newCols);
setColumns(() => newCols);
}, 150);
const reset = useDebouncedCallback(() => appColumns.setState(() => []), 150);
useEffect(() => {
if (emblaApi) {
emblaApi.on("scroll", emitScrollEvent);
@@ -119,7 +117,6 @@ function Screen() {
useEffect(() => {
const unlisten = listen<ColumnEvent>("columns", (data) => {
if (data.payload.type === "reset") reset();
if (data.payload.type === "add") add(data.payload.column);
if (data.payload.type === "remove") remove(data.payload.label);
if (data.payload.type === "move")
@@ -145,12 +142,14 @@ function Screen() {
useEffect(() => {
if (initialAppColumns) {
appColumns.setState(() => initialAppColumns);
setColumns(() => initialAppColumns);
}
}, [initialAppColumns]);
useEffect(() => {
window.localStorage.setItem("columns", JSON.stringify(columns));
(async () => {
await context.store.set("columns", JSON.stringify(columns));
})();
}, [columns]);
return (
src/routes/_app/index.tsx
+3 -3
View File
@@ -5,11 +5,11 @@ import { nanoid } from "nanoid";
export const Route = createFileRoute("/_app/")({
loader: async ({ context }) => {
const accounts = context.accounts;
const prevColumns = window.localStorage.getItem("columns");
const prev = await context.store.get("columns");
let initialAppColumns: LumeColumn[] = [];
if (!prevColumns || prevColumns.length < 1) {
if (!prev) {
initialAppColumns.push({
label: "onboarding",
name: "Onboarding",
@@ -25,7 +25,7 @@ export const Route = createFileRoute("/_app/")({
});
}
} else {
const parsed: LumeColumn[] = JSON.parse(prevColumns);
const parsed: LumeColumn[] = JSON.parse(prev as string);
initialAppColumns = parsed.filter((item) =>
item.account ? context.accounts.includes(item.account) : item,
src/routes/columns/_layout/notification.$id.lazy.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { commands } from "@/commands.gen";
import { decodeZapInvoice, formatCreatedAt } from "@/commons";
import { createdAt, decodeZapInvoice } from "@/commons";
import { Note, RepostIcon, Spinner, User } from "@/components";
import { LumeEvent, LumeWindow, useEvent } from "@/system";
import { Kind, type NostrEvent } from "@/types";
@@ -300,7 +300,7 @@ function TextNote({ event }: { event: LumeEvent }) {
<div className="flex items-baseline justify-between w-full">
<User.Name className="text-sm font-semibold leading-tight" />
<span className="text-sm leading-tight text-black/50 dark:text-white/50">
{formatCreatedAt(event.created_at)}
{createdAt(event.created_at)}
</span>
</div>
<div className="inline-flex items-baseline gap-1 text-xs">
src/routes/columns/_layout/stories.$id.lazy.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { commands } from "@/commands.gen";
import { replyTime, toLumeEvents } from "@/commons";
import { replyAt, toLumeEvents } from "@/commons";
import { Note, Spinner, User } from "@/components";
import { Hashtag } from "@/components/note/mentions/hashtag";
import { MentionUser } from "@/components/note/mentions/user";
@@ -155,7 +155,7 @@ const StoryEvent = memo(function StoryEvent({ event }: { event: LumeEvent }) {
</div>
<div className="flex-1 flex items-center justify-between">
<span className="text-sm text-neutral-500">
{replyTime(event.created_at)}
{replyAt(event.created_at)}
</span>
<div className="invisible group-hover:visible flex items-center justify-end gap-3">
<Note.Reply />
src/routes/settings.$id/general.lazy.tsx
+70 -40
View File
@@ -1,12 +1,19 @@
import { commands } from "@/commands.gen";
import { appSettings } from "@/commons";
import { type Settings, commands } from "@/commands.gen";
import { Spinner } from "@/components";
import * as Switch from "@radix-ui/react-switch";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useStore } from "@tanstack/react-store";
import { invoke } from "@tauri-apps/api/core";
import { message } from "@tauri-apps/plugin-dialog";
import { useCallback, useEffect, useState, useTransition } from "react";
import {
type Dispatch,
type SetStateAction,
useCallback,
useEffect,
useState,
useTransition,
} from "react";
import { settingsQueryOptions } from "../__root";
type Theme = "auto" | "light" | "dark";
@@ -15,7 +22,11 @@ export const Route = createLazyFileRoute("/settings/$id/general")({
});
function Screen() {
const [theme, setTheme] = useState<Theme>(null);
const settings = useSuspenseQuery(settingsQueryOptions);
const { queryClient } = Route.useRouteContext();
const [theme, setTheme] = useState<Theme>("auto");
const [newSettings, setNewSettings] = useState<Settings>();
const [isPending, startTransition] = useTransition();
const changeTheme = useCallback(async (theme: string) => {
@@ -28,14 +39,14 @@ function Screen() {
const updateSettings = () => {
startTransition(async () => {
const newSettings = JSON.stringify(appSettings.state);
const res = await commands.setUserSettings(newSettings);
const res = await commands.setAppSettings(JSON.stringify(newSettings));
if (res.status === "error") {
if (res.status === "ok") {
await queryClient.invalidateQueries({ queryKey: ["settings"] });
return;
} else {
await message(res.error, { kind: "error" });
}
return;
});
};
@@ -43,6 +54,16 @@ function Screen() {
invoke("plugin:theme|get_theme").then((data) => setTheme(data as Theme));
}, []);
useEffect(() => {
if (settings.status === "success") {
setNewSettings(settings.data);
}
}, [settings]);
if (!newSettings) {
return null;
}
return (
<div className="relative w-full">
<div className="flex flex-col gap-6 px-3 pb-3">
@@ -51,21 +72,22 @@ function Screen() {
General
</h2>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<Setting
name="Relay Hint"
description="Use the relay hint if necessary."
label="use_relay_hint"
/>
<Setting
name="Content Warning"
description="Shows a warning for notes that have a content warning."
label="content_warning"
checked={newSettings.content_warning}
setNewSettings={setNewSettings}
/>
{/*
<Setting
name="Trusted Only"
description="Only shows note's replies from your inner circle."
label="trusted_only"
newSettings={newSettings}
setNewSettings={setNewSettings}
/>
*/}
</div>
</div>
<div className="flex flex-col gap-2">
@@ -94,19 +116,25 @@ function Screen() {
</div>
</div>
<Setting
name="Transparent Effect"
description="Use native window transparent effect."
label="transparent"
name="Show Avatar"
description="Shows the user avatar."
label="display_avatar"
checked={newSettings.display_avatar}
setNewSettings={setNewSettings}
/>
<Setting
name="Show Zap Button"
description="Shows the Zap button when viewing a note."
label="display_zap_button"
checked={newSettings.display_zap_button}
setNewSettings={setNewSettings}
/>
<Setting
name="Show Repost Button"
description="Shows the Repost button when viewing a note."
label="display_repost_button"
checked={newSettings.display_repost_button}
setNewSettings={setNewSettings}
/>
</div>
</div>
@@ -116,25 +144,23 @@ function Screen() {
</h2>
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
<Setting
name="Proxy"
description="Set proxy address."
label="proxy"
name="Resize Service"
description="Use weserv for resize image on-the-fly."
label="resize_service"
checked={newSettings.resize_service}
setNewSettings={setNewSettings}
/>
<Setting
name="Image Resize Service"
description="Use weserv/images for resize image on-the-fly."
label="image_resize_service"
/>
<Setting
name="Load Remote Media"
description="View the remote media directly."
name="Show Remote Media"
description="Automatically load remote media."
label="display_media"
checked={newSettings.display_media}
setNewSettings={setNewSettings}
/>
</div>
</div>
</div>
<div className="sticky bottom-0 left-0 w-full h-16 flex items-center justify-end px-3">
<div className="absolute left-0 bottom-0 w-full h-11 gradient-mask-t-0 bg-neutral-100 dark:bg-neutral-900" />
<div className="w-full h-16 flex items-center justify-end px-3">
<button
type="button"
onClick={() => updateSettings()}
@@ -151,33 +177,37 @@ function Setting({
label,
name,
description,
checked,
setNewSettings,
}: {
label: string;
name: string;
description: string;
checked: boolean;
setNewSettings: Dispatch<SetStateAction<Settings | undefined>>;
}) {
const state = useStore(appSettings, (state) => state[label]);
const toggle = useCallback(() => {
appSettings.setState((state) => {
return {
...state,
[label]: !state[label],
};
setNewSettings((state) => {
if (state) {
return {
...state,
[label]: !state[label],
};
}
});
}, []);
return (
<div className="flex items-start justify-between w-full gap-4 py-3">
<div className="flex-1">
<h3 className="font-medium">{name}</h3>
<p className="text-sm text-neutral-700 dark:text-neutral-300">
<h3 className="text-sm font-medium">{name}</h3>
<p className="text-xs text-neutral-700 dark:text-neutral-300">
{description}
</p>
</div>
<div className="flex justify-end w-36 shrink-0">
<Switch.Root
checked={state}
checked={checked}
onClick={() => toggle()}
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
>
src/routes/settings.$id/general.tsx
+1 -15
View File
@@ -1,17 +1,3 @@
import { commands } from "@/commands.gen";
import { appSettings } from "@/commons";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/settings/$id/general")({
beforeLoad: async () => {
const res = await commands.getUserSettings();
if (res.status === "ok") {
appSettings.setState((state) => {
return { ...state, ...res.data };
});
} else {
throw new Error(res.error);
}
},
});
export const Route = createFileRoute("/settings/$id/general")();
src/routes/settings.$id/profile.lazy.tsx
-245
View File
@@ -1,245 +0,0 @@
import { type Profile, commands } from "@/commands.gen";
import { cn, upload } from "@/commons";
import { Spinner } from "@/components";
import { Plus } from "@phosphor-icons/react";
import { createLazyFileRoute } from "@tanstack/react-router";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from "@tauri-apps/plugin-dialog";
import {
type Dispatch,
type ReactNode,
type SetStateAction,
useState,
useTransition,
} from "react";
import { useForm } from "react-hook-form";
export const Route = createLazyFileRoute("/settings/$id/profile")({
component: Screen,
});
function Screen() {
const { profile } = Route.useRouteContext();
const { register, handleSubmit } = useForm({ defaultValues: profile });
const [isPending, startTransition] = useTransition();
const [picture, setPicture] = useState<string>("");
const onSubmit = (data: Profile) => {
startTransition(async () => {
const newProfile: Profile = { ...profile, ...data, picture };
const res = await commands.setProfile(newProfile);
if (res.status === "error") {
await message(res.error, { title: "Profile", kind: "error" });
}
return;
});
};
return (
<div className="relative flex flex-col gap-6 px-3 pb-3">
<div className="flex items-center flex-1 h-full gap-3">
<div className="relative rounded-full size-20 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
{profile.picture ? (
<img
src={picture || profile.picture}
alt="avatar"
loading="lazy"
decoding="async"
className="absolute inset-0 z-10 object-cover size-20 rounded-full"
/>
) : null}
<AvatarUploader
setPicture={setPicture}
className="absolute inset-0 z-20 flex items-center justify-center size-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
>
<Plus className="size-5" />
</AvatarUploader>
</div>
<div className="flex-1 flex items-center justify-between">
<div>
<div className="text-lg font-semibold">{profile.display_name}</div>
<div className="text-neutral-700 dark:text-neutral-300">
{profile.nip05}
</div>
</div>
<PrivkeyButton />
</div>
</div>
<form
onSubmit={handleSubmit(onSubmit)}
className="flex flex-col gap-3 mb-0"
>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="display_name"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
Display Name
</label>
<input
name="display_name"
{...register("display_name")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="name"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
Name
</label>
<input
name="name"
{...register("name")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="website"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
Website
</label>
<input
name="website"
type="url"
{...register("website")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="banner"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
Cover
</label>
<input
name="banner"
type="url"
{...register("banner")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="nip05"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
NIP-05
</label>
<input
name="nip05"
type="email"
{...register("nip05")}
spellCheck={false}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex flex-col w-full gap-1">
<label
htmlFor="lnaddress"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
Lightning Address
</label>
<input
name="lnaddress"
type="email"
{...register("lud16")}
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
</div>
<div className="flex items-center justify-end">
<button
type="submit"
disabled={isPending}
className="inline-flex items-center justify-center w-32 px-2 text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner className="size-4" /> : "Update Profile"}
</button>
</div>
</form>
</div>
);
}
function PrivkeyButton() {
const { id } = Route.useParams();
const [isPending, startTransition] = useTransition();
const [isCopy, setIsCopy] = useState(false);
const copyPrivateKey = () => {
startTransition(async () => {
const res = await commands.getPrivateKey(id);
if (res.status === "ok") {
await writeText(res.data);
setIsCopy(true);
} else {
await message(res.error, { kind: "error" });
return;
}
});
};
return (
<button
type="button"
onClick={() => copyPrivateKey()}
className="inline-flex items-center justify-center px-3 text-sm font-medium text-blue-500 bg-blue-100 border border-blue-300 rounded-full h-7 hover:bg-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-800"
>
{isPending ? (
<Spinner className="size-4" />
) : isCopy ? (
"Copied"
) : (
"Copy Private Key"
)}
</button>
);
}
function AvatarUploader({
setPicture,
children,
className,
}: {
setPicture: Dispatch<SetStateAction<string>>;
children: ReactNode;
className?: string;
}) {
const [isPending, startTransition] = useTransition();
const uploadAvatar = () => {
startTransition(async () => {
try {
const image = await upload();
setPicture(image);
} catch (e) {
await message(String(e));
return;
}
});
};
return (
<button
type="button"
onClick={() => uploadAvatar()}
className={cn("size-4", className)}
>
{isPending ? <Spinner className="size-4" /> : children}
</button>
);
}