wip: network

src/shared/accounts/active.tsx

@@ -92,7 +92,7 @@ export function ActiveAccount({ data }: { data: { pubkey: string; npub: string }
   }
 
   return (
-    <Link to={`/app/users/${data.pubkey}`} className="relative inline-block h-9 w-9">
+    <Link to={`/users/${data.pubkey}`} className="relative inline-block h-9 w-9">
       <Image
         src={user?.picture || user?.image}
         fallback={DEFAULT_AVATAR}

src/shared/appLayout.tsx

@@ -1,10 +1,7 @@
-import { LogicalSize, appWindow } from '@tauri-apps/plugin-window';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 
 import { Navigation } from '@shared/navigation';
 
-await appWindow.setSize(new LogicalSize(1080, 800));
-
 export function AppLayout() {
   return (
     <div className="flex h-screen w-screen">
@@ -13,7 +10,11 @@ export function AppLayout() {
       </div>
       <div className="h-full w-full flex-1 bg-black/90">
         <Outlet />
-        <ScrollRestoration />
+        <ScrollRestoration
+          getKey={(location) => {
+            return location.pathname;
+          }}
+        />
       </div>
     </div>
   );

src/shared/button.tsx

@@ -24,11 +24,11 @@ export function Button({
       break;
     case 'large':
       preClass =
-        'h-11 w-full bg-fuchsia-500 rounded-md font-medium text-white hover:bg-fuchsia-600';
+        'h-11 w-full bg-fuchsia-500 rounded-lg font-medium text-white hover:bg-fuchsia-600';
       break;
     case 'large-alt':
       preClass =
-        'h-11 w-full bg-zinc-800 rounded-md font-medium text-white border-t border-zinc-700/50 hover:bg-zinc-900';
+        'h-11 w-full bg-white/10 rounded-lg font-medium text-white hover:bg-white/20';
       break;
     default:
       break;
@@ -40,7 +40,7 @@ export function Button({
       onClick={onClick}
       disabled={disabled}
       className={twMerge(
-        'inline-flex transform items-center justify-center gap-1 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex transform items-center justify-center gap-1 leading-none focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50',
         preClass
       )}
     >

src/shared/editProfileModal.tsx

@@ -197,13 +197,13 @@ export function EditProfileModal() {
                       type={'hidden'}
                       {...register('picture')}
                       value={picture}
-                      className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                      className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-white/50"
                     />
                     <input
                       type={'hidden'}
                       {...register('banner')}
                       value={banner}
-                      className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                      className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-white/50"
                     />
                     <div className="relative">
                       <div className="relative h-44 w-full bg-zinc-800">
@@ -246,7 +246,7 @@ export function EditProfileModal() {
                             minLength: 4,
                           })}
                           spellCheck={false}
-                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
+                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                         />
                       </div>
                       <div className="flex flex-col gap-1">
@@ -263,7 +263,7 @@ export function EditProfileModal() {
                               minLength: 4,
                             })}
                             spellCheck={false}
-                            className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
+                            className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                           />
                           <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
                             {nip05.verified ? (
@@ -295,7 +295,7 @@ export function EditProfileModal() {
                         <textarea
                           {...register('about')}
                           spellCheck={false}
-                          className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
+                          className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                         />
                       </div>
                       <div className="flex flex-col gap-1">
@@ -309,7 +309,7 @@ export function EditProfileModal() {
                           type={'text'}
                           {...register('website', { required: false })}
                           spellCheck={false}
-                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
+                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                         />
                       </div>
                       <div className="flex flex-col gap-1">
@@ -323,7 +323,7 @@ export function EditProfileModal() {
                           type={'text'}
                           {...register('lud16', { required: false })}
                           spellCheck={false}
-                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
+                          className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                         />
                       </div>
                       <div>

src/shared/navigation.tsx

@@ -64,7 +64,7 @@ export function Navigation() {
             <Collapsible.Content>
               <div className="flex flex-col">
                 <NavLink
-                  to="/app/space"
+                  to="/"
                   preventScrollReset={true}
                   className={({ isActive }) =>
                     twMerge(
@@ -79,7 +79,7 @@ export function Navigation() {
                   <span className="font-medium">Spaces</span>
                 </NavLink>
                 <NavLink
-                  to="/app/trending"
+                  to="/trending"
                   preventScrollReset={true}
                   className={({ isActive }) =>
                     twMerge(

src/shared/notes/actions/more.tsx

@@ -43,7 +43,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
         <Popover.Content className="w-[200px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none">
           <div className="flex flex-col p-2">
             <Link
-              to={`/app/events/${id}`}
+              to={`/events/${id}`}
               className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
             >
               Open as new screen
@@ -63,7 +63,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
               Copy ID
             </button>
             <Link
-              to={`/app/users/${pubkey}`}
+              to={`/users/${pubkey}`}
               className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
             >
               View profile

src/shared/notes/actions/reaction.tsx

@@ -8,23 +8,23 @@ import { usePublish } from '@utils/hooks/usePublish';
 const REACTIONS = [
   {
     content: '👏',
-    img: '/public/clapping_hands.png',
+    img: '/clapping_hands.png',
   },
   {
     content: '🤪',
-    img: '/public/face_with_tongue.png',
+    img: '/face_with_tongue.png',
   },
   {
     content: '😮',
-    img: '/public/face_with_open_mouth.png',
+    img: '/face_with_open_mouth.png',
   },
   {
     content: '😢',
-    img: '/public/crying_face.png',
+    img: '/crying_face.png',
   },
   {
     content: '🤡',
-    img: '/public/clown_face.png',
+    img: '/clown_face.png',
   },
 ];
 
@@ -82,11 +82,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               onClick={() => react('👏')}
               className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
             >
-              <img
-                src="/public/clapping_hands.png"
-                alt="Clapping Hands"
-                className="h-6 w-6"
-              />
+              <img src="/clapping_hands.png" alt="Clapping Hands" className="h-6 w-6" />
             </button>
             <button
               type="button"
@@ -94,7 +90,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
               <img
-                src="/public/face_with_tongue.png"
+                src="/face_with_tongue.png"
                 alt="Face with Tongue"
                 className="h-6 w-6"
               />
@@ -105,7 +101,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
               <img
-                src="/public/face_with_open_mouth.png"
+                src="/face_with_open_mouth.png"
                 alt="Face with Open Mouth"
                 className="h-6 w-6"
               />
@@ -115,14 +111,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               onClick={() => react('😢')}
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
-              <img src="/public/crying_face.png" alt="Crying Face" className="h-6 w-6" />
+              <img src="/crying_face.png" alt="Crying Face" className="h-6 w-6" />
             </button>
             <button
               type="button"
               onClick={() => react('🤡')}
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
-              <img src="/public/clown_face.png" alt="Clown Face" className="h-6 w-6" />
+              <img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
             </button>
           </div>
           <Popover.Arrow className="fill-black" />

src/shared/notification/modal.tsx

@@ -83,7 +83,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
               ) : data.length < 1 ? (
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <p className="mb-1 text-4xl">🎉</p>
-                  <p className="font-medium text-zinc-500">
+                  <p className="font-medium text-white/50">
                     Yo!, you&apos;ve no new notifications
                   </p>
                 </div>

src/shared/notification/types/repost.tsx

@@ -17,7 +17,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
           <p className="leading-none text-white/50">repost your post</p>
         </div>
         <div>
-          <span className="leading-none text-zinc-500">{createdAt}</span>
+          <span className="leading-none text-white/50">{createdAt}</span>
         </div>
       </div>
       <div className="-mt-5 pl-[44px]">{root && <MentionNote id={root} />}</div>

src/shared/user.tsx

@@ -121,13 +121,13 @@ export function User({
           </div>
           <div className="flex items-center gap-2 px-3 py-3">
             <Link
-              to={`/app/users/${pubkey}`}
+              to={`/users/${pubkey}`}
               className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
             >
               View profile
             </Link>
             <Link
-              to={`/app/chats/${pubkey}`}
+              to={`/chats/${pubkey}`}
               className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
             >
               Message

src/shared/userProfile.tsx

@@ -97,7 +97,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             </button>
           )}
           <Link
-            to={`/app/chats/${pubkey}`}
+            to={`/chats/${pubkey}`}
             className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
           >
             Message