From 5e6e79d82aabb7b03bf8751c0668e6c68413c0ed Mon Sep 17 00:00:00 2001
From: fishshi <2855691008@qq.com>
Date: Mon, 16 Dec 2024 16:23:28 +0800
Subject: [PATCH] fix CollectionPoster

---
 .../Showcase/posters/CollectionPoster.tsx     | 59 ++++++++++---------
 .../contextMenu/CollectionCM/main.tsx         | 18 +++++-
 2 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx b/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx
index e45ba7f..245bb6a 100644
--- a/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx
+++ b/src/renderer/src/components/Showcase/posters/CollectionPoster.tsx
@@ -18,25 +18,26 @@ export function CollectionPoster({
   const gameId = collections[collctionId].games[0]
   const length = collections[collctionId].games.length
   return (
-    <div
-      className={cn(
-        'group relative overflow-hidden shadow-custom-initial cursor-pointer w-[160px] h-[160px] rounded-[0.3rem]',
-        'transition-border duration-300 ease-in-out',
-        'border-2 border-transparent',
-        'hover:border-primary hover:border-2',
-        '3xl:w-[190px] 3xl:h-[190px]'
-      )}
-      onClick={() => navigate(`/library/collections/${collctionId}`)}
-    >
-      {/* background mask layer */}
+    <CollectionCM collectionId={collctionId}>
       <div
         className={cn(
-          'absolute inset-0 bg-muted/40 backdrop-blur-sm z-10 border-t-0.5 border-white/30 pointer-events-none'
+          'group relative overflow-hidden shadow-custom-initial cursor-pointer w-[160px] h-[160px] rounded-[0.3rem]',
+          'transition-border duration-300 ease-in-out',
+          'border-2 border-transparent',
+          'hover:border-primary hover:border-2',
+          '3xl:w-[190px] 3xl:h-[190px]'
         )}
-      />
+        onClick={() => navigate(`/library/collections/${collctionId}`)}
+      >
+        {/* background mask layer */}
+        <div
+          className={cn(
+            'absolute inset-0 bg-muted/40 backdrop-blur-sm z-10 border-t-0.5 border-white/30 pointer-events-none'
+          )}
+        />
+
+        {/* HoverBigCardAnimation layer */}
 
-      {/* HoverBigCardAnimation layer */}
-      <CollectionCM collectionId={collctionId}>
         <div className="relative z-0">
           <HoverSquareCardAnimation className={cn('rounded-none')}>
             <GameImage
@@ -60,21 +61,23 @@ export function CollectionPoster({
             />
           </HoverSquareCardAnimation>
         </div>
-      </CollectionCM>
 
-      {/* text content layer */}
-      <div
-        className={cn(
-          'absolute inset-0 z-20 mt-7',
-          'flex items-center justify-center',
-          'pointer-events-none'
-        )}
-      >
-        <div className="flex flex-col gap-1 items-center justify-center">
-          <div className={cn('text-accent-foreground text-lg font-semibold')}>{collectionName}</div>
-          <div className={cn('text-accent-foreground/70')}>{`( ${length} )`}</div>
+        {/* text content layer */}
+        <div
+          className={cn(
+            'absolute inset-0 z-20 mt-7',
+            'flex items-center justify-center',
+            'pointer-events-none'
+          )}
+        >
+          <div className="flex flex-col gap-1 items-center justify-center">
+            <div className={cn('text-accent-foreground text-lg font-semibold')}>
+              {collectionName}
+            </div>
+            <div className={cn('text-accent-foreground/70')}>{`( ${length} )`}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </CollectionCM>
   )
 }
diff --git a/src/renderer/src/components/contextMenu/CollectionCM/main.tsx b/src/renderer/src/components/contextMenu/CollectionCM/main.tsx
index 15f5036..600d57f 100644
--- a/src/renderer/src/components/contextMenu/CollectionCM/main.tsx
+++ b/src/renderer/src/components/contextMenu/CollectionCM/main.tsx
@@ -21,7 +21,7 @@ import {
 } from '@ui/alert-dialog'
 import { useCollections } from '~/hooks'
 import { cn } from '~/utils'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 export function CollectionCM({
   collectionId,
@@ -33,6 +33,13 @@ export function CollectionCM({
   const { renameCollection, removeCollection, collections } = useCollections()
   const [newName, setNewName] = useState<string>('')
   const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (collections[collectionId].name !== newName) {
+      setNewName(collections[collectionId].name)
+    }
+  }, [collections[collectionId].name])
+
   return (
     <ContextMenu>
       <ContextMenuTrigger>{children}</ContextMenuTrigger>
@@ -59,12 +66,19 @@ export function CollectionCM({
             <Button
               onClick={() => {
                 renameCollection(collectionId, newName)
-                setNewName('')
                 setIsOpen(false)
               }}
             >
               确定
             </Button>
+            <Button
+              onClick={() => {
+                setIsOpen(false)
+                setNewName(collections[collectionId].name)
+              }}
+            >
+              取消
+            </Button>
           </DialogContent>
         </Dialog>
         <ContextMenuSeparator />