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

revamp onboarding and launching process

Browse Source
This commit is contained in:
reya
2023-11-30 09:38:58 +07:00
parent 00e4f9d357
commit f4390b29e2
41 changed files with 615 additions and 963 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/avatarUploader.tsx
+3 -8
View File
@@ -1,7 +1,7 @@
import { message } from '@tauri-apps/plugin-dialog';
import { Dispatch, SetStateAction, useState } from 'react';
import { LoaderIcon, PlusIcon } from '@shared/icons';
import { LoaderIcon } from '@shared/icons';
import { useNostr } from '@utils/hooks/useNostr';
@@ -37,14 +37,9 @@ export function AvatarUploader({
<button
type="button"
onClick={() => uploadAvatar()}
className="inline-flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-100 px-1.5 py-1 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<PlusIcon className="h-4 w-4" />
)}
Change avatar
{loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Change avatar'}
</button>
);
}
src/shared/layouts/auth.tsx
+6 -4
View File
@@ -7,15 +7,17 @@ export function AuthLayout() {
const { db } = useStorage();
return (
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
<div className="flex h-screen w-screen flex-col">
{db.platform !== 'macos' ? (
<WindowTitlebar />
) : (
<div data-tauri-drag-region className="h-9" />
)}
<div className="flex h-full min-h-0 w-full">
<Outlet />
<ScrollRestoration />
<div className="h-full w-full px-2.5 pb-2.5 pt-1">
<div className="flex h-full min-h-0 w-full rounded-lg bg-white p-3 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
<Outlet />
<ScrollRestoration />
</div>
</div>
</div>
);
src/shared/layouts/onboarding.tsx
+5
View File
@@ -0,0 +1,5 @@
import { Outlet } from 'react-router-dom';
export function OnboardingLayout() {
return <Outlet />;
}
src/shared/titleBar.tsx
+3 -3
View File
@@ -33,13 +33,13 @@ export function TitleBar({
<div className="col-span-1 flex justify-center">
{id === '9999' ? (
<div className="isolate flex -space-x-2">
{db.account.follows
{db.account.contacts
?.slice(0, 8)
.map((item) => <User key={item} pubkey={item} variant="ministacked" />)}
{db.account.follows?.length > 8 ? (
{db.account.contacts?.length > 8 ? (
<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-neutral-900 ring-1 ring-white dark:bg-neutral-700 dark:text-neutral-100 dark:ring-black">
<span className="text-[8px] font-medium">
+{db.account.follows?.length - 8}
+{db.account.contacts?.length - 8}
</span>
</div>
) : null}
src/shared/user.tsx
+11 -26
View File
@@ -4,7 +4,7 @@ import { minidenticon } from 'minidenticons';
import { memo, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { RepostIcon, WorldIcon } from '@shared/icons';
import { RepostIcon } from '@shared/icons';
import { NIP05 } from '@shared/nip05';
import { MoreActions } from '@shared/notes';
@@ -133,10 +133,9 @@ export const User = memo(function User({
return (
<div className="flex items-center gap-2.5">
<div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
<div>
<div className="flex flex-col gap-1.5">
<div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
</div>
</div>
);
@@ -150,37 +149,23 @@ export const User = memo(function User({
alt={pubkey}
loading="lazy"
decoding="async"
className="h-14 w-14 rounded-lg object-cover"
className="h-11 w-11 rounded-lg object-cover"
/>
<Avatar.Fallback delayMs={300}>
<img
src={svgURI}
alt={pubkey}
className="h-14 w-14 rounded-lg bg-black dark:bg-white"
className="h-11 w-11 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName}
</p>
<p className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500">
{user?.about || user?.bio || 'No bio'}
</p>
</div>
<div className="flex flex-col gap-2">
{user?.website ? (
<Link
to={user?.website}
target="_blank"
className="inline-flex items-center gap-2 text-sm text-neutral-900 dark:text-neutral-100/70"
>
<WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user?.website}</p>
</Link>
) : null}
</div>
<div className="flex flex-col items-start text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold">
{user?.name || user?.display_name || user?.displayName}
</p>
<p className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert">
{user?.about || user?.bio || 'No bio'}
</p>
</div>
</div>
);
src/shared/userProfile.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
};
useEffect(() => {
if (db.account.follows.includes(pubkey)) {
if (db.account.contacts.includes(pubkey)) {
setFollowed(true);
}
}, []);
src/shared/widgets/article.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
} else {
filter = {
kinds: [NDKKind.Article],
authors: db.account.follows,
authors: db.account.contacts,
};
}
src/shared/widgets/file.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function FileWidget({ widget }: { widget: Widget }) {
} else {
filter = {
kinds: [1063],
authors: db.account.follows,
authors: db.account.contacts,
};
}
src/shared/widgets/newsfeed.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export function NewsfeedWidget() {
relayUrls,
{
kinds: [NDKKind.Text, NDKKind.Repost],
authors: db.account.follows,
authors: db.account.contacts,
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
src/shared/widgets/notification.tsx
-1
View File
@@ -54,7 +54,6 @@ export function NotificationWidget() {
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
enabled: false,
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
src/shared/widgets/other/addGroupFeeds.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string })
Users
</span>
<div className="flex h-[420px] flex-col overflow-y-auto rounded-xl bg-neutral-100 py-2 dark:bg-neutral-900">
{db.account.follows.map((item: string) => (
{db.account.contacts.map((item: string) => (
<button
key={item}
type="button"
src/shared/widgets/other/liveUpdater.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function LiveUpdater({ status }: { status: QueryStatus }) {
const filter: NDKFilter = {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: db.account.follows,
authors: db.account.contacts,
since: Math.floor(Date.now() / 1000),
};
src/shared/widgets/other/nostrBandUserProfile.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
};
useEffect(() => {
if (db.account.follows.includes(data.pubkey)) {
if (db.account.contacts.includes(data.pubkey)) {
setFollowed(true);
}
}, []);