wip

src/shared/navigation.tsx

@@ -7,13 +7,7 @@ import { ChatsList } from '@app/chats/components/list';
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
 import { Frame } from '@shared/frame';
-import {
-  BellIcon,
-  NavArrowDownIcon,
-  NwcIcon,
-  SpaceIcon,
-  TimeLineIcon,
-} from '@shared/icons';
+import { BellIcon, NavArrowDownIcon, NwcIcon, SpaceIcon, WorldIcon } from '@shared/icons';
 
 import { useActivities } from '@stores/activities';
 import { useSidebar } from '@stores/sidebar';
@@ -38,23 +32,6 @@ export function Navigation() {
         className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32"
       >
         <div className="flex flex-col pr-3">
-          <NavLink
-            to="/timeline"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
-                isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-              <TimeLineIcon className="h-4 w-4 text-white" />
-            </span>
-            Timeline
-          </NavLink>
           <NavLink
             to="/"
             preventScrollReset={true}
@@ -70,7 +47,24 @@ export function Navigation() {
             <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
               <SpaceIcon className="h-4 w-4 text-white" />
             </span>
-            Space
+            Home
+          </NavLink>
+          <NavLink
+            to="/browse"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/70'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <WorldIcon className="h-4 w-4 text-white" />
+            </span>
+            Browse
           </NavLink>
           <NavLink
             to="/notifications"

src/shared/notes/kinds/repost.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -17,7 +18,13 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-export function Repost({ event }: { event: NDKEvent }) {
+export function Repost({
+  event,
+  lighter = false,
+}: {
+  event: NDKEvent;
+  lighter?: boolean;
+}) {
   const embedEvent: null | NDKEvent =
     event.content.length > 0 ? JSON.parse(event.content) : null;
 
@@ -55,7 +62,12 @@ export function Repost({ event }: { event: NDKEvent }) {
   if (embedEvent) {
     return (
       <div className="h-min w-full px-3 pb-3">
-        <div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <div
+          className={twMerge(
+            'relative flex flex-col gap-10 overflow-hidden rounded-xl px-3 py-3',
+            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+          )}
+        >
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
@@ -89,7 +101,12 @@ export function Repost({ event }: { event: NDKEvent }) {
 
     return (
       <div className="h-min w-full px-3 pb-3">
-        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <div
+          className={twMerge(
+            'relative overflow-hidden rounded-xl px-3 py-3',
+            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+          )}
+        >
           <div className="relative flex flex-col">
             <div className="relative z-10 flex items-start gap-3">
               <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
@@ -122,7 +139,12 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+      <div
+        className={twMerge(
+          'relative flex flex-col gap-10 overflow-hidden rounded-xl px-3 py-3',
+          !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+        )}
+      >
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />

src/shared/notes/wrapper.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { ChildNote, NoteActions } from '@shared/notes';
 import { User } from '@shared/user';
@@ -9,16 +10,23 @@ export function NoteWrapper({
   children,
   root,
   reply,
+  lighter = false,
 }: {
   event: NDKEvent;
   children: ReactNode;
   repost?: boolean;
   root?: string;
   reply?: string;
+  lighter?: boolean;
 }) {
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+      <div
+        className={twMerge(
+          'relative overflow-hidden rounded-xl px-3 py-3',
+          !lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
+        )}
+      >
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">

src/shared/widgets/local/network.tsx

@@ -58,7 +58,7 @@ export function LocalNetworkWidget() {
         case NDKKind.Text:
           return (
             <div
-              key={dbEvent.id + index}
+              key={dbEvent.id + dbEvent.root_id + dbEvent.reply_id + index}
               data-index={index}
               ref={virtualizer.measureElement}
             >