migrated to vite and vite-plugin-ssr

src/components/multiAccounts/activeAccount.tsx

@@ -1,20 +1,16 @@
-'use client';
-
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { writeText } from '@tauri-apps/api/clipboard';
 import { LogOut, ProfileCircle, Settings } from 'iconoir-react';
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 import { nip19 } from 'nostr-tools';
+import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const ActiveAccount = ({ user }: { user: any }) => {
-  const router = useRouter();
   const userData = JSON.parse(user.metadata);
 
   const openProfilePage = () => {
-    router.push(`/nostr/user?pubkey=${user.pubkey}`, { forceOptimisticNavigation: true });
+    navigate(`/user?pubkey=${user.pubkey}`);
   };
 
   const copyPublicKey = async () => {
@@ -25,12 +21,10 @@ export const ActiveAccount = ({ user }: { user: any }) => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button className="relative h-11 w-11 rounded-lg">
-          <Image
+          <img
             src={userData.picture || DEFAULT_AVATAR}
             alt="user's avatar"
-            fill={true}
-            className="rounded-lg object-cover"
-            priority
+            className="h-11 w-11 rounded-lg object-cover"
           />
         </button>
       </DropdownMenu.Trigger>

src/components/multiAccounts/inactiveAccount.tsx

@@ -1,6 +1,5 @@
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import Image from 'next/image';
 import { memo } from 'react';
 
 export const InactiveAccount = memo(function InactiveAccount({ user }: { user: any }) {
@@ -12,13 +11,7 @@ export const InactiveAccount = memo(function InactiveAccount({ user }: { user: a
 
   return (
     <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
-      <Image
-        src={userData.picture || DEFAULT_AVATAR}
-        alt="user's avatar"
-        fill={true}
-        className="rounded-lg object-cover"
-        priority
-      />
+      <img src={userData.picture || DEFAULT_AVATAR} alt="user's avatar" className="h-11 w-11 rounded-lg object-cover" />
     </button>
   );
 });

src/components/multiAccounts/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ActiveAccount } from '@components/multiAccounts/activeAccount';
 import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
 
@@ -11,7 +9,6 @@ import LumeSymbol from '@assets/icons/Lume';
 
 import useLocalStorage from '@rehooks/local-storage';
 import { Plus } from 'iconoir-react';
-import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
 export default function MultiAccounts() {
@@ -38,21 +35,19 @@ export default function MultiAccounts() {
   return (
     <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
       <div className="flex flex-col gap-4">
-        <Link
-          prefetch={false}
+        <a
           href="/explore"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
-        </Link>
+        </a>
         <div>{users.map((user) => renderAccount(user))}</div>
-        <Link
-          prefetch={false}
+        <a
           href="/onboarding"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
         >
           <Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
-        </Link>
+        </a>
       </div>
       <div className="flex flex-col gap-0.5 text-center">
         <span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">