implement feed page

packages/app/src/pages/music/components/feed/index.jsx

@@ -0,0 +1,107 @@
+import React from "react"
+import * as antd from "antd"
+import { ImageViewer } from "components"
+import { Icons } from "components/Icons"
+
+import FeedModel from "models/feed"
+
+import "./index.less"
+
+const PlaylistItem = (props) => {
+    const { playlist } = props
+
+    const onClick = () => {
+        if (typeof props.onClick === "function") {
+            return props.onClick(playlist)
+        }
+
+        return app.setLocation(`/play/${playlist._id}`)
+    }
+
+    return <div
+        id={playlist._id}
+        key={props.key}
+        className="playlistItem"
+        onClick={onClick}
+    >
+        <div className="playlistItem_cover">
+            <ImageViewer src={playlist.cover ?? "/assets/no_song.png"} />
+        </div>
+        <div className="playlistItem_info">
+            <div className="playlistItem_info_title">
+                {playlist.title}
+            </div>
+            <div className="playlistItem_info_author">
+                {playlist.user.username}
+            </div>
+        </div>
+    </div>
+}
+
+export default () => {
+    const [loading, setLoading] = React.useState(true)
+    const [list, setList] = React.useState([])
+
+    const loadData = async () => {
+        setLoading(true)
+
+        const response = await FeedModel.getPlaylistsFeed({
+            limit: 10,
+            trim: 0,
+        }).catch((err) => {
+            console.error(err)
+            app.message.error("Failed to load playlists")
+            return null
+        })
+
+        setLoading(false)
+
+        console.log(response)
+
+        if (response) {
+            setList(response)
+        }
+    }
+
+    React.useEffect(() => {
+        loadData()
+    }, [])
+
+    if (loading) {
+        return <antd.Skeleton active />
+    }
+
+    return <div className="playlistExplorer">
+        <div className="playlistExplorer_section">
+            <div className="playlistExplorer_section_header">
+                <h1><Icons.Compass /> Releases from your artist</h1>
+            </div>
+            <div className="playlistExplorer_section_list">
+                {
+                    list.map((playlist, index) => {
+                        return <PlaylistItem
+                            key={index}
+                            playlist={playlist}
+                        />
+                    })
+                }
+            </div>
+        </div>
+
+        <div className="playlistExplorer_section">
+            <div className="playlistExplorer_section_header">
+                <h1><Icons.MdOutlineTrendingUp /> Discover new trends</h1>
+            </div>
+            <div className="playlistExplorer_section_list">
+                {
+                    list.map((playlist, index) => {
+                        return <PlaylistItem
+                            key={index}
+                            playlist={playlist}
+                        />
+                    })
+                }
+            </div>
+        </div>
+    </div>
+}

packages/app/src/pages/music/components/feed/index.less

@@ -0,0 +1,107 @@
+.playlistExplorer {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+
+    max-width: 70vw;
+
+    overflow: hidden;
+
+    .playlistExplorer_section {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 50px;
+
+        .playlistExplorer_section_header {
+            h1 {
+                font-size: 1.5rem;
+            }
+        }
+
+        .playlistExplorer_section_list {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+
+            align-items: center;
+
+            overflow-x: scroll;
+
+            padding: 10px 0;
+
+            >.playlistItem {
+                margin-right: 20px;
+            }
+        }
+    }
+}
+
+.playlistItem {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    cursor: pointer;
+
+    width: 200px;
+    min-width: 200px;
+
+    border-radius: 12px;
+
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        transform: translate(0, -5px);
+        outline: 2px solid var(--background-color-accent);
+    }
+
+    background-color: var(--background-color-accent);
+    border-radius: 8px;
+
+    .playlistItem_cover {
+        width: 100%;
+        height: 100%;
+
+        transition: all 0.2s ease-in-out;
+
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+    }
+
+    .playlistItem_info {
+        width: 100%;
+
+        padding: 10px;
+
+        transition: all 0.2s ease-in-out;
+
+        .playlistItem_info_title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--background-color-contrast);
+            font-family: "Space Grotesk", sans-serif;
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .playlistItem_info_author {
+            font-size: 1rem;
+            font-weight: 400;
+            color: var(--text-color);
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}

packages/app/src/pages/music/components/playlists/index.jsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-export default () => {
-    return <div className="playlistExplorer">
-
-    </div>
-}

packages/app/src/pages/music/tabs.jsx

@@ -1,11 +1,21 @@
-import PlaylistsTabs from "./components/playlists"
+import FeedTab from "./components/feed"
 import SpacesTabs from "./components/spaces"
 
 export default {
-    "playlists": {
+    "feed": {
-        title: "Playlists",
+        title: "Feed",
+        icon: "Compass",
+        component: FeedTab
+    },
+    "library": {
+        title: "Library",
         icon: "MdLibraryMusic",
-        component: PlaylistsTabs
+        component: FeedTab
+    },
+    "dashboard": {
+        title: "Dashboard",
+        icon: "MdOutlineDashboard",
+        component: FeedTab
     },
     "spaces": {
         title: "Spaces",