From a21ee2165272d64794a5a276a79ecc0f2bc3712d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 01:55:34 -0800
Subject: [PATCH] add album section count badge

---
 .../components/album-artist-detail-content.tsx       | 11 ++++++++---
 .../components/audiomotionanalyzer/visualizer.tsx    | 12 ++----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index 87f4c24a5..104b99180 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -41,6 +41,7 @@ import { useGeneralSettings, useSettingsStore } from '/@/renderer/store/settings
 import { sanitize } from '/@/renderer/utils/sanitize';
 import { sortAlbumList } from '/@/shared/api/utils';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Badge } from '/@/shared/components/badge/badge';
 import { Button } from '/@/shared/components/button/button';
 import { Grid } from '/@/shared/components/grid/grid';
 import { Group } from '/@/shared/components/group/group';
@@ -687,13 +688,17 @@ interface AlbumSectionProps {
 
 const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps) => {
     const span = cq.isXl ? 3 : cq.isLg ? 4 : cq.isMd ? 6 : cq.isSm ? 8 : cq.isXs ? 12 : 12;
+    const albumCount = albums.length;
 
     return (
         <Stack gap="md">
             <div className={styles.albumSectionTitle}>
-                <TextTitle fw={700} order={3}>
-                    {title}
-                </TextTitle>
+                <Group gap="md">
+                    <TextTitle fw={700} order={3}>
+                        {title}
+                    </TextTitle>
+                    <Badge variant="default">{albumCount}</Badge>
+                </Group>
                 <div className={styles.albumSectionDividerContainer}>
                     <div className={styles.albumSectionDivider} />
                 </div>
diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
index 42c7410c0..4ac268611 100644
--- a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
+++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
@@ -14,9 +14,7 @@ const VisualizerInner = () => {
     const canvasRef = createRef<HTMLDivElement>();
     const accent = useSettingsStore((store) => store.general.accent);
     const visualizer = useSettingsStore((store) => store.visualizer);
-    const opacity = useSettingsStore(
-        (store) => store.visualizer.audiomotionanalyzer.opacity,
-    );
+    const opacity = useSettingsStore((store) => store.visualizer.audiomotionanalyzer.opacity);
     const [motion, setMotion] = useState<AudioMotionAnalyzer>();
 
     // Check if a gradient name is a custom gradient
@@ -220,13 +218,7 @@ const VisualizerInner = () => {
         }
     }, [motion, options]);
 
-    return (
-        <div
-            className={styles.visualizer}
-            ref={canvasRef}
-            style={{ opacity }}
-        />
-    );
+    return <div className={styles.visualizer} ref={canvasRef} style={{ opacity }} />;
 };
 
 export const Visualizer = () => {