add date picker operators to smart playlist

src/shared/api/navidrome/navidrome-types.ts

@@ -192,6 +192,9 @@ export const NDSongQueryDateOperators = [
     { label: 'is in the last', value: 'inTheLast' },
     { label: 'is not in the last', value: 'notInTheLast' },
     { label: 'is in the range', value: 'inTheRange' },
+    { label: 'is before (date)', value: 'beforeDate' },
+    { label: 'is after (date)', value: 'afterDate' },
+    { label: 'is in the range (date)', value: 'inTheRangeDate' },
 ];
 
 export const NDSongQueryStringOperators = [

src/shared/components/date-picker/date-picker.tsx

@@ -1,6 +1,12 @@
-import type { DateInputProps as MantineDateInputProps } from '@mantine/dates';
+import type {
+    DateInputProps as MantineDateInputProps,
+    DateTimePickerProps as MantineDateTimeInputProps,
+} from '@mantine/dates';
 
-import { DateInput as MantineDateInput } from '@mantine/dates';
+import {
+    DateInput as MantineDateInput,
+    DateTimePicker as MantineDateTimeInput,
+} from '@mantine/dates';
 
 import styles from './date-picker.module.css';
 
@@ -33,3 +39,33 @@ export const DateInput = ({
         />
     );
 };
+
+interface DateTimeInputProps extends MantineDateTimeInputProps {
+    maxWidth?: number | string;
+    width?: number | string;
+}
+
+export const DateTimeInput = ({
+    classNames,
+    maxWidth,
+    size = 'sm',
+    style,
+    width,
+    ...props
+}: DateTimeInputProps) => {
+    return (
+        <MantineDateTimeInput
+            classNames={{
+                input: styles.input,
+                label: styles.label,
+                required: styles.required,
+                root: styles.root,
+                section: styles.section,
+                ...classNames,
+            }}
+            size={size}
+            style={{ maxWidth, width, ...style }}
+            {...props}
+        />
+    );
+};