move tabs to folders

packages/app/src/pages/account/index.jsx

@@ -9,6 +9,7 @@ import { SessionModel, UserModel, FollowsModel } from "models"
 
 import DetailsTab from "./tabs/details"
 import PostsTab from "./tabs/posts"
+import MusicTab from "./tabs/music"
 import FollowersTab from "./tabs/followers"
 
 import "./index.less"
@@ -17,7 +18,7 @@ const TabsComponent = {
 	"posts": PostsTab,
 	"followers": FollowersTab,
 	"details": DetailsTab,
-	"music": DetailsTab,
+	"music": MusicTab,
 }
 
 const TabRender = React.memo((props, ref) => {
@@ -200,7 +201,7 @@ export default class Account extends React.Component {
 		}
 
 		if (!user) {
-			return <Skeleton />
+			return <antd.Skeleton active />
 		}
 
 		return <div

packages/app/src/pages/account/index.less

@@ -12,10 +12,16 @@
 
 	&.noCover {
 		.panels {
+			padding-top: 0;
+
 			.leftPanel {
 				transform: translate(0, 0) !important;
 			}
 		}
+
+		.userCard {
+			filter: none;
+		}
 	}
 
 	&.topHidden {
@@ -117,6 +123,8 @@
 
 				transition: all 0.3s ease-in-out;
 
+				border: 1px solid var(--border-color);
+
 				.followButton {
 					width: fit-content;
 				}
@@ -151,7 +159,7 @@
 			justify-self: center;
 
 			.ant-menu-item-selected {
-				background-color: var(--background-color-primary)!important;
+				background-color: var(--background-color-primary) !important;
 			}
 		}
 	}
@@ -198,7 +206,6 @@
 					width: fit-content;
 
 					.ant-menu-item {
-
 						width: fit-content;
 
 						.ant-menu-title-content {

packages/app/src/pages/account/tabs/details/index.jsx

@@ -7,7 +7,7 @@ import { UserBadges } from "components"
 
 import { Icons } from "components/Icons"
 
-import "./details.less"
+import "./index.less"
 
 function getJoinLabel(jsDate) {
     const date = DateTime.fromJSDate(new Date(jsDate))

packages/app/src/pages/account/tabs/followers/index.jsx

@@ -2,7 +2,7 @@ import React from "react"
 
 import { FollowersList } from "components"
 
-import "./followers.less"
+import "./index.less"
 
 export default React.memo((props) => {
     return <FollowersList

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

@@ -0,0 +1,55 @@
+import React from "react"
+import * as antd from "antd"
+import classnames from "classnames"
+
+import PlaylistItem from "components/Music/PlaylistItem"
+
+import MusicModel from "models/music"
+
+import "./index.less"
+
+export default (props) => {
+    const user_id = props.state.user._id
+
+    const [L_Releases, R_Releases, E_Releases, M_Releases] = app.cores.api.useRequest(MusicModel.getReleases, {
+        user_id: user_id,
+    })
+
+    if (E_Releases) {
+        return <antd.Result
+            status="warning"
+            title="Failed to retrieve releases"
+            subTitle={E_Releases}
+        />
+    }
+
+    if (L_Releases) {
+        return <antd.Skeleton active />
+    }
+
+    const isEmpty = R_Releases.items.length === 0
+
+    return <div
+        className={classnames(
+            "profile_releases",
+            {
+                ["empty"]: isEmpty
+            }
+        )}
+    >
+        {
+            isEmpty && <antd.Result
+                status="warning"
+                title="This user has no releases yet."
+            />
+        }
+        {
+            R_Releases.items.map((r) => {
+                return <PlaylistItem
+                    key={r._id}
+                    playlist={r}
+                />
+            })
+        }
+    </div>
+}

packages/app/src/pages/account/tabs/music/index.less

@@ -0,0 +1,31 @@
+.profile_releases {
+    display: grid;
+
+    width: 100%;
+
+    grid-auto-columns: auto;
+
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+
+    @media (min-width: 2000px) {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    @media (min-width: 2300px) {
+        grid-template-columns: repeat(5, 1fr);
+    }
+
+    .playlistItem {
+        justify-self: center;
+    }
+
+    &.empty {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+    }
+}