From 75ef43dffbd09f0c525913308385abb39954126d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 4 Jan 2023 15:54:25 -0800
Subject: [PATCH] Add initial nd smart playlist ui

---
 src/renderer/api/navidrome.types.ts           |  37 +
 .../components/query-builder/index.tsx        |  90 +--
 .../query-builder/query-builder-option.tsx    |  38 +-
 .../components/playlist-query-builder.tsx     | 632 +++++++++---------
 .../playlist-detail-song-list-route.tsx       | 105 ++-
 src/renderer/features/playlists/utils.ts      | 109 +++
 6 files changed, 604 insertions(+), 407 deletions(-)
 create mode 100644 src/renderer/features/playlists/utils.ts

diff --git a/src/renderer/api/navidrome.types.ts b/src/renderer/api/navidrome.types.ts
index 91cdeca6..f7635534 100644
--- a/src/renderer/api/navidrome.types.ts
+++ b/src/renderer/api/navidrome.types.ts
@@ -339,3 +339,40 @@ export type NDPlaylistSongList = {
   startIndex: number;
   totalRecordCount: number;
 };
+
+export const NDSongQueryFields = [
+  { label: 'Title', value: 'title' },
+  { label: 'Album', value: 'album' },
+  { label: 'Artist', value: 'artist' },
+  { label: 'Album artist', value: 'albumartist' },
+  { label: 'Has cover art', value: 'hascoverart' },
+  { label: 'Track number', value: 'tracknumber' },
+  { label: 'Disc number', value: 'discnumber' },
+  { label: 'Year', value: 'year' },
+  { label: 'Size', value: 'size' },
+  { label: 'Is compilation', value: 'compilation' },
+  { label: 'Date added', value: 'dateadded' },
+  { label: 'Date modified', value: 'datemodified' },
+  { label: 'Disc subtitle', value: 'discsubtitle' },
+  { label: 'Comment', value: 'comment' },
+  { label: 'Lyrics', value: 'lyrics' },
+  { label: 'Sort title', value: 'sorttitle' },
+  { label: 'Sort album', value: 'sortalbum' },
+  { label: 'Sort artist', value: 'sortartist' },
+  { label: 'Sort album artist', value: 'sortalbumartist' },
+  { label: 'Album type', value: 'albumtype' },
+  { label: 'Album comment', value: 'albumcomment' },
+  { label: 'Catalog number', value: 'catalognumber' },
+  { label: 'File path', value: 'filepath' },
+  { label: 'File type', value: 'filetype' },
+  { label: 'Duration', value: 'duration' },
+  { label: 'Bitrate', value: 'bitrate' },
+  { label: 'BPM', value: 'bpm' },
+  { label: 'Channels', value: 'channels' },
+  { label: 'Genre', value: 'genre' },
+  { label: 'Is favorite', value: 'loved' },
+  { label: 'Date favorited', value: 'dateloved' },
+  { label: 'Last played', value: 'lastplayed' },
+  { label: 'Play count', value: 'playcount' },
+  { label: 'Rating', value: 'rating' },
+];
diff --git a/src/renderer/components/query-builder/index.tsx b/src/renderer/components/query-builder/index.tsx
index 41d9febe..82b59567 100644
--- a/src/renderer/components/query-builder/index.tsx
+++ b/src/renderer/components/query-builder/index.tsx
@@ -1,25 +1,11 @@
 import { Group, Stack } from '@mantine/core';
 import { Select } from '/@/renderer/components/select';
