From 83886ed4bafba53c6c01654df757785efd0e3a27 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 5 Dec 2025 01:35:54 -0800
Subject: [PATCH] add new spoiler component

---
 .../components/album-detail-content.tsx       |  6 ++-
 .../components/spoiler/spoiler.module.css     | 13 ++----
 src/shared/components/spoiler/spoiler.tsx     | 41 ++++++-------------
 3 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index c82f97751..fd44dd779 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -363,7 +363,11 @@ export const AlbumDetailContent = () => {
     return (
         <div className={styles.contentContainer} ref={ref}>
             <div className={styles.detailContainer}>
-                {comment && <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>}
+                {comment && (
+                    <Spoiler hideLabel={true} maxHeight={32} showLabel={true}>
+                        {replaceURLWithHTMLLinks(comment)}
+                    </Spoiler>
+                )}
                 <div className={styles.contentLayout}>
                     <div className={styles.songsColumn}>
                         {detailQuery?.data?.songs && detailQuery.data.songs.length > 0 && (
diff --git a/src/shared/components/spoiler/spoiler.module.css b/src/shared/components/spoiler/spoiler.module.css
index 522b88c79..d5dee0ea3 100644
--- a/src/shared/components/spoiler/spoiler.module.css
+++ b/src/shared/components/spoiler/spoiler.module.css
@@ -8,18 +8,13 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    text-align: justify;
+    cursor: pointer;
 }
 
-.spoiler:not(.is-expanded).can-expand::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+.control {
     width: 100%;
-    height: 100%;
-    pointer-events: none;
-    content: '';
-    background: linear-gradient(to top, var(--theme-colors-background) 10%, transparent 60%);
+    padding: var(--theme-spacing-md) 0;
+    color: var(--theme-colors-foreground);
 }
 
 .spoiler.can-expand {
diff --git a/src/shared/components/spoiler/spoiler.tsx b/src/shared/components/spoiler/spoiler.tsx
index 38691b32a..7f369ab82 100644
--- a/src/shared/components/spoiler/spoiler.tsx
+++ b/src/shared/components/spoiler/spoiler.tsx
@@ -1,42 +1,27 @@
-import clsx from 'clsx';
-import { HTMLAttributes, ReactNode, useRef, useState } from 'react';
+import { Spoiler as MantineSpoiler, SpoilerProps as MantineSpoilerProps } from '@mantine/core';
+import { ReactNode, useState } from 'react';
 
 import styles from './spoiler.module.css';
 
-import { Text } from '/@/shared/components/text/text';
-import { useIsOverflow } from '/@/shared/hooks/use-is-overflow';
+import { Icon } from '/@/shared/components/icon/icon';
 
-interface SpoilerProps extends HTMLAttributes<HTMLDivElement> {
+interface SpoilerProps extends MantineSpoilerProps {
     children?: ReactNode;
-    defaultOpened?: boolean;
-    maxHeight?: number;
 }
 
-export const Spoiler = ({ children, defaultOpened, maxHeight, ...props }: SpoilerProps) => {
-    const ref = useRef(null);
-    const isOverflow = useIsOverflow(ref);
-    const [isExpanded, setIsExpanded] = useState(!!defaultOpened);
-
-    const spoilerClassNames = clsx(styles.spoiler, {
-        [styles.canExpand]: isOverflow,
-        [styles.isExpanded]: isExpanded,
-    });
-
-    const handleToggleExpand = () => {
-        setIsExpanded((val) => !val);
-    };
+export const Spoiler = ({ children, ...props }: SpoilerProps) => {
+    const [expanded, setExpanded] = useState(false);
 
     return (
-        <Text
-            className={spoilerClassNames}
-            onClick={handleToggleExpand}
-            ref={ref}
-            role="button"
-            style={{ maxHeight: maxHeight ?? '100px', whiteSpace: 'pre-wrap' }}
-            tabIndex={-1}
+        <MantineSpoiler
+            classNames={{ content: styles.spoiler, control: styles.control }}
+            expanded={expanded}
             {...props}
+            hideLabel={<Icon icon="arrowUpS" size="lg" />}
+            onClick={() => setExpanded(!expanded)}
+            showLabel={<Icon icon="arrowDownS" size="lg" />}
         >
             {children}
-        </Text>
+        </MantineSpoiler>
     );
 };