redesign smart playlist, add multisort

src/renderer/features/shared/components/json-preview.module.css

@@ -0,0 +1,6 @@
+.preview {
+    padding: var(--theme-spacing-md);
+    font-family: var(--theme-content-font-family);
+    font-size: var(--theme-font-size-md);
+    background: var(--theme-colors-surface);
+}

src/renderer/features/shared/components/json-preview.tsx

@@ -1,7 +1,13 @@
+import styles from './json-preview.module.css';
+
 interface JsonPreviewProps {
     value: Record<string, any> | string;
 }
 
 export const JsonPreview = ({ value }: JsonPreviewProps) => {
-    return <pre style={{ userSelect: 'all' }}>{JSON.stringify(value, null, 2)}</pre>;
+    return (
+        <pre className={styles.preview} style={{ userSelect: 'all' }}>
+            {JSON.stringify(value, null, 4)}
+        </pre>
+    );
 };