wip
This commit is contained in:
@@ -1,138 +0,0 @@
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { EyeOffIcon, EyeOnIcon } from '@shared/icons';
|
||||
|
||||
export function AccountSettingsScreen() {
|
||||
const { db } = useStorage();
|
||||
|
||||
const [privType, setPrivType] = useState('password');
|
||||
const [nsecType, setNsecType] = useState('password');
|
||||
|
||||
const privkey = 'todo';
|
||||
const nsec = useMemo(() => nip19.nsecEncode(privkey), [privkey]);
|
||||
|
||||
const showPrivkey = () => {
|
||||
if (privType === 'password') {
|
||||
setPrivType('text');
|
||||
} else {
|
||||
setPrivType('password');
|
||||
}
|
||||
};
|
||||
|
||||
const showNsec = () => {
|
||||
if (nsecType === 'password') {
|
||||
setNsecType('text');
|
||||
} else {
|
||||
setNsecType('password');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-11">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-semibold text-white">Account</h1>
|
||||
<div className="flex flex-col gap-4 rounded-xl bg-white/10 p-3 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="pubkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Public Key
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.pubkey}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="npub"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Npub
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.npub}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="privkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Private Key
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
readOnly
|
||||
type={privType}
|
||||
value={privkey}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPrivkey()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||
>
|
||||
{privType === 'password' ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="privkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Nsec
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
readOnly
|
||||
type={nsecType}
|
||||
value={nsec}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showNsec()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||
>
|
||||
{privType === 'password' ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
export function AutoStartSetting() {
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">Auto start</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Auto start at login
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { CheckCircleIcon } from '@shared/icons';
|
||||
|
||||
export function CacheTimeSetting() {
|
||||
const [time, setTime] = useState('0');
|
||||
|
||||
const update = async () => {
|
||||
// await updateSetting('cache_time', time);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">
|
||||
Cache time (milliseconds)
|
||||
</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
The length of time before inactive data gets removed from the cache
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<input
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.currentTarget.value)}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="h-8 w-24 rounded-md bg-neutral-800 px-2 text-right font-medium text-neutral-300 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => update()}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-800 font-medium hover:bg-blue-600"
|
||||
>
|
||||
<CheckCircleIcon className="h-4 w-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { appConfigDir } from '@tauri-apps/api/path';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function DataPath() {
|
||||
const [path, setPath] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
async function getPath() {
|
||||
const dir = await appConfigDir();
|
||||
setPath(dir);
|
||||
}
|
||||
getPath();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">App data path</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Where the local data is stored
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="font-medium text-neutral-300">{path}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
export function VersionSetting() {
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">Version</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
You're using latest version
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="font-medium text-neutral-300">2</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { AutoStartSetting } from '@app/settings/components/autoStart';
|
||||
import { DataPath } from '@app/settings/components/dataPath';
|
||||
import { VersionSetting } from '@app/settings/components/version';
|
||||
|
||||
export function GeneralSettingsScreen() {
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-11">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-semibold text-white">General</h1>
|
||||
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<AutoStartSetting />
|
||||
<DataPath />
|
||||
<VersionSetting />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
src/app/settings/index.tsx
Normal file
3
src/app/settings/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export function SettingsScreen() {
|
||||
return <div></div>;
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
import { CommandIcon } from '@shared/icons';
|
||||
|
||||
export function ShortcutsSettingsScreen() {
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-white">Shortcuts</h1>
|
||||
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">Open composer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
N
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Add image block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
I
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Add newsfeed block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
F
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Open personal page
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
P
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Open notification
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
B
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user