feat: sessiont header nav & channel ID

public/locales/en/setting.json

@@ -30,6 +30,7 @@
     "transfer_desc": "You need to transfer your channel ownership to someone else before leaving the channel.",
     "delete": "Delete Channel",
     "delete_desc": "Are you sure want to delete this channel?",
+    "id": "Channel ID",
     "name": "Channel Name",
     "topic": "Channel Topic",
     "topic_placeholder": "Let everyone know how to use this channel.",

public/locales/zh/setting.json

@@ -30,7 +30,7 @@
     "transfer_desc": "在离开此频道前，需要转让所有权。",
     "delete": "删除频道",
     "delete_desc": "确定删除该频道？",
-
+    "id": "频道ID",
     "name": "频道名",
     "topic": "频道主题",
     "topic_placeholder": "让别人知道这个频道是用来做啥的",

src/components/User/index.tsx

@@ -21,6 +21,7 @@ interface Props {
   compact?: boolean;
   avatarSize?: number;
   enableContextMenu?: boolean;
+  enableNavToSetting?: boolean;
 }
 
 const User: FC<Props> = ({
@@ -32,7 +33,8 @@ const User: FC<Props> = ({
   popover = false,
   compact = false,
   avatarSize = 32,
-  enableContextMenu = false
+  enableContextMenu = false,
+  enableNavToSetting = false
 }) => {
   const navigate = useNavigate();
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
@@ -46,12 +48,16 @@ const User: FC<Props> = ({
   const handleDoubleClick = () => {
     navigate(`/chat/dm/${uid}`);
   };
+  const handleNavToSetting = () => {
+    navigate(`/setting/dm/${uid}/overview?f=/chat/dm/${uid}`);
+  };
   if (!curr) return null;
   const online = curr.online || curr.uid == loginUid;
   const containerClass = clsx(
     `relative flex items-center justify-start gap-2 rounded-lg select-none`,
     interactive && "md:hover:bg-gray-500/10",
-    compact ? "p-0" : "p-2"
+    compact ? "p-0" : "p-2",
+    enableNavToSetting && "cursor-pointer"
   );
   const nameClass = clsx(
     `text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`
@@ -73,6 +79,7 @@ const User: FC<Props> = ({
       >
         <div
           className={containerClass}
+          onClick={enableNavToSetting ? handleNavToSetting : undefined}
           onDoubleClick={dm ? handleDoubleClick : undefined}
           onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
         >

src/routes/chat/ChannelChat/index.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
 
 import { updateChannelVisibleAside } from "@/app/slices/footprint";
@@ -118,8 +118,13 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
         <header className="px-5 py-4 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
           <GoBackNav />
           <div className="flex items-center gap-1">
-            <ChannelIcon personal={!is_public} />
-            <span className="text-gray-800 dark:text-white whitespace-nowrap">{name}</span>
+            <Link
+              to={`/setting/channel/${cid}/overview?f=/chat/channel/${cid}`}
+              className="flex items-center gap-1"
+            >
+              <ChannelIcon personal={!is_public} />
+              <span className="text-gray-800 dark:text-white whitespace-nowrap">{name}</span>
+            </Link>
             <span className="ml-2 text-gray-500 hidden md:block">{description}</span>
           </div>
         </header>

src/routes/chat/DMChat/index.tsx

@@ -56,7 +56,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
       header={
         <header className="box-border px-5 py-1 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
           <GoBackNav />
-          <User interactive={false} uid={currUser.uid} />
+          <User interactive={false} uid={currUser.uid} enableNavToSetting={true} />
         </header>
       }
     />

src/routes/settingChannel/Overview.tsx

@@ -94,6 +94,10 @@ export default function Overview({ id = 0 }) {
     <div className="relative w-[512px] flex flex-col gap-6 h-full">
       <AvatarUploader type="channel" url={channel?.icon} name={name} uploadImage={updateIcon} />
       <div className="flex flex-col gap-6 items-start">
+        <div className={"flex items-center gap-1"}>
+          <Label htmlFor="name">{t("id")}</Label>
+          <span className="text-gray-500">#{id}</span>
+        </div>
         <div className={inputClass}>
           <Label htmlFor="name">{t("name")}</Label>
           <Input