minor fixes

src/components/accountProvider.tsx

@@ -2,7 +2,7 @@ import { createContext } from 'react';
 
 export const AccountContext = createContext({});
 
-let activeAccount: any = { id: '', pubkey: '', follows: null, metadata: '' };
+let activeAccount: any = { id: '', pubkey: '', follows: null, metadata: {} };
 
 if (typeof window !== 'undefined') {
   const { getActiveAccount } = await import('@utils/storage');

src/components/activeLink.tsx

@@ -2,7 +2,7 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 
 import { twMerge } from 'tailwind-merge';
 
-export function ActiveLink({
+export default function ActiveLink({
   href,
   className,
   activeClassName,

src/components/appHeader.tsx

@@ -0,0 +1,53 @@
+import EventCollector from '@components/eventCollector';
+
+import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
+
+let platformName = 'darwin';
+
+if (typeof window !== 'undefined') {
+  const { platform } = await import('@tauri-apps/api/os');
+  platformName = await platform();
+}
+
+export default function AppHeader({ collector }: { collector: boolean }) {
+  const goBack = () => {
+    window.history.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
+  const reload = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
+      <div className={`flex h-full items-center gap-2 ${platformName === 'darwin' ? 'pl-[68px]' : ''}`}>
+        <button
+          onClick={() => goBack()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => goForward()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => reload()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+      </div>
+      <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
+        <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
+        <div>{collector && <EventCollector />}</div>
+      </div>
+    </div>
+  );
+}

src/components/appHeader/actions.tsx

@@ -1,38 +0,0 @@
-import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
-
-export default function AppActions() {
-  const goBack = () => {
-    window.history.back();
-  };
-
-  const goForward = () => {
-    window.history.forward();
-  };
-
-  const reload = () => {
-    window.location.reload();
-  };
-
-  return (
-    <div className={`flex h-full items-center gap-2 pl-[68px]`}>
-      <button
-        onClick={() => goBack()}
-        className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
-      >
-        <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
-      </button>
-      <button
-        onClick={() => goForward()}
-        className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
-      >
-        <ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
-      </button>
-      <button
-        onClick={() => reload()}
-        className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
-      >
-        <Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
-      </button>
-    </div>
-  );
-}

src/components/appHeader/index.tsx

@@ -1,14 +0,0 @@
-import AppActions from '@components/appHeader/actions';
-import EventCollector from '@components/eventCollector';
-
-export default function AppHeader({ collector }: { collector: boolean }) {
-  return (
-    <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
-      <AppActions />
-      <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
-        <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
-        <div>{collector && <EventCollector />}</div>
-      </div>
-    </div>
-  );
-}

src/components/channels/channelListItem.tsx

@@ -6,16 +6,7 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  let metadata: any;
+  const channel: any = useChannelMetadata(data.event_id, data.metadata);
-
-  if (typeof data.metadata === 'object') {
-    metadata = data.metadata;
-  } else {
-    const json = JSON.parse(data.metadata);
-    metadata = json;
-  }
-
-  const channel: any = useChannelMetadata(data.event_id, metadata);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;

src/components/chats/chatList.tsx

@@ -17,18 +17,18 @@ if (typeof window !== 'undefined') {
 
 export default function ChatList() {
   const activeAccount: any = useContext(AccountContext);
-  const profile = activeAccount ? JSON.parse(activeAccount.metadata) : null;
+  const profile = typeof window !== 'undefined' ? JSON.parse(activeAccount.metadata) : null;
 
   return (
     <div className="flex flex-col gap-px">
       <a
-        href={`/chat?pubkey=${activeAccount.pubkey}`}
+        href={`/chat?pubkey=${activeAccount?.pubkey}`}
         className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
       >
         <div className="relative h-5 w-5 shrink rounded bg-white">
           <img
             src={profile?.picture || DEFAULT_AVATAR}
-            alt={activeAccount.pubkey}
+            alt={activeAccount?.pubkey}
             className="h-5 w-5 rounded object-cover"
           />
         </div>

src/components/navigation.tsx

@@ -1,4 +1,4 @@
-import { ActiveLink } from '@components/activeLink';
+import ActiveLink from '@components/activeLink';
 import ChannelList from '@components/channels/channelList';
 import ChatList from '@components/chats/chatList';
 

src/utils/hooks/useChannelMetadata.tsx

@@ -6,9 +6,18 @@ import { updateChannelMetadata } from '@utils/storage';
 
 import { useCallback, useContext, useEffect, useState } from 'react';
 
-export const useChannelMetadata = (id: string, fallback: string) => {
+export const useChannelMetadata = (id: string, fallback: any) => {
+  let parseFallback: any;
+
+  if (typeof fallback === 'object') {
+    parseFallback = fallback.metadata;
+  } else {
+    const json = JSON.parse(fallback.metadata);
+    parseFallback = json;
+  }
+
   const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(fallback);
+  const [metadata, setMetadata] = useState(parseFallback);
 
   const fetchMetadata = useCallback(() => {
     const unsubscribe = pool.subscribe(