mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
wip: fix light mode
This commit is contained in:
parent
35650a40f2
commit
893663561d
@ -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>
|
||||||
|
@ -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": {
|
||||||
|
@ -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'
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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 />,
|
||||||
|
@ -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>
|
||||||
) : (
|
) : (
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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" />
|
||||||
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
@ -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',
|
||||||
|
@ -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={{
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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)}
|
||||||
|
@ -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)}
|
||||||
|
@ -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 }) => {
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
@ -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(
|
||||||
|
@ -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, {
|
||||||
|
Loading…
Reference in New Issue
Block a user