From ad198ea0475be3519c2b172402f78078f9c02922 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 29 Nov 2025 19:55:22 -0800
Subject: [PATCH] remove animations and various smart playlist adjustments

---
 .../components/query-builder/index.tsx        | 57 ++++++-----------
 .../query-builder/query-builder-option.tsx    | 64 +++++++++++++------
 .../components/playlist-query-builder.tsx     |  7 +-
 3 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/src/renderer/components/query-builder/index.tsx b/src/renderer/components/query-builder/index.tsx
index d9c0a6ed7..8e822ab26 100644
--- a/src/renderer/components/query-builder/index.tsx
+++ b/src/renderer/components/query-builder/index.tsx
@@ -1,4 +1,3 @@
-import { AnimatePresence, motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
@@ -187,41 +186,27 @@ export const QueryBuilder = ({
                     </Group>
                     {level === 0 && saveActions}
                 </Group>
-                <AnimatePresence initial={false}>
-                    {data?.rules?.map((rule: QueryBuilderRule) => (
-                        <motion.div
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0, x: -25 }}
-                            initial={{ opacity: 0, x: -25 }}
-                            key={rule.uniqueId}
-                            transition={{ duration: 0.2, ease: 'easeInOut' }}
-                        >
-                            <QueryBuilderOption
-                                data={rule}
-                                filters={filters}
-                                groupIndex={groupIndex || []}
-                                level={level}
-                                noRemove={data?.rules?.length === 1}
-                                onChangeField={onChangeField}
-                                onChangeOperator={onChangeOperator}
-                                onChangeValue={onChangeValue}
-                                onDeleteRule={onDeleteRule}
-                                operators={operators}
-                                selectData={playlists}
-                            />
-                        </motion.div>
-                    ))}
-                </AnimatePresence>
+                {data?.rules?.map((rule: QueryBuilderRule) => (
+                    <div key={rule.uniqueId}>
+                        <QueryBuilderOption
+                            data={rule}
+                            filters={filters}
+                            groupIndex={groupIndex || []}
+                            level={level}
+                            noRemove={data?.rules?.length === 1}
+                            onChangeField={onChangeField}
+                            onChangeOperator={onChangeOperator}
+                            onChangeValue={onChangeValue}
+                            onDeleteRule={onDeleteRule}
+                            operators={operators}
+                            selectData={playlists}
+                        />
+                    </div>
+                ))}
                 {data?.group && (
-                    <AnimatePresence initial={false}>
+                    <>
                         {data.group?.map((group: QueryBuilderGroup, index: number) => (
-                            <motion.div
-                                animate={{ opacity: 1, x: 0 }}
-                                exit={{ opacity: 0, x: -25 }}
-                                initial={{ opacity: 0, x: -25 }}
-                                key={group.uniqueId}
-                                transition={{ duration: 0.2, ease: 'easeInOut' }}
-                            >
+                            <div key={group.uniqueId}>
                                 <QueryBuilder
                                     data={group}
                                     filters={filters}
@@ -241,9 +226,9 @@ export const QueryBuilder = ({
                                     playlists={playlists}
                                     uniqueId={group.uniqueId}
                                 />
-                            </motion.div>
+                            </div>
                         ))}
-                    </AnimatePresence>
+                    </>
                 )}
             </Stack>
         </Box>
diff --git a/src/renderer/components/query-builder/query-builder-option.tsx b/src/renderer/components/query-builder/query-builder-option.tsx
index 033f78031..af87de8a0 100644
--- a/src/renderer/components/query-builder/query-builder-option.tsx
+++ b/src/renderer/components/query-builder/query-builder-option.tsx
@@ -34,7 +34,15 @@ interface QueryOptionProps {
     selectData?: { label: string; value: string }[];
 }
 
-const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...props }: any) => {
+const QueryValueInput = ({
+    data,
+    defaultValue,
+    onChange,
+    operator,
+    type,
+    value: valueProp,
+    ...props
+}: any) => {
     const [numberRange, setNumberRange] = useState<number[]>([0, 0]);
 
     // Parse date value helper - converts date string (YYYY-MM-DD) to Date for display
@@ -50,26 +58,45 @@ const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...prop
         return null;
     };
 
+    const value = valueProp !== undefined ? valueProp : defaultValue;
+
     // Store date range as strings for state management
     const [dateRange, setDateRange] = useState<[null | string, null | string]>(() => {
-        if (defaultValue && Array.isArray(defaultValue)) {
+        const currentValue = value !== undefined ? value : defaultValue;
+        if (currentValue && Array.isArray(currentValue)) {
             return [
-                typeof defaultValue[0] === 'string' ? defaultValue[0] : null,
-                typeof defaultValue[1] === 'string' ? defaultValue[1] : null,
+                typeof currentValue[0] === 'string' ? currentValue[0] : null,
+                typeof currentValue[1] === 'string' ? currentValue[1] : null,
             ];
         }
         return [null, null];
     });
 
-    // Sync dateRange state when defaultValue changes
+    // Sync dateRange state when value changes
     useEffect(() => {
-        if (operator === 'inTheRangeDate' && defaultValue && Array.isArray(defaultValue)) {
+        const currentValue = value !== undefined ? value : defaultValue;
+        if (operator === 'inTheRangeDate' && currentValue && Array.isArray(currentValue)) {
             setDateRange([
-                typeof defaultValue[0] === 'string' ? defaultValue[0] : null,
-                typeof defaultValue[1] === 'string' ? defaultValue[1] : null,
+                typeof currentValue[0] === 'string' ? currentValue[0] : null,
+                typeof currentValue[1] === 'string' ? currentValue[1] : null,
             ]);
         }
-    }, [defaultValue, operator]);
+    }, [value, defaultValue, operator]);
+
+    // Sync numberRange state when value changes
+    useEffect(() => {
+        const currentValue = value !== undefined ? value : defaultValue;
+        if (operator === 'inTheRange' && currentValue && Array.isArray(currentValue)) {
+            setNumberRange([
+                typeof currentValue[0] === 'number'
+                    ? currentValue[0]
+                    : Number(currentValue[0]) || 0,
+                typeof currentValue[1] === 'number'
+                    ? currentValue[1]
+                    : Number(currentValue[1]) || 0,
+            ]);
+        }
+    }, [value, defaultValue, operator]);
 
     // Check if operator requires DatePicker
     const isDatePickerOperator =
@@ -84,12 +111,13 @@ const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...prop
                         { label: 'false', value: 'false' },
                     ]}
                     onChange={onChange}
