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

clean up & polish

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-30 09:03:02 +07:00
parent 91e50efb1a
commit abe4d11498
24 changed files with 93 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/shared/accounts/active.tsx
View File

@@ -5,7 +5,6 @@ import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { Image } from '@shared/image';
import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
@@ -49,17 +48,25 @@ export function ActiveAccount() {
}, []);
if (status === 'loading') {
return <div className="h-9 w-9 animate-pulse rounded-md bg-white/50" />;
return (
<div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
<div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
);
}
return (
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block shrink-0">
<Link
to={`/users/${db.account.pubkey}`}
className="flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
>
<Image
src={user?.picture || user?.image}
alt={db.account.npub}
className="h-10 w-10 rounded-lg object-cover"
className="h-7 w-7 shrink-0 rounded object-cover"
/>
<NetworkStatusIndicator />
<p className="text-white/80">Your profile</p>
</Link>
);
}

16
src/shared/composer/mention/item.tsx
View File

@@ -6,18 +6,14 @@ import { Profile } from '@utils/types';
export function MentionItem({ profile }: { profile: Profile }) {
return (
<div className="flex items-center gap-2">
<div className="h-8 w-8 shrink-0 overflow-hidden rounded-md bg-zinc-900">
<Image
src={profile.picture || profile.image}
alt={profile.pubkey}
className="h-8 w-8 object-cover"
/>
</div>
<Image
src={profile.picture || profile.image}
alt={profile.pubkey}
className="shirnk-0 h-8 w-8 rounded-md object-cover"
/>
<div className="flex flex-col gap-px">
<h5 className="max-w-[15rem] text-sm font-medium leading-none text-white">
{profile.ident || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}
{profile.ident}
</h5>
<span className="text-sm leading-none text-white/50">
{displayNpub(profile.pubkey, 16)}

15
src/shared/composer/modal.tsx
View File

@@ -4,7 +4,13 @@ import { twMerge } from 'tailwind-merge';
import { useStorage } from '@libs/storage/provider';
import { Composer, ComposerUser } from '@shared/composer';
import { CancelIcon, ChevronDownIcon, ChevronRightIcon, ExpandIcon } from '@shared/icons';
import {
CancelIcon,
ChevronDownIcon,
ChevronRightIcon,
ComposeIcon,
ExpandIcon,
} from '@shared/icons';
import { useComposer } from '@stores/composer';
@@ -22,9 +28,12 @@ export function ComposerModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 px-4 font-bold text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
className="flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2 text-white/80"
>
Postr
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<ComposeIcon className="h-4 w-4 text-white" />
</span>
New postr
</button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">

22
src/shared/icons/chevronUp.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { SVGProps } from 'react';
export function ChevronUpIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M8 14l3.646-3.646a.5.5 0 01.708 0L16 14"
></path>
</svg>
);
}

17
src/shared/icons/compose.tsx
View File

@@ -3,17 +3,20 @@ import { SVGProps } from 'react';
export function ComposeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
d="M12.75 8.25L12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25H12.75ZM12.75 11.25H12C12 11.6642 12.3358 12 12.75 12V11.25ZM15.75 11.25V12C15.9489 12 16.1397 11.921 16.2803 11.7803L15.75 11.25ZM18.75 2.25L19.2803 1.71967C18.9874 1.42678 18.5126 1.42678 18.2197 1.71967L18.75 2.25ZM21.75 5.25L22.2803 5.78033C22.5732 5.48744 22.5732 5.01256 22.2803 4.71967L21.75 5.25ZM20.25 20.25V21C20.6642 21 21 20.6642 21 20.25H20.25ZM3.75 20.25H3C3 20.6642 3.33579 21 3.75 21V20.25ZM3.75 3.75V3C3.33579 3 3 3.33579 3 3.75H3.75ZM11.25 4.5C11.6642 4.5 12 4.16421 12 3.75C12 3.33579 11.6642 3 11.25 3V4.5ZM21 12.75C21 12.3358 20.6642 12 20.25 12C19.8358 12 19.5 12.3358 19.5 12.75H21ZM12 8.25V11.25H13.5V8.25H12ZM12.75 12H15.75V10.5H12.75V12ZM13.2803 8.78033L19.2803 2.78033L18.2197 1.71967L12.2197 7.71967L13.2803 8.78033ZM18.2197 2.78033L21.2197 5.78033L22.2803 4.71967L19.2803 1.71967L18.2197 2.78033ZM21.2197 4.71967L15.2197 10.7197L16.2803 11.7803L22.2803 5.78033L21.2197 4.71967ZM20.25 19.5H3.75V21H20.25V19.5ZM4.5 20.25V3.75H3V20.25H4.5ZM3.75 4.5H11.25V3H3.75V4.5ZM19.5 12.75V20.25H21V12.75H19.5Z"
fill="currentColor"
/>
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M21 18s-1.334 1.544-2.834 1.544-2.707-1.429-4.18-1.429c-1.472 0-2.326.671-3.236 1.635m6.957-16.293l1.836 1.836a1 1 0 010 1.414l-13.25 13.25a1 1 0 01-.707.293H2.75v-2.836a1 1 0 01.293-.707l13.25-13.25a1 1 0 011.414 0z"
></path>
</svg>
);
}

