refactor: change web login position (#971)

* refactor: change web login position

* refactor: update

src/components/Assistant/ChatHeader.tsx

@@ -10,6 +10,7 @@ import { HISTORY_PANEL_ID } from "@/constants";
 import { AssistantList } from "./AssistantList";
 import { ServerList } from "./ServerList";
 import TogglePin from "../Common/TogglePin";
+import WebLogin from "../WebLogin";
 
 interface ChatHeaderProps {
   clearChat: () => void;
@@ -63,7 +64,7 @@ export function ChatHeader({
 
         <AssistantList assistantIDs={assistantIDs} />
 
-        {showChatHistory ? (
+        {showChatHistory && (
           <button
             onClick={clearChat}
             className="p-2 py-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
@@ -76,7 +77,7 @@ export function ChatHeader({
               <MessageSquarePlus className="h-4 w-4 relative top-0.5" />
             </VisibleKey>
           </button>
-        ) : null}
+        )}
       </div>
 
       <h2 className="max-w-[calc(100%-200px)] text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
@@ -100,7 +101,7 @@ export function ChatHeader({
           )}
         </div>
       ) : (
-        <div />
+        <WebLogin panelClassName="top-8 right-0" />
       )}
     </header>
   );

src/components/Common/UI/Footer.tsx

@@ -16,7 +16,7 @@ import { useThemeStore } from "@/stores/themeStore";
 import platformAdapter from "@/utils/platformAdapter";
 import FontIcon from "../Icons/FontIcon";
 import TogglePin from "../TogglePin";
-import WebFooter from "./WebFooter";
+import WebLogin from "@/components/WebLogin";
 
 interface FooterProps {
   setIsPinnedWeb?: (value: boolean) => void;
@@ -137,7 +137,7 @@ export default function Footer({ setIsPinnedWeb }: FooterProps) {
           </div>
         </div>
       ) : (
-        <WebFooter />
+        <WebLogin panelClassName="bottom-5 left-0" />
       )}
 
       <div className={`flex mobile:hidden items-center gap-3`}>

src/components/Common/UI/NoResults.tsx

@@ -6,8 +6,8 @@ import clsx from "clsx";
 import { formatKey } from "@/utils/keyboardUtils";
 import SearchEmpty from "../SearchEmpty";
 import FontIcon from "../Icons/FontIcon";
-import WebLoginButton from "./WebLoginButton";
-import WebRefreshButton from "./WebRefreshButton";
+import WebLoginButton from "@/components/WebLogin/LoginButton";
+import WebRefreshButton from "@/components/WebLogin/RefreshButton";
 import { useWebConfigStore } from "@/stores/webConfigStore";
 import { useAppStore } from "@/stores/appStore";
 

src/components/Search/InputControls.tsx

@@ -16,7 +16,6 @@ import { useSearchStore } from "@/stores/searchStore";
 import { useExtensionsStore } from "@/stores/extensionsStore";
 import { parseSearchQuery, SearchQuery } from "@/utils";
 import InputUpload from "./InputUpload";
-import WebFooter from "../Common/UI/WebFooter";
 import Copyright from "../Common/Copyright";
 
 interface InputControlsProps {
@@ -238,7 +237,7 @@ const InputControls = ({
             (source?.type !== "deep_think" || !source?.config?.visible) &&
             !(source?.mcp_servers?.enabled && source?.mcp_servers?.visible) && (
               <div className="px-[9px]">
-                {isTauri ? <Copyright /> : <WebFooter />}
+                <Copyright />
               </div>
             )}
         </div>

src/components/WebLogin/LoginButton.tsx

@@ -3,7 +3,7 @@ import { Button } from "@headlessui/react";
 import { SquareArrowOutUpRight } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
-const WebLoginButton = () => {
+const LoginButton = () => {
   const { endpoint } = useAppStore();
   const { t } = useTranslation();
 
@@ -23,4 +23,4 @@ const WebLoginButton = () => {
   );
 };
 
-export default WebLoginButton;
+export default LoginButton;

src/components/WebLogin/RefreshButton.tsx

@@ -3,10 +3,10 @@ import { FC, useState } from "react";
 import { Button, ButtonProps } from "@headlessui/react";
 import clsx from "clsx";
 
-import VisibleKey from "../VisibleKey";
 import { useWebConfigStore } from "@/stores/webConfigStore";
+import VisibleKey from "../Common/VisibleKey";
 
-const WebRefreshButton: FC<ButtonProps> = (props) => {
+const RefreshButton: FC<ButtonProps> = (props) => {
   const { className, ...rest } = props;
   const [isRefreshing, setIsRefreshing] = useState(false);
   const { onRefresh } = useWebConfigStore();
@@ -45,4 +45,4 @@ const WebRefreshButton: FC<ButtonProps> = (props) => {
   );
 };
 
-export default WebRefreshButton;
+export default RefreshButton;

src/components/WebLogin/UserAvatar.tsx

@@ -2,11 +2,11 @@ import clsx from "clsx";
 import { LucideProps, User } from "lucide-react";
 import { FC, HTMLAttributes } from "react";
 
-interface WebUserAvatarProps extends HTMLAttributes<HTMLDivElement> {
+interface UserAvatarProps extends HTMLAttributes<HTMLDivElement> {
   icon?: LucideProps;
 }
 
-const WebUserAvatar: FC<WebUserAvatarProps> = (props) => {
+const UserAvatar: FC<UserAvatarProps> = (props) => {
   const { className, icon } = props;
 
   return (
@@ -21,4 +21,4 @@ const WebUserAvatar: FC<WebUserAvatarProps> = (props) => {
   );
 };
 
-export default WebUserAvatar;
+export default UserAvatar;

src/components/WebLogin/index.tsx

@@ -1,16 +1,22 @@
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import FontIcon from "../Icons/FontIcon";
 import { useWebConfigStore } from "@/stores/webConfigStore";
 import { LogOut } from "lucide-react";
 import clsx from "clsx";
-import Copyright from "../Copyright";
-import WebLoginButton from "./WebLoginButton";
-import WebRefreshButton from "./WebRefreshButton";
-import WebUserAvatar from "./WebUserAvatar";
 import { Post } from "@/api/axiosRequest";
 import { useTranslation } from "react-i18next";
+import UserAvatar from "./UserAvatar";
+import FontIcon from "../Common/Icons/FontIcon";
+import RefreshButton from "./RefreshButton";
+import LoginButton from "./LoginButton";
+import { FC } from "react";
+import Copyright from "../Common/Copyright";
 
-const WebFooter = () => {
+interface WebLoginProps {
+  panelClassName: string;
+}
+
+const WebLogin: FC<WebLoginProps> = (props) => {
+  const { panelClassName } = props;
   const { integration, loginInfo, setIntegration, setLoginInfo } =
     useWebConfigStore();
   const { t } = useTranslation();
@@ -20,7 +26,7 @@ const WebFooter = () => {
       <Popover>
         <PopoverButton>
           {loginInfo ? (
-            <WebUserAvatar />
+            <UserAvatar />
           ) : (
             <FontIcon
               name="font_coco-logo-line"
@@ -29,19 +35,24 @@ const WebFooter = () => {
           )}
         </PopoverButton>
 
-        <PopoverPanel className="absolute z-50 bottom-5 left-0 w-[300px] rounded-xl bg-white dark:bg-[#202126] text-sm/6 text-[#333] dark:text-[#D8D8D8] shadow-lg border dark:border-white/10 -translate-y-2">
+        <PopoverPanel
+          className={clsx(
+            "absolute z-50 w-[300px] rounded-xl bg-white dark:bg-[#202126] text-sm/6 text-[#333] dark:text-[#D8D8D8] shadow-lg border dark:border-white/10 -translate-y-2",
+            panelClassName
+          )}
+        >
           <div className="p-3">
             <div className="flex items-center justify-between mb-2">
               <span>{t("webLogin.title")}</span>
 
-              <WebRefreshButton />
+              <RefreshButton />
             </div>
 
             <div className="py-2">
               {loginInfo ? (
                 <div className="flex justify-between items-center">
                   <div className="flex items-center gap-3">
-                    <WebUserAvatar
+                    <UserAvatar
                       className="!size-12"
                       icon={{ className: "!size-6" }}
                     />
@@ -76,7 +87,7 @@ const WebFooter = () => {
                       : t("webLogin.hints.login")}
                   </span>
 
-                  <WebLoginButton />
+                  <LoginButton />
                 </div>
               )}
             </div>
@@ -91,4 +102,4 @@ const WebFooter = () => {
   );
 };
 
-export default WebFooter;
+export default WebLogin;