migrated to nextjs 13 app dir

src/components/activeLink.tsx

@@ -1,39 +0,0 @@
-import Link, { LinkProps } from 'next/link';
-import { useRouter } from 'next/router';
-import { PropsWithChildren, memo, useEffect, useState } from 'react';
-
-type ActiveLinkProps = LinkProps & {
-  className?: string;
-  activeClassName: string;
-};
-
-const ActiveLink = ({ children, activeClassName, className, ...props }: PropsWithChildren<ActiveLinkProps>) => {
-  const { asPath, isReady } = useRouter();
-  const [computedClassName, setComputedClassName] = useState(className);
-
-  useEffect(() => {
-    // Check if the router fields are updated client-side
-    if (isReady) {
-      // Dynamic route will be matched via props.as
-      // Static route will be matched via props.href
-      const linkPathname = new URL((props.as || props.href) as string, location.href).pathname;
-
-      // Using URL().pathname to get rid of query and hash
-      const activePathname = new URL(asPath, location.href).pathname;
-
-      const newClassName = linkPathname === activePathname ? `${className} ${activeClassName}`.trim() : className;
-
-      if (newClassName !== computedClassName) {
-        setComputedClassName(newClassName);
-      }
-    }
-  }, [asPath, isReady, props.as, props.href, activeClassName, className, computedClassName]);
-
-  return (
-    <Link className={computedClassName} {...props}>
-      {children}
-    </Link>
-  );
-};
-
-export default memo(ActiveLink);

src/components/appHeader/actions.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import { platform } from '@tauri-apps/api/os';
 import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useLayoutEffect, useState } from 'react';
 
 export default function AppActions() {
@@ -12,11 +14,11 @@ export default function AppActions() {
   };
 
   const goForward = () => {
-    window.history.forward();
+    router.forward();
   };
 
   const reload = () => {
-    router.reload();
+    router.refresh();
   };
 
   useLayoutEffect(() => {

src/components/channels/browseChannelItem.tsx

@@ -2,7 +2,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useCallback } from 'react';
 
 export const BrowseChannelItem = ({ data }: { data: any }) => {
@@ -11,10 +11,7 @@ export const BrowseChannelItem = ({ data }: { data: any }) => {
 
   const openChannel = useCallback(
     (id: string) => {
-      router.push({
-        pathname: '/channels/[id]',
-        query: { id: id },
-      });
+      router.push(`/channels/${id}`);
     },
     [router]
   );

src/components/channels/channelListItem.tsx

@@ -2,17 +2,14 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
   const router = useRouter();
   const channel = JSON.parse(data.content);
 
   const openChannel = (id: string) => {
-    router.push({
-      pathname: '/channels/[id]',
-      query: { id: id },
-    });
+    router.push(`/channels/${id}`);
   };
 
   return (

src/components/chats/chatList.tsx

@@ -5,7 +5,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import useLocalStorage from '@rehooks/local-storage';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 export default function ChatList() {
@@ -16,10 +16,7 @@ export default function ChatList() {
   const profile = activeAccount.metadata ? JSON.parse(activeAccount.metadata) : null;
 
   const openSelfChat = () => {
-    router.push({
-      pathname: '/chats/[pubkey]',
-      query: { pubkey: activeAccount.pubkey },
-    });
+    router.push(`/chats/${activeAccount.pubkey}`);
   };
 
   useEffect(() => {

src/components/chats/chatListItem.tsx

@@ -5,17 +5,14 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 
 export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
   const router = useRouter();
   const profile = useMetadata(pubkey);
 
   const openChat = () => {
-    router.push({
-      pathname: '/chats/[pubkey]',
-      query: { pubkey: pubkey },
-    });
+    router.push(`/chats/${pubkey}`);
   };
 
   return (

src/components/chats/chatModalUser.tsx

@@ -4,17 +4,14 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { truncate } from '@utils/truncate';
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 
 export const ChatModalUser = ({ data }: { data: any }) => {
   const router = useRouter();
   const profile = JSON.parse(data.metadata);
 
   const openNewChat = () => {
-    router.push({
-      pathname: '/chats/[pubkey]',
-      query: { pubkey: data.pubkey },
-    });
+    router.push(`/chats/${data.pubkey}`);
   };
 
   return (

src/components/eventCollector.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
 import { RelayContext } from '@components/relaysProvider';
 

src/components/multiAccounts/activeAccount.tsx

@@ -1,10 +1,12 @@
+'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/router';
+import { useRouter } from 'next/navigation';
 import { nip19 } from 'nostr-tools';
 
 export const ActiveAccount = ({ user }: { user: any }) => {

src/components/multiAccounts/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ActiveAccount } from '@components/multiAccounts/activeAccount';
 import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
 

src/components/navigation/channels.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ChannelList from '@components/channels/channelList';
 
 import * as Collapsible from '@radix-ui/react-collapsible';

src/components/navigation/chats.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ChatList from '@components/chats/chatList';
 
 import * as Collapsible from '@radix-ui/react-collapsible';

src/components/navigation/newsfeed.tsx

@@ -1,7 +1,8 @@
-import ActiveLink from '@components/activeLink';
+'use client';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { NavArrowUp } from 'iconoir-react';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export default function Newsfeed() {
@@ -21,20 +22,20 @@ export default function Newsfeed() {
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
         </Collapsible.Trigger>
         <Collapsible.Content className="flex flex-col text-zinc-400">
-          <ActiveLink
+          <Link
             href={`/newsfeed/following`}
-            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+            //activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
             className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
           >
             <span>Following</span>
-          </ActiveLink>
-          <ActiveLink
+          </Link>
+          <Link
             href={`/newsfeed/circle`}
-            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+            //activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
             className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
           >
             <span>Circle</span>
-          </ActiveLink>
+          </Link>
         </Collapsible.Content>
       </div>
     </Collapsible.Root>

src/components/note/base.tsx

@@ -7,7 +7,7 @@ import { UserExtend } from '@components/user/extend';
 import { UserMention } from '@components/user/mention';
 
 import destr from 'destr';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import reactStringReplace from 'react-string-replace';
 

src/components/note/meta/comment.tsx

@@ -7,7 +7,7 @@ import { dateToUnix } from '@utils/getDate';
 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
 import { MultiBubble, OpenNewWindow } from 'iconoir-react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useState } from 'react';
 

src/components/profile/followers.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 

src/components/profile/follows.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 

src/components/profile/metadata.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 

src/components/profile/notes.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NoteBase } from '@components/note/base';
 import { RelayContext } from '@components/relaysProvider';
 

src/components/relaysProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { RelayPool } from 'nostr-relaypool';
 import { createContext, useMemo } from 'react';