add active link

package.json

@@ -38,6 +38,7 @@
     "react-string-replace": "^1.1.0",
     "react-virtuoso": "^4.3.1",
     "swr": "^2.1.4",
+    "tailwind-merge": "^1.12.0",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -48,6 +48,7 @@ specifiers:
   react-string-replace: ^1.1.0
   react-virtuoso: ^4.3.1
   swr: ^2.1.4
+  tailwind-merge: ^1.12.0
   tailwindcss: ^3.3.1
   tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
   typescript: ^4.9.5
@@ -82,6 +83,7 @@ dependencies:
   react-string-replace: 1.1.0
   react-virtuoso: 4.3.1_biqbaboplfbrettd7655fr4n2y
   swr: 2.1.4_react@18.2.0
+  tailwind-merge: 1.12.0
   tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23
 
 devDependencies:
@@ -4433,6 +4435,11 @@ packages:
       use-sync-external-store: 1.2.0_react@18.2.0
     dev: false
 
+  /tailwind-merge/1.12.0:
+    resolution:
+      { integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
+    dev: false
+
   /tailwindcss/3.3.1_postcss@8.4.23:
     resolution:
       { integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }

src/components/activeLink.tsx

@@ -0,0 +1,32 @@
+import { usePageContext } from '@utils/hooks/usePageContext';
+
+import { twMerge } from 'tailwind-merge';
+
+export function ActiveLink({
+  href,
+  className,
+  activeClassName,
+  children,
+}: {
+  href: string;
+  className: string;
+  activeClassName: string;
+  children: React.ReactNode;
+}) {
+  const pageContext = usePageContext();
+  const pathName = pageContext.urlPathname;
+
+  let newClassName = '';
+
+  if (href === pathName) {
+    newClassName = activeClassName;
+  } else {
+    newClassName = '';
+  }
+
+  return (
+    <a href={href} className={twMerge(className, newClassName)}>
+      {children}
+    </a>
+  );
+}

src/components/channels/channelListItem.tsx

@@ -1,20 +1,34 @@
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
+import { usePageContext } from '@utils/hooks/usePageContext';
+
+import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
   const channel = useChannelMetadata(data.event_id, data.metadata);
+  const pageContext = usePageContext();
+
+  const searchParams: any = pageContext.urlParsed.search;
+  const pageID = searchParams.id;
 
   return (
     <a
       href={`/channel?id=${data.event_id}`}
-      className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+      className={twMerge(
+        'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
+        pageID === data.event_id ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
+      )}
     >
       <div className="relative h-5 w-5 shrink-0 rounded">
-        <img src={channel?.picture || DEFAULT_AVATAR} alt={data.event_id} className="h-5 w-5 rounded object-cover" />
+        <img
+          src={channel?.picture || DEFAULT_AVATAR}
+          alt={data.event_id}
+          className="h-5 w-5 rounded bg-zinc-900 object-cover"
+        />
       </div>
       <div>
-        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name.toLowerCase()}</h5>
+        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name}</h5>
       </div>
     </a>
   );

src/components/chats/chatListItem.tsx

@@ -1,15 +1,25 @@
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { usePageContext } from '@utils/hooks/usePageContext';
 import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
 import { shortenKey } from '@utils/shortenKey';
 
+import { twMerge } from 'tailwind-merge';
+
 export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
   const profile = useProfileMetadata(pubkey);
+  const pageContext = usePageContext();
+
+  const searchParams: any = pageContext.urlParsed.search;
+  const pagePubkey = searchParams.pubkey;
 
   return (
     <a
       href={`/chat?pubkey=${pubkey}`}
-      className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+      className={twMerge(
+        'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
+        pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
+      )}
     >
       <div className="relative h-5 w-5 shrink rounded">
         <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />

src/components/link.tsx

@@ -1,12 +0,0 @@
-import { usePageContext } from '@utils/hooks/usePageContext';
-
-import { AnchorHTMLAttributes, ClassAttributes } from 'react';
-
-export function Link(
-  props: JSX.IntrinsicAttributes & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>,
-  activeClass: string
-) {
-  const pageContext = usePageContext();
-  const className = [props.className, pageContext.urlPathname === props.href && activeClass].filter(Boolean).join(' ');
-  return <a {...props} className={className} />;
-}

src/components/navigation/newsfeed.tsx

@@ -1,3 +1,5 @@
+import { ActiveLink } from '@components/activeLink';
+
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
 import { useState } from 'react';
@@ -19,22 +21,22 @@ 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">
-          <a
+          <ActiveLink
             href="/newsfeed/following"
-            //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"
+            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
           >
             <PeopleTag width={16} height={16} className="text-zinc-500" />
             <span>Following</span>
-          </a>
-          <a
+          </ActiveLink>
+          <ActiveLink
             href="/newsfeed/circle"
-            //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"
+            activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
           >
             <Bonfire width={16} height={16} className="text-zinc-500" />
             <span>Circle</span>
-          </a>
+          </ActiveLink>
         </Collapsible.Content>
       </div>
     </Collapsible.Root>