use searcher

packages/app/src/pages/music/components/dashboard/releases/index.jsx

@@ -3,10 +3,12 @@ import * as antd from "antd"
 
 import { Icons } from "components/Icons"
 import { ImageViewer } from "components"
+import Searcher from "components/Searcher"
 
 import PlaylistCreator from "../../../creator"
 
 import PlaylistsModel from "models/playlists"
+
 import "./index.less"
 
 const ReleaseItem = (props) => {
@@ -59,33 +61,34 @@ const ReleaseItem = (props) => {
     </div>
 }
 
+const openPlaylistCreator = (playlist_id) => {
+    console.log("Opening playlist creator", playlist_id)
+
+    app.DrawerController.open("playlist_creator", PlaylistCreator, {
+        type: "drawer",
+        props: {
+            title: <h2
+                style={{
+                    margin: 0,
+                }}
+            >
+                <Icons.MdOutlineQueueMusic />
+                Creator
+            </h2>,
+            width: "fit-content",
+        },
+        componentProps: {
+            playlist_id: playlist_id,
+        }
+    })
+}
+
+const navigateToPlaylist = (playlist_id) => {
+    return app.setLocation(`/play/${playlist_id}`)
+}
+
 export default (props) => {
-    const openPlaylistCreator = (playlist_id) => {
+    const [searchResults, setSearchResults] = React.useState(null)
-        console.log("Opening playlist creator", playlist_id)
-
-        app.DrawerController.open("playlist_creator", PlaylistCreator, {
-            type: "drawer",
-            props: {
-                title: <h2
-                    style={{
-                        margin: 0,
-                    }}
-                >
-                    <Icons.MdOutlineQueueMusic />
-                    Creator
-                </h2>,
-                width: "fit-content",
-            },
-            componentProps: {
-                playlist_id: playlist_id,
-            }
-        })
-    }
-
-    const navigateToPlaylist = (playlist_id) => {
-        return app.setLocation(`/play/${playlist_id}`)
-    }
-
     const [L_Releases, R_Releases, E_Releases] = app.cores.api.useRequest(PlaylistsModel.getMyReleases)
 
     if (E_Releases) {
@@ -122,9 +125,34 @@ export default (props) => {
             </div>
         </div>
 
+        <Searcher
+            small
+            renderResults={false}
+            model={PlaylistsModel.getMyReleases}
+            onSearchResult={setSearchResults}
+            onEmpty={() => setSearchResults(null)}
+        />
+
         <div className="music_panel_releases_list">
             {
-                R_Releases.map((release) => {
+                searchResults && searchResults.length === 0 && <antd.Result
+                    status="info"
+                    title="No results"
+                    subTitle="We are sorry, but we could not find any results for your search."
+                />
+            }
+            {
+                searchResults && searchResults.length > 0 && searchResults.map((release) => {
+                    return <ReleaseItem
+                        key={release._id}
+                        release={release}
+                        onClickEditTrack={() => openPlaylistCreator(release._id)}
+                        onClickNavigate={() => navigateToPlaylist(release._id)}
+                    />
+                })
+            }
+            {
+                !searchResults && R_Releases.map((release) => {
                     return <ReleaseItem
                         key={release._id}
                         release={release}

packages/app/src/pages/music/components/dashboard/releases/index.less

@@ -4,6 +4,8 @@
 
     width: 100%;
 
+    gap: 20px;
+
     .music_panel_releases_header {
         display: flex;
         flex-direction: row;
@@ -13,6 +15,10 @@
 
         width: 100%;
 
+        h1 {
+            margin: 0;
+        }
+
         .music_panel_releases_header_actions {
             display: flex;
             flex-direction: row;
@@ -36,6 +42,8 @@
 
         width: 100%;
 
+        padding-bottom: 20px;
+
         .music_panel_releases_item {
             display: flex;
             flex-direction: row;
@@ -106,4 +114,63 @@
             }
         }
     }
+}
+
+.music-explorer_search_results {
+    display: grid;
+
+    // if only need 1 column, it will be 1fr
+    // if need 2 colums, first column will be 1fr, and the second one will be 2fr
+    grid-template-columns: 1fr 2fr;
+
+    // auto generate rows
+    grid-template-rows: auto;
+
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+
+    &.one_column {
+        grid-template-columns: 1fr;
+    }
+
+    &.no_results {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+    }
+
+    .music-explorer_search_results_group {
+        background-color: var(--background-color-accent);
+
+        padding: 20px;
+
+        border-radius: 8px;
+
+        height: fit-content;
+
+        gap: 20px;
+
+        .explorer_search_results_group_header {
+            h1 {
+                margin: 0;
+            }
+        }
+
+        .music-explorer_search_results_group_list {
+            display: flex;
+            flex-direction: column;
+
+            gap: 10px;
+
+            .playlistItem {
+                background-color: var(--background-color-primary);
+            }
+
+            .music-track {
+                background-color: var(--background-color-primary);
+            }
+        }
+    }
 }