mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-04 10:50:46 +00:00
wip: settings screen
This commit is contained in:
parent
04c1223f2e
commit
875225591a
74
src/app.tsx
74
src/app.tsx
@ -113,34 +113,6 @@ export default function App() {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/personal',
|
|
||||||
element: <AppLayout />,
|
|
||||||
errorElement: <ErrorScreen />,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
async lazy() {
|
|
||||||
const { PersonalScreen } = await import('@app/personal');
|
|
||||||
return { Component: PersonalScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'edit-profile',
|
|
||||||
async lazy() {
|
|
||||||
const { EditProfileScreen } = await import('@app/personal/editProfile');
|
|
||||||
return { Component: EditProfileScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'edit-contact',
|
|
||||||
async lazy() {
|
|
||||||
const { EditContactScreen } = await import('@app/personal/editContact');
|
|
||||||
return { Component: EditContactScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/new',
|
path: '/new',
|
||||||
element: <NewScreen />,
|
element: <NewScreen />,
|
||||||
@ -260,8 +232,50 @@ export default function App() {
|
|||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
async lazy() {
|
async lazy() {
|
||||||
const { SettingsScreen } = await import('@app/settings');
|
const { UserSettingScreen } = await import('@app/settings');
|
||||||
return { Component: SettingsScreen };
|
return { Component: UserSettingScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'edit-profile',
|
||||||
|
async lazy() {
|
||||||
|
const { EditProfileScreen } = await import('@app/settings/editProfile');
|
||||||
|
return { Component: EditProfileScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'edit-contact',
|
||||||
|
async lazy() {
|
||||||
|
const { EditContactScreen } = await import('@app/settings/editContact');
|
||||||
|
return { Component: EditContactScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'general',
|
||||||
|
async lazy() {
|
||||||
|
const { GeneralSettingScreen } = await import('@app/settings/general');
|
||||||
|
return { Component: GeneralSettingScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'backup',
|
||||||
|
async lazy() {
|
||||||
|
const { BackupSettingScreen } = await import('@app/settings/backup');
|
||||||
|
return { Component: BackupSettingScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'advanced',
|
||||||
|
async lazy() {
|
||||||
|
const { AdvancedSettingScreen } = await import('@app/settings/advanced');
|
||||||
|
return { Component: AdvancedSettingScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'about',
|
||||||
|
async lazy() {
|
||||||
|
const { AboutScreen } = await import('@app/settings/about');
|
||||||
|
return { Component: AboutScreen };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -1,55 +0,0 @@
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
|
||||||
|
|
||||||
import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
|
|
||||||
import { User } from '@shared/user';
|
|
||||||
|
|
||||||
export function EditContactScreen() {
|
|
||||||
const { db } = useStorage();
|
|
||||||
const { ndk } = useNDK();
|
|
||||||
const { status, data } = useQuery({
|
|
||||||
queryKey: ['contacts'],
|
|
||||||
queryFn: async () => {
|
|
||||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
|
||||||
|
|
||||||
const follows = await user.follows();
|
|
||||||
return [...follows];
|
|
||||||
},
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full flex-col overflow-y-auto pb-10">
|
|
||||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
|
||||||
<Link
|
|
||||||
to="/personal"
|
|
||||||
className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="h-4 w-4" />
|
|
||||||
Back
|
|
||||||
</Link>
|
|
||||||
<h1 className="font-semibold">Contact Manager</h1>
|
|
||||||
<div className="w-20" />
|
|
||||||
</div>
|
|
||||||
<div className="mx-auto flex w-full max-w-xl flex-col gap-3">
|
|
||||||
{status === 'pending' ? (
|
|
||||||
<div className="flex h-10 w-full items-center justify-center">
|
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item.pubkey}
|
|
||||||
className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
|
|
||||||
>
|
|
||||||
<User pubkey={item.pubkey} variant="simple" />
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,323 +0,0 @@
|
|||||||
import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
|
|
||||||
import { useQueryClient } from '@tanstack/react-query';
|
|
||||||
import { message } from '@tauri-apps/plugin-dialog';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
|
||||||
|
|
||||||
import {
|
|
||||||
ArrowLeftIcon,
|
|
||||||
CheckCircleIcon,
|
|
||||||
LoaderIcon,
|
|
||||||
PlusIcon,
|
|
||||||
UnverifiedIcon,
|
|
||||||
} from '@shared/icons';
|
|
||||||
|
|
||||||
import { useNostr } from '@utils/hooks/useNostr';
|
|
||||||
|
|
||||||
export function EditProfileScreen() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [picture, setPicture] = useState('');
|
|
||||||
const [banner, setBanner] = useState('');
|
|
||||||
const [nip05, setNIP05] = useState({ verified: true, text: '' });
|
|
||||||
|
|
||||||
const { db } = useStorage();
|
|
||||||
const { ndk } = useNDK();
|
|
||||||
const { upload } = useNostr();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
setError,
|
|
||||||
formState: { isValid, errors },
|
|
||||||
} = useForm({
|
|
||||||
defaultValues: async () => {
|
|
||||||
const res: NDKUserProfile = queryClient.getQueryData(['user', db.account.pubkey]);
|
|
||||||
if (res.image) {
|
|
||||||
setPicture(res.image);
|
|
||||||
}
|
|
||||||
if (res.banner) {
|
|
||||||
setBanner(res.banner);
|
|
||||||
}
|
|
||||||
if (res.nip05) {
|
|
||||||
setNIP05((prev) => ({ ...prev, text: res.nip05 }));
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const uploadAvatar = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const image = await upload();
|
|
||||||
|
|
||||||
if (image) {
|
|
||||||
setPicture(image);
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const uploadBanner = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const image = await upload();
|
|
||||||
|
|
||||||
if (image) {
|
|
||||||
setBanner(image);
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (data: NDKUserProfile) => {
|
|
||||||
// start loading
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const content = {
|
|
||||||
...data,
|
|
||||||
username: data.name,
|
|
||||||
display_name: data.name,
|
|
||||||
bio: data.about,
|
|
||||||
image: data.picture,
|
|
||||||
};
|
|
||||||
|
|
||||||
const event = new NDKEvent(ndk);
|
|
||||||
event.kind = NDKKind.Metadata;
|
|
||||||
event.tags = [];
|
|
||||||
|
|
||||||
if (data.nip05) {
|
|
||||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
|
||||||
const verify = await user.validateNip05(data.nip05);
|
|
||||||
if (verify) {
|
|
||||||
event.content = JSON.stringify({ ...content, nip05: data.nip05 });
|
|
||||||
} else {
|
|
||||||
setNIP05((prev) => ({ ...prev, verified: false }));
|
|
||||||
setError('nip05', {
|
|
||||||
type: 'manual',
|
|
||||||
message: "Can't verify your Lume ID / NIP-05, please check again",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
event.content = JSON.stringify(content);
|
|
||||||
}
|
|
||||||
|
|
||||||
const publishedRelays = await event.publish();
|
|
||||||
|
|
||||||
if (publishedRelays) {
|
|
||||||
// invalid cache
|
|
||||||
queryClient.invalidateQueries({
|
|
||||||
queryKey: ['user', db.account.pubkey],
|
|
||||||
});
|
|
||||||
// reset form
|
|
||||||
reset();
|
|
||||||
// reset state
|
|
||||||
setLoading(false);
|
|
||||||
setPicture(null);
|
|
||||||
setBanner(null);
|
|
||||||
} else {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
|
||||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
|
||||||
<Link
|
|
||||||
to="/personal"
|
|
||||||
className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="h-4 w-4" />
|
|
||||||
Back
|
|
||||||
</Link>
|
|
||||||
<h1 className="font-semibold">Edit Profile</h1>
|
|
||||||
<div className="w-20" />
|
|
||||||
</div>
|
|
||||||
<div className="mx-auto w-full max-w-md">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="mb-0">
|
|
||||||
<input type={'hidden'} {...register('picture')} value={picture} />
|
|
||||||
<input type={'hidden'} {...register('banner')} value={banner} />
|
|
||||||
<div className="flex flex-col items-center justify-center">
|
|
||||||
<div className="relative h-36 w-full">
|
|
||||||
{banner ? (
|
|
||||||
<img
|
|
||||||
src={banner}
|
|
||||||
alt="user's banner"
|
|
||||||
className="h-full w-full rounded-xl object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
|
|
||||||
)}
|
|
||||||
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => uploadBanner()}
|
|
||||||
className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
|
|
||||||
>
|
|
||||||
<PlusIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-5 px-4">
|
|
||||||
<div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
|
|
||||||
<img
|
|
||||||
src={picture}
|
|
||||||
alt="user's avatar"
|
|
||||||
className="h-14 w-14 rounded-xl object-cover"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => uploadAvatar()}
|
|
||||||
className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
|
|
||||||
>
|
|
||||||
<PlusIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="display_name"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
Display Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={'text'}
|
|
||||||
{...register('display_name', {
|
|
||||||
required: true,
|
|
||||||
minLength: 4,
|
|
||||||
})}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="name"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={'text'}
|
|
||||||
{...register('name', {
|
|
||||||
required: true,
|
|
||||||
minLength: 4,
|
|
||||||
})}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="nip05"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
NIP-05
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
{...register('nip05', {
|
|
||||||
required: true,
|
|
||||||
minLength: 4,
|
|
||||||
})}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
|
||||||
{nip05.verified ? (
|
|
||||||
<span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
|
|
||||||
<CheckCircleIcon className="h-4 w-4" />
|
|
||||||
Verified
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
|
|
||||||
<UnverifiedIcon className="h-4 w-4" />
|
|
||||||
Unverified
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{errors.nip05 && (
|
|
||||||
<p className="mt-1 text-sm text-red-400">
|
|
||||||
{errors.nip05.message.toString()}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="website"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
Website
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={'text'}
|
|
||||||
{...register('website', { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="website"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
Lightning address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={'text'}
|
|
||||||
{...register('lud16', { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="about"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
Bio
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
{...register('about')}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid}
|
|
||||||
className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
|
||||||
) : (
|
|
||||||
'Update'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,26 +0,0 @@
|
|||||||
import { ContactCard } from '@app/personal/components/contactCard';
|
|
||||||
import { PostCard } from '@app/personal/components/postCard';
|
|
||||||
import { ProfileCard } from '@app/personal/components/profileCard';
|
|
||||||
import { RelayCard } from '@app/personal/components/relayCard';
|
|
||||||
import { ZapCard } from '@app/personal/components/zapCard';
|
|
||||||
|
|
||||||
export function PersonalScreen() {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
|
||||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
|
||||||
<div className="w-20" />
|
|
||||||
<h1 className="font-semibold">Personal Dashboard</h1>
|
|
||||||
<div className="w-20" />
|
|
||||||
</div>
|
|
||||||
<div className="mx-auto w-full max-w-xl">
|
|
||||||
<ProfileCard />
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<ContactCard />
|
|
||||||
<RelayCard />
|
|
||||||
<PostCard />
|
|
||||||
<ZapCard />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
3
src/app/settings/about.tsx
Normal file
3
src/app/settings/about.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function AboutScreen() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
3
src/app/settings/advanced.tsx
Normal file
3
src/app/settings/advanced.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function AdvancedSettingScreen() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
3
src/app/settings/backup.tsx
Normal file
3
src/app/settings/backup.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function BackupSettingScreen() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
@ -37,7 +37,7 @@ export function ContactCard() {
|
|||||||
Contacts
|
Contacts
|
||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
to="/personal/edit-contact"
|
to="/settings/edit-contact"
|
||||||
className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
<EditIcon className="h-3 w-3" />
|
<EditIcon className="h-3 w-3" />
|
@ -27,7 +27,7 @@ export function ProfileCard() {
|
|||||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||||
<div className="flex h-10 w-full justify-end">
|
<div className="flex h-10 w-full justify-end">
|
||||||
<Link
|
<Link
|
||||||
to="/personal/edit-profile"
|
to="/settings/edit-profile"
|
||||||
className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
|
className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
|
||||||
>
|
>
|
||||||
<EditIcon className="h-4 w-4" />
|
<EditIcon className="h-4 w-4" />
|
41
src/app/settings/editContact.tsx
Normal file
41
src/app/settings/editContact.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
|
export function EditContactScreen() {
|
||||||
|
const { db } = useStorage();
|
||||||
|
const { ndk } = useNDK();
|
||||||
|
const { status, data } = useQuery({
|
||||||
|
queryKey: ['contacts'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||||
|
|
||||||
|
const follows = await user.follows();
|
||||||
|
return [...follows];
|
||||||
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto flex w-full max-w-xl flex-col gap-3">
|
||||||
|
{status === 'pending' ? (
|
||||||
|
<div className="flex h-10 w-full items-center justify-center">
|
||||||
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.pubkey}
|
||||||
|
className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
|
||||||
|
>
|
||||||
|
<User pubkey={item.pubkey} variant="simple" />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
303
src/app/settings/editProfile.tsx
Normal file
303
src/app/settings/editProfile.tsx
Normal file
@ -0,0 +1,303 @@
|
|||||||
|
import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
|
||||||
|
import { useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { message } from '@tauri-apps/plugin-dialog';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { CheckCircleIcon, LoaderIcon, PlusIcon, UnverifiedIcon } from '@shared/icons';
|
||||||
|
|
||||||
|
import { useNostr } from '@utils/hooks/useNostr';
|
||||||
|
|
||||||
|
export function EditProfileScreen() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [picture, setPicture] = useState('');
|
||||||
|
const [banner, setBanner] = useState('');
|
||||||
|
const [nip05, setNIP05] = useState({ verified: true, text: '' });
|
||||||
|
|
||||||
|
const { db } = useStorage();
|
||||||
|
const { ndk } = useNDK();
|
||||||
|
const { upload } = useNostr();
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
setError,
|
||||||
|
formState: { isValid, errors },
|
||||||
|
} = useForm({
|
||||||
|
defaultValues: async () => {
|
||||||
|
const res: NDKUserProfile = queryClient.getQueryData(['user', db.account.pubkey]);
|
||||||
|
if (res.image) {
|
||||||
|
setPicture(res.image);
|
||||||
|
}
|
||||||
|
if (res.banner) {
|
||||||
|
setBanner(res.banner);
|
||||||
|
}
|
||||||
|
if (res.nip05) {
|
||||||
|
setNIP05((prev) => ({ ...prev, text: res.nip05 }));
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const uploadAvatar = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const image = await upload();
|
||||||
|
|
||||||
|
if (image) {
|
||||||
|
setPicture(image);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLoading(false);
|
||||||
|
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadBanner = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const image = await upload();
|
||||||
|
|
||||||
|
if (image) {
|
||||||
|
setBanner(image);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLoading(false);
|
||||||
|
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (data: NDKUserProfile) => {
|
||||||
|
// start loading
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
...data,
|
||||||
|
username: data.name,
|
||||||
|
display_name: data.name,
|
||||||
|
bio: data.about,
|
||||||
|
image: data.picture,
|
||||||
|
};
|
||||||
|
|
||||||
|
const event = new NDKEvent(ndk);
|
||||||
|
event.kind = NDKKind.Metadata;
|
||||||
|
event.tags = [];
|
||||||
|
|
||||||
|
if (data.nip05) {
|
||||||
|
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||||
|
const verify = await user.validateNip05(data.nip05);
|
||||||
|
if (verify) {
|
||||||
|
event.content = JSON.stringify({ ...content, nip05: data.nip05 });
|
||||||
|
} else {
|
||||||
|
setNIP05((prev) => ({ ...prev, verified: false }));
|
||||||
|
setError('nip05', {
|
||||||
|
type: 'manual',
|
||||||
|
message: "Can't verify your Lume ID / NIP-05, please check again",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
event.content = JSON.stringify(content);
|
||||||
|
}
|
||||||
|
|
||||||
|
const publishedRelays = await event.publish();
|
||||||
|
|
||||||
|
if (publishedRelays) {
|
||||||
|
// invalid cache
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: ['user', db.account.pubkey],
|
||||||
|
});
|
||||||
|
// reset form
|
||||||
|
reset();
|
||||||
|
// reset state
|
||||||
|
setLoading(false);
|
||||||
|
setPicture(null);
|
||||||
|
setBanner(null);
|
||||||
|
} else {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto w-full max-w-md">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="mb-0">
|
||||||
|
<input type={'hidden'} {...register('picture')} value={picture} />
|
||||||
|
<input type={'hidden'} {...register('banner')} value={banner} />
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<div className="relative h-36 w-full">
|
||||||
|
{banner ? (
|
||||||
|
<img
|
||||||
|
src={banner}
|
||||||
|
alt="user's banner"
|
||||||
|
className="h-full w-full rounded-xl object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
|
||||||
|
)}
|
||||||
|
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => uploadBanner()}
|
||||||
|
className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
|
||||||
|
>
|
||||||
|
<PlusIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-5 px-4">
|
||||||
|
<div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
|
||||||
|
<img
|
||||||
|
src={picture}
|
||||||
|
alt="user's avatar"
|
||||||
|
className="h-14 w-14 rounded-xl object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => uploadAvatar()}
|
||||||
|
className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
|
||||||
|
>
|
||||||
|
<PlusIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="display_name"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Display Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('display_name', {
|
||||||
|
required: true,
|
||||||
|
minLength: 4,
|
||||||
|
})}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('name', {
|
||||||
|
required: true,
|
||||||
|
minLength: 4,
|
||||||
|
})}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="nip05"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
NIP-05
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
{...register('nip05', {
|
||||||
|
required: true,
|
||||||
|
minLength: 4,
|
||||||
|
})}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
||||||
|
{nip05.verified ? (
|
||||||
|
<span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
|
||||||
|
<CheckCircleIcon className="h-4 w-4" />
|
||||||
|
Verified
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
|
||||||
|
<UnverifiedIcon className="h-4 w-4" />
|
||||||
|
Unverified
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{errors.nip05 && (
|
||||||
|
<p className="mt-1 text-sm text-red-400">
|
||||||
|
{errors.nip05.message.toString()}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="website"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('website', { required: false })}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="website"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Lightning address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={'text'}
|
||||||
|
{...register('lud16', { required: false })}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="about"
|
||||||
|
className="text-sm font-semibold uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Bio
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
{...register('about')}
|
||||||
|
spellCheck={false}
|
||||||
|
className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!isValid}
|
||||||
|
className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
||||||
|
) : (
|
||||||
|
'Update'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
3
src/app/settings/general.tsx
Normal file
3
src/app/settings/general.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function GeneralSettingScreen() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
@ -1,3 +1,19 @@
|
|||||||
export function SettingsScreen() {
|
import { ContactCard } from '@app/settings/components/contactCard';
|
||||||
return <div></div>;
|
import { PostCard } from '@app/settings/components/postCard';
|
||||||
|
import { ProfileCard } from '@app/settings/components/profileCard';
|
||||||
|
import { RelayCard } from '@app/settings/components/relayCard';
|
||||||
|
import { ZapCard } from '@app/settings/components/zapCard';
|
||||||
|
|
||||||
|
export function UserSettingScreen() {
|
||||||
|
return (
|
||||||
|
<div className="mx-auto w-full max-w-xl">
|
||||||
|
<ProfileCard />
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<ContactCard />
|
||||||
|
<RelayCard />
|
||||||
|
<PostCard />
|
||||||
|
<ZapCard />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ export function ActiveAccount() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||||
<Link to="/personal" className="relative inline-block">
|
<Link to="/settings/" className="relative inline-block">
|
||||||
<Avatar.Root>
|
<Avatar.Root>
|
||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
|
@ -19,23 +19,13 @@ export function AccountMoreActions() {
|
|||||||
<DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
|
<DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
|
||||||
<DropdownMenu.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
<Link
|
<Link
|
||||||
to="/personal"
|
to="/settings/"
|
||||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
|
||||||
>
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<Link
|
|
||||||
to="/settings"
|
|
||||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
Settings
|
Settings
|
||||||
</Link>
|
</Link>
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<Logout />
|
<Logout />
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Content>
|
</DropdownMenu.Content>
|
||||||
</DropdownMenu.Portal>
|
</DropdownMenu.Portal>
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
import { Outlet, ScrollRestoration } from 'react-router-dom';
|
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
import { WindowTitlebar } from 'tauri-controls';
|
import { WindowTitlebar } from 'tauri-controls';
|
||||||
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { SecureIcon, SettingsIcon } from '@shared/icons';
|
||||||
|
|
||||||
export function SettingsLayout() {
|
export function SettingsLayout() {
|
||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
|
|
||||||
@ -13,7 +16,79 @@ export function SettingsLayout() {
|
|||||||
) : (
|
) : (
|
||||||
<div data-tauri-drag-region className="h-9" />
|
<div data-tauri-drag-region className="h-9" />
|
||||||
)}
|
)}
|
||||||
<div className="flex h-full min-h-0 w-full">
|
<div className="flex h-full min-h-0 w-full flex-col gap-8 overflow-y-auto pb-10">
|
||||||
|
<div className="flex h-20 w-full items-end justify-center gap-0.5 border-b border-neutral-200 pb-2 dark:border-neutral-800">
|
||||||
|
<NavLink
|
||||||
|
to="/settings/"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900',
|
||||||
|
isActive
|
||||||
|
? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsIcon className="h-6 w-6" />
|
||||||
|
<p className="text-sm font-medium">User</p>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/settings/general"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
|
||||||
|
isActive
|
||||||
|
? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsIcon className="h-6 w-6" />
|
||||||
|
<p className="text-sm font-medium">General</p>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/settings/backup"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
|
||||||
|
isActive
|
||||||
|
? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SecureIcon className="h-6 w-6" />
|
||||||
|
<p className="text-sm font-medium">Backup</p>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/settings/advanced"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
|
||||||
|
isActive
|
||||||
|
? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsIcon className="h-6 w-6" />
|
||||||
|
<p className="text-sm font-medium">Advanced</p>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/settings/about"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
|
||||||
|
isActive
|
||||||
|
? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsIcon className="h-6 w-6" />
|
||||||
|
<p className="text-sm font-medium">About</p>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user