1
src/shared/icons/index.tsx → src/shared/icons/index.ts
View File

@@ -54,3 +54,4 @@ export * from './file';
export * from './share';
export * from './expand';
export * from './focus';
export * from './chevronUp';

8
src/shared/navigation.tsx
View File

@@ -18,6 +18,7 @@ export function Navigation() {
<div data-tauri-drag-region className="h-11 w-full" />
<div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
<div className="flex flex-col pr-2">
<ComposerModal />
<NavLink
to="/"
preventScrollReset={true}
@@ -69,6 +70,7 @@ export function Navigation() {
</span>
Settings
</NavLink>
<ActiveAccount />
</div>
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
<div className="flex flex-col gap-1 pr-2">
@@ -93,12 +95,6 @@ export function Navigation() {
</div>
</Collapsible.Root>
</div>
<div className="absolute bottom-4 left-0 right-0 px-2">
<div className="flex items-center gap-2 rounded-2xl bg-white/10 px-2 py-2 backdrop-blur-xl">
<ActiveAccount />
<ComposerModal />
</div>
</div>
</div>
);
}

2
src/shared/networkStatusIndicator.tsx
View File

@@ -7,7 +7,7 @@ export function NetworkStatusIndicator() {
<span
className={`absolute right-0 top-0 block h-2 w-2 -translate-y-1/2 translate-x-1/2 transform rounded-full ${
isOnline ? 'bg-green-400' : 'bg-red-400'
} ring-2 ring-zinc-900`}
} ring-2 ring-black`}
/>
);
}

1
src/shared/notes/kinds/text.tsx
View File

@@ -36,6 +36,7 @@ export function TextNote({ event }: { event: NDKEvent }) {
}}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
unwrapDisallowed={true}
linkTarget={'_blank'}
>
{content?.parsed}
</ReactMarkdown>

2
src/shared/notes/metadata.tsx
View File

@@ -84,7 +84,7 @@ export function NoteMetadata({ id }: { id: string }) {
<div className="absolute left-[18px] top-14 h-[calc(100%-6.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="relative z-10 flex items-center gap-3 pb-3">
<div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
<div className="isolate flex -space-x-1 overflow-hidden">
<div className="isolate flex -space-x-1">
{data.users?.map((user, index) => (
<MiniUser key={user + index} pubkey={user} />
))}

4
src/shared/notes/users/mini.tsx
View File

@@ -6,14 +6,14 @@ export function MiniUser({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-zinc-700"></div>;
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-4 w-4 rounded bg-white ring-1 ring-zinc-800"
className="relative z-20 inline-block h-4 w-4 rounded ring-1 ring-black"
/>
);
}

2
src/shared/notes/users/repost.tsx
View File

@@ -7,7 +7,7 @@ export function RepostUser({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-zinc-700"></div>;
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (

2
src/shared/notes/users/thread.tsx
View File

@@ -9,7 +9,7 @@ export function ThreadUser({ pubkey, time }: { pubkey: string; time: number }) {
const createdAt = formatCreatedAt(time);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-zinc-700"></div>;
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (

2
src/shared/user.tsx
View File

@@ -65,7 +65,7 @@ export function User({
className={twMerge(
`object-cover ${avatarWidth} ${avatarHeight}`,
size === 'small' ? 'rounded' : 'rounded-lg',
isRepost ? 'ring-1 ring-zinc-800' : ''
isRepost ? 'ring-1 ring-black' : ''
)}
/>
</button>