diff --git a/src/routes/chat/ChannelChat/index.no.pagination.js b/src/routes/chat/ChannelChat/index.no.pagination.js
deleted file mode 100644
index 5e76ad86..00000000
--- a/src/routes/chat/ChannelChat/index.no.pagination.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDebounce } from "rooks";
-import { NavLink, useLocation } from "react-router-dom";
-import Tippy from "@tippyjs/react";
-import { useDispatch, useSelector } from "react-redux";
-import PinList from "./PinList";
-import FavList from "../FavList";
-import { useReadMessageMutation } from "../../../app/services/message";
-import { updateRemeberedNavs } from "../../../app/slices/ui";
-import useChatScroll from "../../../common/hook/useChatScroll";
-import ChannelIcon from "../../../common/component/ChannelIcon";
-import Tooltip from "../../../common/component/Tooltip";
-import Contact from "../../../common/component/Contact";
-import Layout from "../Layout";
-import { renderMessageFragment } from "../utils";
-import EditIcon from "../../../assets/icons/edit.svg";
-// import alertIcon from "../../../assets/icons/alert.svg?url";
-import IconFav from "../../../assets/icons/bookmark.svg";
-import IconPeople from "../../../assets/icons/people.svg";
-import IconPin from "../../../assets/icons/pin.svg";
-// import searchIcon from "../../../assets/icons/search.svg?url";
-import IconHeadphone from "../../../assets/icons/headphone.svg";
-import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
-import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
-import addIcon from "../../../assets/icons/add.svg?url";
-import {
-  // StyledNotification,
-  StyledContacts,
-  StyledChannelChat,
-  StyledHeader,
-} from "./styled";
-import InviteModal from "../../../common/component/InviteModal";
-
-export default function ChannelChat({ cid = "", dropFiles = [] }) {
-  const [toolVisible, setToolVisible] = useState("");
-  const { pathname } = useLocation();
-  const dispatch = useDispatch();
-  const [updateReadIndex] = useReadMessageMutation();
-  const updateReadDebounced = useDebounce(updateReadIndex, 300);
-  const [membersVisible, setMembersVisible] = useState(true);
-  const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
-  const {
-    selects,
-    msgIds,
-    userIds,
-    data,
-    messageData,
-    loginUid,
-    loginUser,
-    footprint,
-  } = useSelector((store) => {
-    return {
-      selects: store.ui.selectMessages[`channel_${cid}`],
-      footprint: store.footprint,
-      loginUser: store.contacts.byId[store.authData.uid],
-      loginUid: store.authData.uid,
-      msgIds: store.channelMessage[cid] || [],
-      userIds: store.contacts.ids,
-      data: store.channels.byId[cid] || {},
-      messageData: store.message || {},
-    };
-  });
-  const ref = useChatScroll(msgIds);
-  // const handleClearUnreads = () => {
-  //   dispatch(readMessage(msgIds));
-  // };
-  useEffect(() => {
-    dispatch(updateRemeberedNavs());
-    return () => {
-      dispatch(updateRemeberedNavs({ path: pathname }));
-    };
-  }, [pathname]);
-
-  const toggleMembersVisible = () => {
-    setMembersVisible((prev) => !prev);
-  };
-  const toggleAddVisible = () => {
-    setAddMemberModalVisible((prev) => !prev);
-  };
-  if (!data) return null;
-  const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public
-    ? userIds
-    : members.slice(0).sort((n) => (n == owner ? -1 : 0));
-  const addVisible = loginUser?.is_admin || owner == loginUid;
-  console.log("channel message list", msgIds);
-  const readIndex = footprint.readChannels[cid];
-  const pinCount = data?.pinned_messages?.length || 0;
-  return (
-    <>
-      {addMemberModalVisible && (
-        <InviteModal cid={cid} closeModal={toggleAddVisible} />
-      )}
-      <Layout
-        to={cid}
-        context="channel"
-        dropFiles={dropFiles}
-        // ref={containerRef}
-        aside={
-          <>
-            <ul className="tools">
-              <li className="tool">
-                <Tooltip tip="Voice/Video Chat" placement="left">
-                  <IconHeadphone />
-                </Tooltip>
-              </li>
-              <Tooltip
-                tip="Pin"
-                placement="left"
-                disabled={toolVisible == "pin"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("pin");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 80]}
-                  interactive
-                  trigger="click"
-                  content={<PinList id={cid} />}
-                >
-                  <li
-                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
-                      toolVisible == "pin" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconPin />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <Tooltip
-                tip="Favorite"
-                placement="left"
-                disabled={toolVisible == "favorite"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("favorite");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 180]}
-                  interactive
-                  trigger="click"
-                  content={<FavList cid={cid} />}
-                >
-                  <li
-                    className={`tool fav ${
-                      toolVisible == "favorite" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconFav />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <li
-                className={`tool ${membersVisible ? "active" : ""}`}
-                onClick={toggleMembersVisible}
-              >
-                <Tooltip tip="Channel Members" placement="left">
-                  <IconPeople />
-                </Tooltip>
-              </li>
-            </ul>
-            <hr className="divider" />
-            <ul className="apps">
-              <li className="app">
-                <Tooltip tip="Webrowse" placement="left">
-                  <img src={webrowseIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-              <li className="app">
-                <Tooltip tip="BoardOS" placement="left">
-                  <img src={boardosIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-            </ul>
-          </>
-        }
-        header={
-          <StyledHeader className="head">
-            <div className="txt">
-              <ChannelIcon personal={!is_public} />
-              <span className="title">{name}</span>
-              <span className="desc">{description}</span>
-            </div>
-          </StyledHeader>
-        }
-        contacts={
-          membersVisible ? (
-            <>
-              <StyledContacts>
-                {addVisible && (
-                  <div className="add" onClick={toggleAddVisible}>
-                    <img className="icon" src={addIcon} />
-                    <div className="txt">Add members</div>
-                  </div>
-                )}
-                {memberIds.map((uid) => {
-                  return (
-                    <Contact
-                      enableContextMenu={true}
-                      cid={cid}
-                      owner={owner == uid}
-                      key={uid}
-                      uid={uid}
-                      dm
-                      popover
-                    />
-                  );
-                })}
-              </StyledContacts>
-            </>
-          ) : null
-        }
-      >
-        <StyledChannelChat ref={ref}>
-          <div className="info">
-            <h2 className="title">Welcome to #{name} !</h2>
-            <p className="desc">This is the start of the #{name} channel. </p>
-            <NavLink
-              to={`/setting/channel/${cid}?f=${pathname}`}
-              className="edit"
-            >
-              <EditIcon className="icon" />
-              Edit Channel
-            </NavLink>
-          </div>
-          <div className="feed">
-            {[...msgIds]
-              .sort((a, b) => {
-                return Number(a) - Number(b);
-              })
-              .map((mid, idx) => {
-                const curr = messageData[mid];
-                if (!curr) return null;
-                const isFirst = idx == 0;
-                const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
-                const read = curr?.from_uid == loginUid || mid <= readIndex;
-                return renderMessageFragment({
-                  selectMode: !!selects,
-                  updateReadIndex: updateReadDebounced,
-                  read,
-                  isFirst,
-                  prev,
-                  curr,
-                  contextId: cid,
-                  context: "channel",
-                });
-              })}
-          </div>
-        </StyledChannelChat>
-        {/* {unreads != 0 && (
-        <StyledNotification>
-          <div className="content">
-            {unreads} new messages
-            {msgs.lastAccess
-              ? `since ${dayjs(msgs.lastAccess).format("YYYY-MM-DD h:mm:ss A")}`
-              : ""}
-          </div>
-          <button onClick={handleClearUnreads} className="clear">
-            Mark As Read
-          </button>
-        </StyledNotification>
-      )} */}
-      </Layout>
-    </>
-  );
-}
diff --git a/src/routes/chat/ChannelChat/index.pagination.js b/src/routes/chat/ChannelChat/index.pagination.js
deleted file mode 100644
index dfd99a71..00000000
--- a/src/routes/chat/ChannelChat/index.pagination.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDebounce } from "rooks";
-import { NavLink, useLocation } from "react-router-dom";
-import Tippy from "@tippyjs/react";
-import { useDispatch, useSelector } from "react-redux";
-// import InfiniteScroll from "react-infinite-scroll-component";
-import PinList from "./PinList";
-import FavList from "../FavList";
-import { useReadMessageMutation } from "../../../app/services/message";
-import { updateRemeberedNavs } from "../../../app/slices/ui";
-// import useChatScroll from "../../../common/hook/useChatScroll";
-import useMessageFeed from "../../../common/hook/useMessageFeed";
-
-import ChannelIcon from "../../../common/component/ChannelIcon";
-import Tooltip from "../../../common/component/Tooltip";
-import Contact from "../../../common/component/Contact";
-import Layout from "../Layout";
-import { renderMessageFragment } from "../utils";
-import EditIcon from "../../../assets/icons/edit.svg";
-// import alertIcon from "../../../assets/icons/alert.svg?url";
-import IconFav from "../../../assets/icons/bookmark.svg";
-import IconPeople from "../../../assets/icons/people.svg";
-import IconPin from "../../../assets/icons/pin.svg";
-// import searchIcon from "../../../assets/icons/search.svg?url";
-import IconHeadphone from "../../../assets/icons/headphone.svg";
-import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
-import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
-import addIcon from "../../../assets/icons/add.svg?url";
-import {
-  // StyledNotification,
-  StyledContacts,
-  StyledChannelChat,
-  StyledHeader,
-} from "./styled";
-import InviteModal from "../../../common/component/InviteModal";
-import LoadMore from "./LoadMore";
-
-export default function ChannelChat({ cid = "", dropFiles = [] }) {
-  const { list: msgIds, prepends, hasMore, pullDown } = useMessageFeed({
-    context: "channel",
-    id: cid,
-  });
-  const [toolVisible, setToolVisible] = useState("");
-  const { pathname } = useLocation();
-  const dispatch = useDispatch();
-  const [updateReadIndex] = useReadMessageMutation();
-  const updateReadDebounced = useDebounce(updateReadIndex, 300);
-  const [membersVisible, setMembersVisible] = useState(true);
-  const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
-  const {
-    selects,
-    // msgIds,
-    userIds,
-    data,
-    messageData,
-    loginUid,
-    loginUser,
-    footprint,
-  } = useSelector((store) => {
-    return {
-      selects: store.ui.selectMessages[`channel_${cid}`],
-      footprint: store.footprint,
-      loginUser: store.contacts.byId[store.authData.uid],
-      loginUid: store.authData.uid,
-      // msgIds: store.channelMessage[cid] || [],
-      userIds: store.contacts.ids,
-      data: store.channels.byId[cid] || {},
-      messageData: store.message || {},
-    };
-  });
-  // const ref = useChatScroll(msgIds);
-  // const handleClearUnreads = () => {
-  //   dispatch(readMessage(msgIds));
-  // };
-  useEffect(() => {
-    dispatch(updateRemeberedNavs());
-    return () => {
-      dispatch(updateRemeberedNavs({ path: pathname }));
-    };
-  }, [pathname]);
-
-  const toggleMembersVisible = () => {
-    setMembersVisible((prev) => !prev);
-  };
-  const toggleAddVisible = () => {
-    setAddMemberModalVisible((prev) => !prev);
-  };
-  if (!data) return null;
-  const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public
-    ? userIds
-    : members.slice(0).sort((n) => (n == owner ? -1 : 0));
-  const addVisible = loginUser?.is_admin || owner == loginUid;
-  console.log("channel message list", msgIds);
-  const readIndex = footprint.readChannels[cid];
-  const pinCount = data?.pinned_messages?.length || 0;
-  const feeds = [...prepends, ...msgIds];
-  return (
-    <>
-      {addMemberModalVisible && (
-        <InviteModal cid={cid} closeModal={toggleAddVisible} />
-      )}
-      <Layout
-        to={cid}
-        context="channel"
-        dropFiles={dropFiles}
-        // ref={containerRef}
-        aside={
-          <>
-            <ul className="tools">
-              <li className="tool">
-                <Tooltip tip="Voice/Video Chat" placement="left">
-                  <IconHeadphone />
-                </Tooltip>
-              </li>
-              <Tooltip
-                tip="Pin"
-                placement="left"
-                disabled={toolVisible == "pin"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("pin");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 80]}
-                  interactive
-                  trigger="click"
-                  content={<PinList id={cid} />}
-                >
-                  <li
-                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
-                      toolVisible == "pin" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconPin />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <Tooltip
-                tip="Favorite"
-                placement="left"
-                disabled={toolVisible == "favorite"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("favorite");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 180]}
-                  interactive
-                  trigger="click"
-                  content={<FavList cid={cid} />}
-                >
-                  <li
-                    className={`tool fav ${
-                      toolVisible == "favorite" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconFav />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <li
-                className={`tool ${membersVisible ? "active" : ""}`}
-                onClick={toggleMembersVisible}
-              >
-                <Tooltip tip="Channel Members" placement="left">
-                  <IconPeople />
-                </Tooltip>
-              </li>
-            </ul>
-            <hr className="divider" />
-            <ul className="apps">
-              <li className="app">
-                <Tooltip tip="Webrowse" placement="left">
-                  <img src={webrowseIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-              <li className="app">
-                <Tooltip tip="BoardOS" placement="left">
-                  <img src={boardosIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-            </ul>
-          </>
-        }
-        header={
-          <StyledHeader className="head">
-            <div className="txt">
-              <ChannelIcon personal={!is_public} />
-              <span className="title">{name}</span>
-              <span className="desc">{description}</span>
-            </div>
-          </StyledHeader>
-        }
-        contacts={
-          membersVisible ? (
-            <>
-              <StyledContacts>
-                {addVisible && (
-                  <div className="add" onClick={toggleAddVisible}>
-                    <img className="icon" src={addIcon} />
-                    <div className="txt">Add members</div>
-                  </div>
-                )}
-                {memberIds.map((uid) => {
-                  return (
-                    <Contact
-                      enableContextMenu={true}
-                      cid={cid}
-                      owner={owner == uid}
-                      key={uid}
-                      uid={uid}
-                      dm
-                      popover
-                    />
-                  );
-                })}
-              </StyledContacts>
-            </>
-          ) : null
-        }
-      >
-        <StyledChannelChat id={`RUSTCHAT_FEED_channel_${cid}`}>
-          {/* <div className="feed"> */}
-          {feeds.map((mid, idx) => {
-            const curr = messageData[mid];
-            if (!curr) return null;
-            const isFirst = idx == 0;
-            const prev =
-              idx == feeds.length - 1 ? null : messageData[feeds[idx + 1]];
-            const read = curr?.from_uid == loginUid || mid <= readIndex;
-            return renderMessageFragment({
-              selectMode: !!selects,
-              updateReadIndex: updateReadDebounced,
-              read,
-              isFirst,
-              prev,
-              curr,
-              contextId: cid,
-              context: "channel",
-            });
-          })}
-          {hasMore ? (
-            <LoadMore pullDown={pullDown} />
-          ) : (
-            <div className="info">
-              <h2 className="title">Welcome to #{name} !</h2>
-              <p className="desc">This is the start of the #{name} channel. </p>
-              <NavLink
-                to={`/setting/channel/${cid}?f=${pathname}`}
-                className="edit"
-              >
-                <EditIcon className="icon" />
-                Edit Channel
-              </NavLink>
-            </div>
-          )}
-          {/* </div> */}
-        </StyledChannelChat>
-        {/* {unreads != 0 && (
-        <StyledNotification>
-          <div className="content">
-            {unreads} new messages
-            {msgs.lastAccess
-              ? `since ${dayjs(msgs.lastAccess).format("YYYY-MM-DD h:mm:ss A")}`
-              : ""}
-          </div>
-          <button onClick={handleClearUnreads} className="clear">
-            Mark As Read
-          </button>
-        </StyledNotification>
-      )} */}
-      </Layout>
-    </>
-  );
-}
diff --git a/src/routes/chat/ChannelChat/index.reverse.pagination.js b/src/routes/chat/ChannelChat/index.reverse.pagination.js
deleted file mode 100644
index dfd99a71..00000000
--- a/src/routes/chat/ChannelChat/index.reverse.pagination.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDebounce } from "rooks";
-import { NavLink, useLocation } from "react-router-dom";
-import Tippy from "@tippyjs/react";
-import { useDispatch, useSelector } from "react-redux";
-// import InfiniteScroll from "react-infinite-scroll-component";
-import PinList from "./PinList";
-import FavList from "../FavList";
-import { useReadMessageMutation } from "../../../app/services/message";
-import { updateRemeberedNavs } from "../../../app/slices/ui";
-// import useChatScroll from "../../../common/hook/useChatScroll";
-import useMessageFeed from "../../../common/hook/useMessageFeed";
-
-import ChannelIcon from "../../../common/component/ChannelIcon";
-import Tooltip from "../../../common/component/Tooltip";
-import Contact from "../../../common/component/Contact";
-import Layout from "../Layout";
-import { renderMessageFragment } from "../utils";
-import EditIcon from "../../../assets/icons/edit.svg";
-// import alertIcon from "../../../assets/icons/alert.svg?url";
-import IconFav from "../../../assets/icons/bookmark.svg";
-import IconPeople from "../../../assets/icons/people.svg";
-import IconPin from "../../../assets/icons/pin.svg";
-// import searchIcon from "../../../assets/icons/search.svg?url";
-import IconHeadphone from "../../../assets/icons/headphone.svg";
-import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
-import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
-import addIcon from "../../../assets/icons/add.svg?url";
-import {
-  // StyledNotification,
-  StyledContacts,
-  StyledChannelChat,
-  StyledHeader,
-} from "./styled";
-import InviteModal from "../../../common/component/InviteModal";
-import LoadMore from "./LoadMore";
-
-export default function ChannelChat({ cid = "", dropFiles = [] }) {
-  const { list: msgIds, prepends, hasMore, pullDown } = useMessageFeed({
-    context: "channel",
-    id: cid,
-  });
-  const [toolVisible, setToolVisible] = useState("");
-  const { pathname } = useLocation();
-  const dispatch = useDispatch();
-  const [updateReadIndex] = useReadMessageMutation();
-  const updateReadDebounced = useDebounce(updateReadIndex, 300);
-  const [membersVisible, setMembersVisible] = useState(true);
-  const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
-  const {
-    selects,
-    // msgIds,
-    userIds,
-    data,
-    messageData,
-    loginUid,
-    loginUser,
-    footprint,
-  } = useSelector((store) => {
-    return {
-      selects: store.ui.selectMessages[`channel_${cid}`],
-      footprint: store.footprint,
-      loginUser: store.contacts.byId[store.authData.uid],
-      loginUid: store.authData.uid,
-      // msgIds: store.channelMessage[cid] || [],
-      userIds: store.contacts.ids,
-      data: store.channels.byId[cid] || {},
-      messageData: store.message || {},
-    };
-  });
-  // const ref = useChatScroll(msgIds);
-  // const handleClearUnreads = () => {
-  //   dispatch(readMessage(msgIds));
-  // };
-  useEffect(() => {
-    dispatch(updateRemeberedNavs());
-    return () => {
-      dispatch(updateRemeberedNavs({ path: pathname }));
-    };
-  }, [pathname]);
-
-  const toggleMembersVisible = () => {
-    setMembersVisible((prev) => !prev);
-  };
-  const toggleAddVisible = () => {
-    setAddMemberModalVisible((prev) => !prev);
-  };
-  if (!data) return null;
-  const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public
-    ? userIds
-    : members.slice(0).sort((n) => (n == owner ? -1 : 0));
-  const addVisible = loginUser?.is_admin || owner == loginUid;
-  console.log("channel message list", msgIds);
-  const readIndex = footprint.readChannels[cid];
-  const pinCount = data?.pinned_messages?.length || 0;
-  const feeds = [...prepends, ...msgIds];
-  return (
-    <>
-      {addMemberModalVisible && (
-        <InviteModal cid={cid} closeModal={toggleAddVisible} />
-      )}
-      <Layout
-        to={cid}
-        context="channel"
-        dropFiles={dropFiles}
-        // ref={containerRef}
-        aside={
-          <>
-            <ul className="tools">
-              <li className="tool">
-                <Tooltip tip="Voice/Video Chat" placement="left">
-                  <IconHeadphone />
-                </Tooltip>
-              </li>
-              <Tooltip
-                tip="Pin"
-                placement="left"
-                disabled={toolVisible == "pin"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("pin");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 80]}
-                  interactive
-                  trigger="click"
-                  content={<PinList id={cid} />}
-                >
-                  <li
-                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
-                      toolVisible == "pin" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconPin />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <Tooltip
-                tip="Favorite"
-                placement="left"
-                disabled={toolVisible == "favorite"}
-              >
-                <Tippy
-                  onShow={() => {
-                    setToolVisible("favorite");
-                  }}
-                  onHide={() => {
-                    setToolVisible("");
-                  }}
-                  placement="left-start"
-                  popperOptions={{ strategy: "fixed" }}
-                  offset={[0, 180]}
-                  interactive
-                  trigger="click"
-                  content={<FavList cid={cid} />}
-                >
-                  <li
-                    className={`tool fav ${
-                      toolVisible == "favorite" ? "active" : ""
-                    } `}
-                    data-count={pinCount}
-                  >
-                    <IconFav />
-                  </li>
-                </Tippy>
-              </Tooltip>
-              <li
-                className={`tool ${membersVisible ? "active" : ""}`}
-                onClick={toggleMembersVisible}
-              >
-                <Tooltip tip="Channel Members" placement="left">
-                  <IconPeople />
-                </Tooltip>
-              </li>
-            </ul>
-            <hr className="divider" />
-            <ul className="apps">
-              <li className="app">
-                <Tooltip tip="Webrowse" placement="left">
-                  <img src={webrowseIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-              <li className="app">
-                <Tooltip tip="BoardOS" placement="left">
-                  <img src={boardosIcon} alt="app icon" />
-                </Tooltip>
-              </li>
-            </ul>
-          </>
-        }
-        header={
-          <StyledHeader className="head">
-            <div className="txt">
-              <ChannelIcon personal={!is_public} />
-              <span className="title">{name}</span>
-              <span className="desc">{description}</span>
-            </div>
-          </StyledHeader>
-        }
-        contacts={
-          membersVisible ? (
-            <>
-              <StyledContacts>
-                {addVisible && (
-                  <div className="add" onClick={toggleAddVisible}>
-                    <img className="icon" src={addIcon} />
-                    <div className="txt">Add members</div>
-                  </div>
-                )}
-                {memberIds.map((uid) => {
-                  return (
-                    <Contact
-                      enableContextMenu={true}
-                      cid={cid}
-                      owner={owner == uid}
-                      key={uid}
-                      uid={uid}
-                      dm
-                      popover
-                    />
-                  );
-                })}
-              </StyledContacts>
-            </>
-          ) : null
-        }
-      >
-        <StyledChannelChat id={`RUSTCHAT_FEED_channel_${cid}`}>
-          {/* <div className="feed"> */}
-          {feeds.map((mid, idx) => {
-            const curr = messageData[mid];
-            if (!curr) return null;
-            const isFirst = idx == 0;
-            const prev =
-              idx == feeds.length - 1 ? null : messageData[feeds[idx + 1]];
-            const read = curr?.from_uid == loginUid || mid <= readIndex;
-            return renderMessageFragment({
-              selectMode: !!selects,
-              updateReadIndex: updateReadDebounced,
-              read,
-              isFirst,
-              prev,
-              curr,
-              contextId: cid,
-              context: "channel",
-            });
-          })}
-          {hasMore ? (
-            <LoadMore pullDown={pullDown} />
-          ) : (
-            <div className="info">
-              <h2 className="title">Welcome to #{name} !</h2>
-              <p className="desc">This is the start of the #{name} channel. </p>
-              <NavLink
-                to={`/setting/channel/${cid}?f=${pathname}`}
-                className="edit"
-              >
-                <EditIcon className="icon" />
-                Edit Channel
-              </NavLink>
-            </div>
-          )}
-          {/* </div> */}
-        </StyledChannelChat>
-        {/* {unreads != 0 && (
-        <StyledNotification>
-          <div className="content">
-            {unreads} new messages
-            {msgs.lastAccess
-              ? `since ${dayjs(msgs.lastAccess).format("YYYY-MM-DD h:mm:ss A")}`
-              : ""}
-          </div>
-          <button onClick={handleClearUnreads} className="clear">
-            Mark As Read
-          </button>
-        </StyledNotification>
-      )} */}
-      </Layout>
-    </>
-  );
-}
diff --git a/src/routes/chat/ChannelChat/styled.tmp.js b/src/routes/chat/ChannelChat/styled.tmp.js
deleted file mode 100644
index 517ae40b..00000000
--- a/src/routes/chat/ChannelChat/styled.tmp.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import styled from "styled-components";
-export const StyledHeader = styled.header`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .txt {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .title {
-      font-size: 16px;
-      line-height: 24px;
-      color: #1c1c1e;
-    }
-    .desc {
-      margin-left: 8px;
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #616161;
-    }
-  }
-`;
-export const StyledNotification = styled.div`
-  padding: 3px 8px;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  left: 10px;
-  width: 900px;
-  height: 24px;
-  background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
-  border-radius: 0px 0px 8px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .clear {
-    cursor: pointer;
-    color: inherit;
-    border: none;
-    background: none;
-    outline: none;
-  }
-`;
-export const StyledContacts = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  /* todo */
-  width: 226px;
-  height: calc(100vh - 56px - 22px);
-  overflow-y: scroll;
-  padding: 8px;
-  box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
-  > .add {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-    padding: 10px;
-    border-radius: 8px;
-    user-select: none;
-    &:hover {
-      background: rgba(116, 127, 141, 0.1);
-    }
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-    .txt {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      color: #52525b;
-    }
-  }
-`;
-export const StyledChannelChat = styled.article`
-  padding: 18px 16px;
-  width: 100%;
-  height: 100%;
-  height: -webkit-fill-available;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transform: rotate(180deg) translateZ(0);
-  direction: rtl;
-  /* display: flex;
-  flex-direction: column-reverse; */
-  > div,
-  > hr {
-    direction: ltr;
-    transform: rotate(180deg);
-  }
-  > .info {
-    padding-top: 62px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    .title {
-      font-weight: bold;
-      font-size: 36px;
-      line-height: 44px;
-    }
-    .desc {
-      color: #78787c;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-    }
-    .edit {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      .icon {
-        width: 16px;
-        height: 16px;
-        path {
-          fill: #3c8ce7;
-        }
-      }
-      padding: 0;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      text-fill-color: transparent;
-    }
-  }
-  /* > .feed {
-  } */
-`;