remove tricky codes

src/app/channel/components/blacklist.tsx

@@ -37,7 +37,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
                     </p>
                   </div>
                 </div>
-                <div className="px-3 pb-3 pt-1">
+                <div className="flex flex-col gap-2 px-3 pb-3 pt-1">
                   {blacklist.map((item: any) => (
                     <MutedItem key={item.id} data={item} />
                   ))}

src/app/channel/components/mutedItem.tsx

@@ -49,7 +49,7 @@ export default function MutedItem({ data }: { data: any }) {
             </div>
             <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
               <span className="truncate text-sm font-medium leading-none text-zinc-200">
-                {user?.display_name || user?.name}
+                {user?.display_name || user?.name || 'Pleb'}
               </span>
               <span className="text-xs leading-none text-zinc-400">{shortenKey(data.content)}</span>
             </div>

src/app/channel/pages/index.page.tsx

@@ -9,24 +9,26 @@ import { READONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
 import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { getActiveBlacklist, getBlacklist } from '@lume/utils/storage';
 import { arrayObjToPureArr } from '@lume/utils/transform';
 
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { Suspense, lazy, useContext, useEffect, useRef } from 'react';
+import useSWR from 'swr';
 import useSWRSubscription from 'swr/subscription';
 
-let mutedList: any = [];
+const fetchMuted = async ([, id]) => {
-let activeMutedList: any = [];
+  const res = await getBlacklist(id, 44);
-let activeHidedList: any = [];
+  const array = arrayObjToPureArr(res);
+  return { original: res, array: array };
+};
 
-if (typeof window !== 'undefined') {
+const fetchHided = async ([, id]) => {
-  const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@lume/utils/storage');
+  const res = await getActiveBlacklist(id, 43);
-  const activeAccount = await getActiveAccount();
+  const array = arrayObjToPureArr(res);
-  activeHidedList = await getActiveBlacklist(activeAccount.id, 43);
+  return array;
-  activeMutedList = await getActiveBlacklist(activeAccount.id, 44);
+};
-  mutedList = await getBlacklist(activeAccount.id, 44);
-}
 
 const ChannelMessageList = lazy(() => import('@lume/app/channel/components/messageList'));
 
@@ -39,16 +41,16 @@ export function Page() {
   const channelPubkey = searchParams.pubkey;
 
   const { account, isLoading, isError } = useActiveAccount();
+  const { data: muted } = useSWR(!isLoading && !isError && account ? ['muted', account.id] : null, fetchMuted);
+  const { data: hided } = useSWR(!isLoading && !isError && account ? ['hided', account.id] : null, fetchHided);
 
   const setChannelMessages = useSetAtom(channelMessagesAtom);
   const resetChannelMessages = useResetAtom(channelMessagesAtom);
   const resetChannelReply = useResetAtom(channelReplyAtom);
 
   const now = useRef(new Date());
-  const hided = arrayObjToPureArr(activeHidedList);
-  const muted = arrayObjToPureArr(activeMutedList);
 
-  useSWRSubscription(channelID ? ['channel', channelID] : null, ([, key], {}: any) => {
+  useSWRSubscription(channelID && muted && hided ? ['channel', channelID] : null, ([, key], {}: any) => {
     // subscribe to channel
     const unsubscribe = pool.subscribe(
       [
@@ -67,7 +69,7 @@ export function Page() {
         } else {
           message['hide'] = false;
         }
-        if (!muted.includes(event.pubkey)) {
+        if (!muted.array.includes(event.pubkey)) {
           setChannelMessages((prev) => [...prev, message]);
         }
       }
@@ -101,7 +103,7 @@ export function Page() {
         </div>
         <div className="flex items-center gap-2">
           <ChannelMembers />
-          <ChannelBlackList blacklist={mutedList} />
+          {!muted ? <></> : <ChannelBlackList blacklist={muted.original} />}
           {!isLoading && !isError && account ? (
             account.pubkey === channelPubkey && <ChannelUpdateModal id={channelID} />
           ) : (

src/auth/layout.tsx

@@ -1,14 +1,16 @@
 import ArrowLeftIcon from '@lume/shared/icons/arrowLeft';
 import ArrowRightIcon from '@lume/shared/icons/arrowRight';
 
-let platformName = 'darwin';
+import useSWR from 'swr';
 
-if (typeof window !== 'undefined') {
+const fetcher = async () => {
   const { platform } = await import('@tauri-apps/api/os');
-  platformName = await platform();
+  return await platform();
-}
+};
 
 export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
+  const { data: platform } = useSWR('platform', fetcher);
+
   const goBack = () => {
     window.history.back();
   };
@@ -25,7 +27,7 @@ export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
           className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
         >
           <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]' : ''}`}>
+            <div className={`flex h-full items-center gap-2 ${platform === 'darwin' ? 'pl-[68px]' : ''}`}>
               <button
                 onClick={() => goBack()}
                 className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"

src/shared/appHeader.tsx

@@ -2,14 +2,16 @@ import ArrowLeftIcon from '@lume/shared/icons/arrowLeft';
 import ArrowRightIcon from '@lume/shared/icons/arrowRight';
 import RefreshIcon from '@lume/shared/icons/refresh';
 
-let platformName = 'darwin';
+import useSWR from 'swr';
 
-if (typeof window !== 'undefined') {
+const fetcher = async () => {
   const { platform } = await import('@tauri-apps/api/os');
-  platformName = await platform();
+  return await platform();
-}
+};
 
 export default function AppHeader() {
+  const { data: platform } = useSWR('platform', fetcher);
+
   const goBack = () => {
     window.history.back();
   };
@@ -24,7 +26,7 @@ export default function AppHeader() {
 
   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]' : ''}`}>
+      <div className={`flex h-full items-center gap-2 ${platform === 'darwin' ? 'pl-[68px]' : ''}`}>
         <button
           onClick={() => goBack()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"