chore: web component loading font icon (#838)

* chore: web component loading font icon

* docs: update notes

docs/content.en/docs/release-notes/_index.md

@@ -22,7 +22,7 @@ Information about release notes of Coco App is provided here.
 ### ✈️ Improvements
 
 - refactor: split query_coco_fusion() #836
-
+- chore: web component loading font icon #838
 
 ## 0.7.1 (2025-07-27)
 

src/components/Assistant/Synthesize.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import dayjs from "dayjs";
 import durationPlugin from "dayjs/plugin/duration";
+import { nanoid } from "nanoid";
 
 import { useThemeStore } from "@/stores/themeStore";
 import loadingLight from "@/assets/images/ReadAloud/loading-light.png";
@@ -18,7 +19,6 @@ import closeDark from "@/assets/images/ReadAloud/close-dark.png";
 import { useConnectStore } from "@/stores/connectStore";
 import platformAdapter from "@/utils/platformAdapter";
 import { useStreamAudio } from "@/hooks/useStreamAudio";
-import { nanoid } from "nanoid";
 import { useChatStore } from "@/stores/chatStore";
 
 dayjs.extend(durationPlugin);

src/components/Common/Icons/FontIcon.tsx

@@ -1,5 +1,3 @@
-import { useAppStore } from "@/stores/appStore";
-import logoImg from "@/assets/icon.svg";
 import { FC } from "react";
 
 interface FontIconProps {
@@ -9,17 +7,11 @@ interface FontIconProps {
 }
 
 const FontIcon: FC<FontIconProps> = ({ name, className, style, ...rest }) => {
-  const isTauri = useAppStore((state) => state.isTauri);
+  return (
-
+    <svg className={`icon ${className || ""}`} style={style} {...rest}>
-  if (isTauri) {
+      <use xlinkHref={`#${name}`} />
-    return (
+    </svg>
-      <svg className={`icon ${className || ""}`} style={style} {...rest}>
+  );
-        <use xlinkHref={`#${name}`} />
-      </svg>
-    );
-  } else {
-    return <img src={logoImg} className={className} alt={"coco"} />;
-  }
 };
 
 export default FontIcon;

src/components/SearchChat/index.tsx

@@ -125,7 +125,9 @@ function SearchChat({
   useEffect(() => {
     const init = async () => {
       await initializeListeners_auth();
-      await platformAdapter.commands("get_app_search_source");
+      if (isTauri) {
+        await platformAdapter.commands("get_app_search_source");
+      }
     };
 
     init();

src/components/Settings/Extensions/components/Details/Application/index.tsx

@@ -3,6 +3,7 @@ import { filesize } from "filesize";
 import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import { useAsyncEffect } from "ahooks";
+
 import platformAdapter from "@/utils/platformAdapter";
 import { ExtensionsContext } from "../../../index";
 

src/hooks/useScript.ts

@@ -26,15 +26,9 @@ const useScript = (src: string, onError?: () => void) => {
 
 export default useScript;
 
-export const useIconfontScript = (type: "web" | "app", serverUrl?: string) => {
+export const useIconfontScript = () => {
-  if (type === "web") {
+  // Coco Server Icons
-    useScript(`${serverUrl}/assets/fonts/icons/iconfont.js`);
+  useScript("https://at.alicdn.com/t/c/font_4878526_cykw3et0ezd.js");
-    useScript(`${serverUrl}/assets/fonts/icons-app/iconfont.js`);
+  // Coco App Icons
-  } else {
+  useScript("https://at.alicdn.com/t/c/font_4934333_zclkkzo4fgo.js");
-    // Coco Server Icons
-    useScript("https://at.alicdn.com/t/c/font_4878526_cykw3et0ezd.js");
-
-    // Coco App Icons
-    useScript("https://at.alicdn.com/t/c/font_4934333_zclkkzo4fgo.js");
-  }
 };

src/hooks/useSearch.ts

@@ -174,6 +174,7 @@ export function useSearch() {
         const [error, res]: any = await Get(
           `/query/_search?query=${searchInput}`
         );
+
         if (error) {
           console.error("_search", error);
           response = { failed: [], hits: [], total_hits: 0 };

src/hooks/useTogglePin.ts

@@ -2,8 +2,6 @@ import { useCallback } from "react";
 
 import { useAppStore } from "@/stores/appStore";
 import platformAdapter from "@/utils/platformAdapter";
-import { toggle_move_to_active_space_attribute } from "@/commands/system";
-import { isMac } from "@/utils/platform";
 
 interface UseTogglePinOptions {
   onPinChange?: (isPinned: boolean) => void;
@@ -21,8 +19,8 @@ export const useTogglePin = (options?: UseTogglePinOptions) => {
       }
 
       await platformAdapter.setAlwaysOnTop(newPinned);
+      await platformAdapter.toggleMoveToActiveSpaceAttribute();
       setIsPinned(newPinned);
-      isMac && toggle_move_to_active_space_attribute();
     } catch (err) {
       console.error("Failed to toggle window pin state:", err);
     }

src/pages/web/index.tsx

@@ -8,7 +8,6 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { useModifierKeyPress } from "@/hooks/useModifierKeyPress";
 import useEscape from "@/hooks/useEscape";
 import { useViewportHeight } from "@/hooks/useViewportHeight";
-import { useIconfontScript } from "@/hooks/useScript";
 import type { StartPage } from "@/types/chat";
 import ErrorNotification from "@/components/Common/ErrorNotification";
 
@@ -83,7 +82,6 @@ function WebApp({
   useEscape();
   useModifierKeyPress();
   useViewportHeight();
-  useIconfontScript('web', serverUrl);
 
   return (
     <div

src/routes/layout.tsx

@@ -112,7 +112,7 @@ export default function Layout() {
     platformAdapter.error(message);
   });
 
-  useIconfontScript("app");
+  useIconfontScript();
 
   const setDisabledExtensions = useExtensionsStore((state) => {
     return state.setDisabledExtensions;

src/types/platform.ts

@@ -60,6 +60,7 @@ export interface WindowOperations {
   hideWindow: () => Promise<void>;
   showWindow: () => Promise<void>;
   setAlwaysOnTop: (isPinned: boolean) => Promise<void>;
+  toggleMoveToActiveSpaceAttribute: () => Promise<void>;
   setShadow(enable: boolean): Promise<void>;
   getWebviewWindow: () => Promise<any>;
   getWindowByLabel: (label: string) => Promise<{

src/utils/tauriAdapter.ts

@@ -16,6 +16,8 @@ import { useAppearanceStore } from "@/stores/appearanceStore";
 import { copyToClipboard, OpenURLWithBrowser } from ".";
 import { useAppStore } from "@/stores/appStore";
 import { unrequitable } from "@/utils";
+import { toggle_move_to_active_space_attribute } from "@/commands/system";
+import { isMac } from "@/utils/platform";
 
 export interface TauriPlatformAdapter extends BasePlatformAdapter {
   openFileDialog: (
@@ -77,6 +79,13 @@ export const createTauriAdapter = (): TauriPlatformAdapter => {
       const { getCurrentWindow } = await import("@tauri-apps/api/window");
       const window = getCurrentWindow();
       return window.setAlwaysOnTop(isPinned);
+    }, 
+    
+    async toggleMoveToActiveSpaceAttribute() {
+      if (isMac) {
+        return toggle_move_to_active_space_attribute();
+      }
+      return Promise.resolve();
     },
 
     async requestScreenRecordingPermission() {

src/utils/webAdapter.ts

@@ -58,6 +58,10 @@ export const createWebAdapter = (): WebPlatformAdapter => {
       console.log("Web mode simulated set always on top", isPinned);
     },
 
+    async toggleMoveToActiveSpaceAttribute() {
+      console.log("Web mode simulated toggle move to active space attribute");
+    },
+
     async checkScreenRecordingPermission() {
       console.log("Web mode simulated check screen recording permission");
       return false;