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

wip: multi-type composer

Browse Source
This commit is contained in:
reya
2023-10-21 15:58:39 +07:00
parent de88ca51fe
commit cade8c8b4c
16 changed files with 234 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/accounts/more.tsx
View File

@@ -44,9 +44,7 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
Settings
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<Logout />
</DropdownMenu.Item>
<Logout />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>

28
src/shared/logout.tsx
View File

@@ -1,16 +1,23 @@
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import { useNavigate } from 'react-router-dom';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
export function Logout() {
const { db } = useStorage();
const navigate = useNavigate();
const { db } = useStorage();
const { ndk } = useNDK();
const logout = async () => {
ndk.signer = null;
// remove account
db.accountLogout();
await db.accountLogout();
await db.secureRemove(db.account.pubkey);
await db.secureRemove(db.account.pubkey + '-bunker');
// redirect to welcome screen
navigate('/auth/welcome');
};
@@ -26,11 +33,11 @@ export function Logout() {
</button>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-2xl dark:bg-white/50" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-md rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
<div className="relative h-min w-full max-w-md rounded-xl bg-neutral-100 dark:bg-neutral-900">
<div className="flex flex-col gap-1 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Are you sure!
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-tight text-neutral-600 dark:text-neutral-400">
@@ -40,14 +47,17 @@ export function Logout() {
</div>
<div className="flex justify-end gap-2 px-5 py-3">
<AlertDialog.Cancel asChild>
<button className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium leading-none text-white outline-none hover:bg-white/10 hover:backdrop-blur-xl">
<button
type="button"
className="inline-flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-neutral-900 outline-none hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Cancel
</button>
</AlertDialog.Cancel>
<button
type="button"
onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
className="inline-flex h-9 items-center justify-center rounded-lg bg-red-500 px-4 text-sm font-medium text-white outline-none hover:bg-red-600"
>
Logout
</button>

25
src/shared/navigation.tsx
View File

@@ -2,8 +2,14 @@ import { Link, NavLink } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ActiveAccount } from '@shared/accounts/active';
import { ComposerModal } from '@shared/composer';
import { ChatsIcon, ExploreIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
import {
ChatsIcon,
ComposeIcon,
ExploreIcon,
HomeIcon,
NwcIcon,
RelayIcon,
} from '@shared/icons';
export function Navigation() {
return (
@@ -21,7 +27,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
: 'text-black/50 dark:text-neutral-400'
)}
>
<HomeIcon className="h-6 w-6" />
@@ -42,7 +48,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
: 'text-black/50 dark:text-neutral-400'
)}
>
<ChatsIcon className="h-6 w-6" />
@@ -63,7 +69,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
: 'text-black/50 dark:text-neutral-400'
)}
>
<RelayIcon className="h-6 w-6" />
@@ -84,7 +90,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
: 'text-black/50 dark:text-neutral-400'
)}
>
<ExploreIcon className="h-6 w-6" />
@@ -97,7 +103,12 @@ export function Navigation() {
</NavLink>
</div>
<div className="flex shrink-0 flex-col gap-3 p-1">
<ComposerModal />
<Link
to="/notes/new"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 text-black hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-white dark:hover:bg-blue-500"
>
<ComposeIcon className="h-5 w-5" />
</Link>
<Link
to="/nwc"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:hover:bg-blue-500"

2
src/shared/user.tsx
View File

@@ -317,7 +317,7 @@ export const User = memo(function User({
if (variant === 'thread') {
return (
<div className="flex items-center gap-3">
<Avatar.Root className="shrink-0">
<Avatar.Root className="h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}