wip: fix light mode

2024-10-02 09:50:47 +00:00 · 2023-10-13 08:35:07 +07:00 · 2023-10-13 08:35:07 +07:00 · 893663561d
commit 893663561d
parent 35650a40f2
25 changed files with 66 additions and 165 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lume</title>
  </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>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- a/package.json
+++ b/package.json
@ -78,7 +78,7 @@
    "tailwind-scrollbar": "^3.0.5",
    "tauri-controls": "^0.2.0",
    "tippy.js": "^6.3.7",
-    "virtua": "0.9.1",
+    "virtua": "^0.13.0",
    "zustand": "^4.4.3"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -186,8 +186,8 @@ dependencies:
    specifier: ^6.3.7
    version: 6.3.7
  virtua:
-    specifier: 0.9.1
-    version: 0.9.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^0.13.0
+    version: 0.13.0(react-dom@18.2.0)(react@18.2.0)
  zustand:
    specifier: ^4.4.3
    version: 4.4.3(@types/react@18.2.28)(react@18.2.0)
@ -6660,8 +6660,8 @@ packages:
      vfile-message: 3.1.4
    dev: false

-  /virtua@0.9.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-uaFvh+5zCDEenQDgxfIs67kpci7d/3XjdnWP/TdDYLcoXdWKr5ddwiP1g+wybHpXmLqbfJ0X0njmlAvP7GwMdw==}
+  /virtua@0.13.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NiM+3lhl/XMLWsT+Fc+rcMQrsAe7PDRvncu6CjP5UEgDtulIo05KAaugrJAr/ptBofP/iAnlZK/X0Bjd+UkjIQ==}
    peerDependencies:
      react: '>=16.14.0'
      react-dom: '>=16.14.0'
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -81,16 +81,6 @@ async fn opengraph(url: String) -> OpenGraphResponse {
  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]
 fn secure_save(key: String, value: String) -> Result<(), ()> {
  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_store::Builder::default().build())
    .invoke_handler(tauri::generate_handler![
-      close_splashscreen,
      opengraph,
      secure_save,
      secure_load
--- a/src-tauri/tauri.linux.conf.json
+++ b/src-tauri/tauri.linux.conf.json
@ -2,16 +2,6 @@
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "windows": [
-      {
-        "width": 300,
-        "height": 300,
-        "decorations": false,
-        "title": "Lume",
-        "center": true,
-        "resizable": false,
-        "label": "splashscreen",
-        "url": "splashscreen"
-      },
      {
        "width": 1080,
        "height": 800,
@ -22,7 +12,6 @@
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
-        "visible": false,
        "fileDropEnabled": true,
        "decorations": false,
        "transparent": false
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@ -2,18 +2,6 @@
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "windows": [
-      {
-        "width": 300,
-        "height": 300,
-        "decorations": true,
-        "title": "Lume",
-        "titleBarStyle": "Overlay",
-        "hiddenTitle": true,
-        "center": true,
-        "resizable": false,
-        "label": "splashscreen",
-        "url": "splashscreen"
-      },
      {
        "width": 1080,
        "height": 800,
@ -25,7 +13,6 @@
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
-        "visible": false,
        "fileDropEnabled": true,
        "decorations": true,
        "transparent": true,
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@ -2,16 +2,6 @@
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "windows": [
-      {
-        "width": 300,
-        "height": 300,
-        "decorations": false,
-        "title": "Lume",
-        "center": true,
-        "resizable": false,
-        "label": "splashscreen",
-        "url": "splashscreen"
-      },
      {
        "width": 1080,
        "height": 800,
@ -22,7 +12,6 @@
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
-        "visible": false,
        "fileDropEnabled": true,
        "decorations": false,
        "transparent": true,
--- a/src/app.tsx
+++ b/src/app.tsx
@ -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 />,
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@ -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>
          ) : (
--- a/src/app/space/components/toggle.tsx
+++ b/src/app/space/components/toggle.tsx
@ -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>
--- a/src/app/space/components/widgetList.tsx
+++ b/src/app/space/components/widgetList.tsx
@ -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>
--- a/src/app/space/index.tsx
+++ b/src/app/space/index.tsx
@ -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" />
--- a/src/app/splash.tsx
+++ b/src/app/splash.tsx
@ -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>
-  );
-}
--- a/src/libs/ndk/instance.ts
+++ b/src/libs/ndk/instance.ts
@ -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',
--- a/src/libs/ndk/provider.tsx
+++ b/src/libs/ndk/provider.tsx
@ -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={{
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@ -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>
--- a/src/shared/layouts/app.tsx
+++ b/src/shared/layouts/app.tsx
@ -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">
+        <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
-              getKey={(location) => {
-                return location.pathname;
-              }}
-            />
-          </div>
+          <ScrollRestoration />
        </div>
      </div>
    </div>
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@ -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>
--- a/src/shared/notes/child.tsx
+++ b/src/shared/notes/child.tsx
@ -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)}
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@ -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)}
--- a/src/shared/notes/kinds/text.tsx
+++ b/src/shared/notes/kinds/text.tsx
@ -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 }) => {
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@ -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>
  );
 });
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@ -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>
--- a/src/shared/notes/wrapper.tsx
+++ b/src/shared/notes/wrapper.tsx
@ -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(
--- a/src/utils/hooks/useNostr.ts
+++ b/src/utils/hooks/useNostr.ts
@ -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, {