+                    value={value}
                     {...props}
                 />
             );
         case 'date':
             if (isDatePickerOperator && operator !== 'inTheRangeDate') {
-                const dateValue = defaultValue ? parseDateValue(defaultValue) : null;
+                const dateValue = value ? parseDateValue(value) : null;
                 return (
                     <DateInput
                         clearable
@@ -107,7 +135,7 @@ const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...prop
                     />
                 );
             }
-            return <TextInput onChange={onChange} size="sm" {...props} />;
+            return <TextInput onChange={onChange} size="sm" value={value} {...props} />;
         case 'dateRange':
             if (operator === 'inTheRangeDate') {
                 return (
@@ -158,24 +186,24 @@ const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...prop
                 <>
                     <NumberInput
                         {...props}
-                        defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
                         maxWidth={81}
                         onChange={(e) => {
                             const newRange = [Number(e) || 0, numberRange[1]];
                             setNumberRange(newRange);
                             onChange(newRange);
                         }}
+                        value={numberRange[0] || undefined}
                         width="10%"
                     />
                     <NumberInput
                         {...props}
-                        defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
                         maxWidth={81}
                         onChange={(e) => {
                             const newRange = [numberRange[0], Number(e) || 0];
                             setNumberRange(newRange);
                             onChange(newRange);
                         }}
+                        value={numberRange[1] || undefined}
                         width="10%"
                     />
                 </>
@@ -185,14 +213,14 @@ const QueryValueInput = ({ data, defaultValue, onChange, operator, type, ...prop
                 <NumberInput
                     onChange={onChange}
                     size="sm"
+                    value={value !== undefined && value !== null ? Number(value) : undefined}
                     {...props}
-                    defaultValue={props.defaultValue && Number(props.defaultValue)}
                 />
             );
         case 'playlist':
-            return <Select data={data} onChange={onChange} {...props} />;
+            return <Select data={data} onChange={onChange} value={value} {...props} />;
         case 'string':
-            return <TextInput onChange={onChange} size="sm" {...props} />;
+            return <TextInput onChange={onChange} size="sm" value={value || ''} {...props} />;
 
         default:
             return <></>;
@@ -301,7 +329,6 @@ export const QueryBuilderOption = ({
             {field ? (
                 <QueryValueInput
                     data={selectData || []}
-                    defaultValue={value}
                     maxWidth={170}
                     onChange={handleChangeValue}
                     operator={operator}
@@ -311,15 +338,16 @@ export const QueryBuilderOption = ({
                             ? 'dateRange'
                             : fieldType
                     }
+                    value={value}
                     width="25%"
                 />
             ) : (
                 <TextInput
-                    defaultValue={value}
                     disabled
                     maxWidth={170}
                     onChange={handleChangeValue}
                     size="sm"
+                    value={value || ''}
                     width="25%"
                 />
             )}
diff --git a/src/renderer/features/playlists/components/playlist-query-builder.tsx b/src/renderer/features/playlists/components/playlist-query-builder.tsx
index 217c74883..bb577865e 100644
--- a/src/renderer/features/playlists/components/playlist-query-builder.tsx
+++ b/src/renderer/features/playlists/components/playlist-query-builder.tsx
@@ -276,10 +276,13 @@ export const PlaylistQueryBuilder = forwardRef(
 
         const handleDeleteRuleGroup = useCallback((args: DeleteArgs) => {
             const { groupIndex, level, uniqueId } = args;
-            const path = level === 0 ? 'group' : getTypePath(groupIndex);
+            const path = level === 0 ? 'group' : getGroupPath(level - 1, groupIndex.slice(0, -1));
 
             setFilters((prev) => {
-                const currentGroups = get(prev, path) || [];
+                const currentGroups = get(prev, path);
+                if (!Array.isArray(currentGroups)) {
+                    return prev;
+                }
                 return setWith(
                     clone(prev),
                     path,