add list filter collections

src/shared/components/icon/icon.tsx

@@ -75,6 +75,7 @@ import {
     LuMoon,
     LuMusic,
     LuMusic2,
+    LuPackage2,
     LuPanelRightClose,
     LuPanelRightOpen,
     LuPause,
@@ -152,6 +153,7 @@ export const AppIcon = {
     cache: LuCloudDownload,
     check: LuCheck,
     clipboardCopy: LuClipboardCopy,
+    collection: LuPackage2,
     delete: LuDelete,
     disc: LuDisc,
     download: LuDownload,

src/shared/components/modal/modal.module.css

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
     margin-bottom: var(--theme-spacing-md);
-    background: var(--theme-colors-background);
+    background: none;
     border-radius: 0;
 }
 
@@ -14,14 +14,16 @@
 }
 
 .content {
-    padding: var(--theme-spacing-md);
+    padding: var(--theme-spacing-sm);
     overflow: hidden;
     background: var(--theme-colors-background);
     border: 2px solid var(--theme-colors-border);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
+    filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
 }
 
 .close {
     position: absolute;
-    top: var(--theme-spacing-md);
     right: var(--theme-spacing-md);
 }

src/shared/components/modal/modal.tsx

@@ -54,7 +54,7 @@ export const Modal = ({ children, classNames, handlers, ...rest }: ModalProps) =
                 backgroundOpacity: 0.5,
                 blur: 1,
             }}
-            radius="xl"
+            radius="md"
             scrollAreaComponent={ScrollArea}
             transitionProps={{
                 duration: 300,

src/shared/components/popover/popover.module.css

@@ -1,8 +1,9 @@
 .dropdown {
-    padding: var(--theme-spacing-lg);
+    padding: var(--theme-spacing-sm);
     color: var(--theme-colors-foreground);
     background: var(--theme-colors-background);
-    border: 1px solid var(--theme-colors-border);
-    border-radius: var(--theme-radius-xl);
+    border: 2px solid var(--theme-colors-border);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
     filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
 }

src/shared/components/popover/popover.tsx

@@ -36,6 +36,8 @@ export const Popover = ({ children, ...props }: PopoverProps) => {
             classNames={{
                 dropdown: styles.dropdown,
             }}
+            closeOnClickOutside={true}
+            closeOnEscape={true}
             offset={10}
             transitionProps={{ transition: getTransition(props.position) }}
             withArrow={false}

src/shared/types/domain-types.ts

@@ -76,6 +76,13 @@ export type QueueSong = Song & {
     _uniqueId: string;
 };
 
+export interface SavedCollection {
+    filterQueryString: string;
+    id: string;
+    name: string;
+    type: LibraryItem.ALBUM | LibraryItem.SONG;
+}
+
 export type ServerListItem = {
     features?: ServerFeatures;
     id: string;