added sync settings

packages/app/constants/settings/sync/components/spotifySync/index.jsx

@@ -0,0 +1,62 @@
+import React from "react"
+
+import { Button, Spin, Avatar, Modal } from "antd"
+import { Icons } from "components/Icons"
+
+import SyncModel from "models/sync"
+
+import "./index.less"
+
+export default (props) => {
+    const onLogout = async () => {
+        Modal.confirm({
+            title: "Are you sure you want to logout?",
+            content: "You will be logged out of your Spotify account",
+            okText: "Logout",
+            okType: "danger",
+            cancelText: "Cancel",
+            onOk: async () => {
+                await SyncModel.spotifyCore.unlinkAccount()
+                    .then(() => {
+                        app.message.success("Successfully logged out of Spotify")
+                    })
+                    .catch((err) => {
+                        console.error(err)
+                        app.message.error("Failed to logout of Spotify")
+                    })
+            }
+        })
+    }
+
+    if (props.ctx.spotifyAccount) {
+        return <div className="spotifyAccount">
+            <div className="spotifyAccount_info">
+                <img
+                    src={props.ctx.spotifyAccount.images[0].url}
+                    alt="Spotify account avatar"
+                />
+                <p>
+                    {
+                        props.ctx.spotifyAccount.display_name
+                    }
+                </p>
+            </div>
+
+            <div className="spotifyAccount_actions">
+                <Button
+                    onClick={onLogout}
+                    icon={<Icons.LogoutOutlined />}
+                >
+                    Logout
+                </Button>
+            </div>
+        </div>
+    }
+
+    return <Button
+        type="primary"
+        onClick={SyncModel.spotifyCore.authorizeAccount}
+    >
+        Sync account
+    </Button>
+}

packages/app/constants/settings/sync/components/spotifySync/index.less

@@ -0,0 +1,52 @@
+.spotifyAccount {
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+    justify-content: space-between;
+
+    background-color: var(--background-color-primary);
+
+    padding: 10px;
+
+    border-radius: 12px;
+
+    .spotifyAccount_info {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+
+        img {
+            width: 40px;
+            height: 40px;
+
+            object-fit: cover;
+
+            border-radius: 12px;
+
+            margin-right: 10px;
+        }
+
+        p {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 1.5;
+            margin: 0;
+        }
+    }
+
+    .spotifyAccount_actions {
+        display: flex;
+
+        align-items: center;
+
+        .ant-btn {
+            margin-left: 10px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+}

packages/app/constants/settings/sync/index.jsx

@@ -0,0 +1,94 @@
+import React from "react"
+import loadable from "@loadable/component"
+import SyncModel from "models/sync"
+
+// TODO: Make logout button require a valid session to be not disabled
+
+export default {
+    icon: "MdSync",
+    label: "Sync",
+    ctxData: async () => {
+        const spotifyAccount = await SyncModel.spotifyCore.getData().catch((err) => {
+            return null
+        })
+
+        return {
+            spotifyAccount
+        }
+    },
+    settings: [
+        {
+            id: "sync_settings",
+            icon: "MdSync",
+            title: "Sync Settings",
+            description: "Sync your settings across all devices stored in the cloud",
+            group: "sync.settings",
+            component: "Switch"
+        },
+        {
+            id: "spotify",
+            icon: "SiSpotify",
+            title: "Spotify",
+            description: "Sync your Spotify account to get access to Spaces, playlists and more",
+            group: "sync.accounts",
+            component: loadable(() => import("./components/spotifySync")),
+            storaged: false
+        },
+        {
+            id: "soundcloud",
+            icon: "SiSoundcloud",
+            title: "SoundCloud",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "youtube",
+            icon: "SiYoutube",
+            title: "YouTube",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "twitch",
+            icon: "SiTwitch",
+            title: "Twitch",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "twitter",
+            icon: "SiTwitter",
+            title: "Twitter",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "instagram",
+            icon: "SiInstagram",
+            title: "Instagram",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "mixcloud",
+            icon: "SiMixcloud",
+            title: "Mixcloud",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        },
+        {
+            id: "discord",
+            icon: "SiDiscord",
+            title: "Discord",
+            group: "sync.accounts",
+            component: () => <p>Not implemented</p>,
+            storaged: false
+        }
+    ]
+}