feat: enhance ui for skipped version (#834)

Author: ayangweb

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

@@ -7,13 +7,19 @@ title: "Release Notes"
 
 Information about release notes of Coco App is provided here.
 
-
 ## Latest (In development)
+
 ### ❌ Breaking changes
+
 ### 🚀 Features
+
+- feat: enhance ui for skipped version #834
+
 ### 🐛 Bug fix
-### ✈️ Improvements
 
+- fix: fix issue with update check failure #833
+
+### ✈️ Improvements
 
 ## 0.7.1 (2025-07-27)
 
@@ -24,7 +30,6 @@ Information about release notes of Coco App is provided here.
 ### 🐛 Bug fix
 
 - fix: correct enter key behavior #828
-- fix: fix issue with update check failure #833
 
 ### ✈️ Improvements
 

src/components/Common/UI/Footer.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { ArrowDown01, CornerDownLeft } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
@@ -44,14 +44,18 @@ export default function Footer({ setIsPinnedWeb }: FooterProps) {
     onPinChange: setIsPinnedWeb,
   });
 
-  const { setVisible, updateInfo } = useUpdateStore();
+  const { setVisible, updateInfo, skipVersions } = useUpdateStore();
 
   const { fixedWindow, modifierKey } = useShortcutsStore();
 
   const openSetting = useCallback(() => {
     return platformAdapter.emitEvent("open_settings", "");
   }, []);
 
+  const hasUpdate = useMemo(() => {
+    return updateInfo && !skipVersions.includes(updateInfo.version);
+  }, [updateInfo, skipVersions]);
+
   const renderLeft = () => {
     if (sourceData?.source?.name) {
       return (
@@ -97,7 +101,7 @@ export default function Footer({ setIsPinnedWeb }: FooterProps) {
         />
 
         <div className="relative text-xs text-gray-500 dark:text-gray-400">
-          {updateInfo?.available ? (
+          {hasUpdate ? (
             <div className="cursor-pointer" onClick={() => setVisible(true)}>
               <span>{t("search.footer.updateAvailable")}</span>
               <span className="absolute top-0 -right-2 size-1.5 bg-[#FF3434] rounded-full"></span>
@@ -127,7 +131,7 @@ export default function Footer({ setIsPinnedWeb }: FooterProps) {
               onClick={togglePin}
               className={clsx({
                 "text-blue-500": isPinned,
-                "pl-2": updateInfo?.available,
+                "pl-2": hasUpdate,
               })}
             >
               <VisibleKey shortcut={fixedWindow} onKeyPress={togglePin}>

src/components/UpdateApp/index.tsx

@@ -32,8 +32,8 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
   const {
     visible,
     setVisible,
-    skipVersion,
-    setSkipVersion,
+    skipVersions,
+    setSkipVersions,
     isOptional,
     updateInfo,
     setUpdateInfo,
@@ -75,13 +75,13 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
     const update = await checkUpdate();
 
     if (update) {
-      setUpdateInfo(update);
+      const { skipVersions } = useUpdateStore.getState();
 
-      if (skipVersion === update.version) return;
+      setVisible(!skipVersions.includes(update.version));
 
-      setVisible(true);
+      setUpdateInfo(update);
     }
-  }, [skipVersion]);
+  }, [skipVersions]);
 
   const cursorClassName = useMemo(() => {
     return state.loading ? "cursor-not-allowed" : "cursor-pointer";
@@ -129,7 +129,9 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
   const handleSkip = () => {
     if (state.loading) return;
 
-    setSkipVersion(updateInfo?.version);
+    const { skipVersions, updateInfo } = useUpdateStore.getState();
+
+    setSkipVersions([...skipVersions, updateInfo.version]);
 
     isCheckPage ? hide_check() : setVisible(false);
   };
@@ -178,7 +180,7 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
             <img src={isDark ? darkIcon : lightIcon} className="h-6" />
 
             <div className="text-[#333] text-sm leading-5 py-2 dark:text-[#D8D8D8] text-center">
-              {updateInfo?.available ? (
+              {updateInfo ? (
                 isOptional ? (
                   t("update.optional_description")
                 ) : (
@@ -192,7 +194,7 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
               )}
             </div>
 
-            {updateInfo?.available ? (
+            {updateInfo ? (
               <div
                 className="text-xs text-[#0072FF] cursor-pointer"
                 onClick={() =>
@@ -219,21 +221,21 @@ const UpdateApp = ({ isCheckPage }: UpdateAppProps) => {
                 cursorClassName,
                 state.loading && "opacity-50"
               )}
-              onClick={updateInfo?.available ? handleDownload : handleSkip}
+              onClick={updateInfo ? handleDownload : handleSkip}
             >
               {state.loading ? (
                 <div className="flex justify-center items-center gap-2">
                   <LoaderCircle className="animate-spin size-5" />
                   {percent}%
                 </div>
-              ) : updateInfo?.available ? (
+              ) : updateInfo ? (
                 t("update.button.install")
               ) : (
                 t("update.button.ok")
               )}
             </Button>
 
-            {updateInfo?.available && isOptional && (
+            {!isCheckPage && updateInfo && isOptional && (
               <div
                 className={clsx("text-xs text-[#999]", cursorClassName)}
                 onClick={handleSkip}

src/stores/updateStore.ts

@@ -4,8 +4,8 @@ import { persist } from "zustand/middleware";
 export type IUpdateStore = {
   visible: boolean;
   setVisible: (visible: boolean) => void;
-  skipVersion?: string;
-  setSkipVersion: (skipVersion?: string) => void;
+  skipVersions: string[];
+  setSkipVersions: (skipVersions: string[]) => void;
   isOptional: boolean;
   setIsOptional: (isOptional: boolean) => void;
   updateInfo?: any;
@@ -19,8 +19,9 @@ export const useUpdateStore = create<IUpdateStore>()(
       setVisible: (visible: boolean) => {
         return set({ visible });
       },
-      setSkipVersion: (skipVersion?: string) => {
-        return set({ skipVersion });
+      skipVersions: [],
+      setSkipVersions: (skipVersions: string[]) => {
+        return set({ skipVersions });
       },
       isOptional: true,
       setIsOptional: (isOptional: boolean) => {
@@ -33,7 +34,7 @@ export const useUpdateStore = create<IUpdateStore>()(
     {
       name: "update-store",
       partialize: (state) => ({
-        skipVersion: state.skipVersion,
+        skipVersions: state.skipVersions,
       }),
     }
   )