From 331cddcabba86743e45a8873a1ea757ea480a857 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 15:57:43 -0800
Subject: [PATCH] allow query preview when query editor is closed

---
 .../playlists/routes/playlist-detail-song-list-route.tsx | 9 +++------
 src/renderer/features/shared/components/json-preview.tsx | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
index d269a3331..10b7aaf36 100644
--- a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
@@ -62,10 +62,6 @@ const PlaylistQueryEditor = ({
     const { t } = useTranslation();
 
     const openPreviewModal = useCallback(() => {
-        if (!isQueryBuilderExpanded) {
-            return;
-        }
-
         const filters = queryBuilderRef.current?.getFilters();
 
         if (!filters) {
@@ -86,7 +82,7 @@ const PlaylistQueryEditor = ({
             size: 'xl',
             title: t('common.preview', { postProcess: 'titleCase' }),
         });
-    }, [isQueryBuilderExpanded, queryBuilderRef, t]);
+    }, [queryBuilderRef, t]);
 
     const openSaveAndReplaceModal = useCallback(() => {
         if (!isQueryBuilderExpanded) {
@@ -170,7 +166,8 @@ const PlaylistQueryEditor = ({
                                 />
                             }
                             onClick={onToggleExpand}
-                            size="compact-md"
+                            size="sm"
+                            variant="subtle"
                         >
                             {t('form.queryEditor.title', {
                                 postProcess: 'titleCase',
diff --git a/src/renderer/features/shared/components/json-preview.tsx b/src/renderer/features/shared/components/json-preview.tsx
index dc20915eb..784faa00e 100644
--- a/src/renderer/features/shared/components/json-preview.tsx
+++ b/src/renderer/features/shared/components/json-preview.tsx
@@ -9,7 +9,7 @@ interface JsonPreviewProps {
 export const JsonPreview = ({ value }: JsonPreviewProps) => {
     return (
         <Code block className={styles.preview} lang="json" p="md">
-            {JSON.stringify(value, null, 4)}
+            {JSON.stringify(value, null, 2)}
         </Code>
     );
 };