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

wip: fix light mode

Browse Source
This commit is contained in:
reya
2023-10-13 08:35:07 +07:00
parent 35650a40f2
commit 893663561d
25 changed files with 66 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.tsx
View File

@@ -156,14 +156,6 @@ export default function App() {
},
],
},
{
path: '/splashscreen',
errorElement: <ErrorScreen />,
async lazy() {
const { SplashScreen } = await import('@app/splash');
return { Component: SplashScreen };
},
},
{
path: '/auth',
element: <AuthLayout />,

8
src/app/chats/index.tsx
View File

@@ -38,7 +38,7 @@ export function ChatsScreen() {
data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
>
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
<h3 className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text font-semibold text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
All chats
</h3>
</div>
@@ -46,8 +46,10 @@ export function ChatsScreen() {
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center pb-16">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<h5 className="text-white/50">Loading messages...</h5>
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
<h5 className="text-neutral-900 dark:text-neutral-100">
Loading messages...
</h5>
</div>
</div>
) : (

2
src/app/space/components/toggle.tsx
View File

@@ -21,7 +21,7 @@ export function ToggleWidgetList() {
}
className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-200 px-3 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
>
<PlusIcon className="h-4 w-4 text-white" />
<PlusIcon className="h-4 w-4 text-neutral-900 dark:text-zinc-100" />
<p className="text-sm font-semibold leading-none">Add widget</p>
</button>
</div>

6
src/app/space/components/widgetList.tsx
View File

@@ -96,10 +96,10 @@ export function WidgetList({ params }: { params: Widget }) {
</div>
)}
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
<h5 className="line-clamp-1 text-sm font-semibold text-neutral-900 dark:text-neutral-100">
{item.title}
</h5>
<p className="line-clamp-1 text-xs text-neutral-500 dark:text-neutral-300">
<p className="line-clamp-1 text-sm text-neutral-500 dark:text-neutral-300">
{item.description}
</p>
</div>
@@ -128,7 +128,7 @@ export function WidgetList({ params }: { params: Widget }) {
>
Build your own widget{' '}
<div className="-rotate-3 transform-gpu rounded-md border border-neutral-300 bg-neutral-200 px-1.5 py-1 dark:border-neutral-700 dark:bg-neutral-800">
<span className="bg-gradient-to-t from-blue-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
<span className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text text-xs text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
Coming soon
</span>
</div>

7
src/app/space/index.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect } from 'react';
import { VList, WVList } from 'virtua';
import { VList } from 'virtua';
import { ToggleWidgetList } from '@app/space/components/toggle';
import { WidgetList } from '@app/space/components/widgetList';
@@ -85,7 +85,10 @@ export function SpaceScreen() {
}, [fetchWidgets]);
return (
<VList className="h-screen w-full scrollbar-none" horizontal>
<VList
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none"
horizontal
>
{!widgets ? (
<div className="flex h-full w-[420px] flex-col items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />

65
src/app/splash.tsx
View File

@@ -1,65 +0,0 @@
import { invoke } from '@tauri-apps/api';
import { message } from '@tauri-apps/plugin-dialog';
import { useEffect } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons';
import { useNostr } from '@utils/hooks/useNostr';
export function SplashScreen() {
const { db } = useStorage();
const { ndk } = useNDK();
const { fetchUserData } = useNostr();
useEffect(() => {
async function syncUserData() {
if (!db.account) {
await invoke('close_splashscreen');
} else {
const onboarding = localStorage.getItem('onboarding');
const step = JSON.parse(onboarding).state.step || null;
if (step) {
await invoke('close_splashscreen');
} else {
try {
const userData = await fetchUserData();
if (userData.status === 'ok') {
// update last login = current time
await db.updateLastLogin();
// close splash screen and open main app screen
await invoke('close_splashscreen');
}
} catch (e) {
await message(e, {
title: 'An unexpected error has occurred',
type: 'error',
});
await invoke('close_splashscreen');
}
}
}
}
if (ndk) {
syncUserData();
}
}, [ndk, db.account]);
return (
<div
data-tauri-drag-region
className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
>
<div className="flex flex-col items-center justify-center gap-6">
<LoaderIcon className="h-6 w-6 animate-spin text-neutral-950 dark:text-neutral-50" />
<h3 className="text-lg font-medium leading-none text-neutral-950 dark:text-neutral-50">
{!ndk ? 'Connecting...' : 'Syncing...'}
</h3>
</div>
</div>
);
}

2
src/libs/ndk/instance.ts
View File

@@ -61,7 +61,7 @@ export const NDKInstance = () => {
});
try {
await instance.connect(10000);
await instance.connect();
} catch (error) {
await message(`NDK instance init failed: ${error}`, {
title: 'Lume',

18
src/libs/ndk/provider.tsx
View File

@@ -5,6 +5,8 @@ import { PropsWithChildren, createContext, useContext } from 'react';
import { NDKInstance } from '@libs/ndk/instance';
import { LoaderIcon } from '@shared/icons';
interface NDKContext {
ndk: undefined | NDK;
relayUrls: string[];
@@ -20,6 +22,22 @@ const NDKContext = createContext<NDKContext>({
const NDKProvider = ({ children }: PropsWithChildren<object>) => {
const { ndk, relayUrls, fetcher } = NDKInstance();
if (!ndk) {
return (
<div
data-tauri-drag-region
className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
>
<div className="flex flex-col items-center justify-center gap-6">
<LoaderIcon className="h-6 w-6 animate-spin text-neutral-950 dark:text-neutral-50" />
<h3 className="text-lg font-medium leading-none text-neutral-950 dark:text-neutral-50">
Connecting...
</h3>
</div>
</div>
);
}
return (
<NDKContext.Provider
value={{

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

@@ -28,9 +28,9 @@ export function ComposerModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-300 text-black hover:bg-blue-600 hover:text-white dark:bg-neutral-700 dark:text-white dark:hover:bg-blue-600"
>
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
<ComposeIcon className="h-5 w-5" />
</button>
</Dialog.Trigger>
<Dialog.Portal>

20
src/shared/layouts/app.tsx
View File

@@ -11,26 +11,24 @@ export function AppLayout() {
return (
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
{db.platform !== 'macos' ? <WindowTitlebar /> : <div className="h-11" />}
{db.platform !== 'macos' ? (
<WindowTitlebar />
) : (
<div data-tauri-drag-region className="h-9" />
)}
<div className="flex h-full min-h-0 w-full">
<div
data-tauri-drag-region
className={twMerge(
'h-full w-[64px] shrink-0',
db.platform !== 'macos' ? 'pt-2' : 'pt-16'
db.platform !== 'macos' ? 'pt-2' : 'pt-0'
)}
>
<Navigation />
</div>
<div className="flex h-full min-h-0 flex-1 rounded-tl-lg bg-white 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)]">
<div className="h-full flex-1">
<Outlet />
<ScrollRestoration
getKey={(location) => {
return location.pathname;
}}
/>
</div>
<div className="min-h-0 flex-1 rounded-tl-lg bg-white 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>

2
src/shared/navigation.tsx
View File

@@ -126,7 +126,7 @@ export function Navigation() {
<ComposerModal />
<Link
to="/nwc"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 hover:text-white dark:bg-neutral-900 dark:hover:bg-blue-600"
>
<NwcIcon className="h-5 w-5" />
</Link>

4
src/shared/notes/child.tsx
View File

@@ -56,7 +56,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
Lume <span className="text-green-500">(System)</span>
</h5>
</div>
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div>
<div className="relative z-20 mt-1 flex-1 select-text">
@@ -81,7 +81,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
<div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
{renderKind(data)}

6
src/shared/notes/kinds/repost.tsx
View File

@@ -71,7 +71,7 @@ export function Repost({
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col">
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
{renderKind(embedEvent)}
@@ -116,7 +116,7 @@ export function Repost({
Lume <span className="text-green-500">(System)</span>
</h5>
</div>
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div>
<div className="relative z-20 mt-1 flex-1 select-text">
@@ -148,7 +148,7 @@ export function Repost({
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
{renderKind(data)}

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

@@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
return (
<div>
<ReactMarkdown
className="prose prose-neutral max-w-none select-text 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:break-words prose-pre:break-all 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"
className="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:break-words prose-pre:break-all 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"
remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true}
@@ -38,7 +38,7 @@ export function TextNote(props: { content?: string }) {
return (
<div>
<ReactMarkdown
className="prose prose-neutral max-w-none select-text 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:break-words prose-pre:break-all 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"
className="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:break-words prose-pre:break-all 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"
remarkPlugins={[remarkGfm]}
components={{
a: ({ href }) => {

10
src/shared/notes/mentions/note.tsx
View File

@@ -58,8 +58,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
if (status === 'error') {
const noteLink = `https://njump.me/${nip19.noteEncode(id)}`;
return (
<div className="relative mt-3 flex flex-col">
<div className="relative z-10 flex items-center gap-3">
<div className="mt-3 rounded-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
<div className="flex items-center gap-2">
<div className="inline-flex h-6 w-6 items-end justify-center rounded bg-black pb-1">
<img src="/lume.png" alt="lume" className="h-auto w-1/3" />
</div>
@@ -67,7 +67,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
Lume <span className="text-green-500">(System)</span>
</h5>
</div>
<div className="mt-1">
<div className="mt-1.5">
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it via
njump.me.{' '}
@@ -87,10 +87,10 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
onKeyDown={(e) => openThread(e, id)}
role="button"
tabIndex={0}
className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
className="mt-3 cursor-default rounded-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800"
>
<User pubkey={data.pubkey} time={data.created_at} variant="mention" />
<div className="mt-1">{renderKind(data)}</div>
<div className="mt-1.5">{renderKind(data)}</div>
</div>
);
});

4
src/shared/notes/preview/link.tsx
View File

@@ -49,11 +49,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
{data.title}
</h5>
{data.description && (
<p className="line-clamp-3 break-all text-sm text-neutral-500 dark:text-neutral-400">
<p className="line-clamp-3 break-words text-sm text-neutral-700 dark:text-neutral-400">
{data.description}
</p>
)}
<span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
<span className="mt-2.5 text-sm text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>

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

@@ -31,7 +31,7 @@ export function NoteWrapper({
<div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-3 flex items-start gap-3">
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
{cloneElement(

1
src/utils/hooks/useNostr.ts
View File

@@ -38,7 +38,6 @@ export function useNostr() {
callback: (event: NDKEvent) => void,
groupable?: boolean
) => {
console.info(ndk);
if (!ndk) throw new Error('NDK instance not found');
const subEvent = ndk.subscribe(filter, {