nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-10-02 18:00:47 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume</title> <title>Lume</title>
</head> </head>
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-neutral-950 dark:text-neutral-50 selection:bg-blue-50 selection:text-blue-500 dark:selection:bg-blue-950 dark:selection:text-blue-50"> <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-neutral-950 dark:text-neutral-50">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

2
package.json
View File

@ -78,7 +78,7 @@
"tailwind-scrollbar": "^3.0.5", "tailwind-scrollbar": "^3.0.5",
"tauri-controls": "^0.2.0", "tauri-controls": "^0.2.0",
"tippy.js": "^6.3.7", "tippy.js": "^6.3.7",
"virtua": "0.9.1", "virtua": "^0.13.0",
"zustand": "^4.4.3" "zustand": "^4.4.3"
}, },
"devDependencies": { "devDependencies": {

8
pnpm-lock.yaml
View File

@ -186,8 +186,8 @@ dependencies:
specifier: ^6.3.7 specifier: ^6.3.7
version: 6.3.7 version: 6.3.7
virtua: virtua:
specifier: 0.9.1 specifier: ^0.13.0
version: 0.9.1(react-dom@18.2.0)(react@18.2.0) version: 0.13.0(react-dom@18.2.0)(react@18.2.0)
zustand: zustand:
specifier: ^4.4.3 specifier: ^4.4.3
version: 4.4.3(@types/react@18.2.28)(react@18.2.0) version: 4.4.3(@types/react@18.2.28)(react@18.2.0)
@ -6660,8 +6660,8 @@ packages:
vfile-message: 3.1.4 vfile-message: 3.1.4
dev: false dev: false
/virtua@0.9.1(react-dom@18.2.0)(react@18.2.0): /virtua@0.13.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-uaFvh+5zCDEenQDgxfIs67kpci7d/3XjdnWP/TdDYLcoXdWKr5ddwiP1g+wybHpXmLqbfJ0X0njmlAvP7GwMdw==} resolution: {integrity: sha512-NiM+3lhl/XMLWsT+Fc+rcMQrsAe7PDRvncu6CjP5UEgDtulIo05KAaugrJAr/ptBofP/iAnlZK/X0Bjd+UkjIQ==}
peerDependencies: peerDependencies:
react: '>=16.14.0' react: '>=16.14.0'
react-dom: '>=16.14.0' react-dom: '>=16.14.0'

11
src-tauri/src/main.rs
View File

@ -81,16 +81,6 @@ async fn opengraph(url: String) -> OpenGraphResponse {
return result; return result;
} }
#[tauri::command]
fn close_splashscreen(window: tauri::Window) {
// Close splashscreen
if let Some(splashscreen) = window.get_window("splashscreen") {
splashscreen.close().unwrap();
}
// Show main window
window.get_window("main").unwrap().show().unwrap();
}
#[tauri::command] #[tauri::command]
fn secure_save(key: String, value: String) -> Result<(), ()> { fn secure_save(key: String, value: String) -> Result<(), ()> {
let entry = Entry::new("lume", &key).expect("Failed to create entry"); let entry = Entry::new("lume", &key).expect("Failed to create entry");
@ -252,7 +242,6 @@ fn main() {
.plugin(tauri_plugin_upload::init()) .plugin(tauri_plugin_upload::init())
.plugin(tauri_plugin_store::Builder::default().build()) .plugin(tauri_plugin_store::Builder::default().build())
.invoke_handler(tauri::generate_handler![ .invoke_handler(tauri::generate_handler![
close_splashscreen,
opengraph, opengraph,
secure_save, secure_save,
secure_load secure_load

11
src-tauri/tauri.linux.conf.json
View File

@ -2,16 +2,6 @@
"$schema": "../node_modules/@tauri-apps/cli/schema.json", "$schema": "../node_modules/@tauri-apps/cli/schema.json",
"tauri": { "tauri": {
"windows": [ "windows": [
{
"width": 300,
"height": 300,
"decorations": false,
"title": "Lume",
"center": true,
"resizable": false,
"label": "splashscreen",
"url": "splashscreen"
},
{ {
"width": 1080, "width": 1080,
"height": 800, "height": 800,
@ -22,7 +12,6 @@
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,
"hiddenTitle": true, "hiddenTitle": true,
"visible": false,
"fileDropEnabled": true, "fileDropEnabled": true,
"decorations": false, "decorations": false,
"transparent": false "transparent": false

13
src-tauri/tauri.macos.conf.json
View File

@ -2,18 +2,6 @@
"$schema": "../node_modules/@tauri-apps/cli/schema.json", "$schema": "../node_modules/@tauri-apps/cli/schema.json",
"tauri": { "tauri": {
"windows": [ "windows": [
{
"width": 300,
"height": 300,
"decorations": true,
"title": "Lume",
"titleBarStyle": "Overlay",
"hiddenTitle": true,
"center": true,
"resizable": false,
"label": "splashscreen",
"url": "splashscreen"
},
{ {
"width": 1080, "width": 1080,
"height": 800, "height": 800,
@ -25,7 +13,6 @@
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,
"hiddenTitle": true, "hiddenTitle": true,
"visible": false,
"fileDropEnabled": true, "fileDropEnabled": true,
"decorations": true, "decorations": true,
"transparent": true, "transparent": true,

11
src-tauri/tauri.windows.conf.json
View File

@ -2,16 +2,6 @@
"$schema": "../node_modules/@tauri-apps/cli/schema.json", "$schema": "../node_modules/@tauri-apps/cli/schema.json",
"tauri": { "tauri": {
"windows": [ "windows": [
{
"width": 300,
"height": 300,
"decorations": false,
"title": "Lume",
"center": true,
"resizable": false,
"label": "splashscreen",
"url": "splashscreen"
},
{ {
"width": 1080, "width": 1080,
"height": 800, "height": 800,
@ -22,7 +12,6 @@
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,
"hiddenTitle": true, "hiddenTitle": true,
"visible": false,
"fileDropEnabled": true, "fileDropEnabled": true,
"decorations": false, "decorations": false,
"transparent": true, "transparent": true,

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', path: '/auth',
element: <AuthLayout />, element: <AuthLayout />,

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

@ -38,7 +38,7 @@ export function ChatsScreen() {
data-tauri-drag-region data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3" 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 All chats
</h3> </h3>
</div> </div>
@ -46,8 +46,10 @@ export function ChatsScreen() {
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center pb-16"> <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"> <div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
<h5 className="text-white/50">Loading messages...</h5> <h5 className="text-neutral-900 dark:text-neutral-100">
Loading messages...
</h5>
</div> </div>
</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" 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> <p className="text-sm font-semibold leading-none">Add widget</p>
</button> </button>
</div> </div>

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

@ -96,10 +96,10 @@ export function WidgetList({ params }: { params: Widget }) {
</div> </div>
)} )}
<div className="inline-flex h-16 w-full flex-col items-start justify-center"> <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} {item.title}
</h5> </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} {item.description}
</p> </p>
</div> </div>
@ -128,7 +128,7 @@ export function WidgetList({ params }: { params: Widget }) {
> >
Build your own 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"> <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 Coming soon
</span> </span>
</div> </div>

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

@ -1,5 +1,5 @@
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { VList, WVList } from 'virtua'; import { VList } from 'virtua';
import { ToggleWidgetList } from '@app/space/components/toggle'; import { ToggleWidgetList } from '@app/space/components/toggle';
import { WidgetList } from '@app/space/components/widgetList'; import { WidgetList } from '@app/space/components/widgetList';
@ -85,7 +85,10 @@ export function SpaceScreen() {
}, [fetchWidgets]); }, [fetchWidgets]);
return ( 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 ? ( {!widgets ? (
<div className="flex h-full w-[420px] flex-col items-center justify-center"> <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" /> <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 { try {
await instance.connect(10000); await instance.connect();
} catch (error) { } catch (error) {
await message(`NDK instance init failed: ${error}`, { await message(`NDK instance init failed: ${error}`, {
title: 'Lume', 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 { NDKInstance } from '@libs/ndk/instance';
import { LoaderIcon } from '@shared/icons';
interface NDKContext { interface NDKContext {
ndk: undefined | NDK; ndk: undefined | NDK;
relayUrls: string[]; relayUrls: string[];
@ -20,6 +22,22 @@ const NDKContext = createContext<NDKContext>({
const NDKProvider = ({ children }: PropsWithChildren<object>) => { const NDKProvider = ({ children }: PropsWithChildren<object>) => {
const { ndk, relayUrls, fetcher } = NDKInstance(); 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 ( return (
<NDKContext.Provider <NDKContext.Provider
value={{ value={{

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

@ -28,9 +28,9 @@ export function ComposerModal() {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="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> </button>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>

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

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

2
src/shared/navigation.tsx
View File

@ -126,7 +126,7 @@ export function Navigation() {
<ComposerModal /> <ComposerModal />
<Link <Link
to="/nwc" 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" /> <NwcIcon className="h-5 w-5" />
</Link> </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> Lume <span className="text-green-500">(System)</span>
</h5> </h5>
</div> </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 className="w-10 shrink-0" />
<div> <div>
<div className="relative z-20 mt-1 flex-1 select-text"> <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="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"> <div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} /> <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="w-10 shrink-0" />
<div className="relative z-20 flex-1"> <div className="relative z-20 flex-1">
{renderKind(data)} {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" /> <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} /> <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="w-10 shrink-0" />
<div className="relative z-20 flex-1"> <div className="relative z-20 flex-1">
{renderKind(embedEvent)} {renderKind(embedEvent)}
@ -116,7 +116,7 @@ export function Repost({
Lume <span className="text-green-500">(System)</span> Lume <span className="text-green-500">(System)</span>
</h5> </h5>
</div> </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 className="w-11 shrink-0" />
<div> <div>
<div className="relative z-20 mt-1 flex-1 select-text"> <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" /> <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} /> <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="w-10 shrink-0" />
<div className="relative z-20 flex-1"> <div className="relative z-20 flex-1">
{renderKind(data)} {renderKind(data)}

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

@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
return ( return (
<div> <div>
<ReactMarkdown <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]} remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']} disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true} unwrapDisallowed={true}
@ -38,7 +38,7 @@ export function TextNote(props: { content?: string }) {
return ( return (
<div> <div>
<ReactMarkdown <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]} remarkPlugins={[remarkGfm]}
components={{ components={{
a: ({ href }) => { 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') { if (status === 'error') {
const noteLink = `https://njump.me/${nip19.noteEncode(id)}`; const noteLink = `https://njump.me/${nip19.noteEncode(id)}`;
return ( return (
<div className="relative mt-3 flex flex-col"> <div className="mt-3 rounded-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
<div className="relative z-10 flex items-center gap-3"> <div className="flex items-center gap-2">
<div className="inline-flex h-6 w-6 items-end justify-center rounded bg-black pb-1"> <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" /> <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
</div> </div>
@ -67,7 +67,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
Lume <span className="text-green-500">(System)</span> Lume <span className="text-green-500">(System)</span>
</h5> </h5>
</div> </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"> <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 Lume cannot find this post with your current relays, but you can view it via
njump.me.{' '} njump.me.{' '}
@ -87,10 +87,10 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
onKeyDown={(e) => openThread(e, id)} onKeyDown={(e) => openThread(e, id)}
role="button" role="button"
tabIndex={0} 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" /> <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> </div>
); );
}); });

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

@ -49,11 +49,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
{data.title} {data.title}
</h5> </h5>
{data.description && ( {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} {data.description}
</p> </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} {domain.hostname}
</span> </span>
</div> </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">{reply && <ChildNote id={reply} root={root} />}</div>
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} /> <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="w-10 shrink-0" />
<div className="relative z-20 flex-1"> <div className="relative z-20 flex-1">
{cloneElement( {cloneElement(

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

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