-import { FilterGroupType } from '/@/renderer/types';
 import { AnimatePresence, motion } from 'framer-motion';
 import { RiAddLine, RiMore2Line } from 'react-icons/ri';
 import { Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
-
-export type AdvancedFilterGroup = {
-  children: AdvancedFilterGroup[];
-  rules: AdvancedFilterRule[];
-  type: FilterGroupType;
-  uniqueId: string;
-};
-
-export type AdvancedFilterRule = {
-  field?: string | null;
-  operator?: string | null;
-  uniqueId: string;
-  value?: string | number | Date | undefined | null | any;
-};
+import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
 
 const FILTER_GROUP_OPTIONS_DATA = [
   {
@@ -32,58 +18,16 @@ const FILTER_GROUP_OPTIONS_DATA = [
   },
 ];
 
-// const queryJson = [
-//   {
-//     any: [{ is: { loved: true } }, { gt: { rating: 3 } }],
-//   },
-//   { inTheRange: { year: [1981, 1990] } },
-// ];
-
-// const parseQuery = (query: Record<string, any>[]) => {
-//   // for (const ruleset in query) {
-//   //   // console.log('key', key);
-//   //   // console.log('query[key]', query[key]);
-//   //   // console.log('Object.keys(query[key])', Object.keys(query[key]));
-//   //   // console.log('Object.values(query[key])', Object.values(query[key]));
-//   //   // console.log('Object.entries(query[key])', Object.entries(query[key]));
-
-//   //   const keys = Object.keys(query[ruleset]);
-//   // }
-
-//   const res = flatMapDeep(query, flatten);
-//   console.log('res', res);
-
-//   return res;
-// };
-
-// const OperatorSelect = ({ value, onChange }: any) => {
-//   const handleChange = (e: any) => {
-//     onChange(e);
-//   };
-
-//   return (
-//     <Select
-//       data={operators}
-//       label="Operator"
-//       value={value}
-//       onChange={handleChange}
-//     />
-//   );
-// };
-
 type AddArgs = {
   groupIndex: number[];
-  groupValue: string;
   level: number;
 };
 
 type DeleteArgs = {
   groupIndex: number[];
-  groupValue: string;
   level: number;
   uniqueId: string;
 };
-
 interface QueryBuilderProps {
   data: Record<string, any>;
   filters: { label: string; value: string }[];
@@ -115,42 +59,36 @@ export const QueryBuilder = ({
   uniqueId,
   filters,
 }: QueryBuilderProps) => {
-  const groupValue = Object.keys(data)[0];
-  const rules = data[groupValue].filter((rule: any) => !rule.any && !rule.all);
-  const group = data[groupValue].filter((rule: any) => rule.any || rule.all);
-
   const handleAddRule = () => {
-    onAddRule({ groupIndex, groupValue, level });
+    onAddRule({ groupIndex, level });
   };
 
   const handleAddRuleGroup = () => {
-    onAddRuleGroup({ groupIndex, groupValue, level });
+    onAddRuleGroup({ groupIndex, level });
   };
 
   const handleDeleteRuleGroup = () => {
-    onDeleteRuleGroup({ groupIndex, groupValue, level, uniqueId });
+    onDeleteRuleGroup({ groupIndex, level, uniqueId });
   };
 
   const handleChangeType = (value: string | null) => {
     onChangeType({ groupIndex, level, value });
   };
 
-  console.log('rules :>> ', rules);
-
   return (
     <Stack ml={`${level * 10}px`}>
       <Group>
         <Select
           data={FILTER_GROUP_OPTIONS_DATA}
           maxWidth={175}
-          size="xs"
-          value={groupValue}
+          size="sm"
+          value={data.type}
           width="20%"
           onChange={handleChangeType}
         />
         <Button
           px={5}
-          size="xs"
+          size="sm"
           tooltip={{ label: 'Add rule' }}
           variant="default"
           onClick={handleAddRule}
@@ -161,7 +99,7 @@ export const QueryBuilder = ({
           <DropdownMenu.Target>
             <Button
               p={0}
-              size="xs"
+              size="sm"
               variant="subtle"
             >
               <RiMore2Line size={20} />
@@ -181,9 +119,9 @@ export const QueryBuilder = ({
         key="advanced-filter-option"
         initial={false}
       >
-        {rules.map((rule: AdvancedFilterRule, i: number) => (
+        {data?.rules?.map((rule: QueryBuilderRule) => (
           <motion.div
-            key={`rule-${level}-${Object.keys(rule)[0]}`}
+            key={rule.uniqueId}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -25 }}
             initial={{ opacity: 0, x: -25 }}
@@ -193,7 +131,7 @@ export const QueryBuilder = ({
               data={rule}
               filters={filters}
               groupIndex={groupIndex || []}
-              groupValue={groupValue}
+              // groupValue={groupValue}
               level={level}
               noRemove={data?.rules?.length === 1}
               onChangeField={onChangeField}
@@ -204,14 +142,14 @@ export const QueryBuilder = ({
           </motion.div>
         ))}
       </AnimatePresence>
-      {group && (
+      {data?.group && (
         <AnimatePresence
           key="advanced-filter-group"
           initial={false}
         >
-          {group.map((group: AdvancedFilterGroup, index: number) => (
+          {data.group?.map((group: QueryBuilderGroup, index: number) => (
             <motion.div
-              key={`group-${level}-${index}`}
+              key={group.uniqueId}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -25 }}
               initial={{ opacity: 0, x: -25 }}
diff --git a/src/renderer/components/query-builder/query-builder-option.tsx b/src/renderer/components/query-builder/query-builder-option.tsx
index 0098ae3d..8023510a 100644
--- a/src/renderer/components/query-builder/query-builder-option.tsx
+++ b/src/renderer/components/query-builder/query-builder-option.tsx
@@ -4,7 +4,7 @@ import { RiSubtractLine } from 'react-icons/ri';
 import { Button } from '/@/renderer/components/button';
 import { TextInput } from '/@/renderer/components/input';
 import { Select } from '/@/renderer/components/select';
-import { AdvancedFilterRule } from '/@/renderer/types';
+import { QueryBuilderRule } from '/@/renderer/types';
 
 const operators = [
   { label: 'is', value: 'is' },
@@ -24,16 +24,15 @@ const operators = [
 
 type DeleteArgs = {
   groupIndex: number[];
-  groupValue: string;
   level: number;
   uniqueId: string;
 };
 
 interface QueryOptionProps {
-  data: AdvancedFilterRule;
+  data: QueryBuilderRule;
   filters: { label: string; value: string }[];
   groupIndex: number[];
-  groupValue: string;
+  // groupValue: string;
   level: number;
   noRemove: boolean;
   onChangeField: (args: any) => void;
@@ -48,7 +47,6 @@ export const QueryBuilderOption = ({
   level,
   onDeleteRule,
   groupIndex,
-  groupValue,
   noRemove,
   onChangeField,
   onChangeOperator,
@@ -57,7 +55,7 @@ export const QueryBuilderOption = ({
   const { field, operator, uniqueId, value } = data;
 
   const handleDeleteRule = () => {
-    onDeleteRule({ groupIndex, groupValue, level, uniqueId });
+    onDeleteRule({ groupIndex, level, uniqueId });
   };
 
   const handleChangeField = (e: any) => {
@@ -69,6 +67,8 @@ export const QueryBuilderOption = ({
   };
 
   const handleChangeValue = (e: any) => {
+    console.log('e', e);
+
     const isDirectValue =
       typeof e === 'string' ||
       typeof e === 'number' ||
@@ -330,7 +330,7 @@ export const QueryBuilderOption = ({
   //   ),
   // };
 
-  const ml = (level + 1) * 10 - level * 5;
+  const ml = (level + 1) * 10;
 
   return (
     <Group ml={ml}>
@@ -338,7 +338,7 @@ export const QueryBuilderOption = ({
         searchable
         data={filters}
         maxWidth={175}
-        size="xs"
+        size="sm"
         value={field}
         width="20%"
         onChange={handleChangeField}
@@ -346,21 +346,29 @@ export const QueryBuilderOption = ({
       <Select
         searchable
         data={operators}
-        // disabled={!field}
+        disabled={!field}
         maxWidth={175}
-        size="xs"
-        value={field}
+        size="sm"
+        value={operator}
         width="20%"
-        onChange={handleChangeField}
+        onChange={handleChangeOperator}
       />
       {field ? (
-        <></>
+        <TextInput
+          defaultValue={value}
+          maxWidth={175}
+          size="sm"
+          width="20%"
+          onChange={handleChangeValue}
+        />
       ) : (
         <TextInput
           disabled
+          defaultValue={value}
           maxWidth={175}
-          size="xs"
+          size="sm"
           width="20%"
+          onChange={handleChangeValue}
         />
       )}
       {/* // filterOperatorMap[ // OPTIONS_MAP[field as keyof typeof OPTIONS_MAP].type as keyof typeof
@@ -368,7 +376,7 @@ export const QueryBuilderOption = ({
       <Button
         disabled={noRemove}
         px={5}
-        size="xs"
+        size="sm"
         tooltip={{ label: 'Remove rule' }}
         variant="default"
         onClick={handleDeleteRule}
diff --git a/src/renderer/features/playlists/components/playlist-query-builder.tsx b/src/renderer/features/playlists/components/playlist-query-builder.tsx
index 126aa237..7bde89f2 100644
--- a/src/renderer/features/playlists/components/playlist-query-builder.tsx
+++ b/src/renderer/features/playlists/components/playlist-query-builder.tsx
@@ -1,336 +1,346 @@
 import { useState, useImperativeHandle, forwardRef } from 'react';
-import { uniqueId } from 'lodash';
+import { Flex, Group, ScrollArea } from '@mantine/core';
 import clone from 'lodash/clone';
-import setWith from 'lodash/setWith';
 import get from 'lodash/get';
-import sortBy from 'lodash/sortBy';
+import setWith from 'lodash/setWith';
 import { nanoid } from 'nanoid';
 import { NDSongQueryFields } from '/@/renderer/api/navidrome.types';
-import { AdvancedFilterGroup, AdvancedFilterRule, QueryBuilder } from '/@/renderer/components';
-import { FilterGroupType } from '/@/renderer/types';
+import { Button, DropdownMenu, NumberInput, QueryBuilder } from '/@/renderer/components';
+import {
+  convertNDQueryToQueryGroup,
+  convertQueryGroupToNDQuery,
+} from '/@/renderer/features/playlists/utils';
+import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
+import { RiMore2Fill } from 'react-icons/ri';
 
 type AddArgs = {
   groupIndex: number[];
-  groupValue: string;
   level: number;
 };
 
 type DeleteArgs = {
   groupIndex: number[];
-  groupValue: string;
   level: number;
   uniqueId: string;
 };
 
-const sortQuery = (query: any) => {
-  let b;
+interface PlaylistQueryBuilderProps {
+  onSave: (parsedFilter: any) => void;
+  onSaveAs: (parsedFilter: any) => void;
+  query: any;
+}
 
-  if (query.all) {
-    b = sortBy(query.all, (item) => {
-      const key = Object.keys(item)[0];
-      return key === 'all' || key === 'any' ? 0 : 1;
-    });
-  } else {
-    b = sortBy(query.any, (item) => {
-      const key = Object.keys(item)[0];
-      return key === 'all' || key === 'any' ? 0 : 1;
-    });
-  }
-
-  return { all: b };
-};
-
-const addUniqueId = (query: any) => {
-  const queryCopy = clone(query);
-  const addId = (item: any) => {
-    const key = Object.keys(item)[0];
-    if (key === 'all' || key === 'any') {
-      item[key].forEach(addId);
-    } else {
-      item[key].uniqueId = nanoid();
-    }
-  };
-
-  addId(queryCopy);
-  return queryCopy;
-};
-
-export const PlaylistQueryBuilder = forwardRef(({ query, onChange }: any, ref) => {
-  const [filters, setFilters] = useState<any>(
-    sortQuery(addUniqueId(query)) || {
-      all: [],
-    },
-  );
-
-  console.log('filters :>> ', JSON.stringify(filters));
-
-  useImperativeHandle(ref, () => ({
-    reset() {
-      setFilters({
+export const PlaylistQueryBuilder = forwardRef(
+  ({ query, onSave, onSaveAs }: PlaylistQueryBuilderProps, ref) => {
+    const [filters, setFilters] = useState<any>(
+      convertNDQueryToQueryGroup(query) || {
         all: [],
-      });
-    },
-  }));
-
-  const setFilterHandler = (newFilters: AdvancedFilterGroup) => {
-    setFilters(newFilters);
-    onChange(newFilters);
-  };
-
-  const handleAddRuleGroup = (args: AddArgs) => {
-    const { level, groupIndex, groupValue } = args;
-    const filtersCopy = clone(filters);
-
-    const getPath = (level: number) => {
-      const rootKey = Object.keys(filters)[0];
-      if (level === 0) return rootKey;
-
-      const str = [rootKey];
-      for (const index of groupIndex) {
-        str.push(`[${index}].${groupValue}`);
-      }
-
-      return `${str.join('.')}`;
-    };
-
-    const path = getPath(level);
-    console.log('path', filtersCopy, path);
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      sortQuery([...get(filtersCopy, path), { any: [{ contains: { title: '' } }] }]),
-      clone,
-    );
-
-    setFilterHandler(updatedFilters);
-  };
-
-  const handleDeleteRuleGroup = (args: DeleteArgs) => {
-    const { uniqueId, level, groupIndex, groupValue } = args;
-    const filtersCopy = clone(filters);
-
-    const getPath = (level: number) => {
-      const rootKey = Object.keys(filters)[0];
-      if (level === 0) return rootKey;
-
-      const str = [];
-      for (let i = 0; i < groupIndex.length; i += 1) {
-        if (groupIndex.length === 1) {
-          str.push(rootKey);
-          break;
-        }
-
-        if (i === 0) {
-          str.push(`${rootKey}[${groupIndex[i]}]`);
-        } else if (i !== groupIndex.length - 1) {
-          str.push(`${groupValue}[${groupIndex[i]}]`);
-        } else {
-          str.push(`${groupValue}`);
-        }
-      }
-
-      return `${str.join('.')}`;
-    };
-
-    const path = getPath(level);
-
-    const dataAtPath = get(filtersCopy, path);
-    const lv = groupIndex[level - 1];
-    const removed = [...dataAtPath.slice(0, lv), ...dataAtPath.slice(lv + 1)];
-    const updatedFilters = setWith(filtersCopy, path, sortQuery(removed), clone);
-
-    setFilterHandler(updatedFilters);
-  };
-
-  const getRulePath = (level: number, groupIndex: number[], groupValue: string) => {
-    if (level === 0) return Object.keys(filters)[0];
-
-    const str = [];
-    for (const index of groupIndex) {
-      str.push(`${Object.keys(filters)[0]}[${index}].${groupValue}`);
-    }
-
-    return `${str.join('.')}`;
-  };
-
-  // const getRulePath = (
-  //   level: number,
-  //   groupIndex: number[],
-  //   groupValue: string,
-  //   uniqueId?: string,
-  // ) => {
-  //   const rootKey = Object.keys(filters)[0];
-  //   if (level === 0) return rootKey;
-
-  //   const str = [];
-  //   for (const index of groupIndex) {
-  //     if (uniqueId) {
-  //       str.push(`${rootKey}[${index}].${groupValue}.${uniqueId}`);
-  //     } else {
-  //       str.push(`${rootKey}[${index}].${groupValue}`);
-  //     }
-  //   }
-
-  //   return `${str.join('.')}`;
-  // };
-
-  const handleAddRule = (args: AddArgs) => {
-    const { level, groupValue, groupIndex } = args;
-    const filtersCopy = clone(filters);
-
-    const path = getRulePath(level, groupIndex, groupValue);
-
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      [...get(filtersCopy, path), { contains: { title: '', uniqueId: nanoid() } }],
-      clone,
-    );
-
-    setFilterHandler(updatedFilters);
-  };
-
-  const handleDeleteRule = (args: DeleteArgs) => {
-    const { uniqueId, level, groupIndex, groupValue } = args;
-    const filtersCopy = clone(filters);
-
-    const path = getRulePath(level, groupIndex, groupValue);
-
-    const dataAtPath = get(filtersCopy, path);
-    const lv = groupIndex[level - 1];
-    const removed = [...dataAtPath.slice(0, lv), ...dataAtPath.slice(lv + 1)];
-
-    console.log('removed :>> ', removed);
-
-    const updatedFilters = setWith(filtersCopy, path, removed, clone);
-
-    setFilterHandler(updatedFilters);
-  };
-
-  const handleChangeField = (args: any) => {
-    const { uniqueId, level, groupIndex, value } = args;
-    const filtersCopy = clone(filters);
-
-    const path = getRulePath(level, groupIndex);
-
-    console.log('path', path);
-
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
-        if (rule.uniqueId !== uniqueId) return rule;
-        // const defaultOperator = FILTER_OPTIONS_DATA.find(
-        //   (option) => option.value === value,
-        // )?.default;
-
-        return {
-          ...rule,
-          field: value,
-          // operator: defaultOperator || '',
-          operator: '',
-          value: '',
-        };
-      }),
-      clone,
-    );
-
-    console.log('updatedFilters', updatedFilters);
-
-    // setFilterHandler(updatedFilters);
-  };
-
-  const handleChangeType = (args: any) => {
-    const { level, groupIndex, value } = args;
-
-    const filtersCopy = clone(filters);
-
-    if (level === 0) {
-      return setFilterHandler({ ...filtersCopy, type: value });
-    }
-
-    const getTypePath = () => {
-      const str = [];
-      for (let i = 0; i < groupIndex.length; i += 1) {
-        str.push(`group[${groupIndex[i]}]`);
-      }
-
-      return `${str.join('.')}`;
-    };
-
-    const path = getTypePath();
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      {
-        ...get(filtersCopy, path),
-        type: value,
       },
-      clone,
     );
 
-    return setFilterHandler(updatedFilters);
-  };
+    useImperativeHandle(ref, () => ({
+      reset() {
+        setFilters({
+          all: [],
+        });
+      },
+    }));
 
-  const handleChangeOperator = (args: any) => {
-    const { uniqueId, level, groupIndex, value } = args;
-    const filtersCopy = clone(filters);
+    const setFilterHandler = (newFilters: QueryBuilderGroup) => {
+      setFilters(newFilters);
+      // onSave(newFilters);
+    };
 
-    const path = getRulePath(level, groupIndex);
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
-        if (rule.uniqueId !== uniqueId) return rule;
-        return {
-          ...rule,
-          operator: value,
-        };
-      }),
-      clone,
+    const handleSave = () => {
+      onSave(convertQueryGroupToNDQuery(filters));
+    };
+
+    const handleSaveAs = () => {
+      onSaveAs(convertQueryGroupToNDQuery(filters));
+    };
+
+    const handleAddRuleGroup = (args: AddArgs) => {
+      const { level, groupIndex } = args;
+      const filtersCopy = clone(filters);
+
+      const getPath = (level: number) => {
+        if (level === 0) return 'group';
+
+        const str = [];
+        for (const index of groupIndex) {
+          str.push(`group[${index}]`);
+        }
+
+        return `${str.join('.')}.group`;
+      };
+
+      const path = getPath(level);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        [
+          ...get(filtersCopy, path),
+          {
+            group: [],
+            rules: [
+              {
+                field: '',
+                operator: '',
+                uniqueId: nanoid(),
+                value: '',
+              },
+            ],
+            type: 'any',
+            uniqueId: nanoid(),
+          },
+        ],
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const handleDeleteRuleGroup = (args: DeleteArgs) => {
+      const { uniqueId, level, groupIndex } = args;
+      const filtersCopy = clone(filters);
+
+      const getPath = (level: number) => {
+        if (level === 0) return 'group';
+
+        const str = [];
+        for (let i = 0; i < groupIndex.length; i += 1) {
+          if (i !== groupIndex.length - 1) {
+            str.push(`group[${groupIndex[i]}]`);
+          } else {
+            str.push(`group`);
+          }
+        }
+
+        return `${str.join('.')}`;
+      };
+
+      const path = getPath(level);
+
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        [
+          ...get(filtersCopy, path).filter(
+            (group: QueryBuilderGroup) => group.uniqueId !== uniqueId,
+          ),
+        ],
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const getRulePath = (level: number, groupIndex: number[]) => {
+      if (level === 0) return 'rules';
+
+      const str = [];
+      for (const index of groupIndex) {
+        str.push(`group[${index}]`);
+      }
+
+      return `${str.join('.')}.rules`;
+    };
+
+    const handleAddRule = (args: AddArgs) => {
+      const { level, groupIndex } = args;
+      const filtersCopy = clone(filters);
+
+      const path = getRulePath(level, groupIndex);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        [
+          ...get(filtersCopy, path),
+          {
+            field: 'title',
+            operator: 'contains',
+            uniqueId: nanoid(),
+            value: null,
+          },
+        ],
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const handleDeleteRule = (args: DeleteArgs) => {
+      const { uniqueId, level, groupIndex } = args;
+      const filtersCopy = clone(filters);
+
+      const path = getRulePath(level, groupIndex);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        get(filtersCopy, path).filter((rule: QueryBuilderRule) => rule.uniqueId !== uniqueId),
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const handleChangeField = (args: any) => {
+      const { uniqueId, level, groupIndex, value } = args;
+      const filtersCopy = clone(filters);
+
+      const path = getRulePath(level, groupIndex);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        get(filtersCopy, path).map((rule: QueryBuilderGroup) => {
+          if (rule.uniqueId !== uniqueId) return rule;
+          // const defaultOperator = FILTER_OPTIONS_DATA.find(
+          //   (option) => option.value === value,
+          // )?.default;
+
+          return {
+            ...rule,
+            field: value,
+            operator: '',
+            value: '',
+          };
+        }),
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const handleChangeType = (args: any) => {
+      const { level, groupIndex, value } = args;
+
+      const filtersCopy = clone(filters);
+
+      if (level === 0) {
+        return setFilterHandler({ ...filtersCopy, type: value });
+      }
+
+      const getTypePath = () => {
+        const str = [];
+        for (let i = 0; i < groupIndex.length; i += 1) {
+          str.push(`group[${groupIndex[i]}]`);
+        }
+
+        return `${str.join('.')}`;
+      };
+
+      const path = getTypePath();
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        {
+          ...get(filtersCopy, path),
+          type: value,
+        },
+        clone,
+      );
+
+      return setFilterHandler(updatedFilters);
+    };
+
+    const handleChangeOperator = (args: any) => {
+      const { uniqueId, level, groupIndex, value } = args;
+      const filtersCopy = clone(filters);
+
+      const path = getRulePath(level, groupIndex);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        get(filtersCopy, path).map((rule: QueryBuilderRule) => {
+          if (rule.uniqueId !== uniqueId) return rule;
+          return {
+            ...rule,
+            operator: value,
+          };
+        }),
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    const handleChangeValue = (args: any) => {
+      const { uniqueId, level, groupIndex, value } = args;
+      const filtersCopy = clone(filters);
+
+      const path = getRulePath(level, groupIndex);
+      console.log('path', path);
+      const updatedFilters = setWith(
+        filtersCopy,
+        path,
+        get(filtersCopy, path).map((rule: QueryBuilderRule) => {
+          if (rule.uniqueId !== uniqueId) return rule;
+          return {
+            ...rule,
+            value,
+          };
+        }),
+        clone,
+      );
+
+      setFilterHandler(updatedFilters);
+    };
+
+    return (
+      <Flex
+        direction="column"
+        h="100%"
+        justify="space-between"
+      >
+        <ScrollArea h="100%">
+          <QueryBuilder
+            data={filters}
+            filters={NDSongQueryFields}
+            groupIndex={[]}
+            level={0}
+            uniqueId={filters.uniqueId}
+            onAddRule={handleAddRule}
+            onAddRuleGroup={handleAddRuleGroup}
+            onChangeField={handleChangeField}
+            onChangeOperator={handleChangeOperator}
+            onChangeType={handleChangeType}
+            onChangeValue={handleChangeValue}
+            onDeleteRule={handleDeleteRule}
+            onDeleteRuleGroup={handleDeleteRuleGroup}
+          />
+        </ScrollArea>
+        <Group
+          align="flex-end"
+          p="1rem 1rem 0"
+          position="apart"
+        >
+          <NumberInput
+            label="Limit to"
+            width={75}
+          />
+          <Group>
+            <Button
+              variant="filled"
+              onClick={handleSave}
+            >
+              Save
+            </Button>
+            <DropdownMenu position="bottom-end">
+              <DropdownMenu.Target>
+                <Button
+                  p="0.5em"
+                  variant="default"
+                >
+                  <RiMore2Fill size={15} />
+                </Button>
+              </DropdownMenu.Target>
+              <DropdownMenu.Dropdown>
+                <DropdownMenu.Item onClick={handleSaveAs}>Save as</DropdownMenu.Item>
+              </DropdownMenu.Dropdown>
+            </DropdownMenu>
+          </Group>
+        </Group>
+      </Flex>
     );
-
-    setFilterHandler(updatedFilters);
-  };
-
-  const handleChangeValue = (args: any) => {
-    const { uniqueId, level, groupIndex, value } = args;
-    const filtersCopy = clone(filters);
-
-    const path = getRulePath(level, groupIndex);
-    const updatedFilters = setWith(
-      filtersCopy,
-      path,
-      get(filtersCopy, path).map((rule: AdvancedFilterRule) => {
-        if (rule.uniqueId !== uniqueId) return rule;
-        return {
-          ...rule,
-          value,
-        };
-      }),
-      clone,
-    );
-
-    setFilterHandler(updatedFilters);
-  };
-
-  return (
-    <>
-      <QueryBuilder
-        data={filters}
-        filters={NDSongQueryFields}
-        groupIndex={[]}
-        level={0}
-        uniqueId={filters.uniqueId}
-        onAddRule={handleAddRule}
-        onAddRuleGroup={handleAddRuleGroup}
-        onChangeField={handleChangeField}
-        onChangeOperator={handleChangeOperator}
-        onChangeType={handleChangeType}
-        onChangeValue={handleChangeValue}
-        onDeleteRule={handleDeleteRule}
-        onDeleteRuleGroup={handleDeleteRuleGroup}
-      />
-    </>
-  );
-});
+  },
+);
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 95e9b859..d5b83db4 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
@@ -1,21 +1,116 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
-import { useParams } from 'react-router';
-import { VirtualGridContainer } from '/@/renderer/components';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Stack } from '@mantine/core';
+import { closeAllModals, openModal } from '@mantine/modals';
+import { generatePath, useNavigate, useParams } from 'react-router';
 import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content';
 import { PlaylistDetailSongListHeader } from '../components/playlist-detail-song-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared';
+import { PlaylistQueryBuilder } from '/@/renderer/features/playlists/components/playlist-query-builder';
+import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
+import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
+import { Paper, toast } from '/@/renderer/components';
+import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
 
 const PlaylistDetailSongListRoute = () => {
+  const navigate = useNavigate();
   const tableRef = useRef<AgGridReactType | null>(null);
   const { playlistId } = useParams() as { playlistId: string };
 
+  const detailQuery = usePlaylistDetail({ id: playlistId });
+  const createPlaylistMutation = useCreatePlaylist();
+  const deletePlaylistMutation = useDeletePlaylist();
+
+  const handleSave = (filter: Record<string, any>) => {
+    const rules = {
+      ...filter,
+      order: 'desc',
+      sort: 'year',
+    };
+
+    if (!detailQuery?.data) return;
+
+    createPlaylistMutation.mutate(
+      {
+        body: {
+          comment: detailQuery?.data?.description || '',
+          name: detailQuery?.data?.name,
+          ndParams: {
+            owner: detailQuery?.data?.owner || '',
+            ownerId: detailQuery?.data?.ownerId || '',
+            public: detailQuery?.data?.public || false,
+            rules,
+            sync: detailQuery?.data?.sync || false,
+          },
+        },
+      },
+      {
+        onSuccess: (data) => {
+          toast.success({ message: 'Smart playlist saved' });
+          navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }), {
+            replace: true,
+          });
+          deletePlaylistMutation.mutate({ query: { id: playlistId } });
+        },
+      },
+    );
+  };
+
+  const handleSaveAs = (filter: Record<string, any>) => {
+    openModal({
+      children: (
+        <SaveAsPlaylistForm
+          body={{
+            comment: detailQuery?.data?.description || '',
+            name: detailQuery?.data?.name,
+            ndParams: {
+              owner: detailQuery?.data?.owner || '',
+              ownerId: detailQuery?.data?.ownerId || '',
+              public: detailQuery?.data?.public || false,
+              rules: {
+                ...filter,
+                order: 'desc',
+                sort: 'year',
+              },
+              sync: detailQuery?.data?.sync || false,
+            },
+          }}
+          onCancel={closeAllModals}
+          onSuccess={(data) =>
+            navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }))
+          }
+        />
+      ),
+      title: 'Save as',
+    });
+  };
+
   return (
     <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
-      <VirtualGridContainer>
+      <Stack
+        h="100%"
+        spacing={0}
+      >
         <PlaylistDetailSongListHeader tableRef={tableRef} />
+        <Paper
+          sx={{
+            maxHeight: '35vh',
+            padding: '1rem',
+          }}
+          w="100%"
+        >
+          {!detailQuery?.isLoading && (
+            <PlaylistQueryBuilder
+              query={detailQuery?.data?.rules || { all: [] }}
+              onSave={handleSave}
+              onSaveAs={handleSaveAs}
+            />
+          )}
+        </Paper>
         <PlaylistDetailSongListContent tableRef={tableRef} />
-      </VirtualGridContainer>
+      </Stack>
     </AnimatedPage>
   );
 };
diff --git a/src/renderer/features/playlists/utils.ts b/src/renderer/features/playlists/utils.ts
new file mode 100644
index 00000000..7760f311
--- /dev/null
+++ b/src/renderer/features/playlists/utils.ts
@@ -0,0 +1,109 @@
+import { nanoid } from 'nanoid/non-secure';
+import { QueryBuilderGroup } from '/@/renderer/types';
+
+export const parseQueryBuilderChildren = (groups: QueryBuilderGroup[], data: any[]) => {
+  if (groups.length === 0) {
+    return data;
+  }
+
+  const filterGroups: any[] = [];
+
+  for (const group of groups) {
+    const rootType = group.type;
+    const query: any = {
+      [rootType]: [],
+    };
+
+    for (const rule of group.rules) {
+      if (rule.field && rule.operator) {
+        const [table, field] = rule.field.split('.');
+        const operator = rule.operator;
+        const value = field !== 'releaseDate' ? rule.value : new Date(rule.value);
+
+        switch (table) {
+          default:
+            query[rootType].push({
+              [operator]: {
+                [table]: value,
+              },
+            });
+            break;
+        }
+      }
+    }
+
+    if (group.group.length > 0) {
+      const b = parseQueryBuilderChildren(group.group, data);
+      b.forEach((c) => query[rootType].push(c));
+    }
+
+    data.push(query);
+    filterGroups.push(query);
+  }
+
+  return filterGroups;
+};
+
+// Convert QueryBuilderGroup to default query
+export const convertQueryGroupToNDQuery = (filter: QueryBuilderGroup) => {
+  const rootQueryType = filter.type;
+  const rootQuery = {
+    [rootQueryType]: [] as any[],
+  };
+
+  for (const rule of filter.rules) {
+    if (rule.field && rule.operator) {
+      const [table] = rule.field.split('.');
+      const operator = rule.operator;
+      const value = rule.value;
+
+      switch (table) {
+        default:
+          rootQuery[rootQueryType].push({
+            [operator]: {
+              [table]: value,
+            },
+          });
+          break;
+      }
+    }
+  }
+
+  const groups = parseQueryBuilderChildren(filter.group, []);
+  for (const group of groups) {
+    rootQuery[rootQueryType].push(group);
+  }
+
+  return rootQuery;
+};
+
+// Convert default query to QueryBuilderGroup
+export const convertNDQueryToQueryGroup = (query: Record<string, any>) => {
+  const rootType = Object.keys(query)[0];
+  const rootGroup: QueryBuilderGroup = {
+    group: [],
+    rules: [],
+    type: rootType as 'any' | 'all',
+    uniqueId: nanoid(),
+  };
+
+  for (const rule of query[rootType]) {
+    if (rule.any || rule.all) {
+      const group = convertNDQueryToQueryGroup(rule);
+      rootGroup.group.push(group);
+    } else {
+      const operator = Object.keys(rule)[0];
+      const field = Object.keys(rule[operator])[0];
+      const value = rule[operator][field];
+
+      rootGroup.rules.push({
+        field,
+        operator,
+        uniqueId: nanoid(),
+        value,
+      });
+    }
+  }
+
+  return rootGroup;
+};