From 6bd12624b8871820071a565e3fef7ce6605de372 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Mon, 19 Jan 2026 23:40:50 +0300
Subject: [PATCH] Add desktop links wooo!!! (beta smh)

---
 index.html                    | 100 ++++++++++++++++++++++++++--------
 js/accounts/pocketbase.js     |  98 ++++++++++++++++++++++++++-------
 public/assets/installdesk.svg |   1 +
 styles.css                    |  10 ++++
 4 files changed, 165 insertions(+), 44 deletions(-)
 create mode 100644 public/assets/installdesk.svg

diff --git a/index.html b/index.html
index 89ac992..7a8b0a0 100644
--- a/index.html
+++ b/index.html
@@ -381,7 +381,7 @@
 
         <div class="app-container">
             <aside class="sidebar">
-                <div>
+                <div class="sidebar-content">
                     <div class="sidebar-logo">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -397,7 +397,7 @@
                         </svg>
                         <span>Monochrome</span>
                     </div>
-                    <nav class="sidebar-nav">
+                    <nav class="sidebar-nav main">
                         <ul>
                             <li class="nav-item">
                                 <a href="#home">
@@ -483,27 +483,6 @@
                                     <span>Settings</span>
                                 </a>
                             </li>
-                            <li class="nav-item">
-                                <a href="#about">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="lucide lucide-info-icon lucide-info"
-                                    >
-                                        <circle cx="12" cy="12" r="10" />
-                                        <path d="M12 16v-4" />
-                                        <path d="M12 8h.01" />
-                                    </svg>
-                                    <span>About</span>
-                                </a>
-                            </li>
                             <li class="nav-item">
                                 <a href="#account">
                                     <svg
@@ -536,6 +515,47 @@
                                     <span>Account</span>
                                 </a>
                             </li>
+                        </ul>
+                    </nav>
+                    <nav class="sidebar-nav">
+                        <ul>
+                            <li class="nav-item">
+                                <a href="#about">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        class="lucide lucide-info-icon lucide-info"
+                                    >
+                                        <circle cx="12" cy="12" r="10" />
+                                        <path d="M12 16v-4" />
+                                        <path d="M12 8h.01" />
+                                    </svg>
+                                    <span>About</span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#download">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        height="24"
+                                        viewBox="0 -960 960 960"
+                                        width="24"
+                                        fill="currentColor"
+                                    >
+                                        <path
+                                            d="M320-120v-80H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h320v80H160v480h640v-120h80v120q0 33-23.5 56.5T800-200H640v80H320Zm360-280L480-600l56-56 104 103v-287h80v287l104-103 56 56-200 200Z"
+                                        />
+                                    </svg>
+                                    <span>Download</span>
+                                </a>
+                            </li>
                             <li class="nav-item">
                                 <a href="https://monochrome.samidy.com/discord" target="_blank">
                                     <svg
@@ -1784,6 +1804,40 @@
                         </div>
                     </div>
                 </div>
+                <div id="page-download" class="page">
+                    <h2 class="section-title" style="text-align: center">Monochrome Official App</h2>
+                    <div class="download-content">
+                        <p style="text-align: center" class="account-description">
+                            Install the Monochrome Desktop App For a Refined & Improved Music Listening Experience.
+                        </p>
+                        <br><br>
+
+                        <div class="download-buttons-icons">
+                        <div class="download-buttons-icons-windows" style="display: flex; justify-content: center;">
+                            <svg width="96px" height="96px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>windows [#FFF174]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7439.000000)" fill="#FFF"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179" id="windows-[#FFF174]"> </path> </g> </g> </g> </g></svg>
+                        </div>
+                        <br>
+                        <div style="display: flex; justify-content: center;">
+                            <a id="download-windows-btn" class="btn-secondary" href="https://downloads.samidy.com/Monochrome-Windows.exe">Download Windows Version</a>
+                        </div>
+                        <br>
+                        <div class="download-buttons-icons-linux" style="display: flex; justify-content: center;">
+                            <svg width="96px" height="96px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#FFF" d="M8.294 1c-.09 0-.184.005-.28.012-2.465.194-1.811 2.804-1.85 3.674-.043.637-.174 1.14-.612 1.762-.516.613-1.24 1.604-1.584 2.637-.162.485-.24.982-.167 1.452a.247.247 0 00-.064.079c-.152.156-.263.35-.387.49-.116.115-.283.155-.465.232-.183.08-.384.157-.504.397a.78.78 0 00-.077.351c0 .116.016.234.032.313.034.233.068.425.023.566-.145.396-.163.668-.062.865.102.195.313.275.549.351.472.117 1.114.079 1.618.35.54.272 1.088.39 1.526.274.307-.067.566-.27.705-.552.342-.001.717-.157 1.318-.194.408-.034.918.155 1.503.116.015.078.037.116.067.194l.001.002c.229.454.65.66 1.1.625.45-.035.928-.313 1.316-.762.368-.446.982-.632 1.387-.877.203-.116.367-.273.379-.497.013-.234-.117-.473-.417-.803v-.056l-.002-.002c-.099-.117-.145-.312-.197-.54-.05-.234-.106-.459-.287-.61h-.001c-.035-.032-.072-.04-.11-.08a.208.208 0 00-.11-.037c.25-.745.153-1.487-.102-2.154-.31-.823-.854-1.54-1.269-2.032-.464-.587-.919-1.142-.91-1.965.016-1.255.138-3.578-2.067-3.581zm.309 1.986h.007c.125 0 .231.036.34.116a.89.89 0 01.256.31c.062.152.093.268.097.423 0-.012.004-.023.004-.035v.061a.05.05 0 01-.003-.012l-.002-.014c-.001.142-.03.282-.087.412a.556.556 0 01-.125.195.415.415 0 00-.051-.024c-.06-.027-.115-.038-.166-.078a.765.765 0 00-.128-.038c.03-.035.085-.078.107-.116a.69.69 0 00.051-.234V3.94a.706.706 0 00-.035-.233c-.027-.079-.06-.117-.107-.195-.05-.038-.098-.077-.156-.077h-.01c-.054 0-.102.018-.152.077a.467.467 0 00-.12.195.688.688 0 00-.052.234v.01c0 .053.004.105.011.156-.112-.039-.255-.078-.354-.117a.954.954 0 01-.01-.117V3.86a1.034 1.034 0 01.087-.448.63.63 0 01.251-.31.575.575 0 01.347-.117zm-1.728.035h.02c.084 0 .158.028.234.078a.806.806 0 01.2.272c.053.116.082.233.09.389v.002a.856.856 0 01-.002.155v.047l-.048.014c-.089.032-.16.079-.23.117a.633.633 0 00.002-.156V3.93c-.007-.078-.023-.117-.047-.194a.358.358 0 00-.097-.156.145.145 0 00-.107-.037h-.012c-.042.003-.076.023-.109.077a.322.322 0 00-.07.157.55.55 0 00-.013.193v.008c.007.08.021.117.047.195a.363.363 0 00.096.157c.006.005.012.01.02.014-.04.033-.068.04-.102.079a.177.177 0 01-.077.04 1.53 1.53 0 01-.16-.235 1.034 1.034 0 01-.09-.389c-.01-.132.005-.264.046-.39a.834.834 0 01.165-.312c.075-.077.152-.116.244-.116zm.799.995c.194 0 .428.038.71.233.17.116.304.157.613.273h.002c.149.079.236.155.279.232v-.076a.333.333 0 01.009.274c-.072.18-.301.375-.62.491v.001c-.156.08-.292.195-.452.272-.161.078-.343.17-.59.155a.664.664 0 01-.262-.039 2.077 2.077 0 01-.188-.115c-.113-.079-.211-.194-.357-.271v-.003h-.003c-.233-.144-.359-.299-.4-.414-.04-.157-.003-.275.113-.35.13-.08.221-.159.282-.197.06-.043.083-.059.102-.076h.001v-.002c.099-.117.255-.274.49-.35.08-.021.171-.038.272-.038h-.001zm1.633 1.25c.21.826.698 2.026 1.012 2.609.167.311.5.967.643 1.764.091-.003.193.01.3.037.376-.975-.319-2.022-.636-2.314-.128-.116-.135-.195-.071-.195.344.312.796.917.96 1.608.075.312.093.644.012.974.039.017.079.035.12.04.601.311.824.547.717.896v-.025c-.035-.002-.07 0-.105 0h-.01c.089-.272-.106-.481-.62-.714-.534-.233-.96-.196-1.033.271-.005.025-.008.039-.01.079-.04.013-.082.03-.123.037-.25.157-.386.39-.462.693-.076.31-.1.674-.12 1.09v.002c-.011.195-.099.489-.186.787-.875.626-2.088.897-3.12.195a1.543 1.543 0 00-.234-.31.846.846 0 00-.16-.195.963.963 0 00.27-.04.359.359 0 00.184-.194c.063-.156 0-.407-.201-.678-.201-.273-.543-.58-1.043-.888-.368-.233-.575-.507-.671-.814-.096-.312-.083-.633-.009-.96.143-.624.51-1.23.743-1.611.063-.038.022.078-.238.568-.23.438-.665 1.456-.07 2.248.022-.578.15-1.146.377-1.678.329-.745 1.016-2.044 1.07-3.073.029.021.127.08.17.118.126.078.22.194.343.271a.694.694 0 00.511.196l.065.003c.24 0 .425-.078.581-.156.17-.078.304-.195.432-.233h.003c.272-.08.487-.235.609-.409zm1.275 5.225c.021.35.2.726.514.803.343.078.837-.194 1.045-.446l.123-.006c.184-.004.337.006.494.156l.002.002c.121.116.178.31.228.511.05.233.09.455.239.622.283.307.376.528.37.665l.003-.004v.01l-.002-.007c-.009.153-.108.231-.29.347-.368.234-1.02.416-1.434.916-.36.43-.8.665-1.188.695-.387.03-.721-.117-.918-.524l-.003-.002c-.122-.233-.07-.597.033-.985.103-.39.25-.784.27-1.107.022-.417.044-.779.114-1.058.07-.271.18-.465.374-.574l.026-.013v-.001zm-6.308.028h.006a.53.53 0 01.091.009c.22.032.412.194.597.438l.53.97.003.003c.141.31.44.62.693.955.253.348.45.66.425.915v.004c-.033.434-.28.67-.656.755-.376.079-.887 0-1.397-.27-.565-.314-1.235-.274-1.667-.352-.215-.039-.355-.117-.421-.233-.064-.117-.066-.352.071-.718v-.002l.002-.002c.068-.195.017-.439-.016-.652-.032-.234-.049-.414.025-.549.093-.194.23-.233.402-.31.172-.08.374-.118.534-.275h.001c.15-.157.26-.351.39-.49.11-.117.222-.196.387-.196zM8.45 5.226c-.254.117-.551.312-.868.312-.316 0-.566-.155-.747-.272-.09-.078-.163-.156-.217-.195-.096-.078-.084-.194-.044-.194.064.01.076.078.117.117.056.038.125.116.21.194.17.116.396.272.68.272.283 0 .615-.156.816-.272.114-.078.26-.194.378-.272.09-.08.087-.156.163-.156.074.01.02.078-.086.194-.13.098-.264.189-.403.273zm-.631-.923V4.29c-.004-.012.007-.024.017-.03.043-.024.105-.015.151.003.037 0 .094.04.088.079-.004.029-.05.038-.079.038-.032 0-.054-.025-.082-.04-.03-.01-.085-.004-.095-.037zm-.322 0c-.011.034-.066.028-.097.038-.027.015-.05.04-.081.04-.03 0-.076-.012-.08-.04-.005-.038.052-.077.088-.077.047-.018.107-.028.151-.003.011.005.021.017.018.029v.012h.001z"></path></g></svg>
+                        </div>
+                        <br>
+                        <div style="display: flex; justify-content: center;">
+                            <a id="download-linux-btn" class="btn-secondary" href="https://downloads.samidy.com/Monochrome-linux.zip">Download Linux Version</a>
+                        </div>
+                        <br>
+                        <p style="text-align: center; color: #8b8b93;">Note for Linux: Please Follow the README.md To Install Monochrome.</p>
+                        </div>
+                        <br>
+                        <h4 style="text-align: center; padding-top: 15px; color: #8b8b93">
+                            The App Is Still in Beta. Please Report Any Issues In The <a href="https://monochrome.samidy.com/discord" style="text-decoration: underline;">Discord.</a>
+                        </h4>
+                        </div>
+                    </div>
+                </div>
                 <div id="page-donate" class="page">
                     <h2 class="section-title" style="text-align: center">Donate to Monochrome</h2>
                     <div class="donate-content">
diff --git a/js/accounts/pocketbase.js b/js/accounts/pocketbase.js
index e826406..4571ce9 100644
--- a/js/accounts/pocketbase.js
+++ b/js/accounts/pocketbase.js
@@ -393,29 +393,85 @@ const syncManager = {
             this._isSyncing = true;
 
             try {
-                const data = await this.getUserData();
+                const cloudData = await this.getUserData();
+
+                if (cloudData) {
+                    const localData = {
+                        tracks: (await db.getAll('favorites_tracks')) || [],
+                        albums: (await db.getAll('favorites_albums')) || [],
+                        artists: (await db.getAll('favorites_artists')) || [],
+                        playlists: (await db.getAll('favorites_playlists')) || [],
+                        mixes: (await db.getAll('favorites_mixes')) || [],
+                        history: (await db.getAll('history_tracks')) || [],
+                        userPlaylists: (await db.getAll('user_playlists')) || [],
+                    };
+
+                    let { library, history, userPlaylists } = cloudData;
+                    let needsUpdate = false;
+
+                    if (!library) library = {};
+                    if (!library.tracks) library.tracks = {};
+                    if (!library.albums) library.albums = {};
+                    if (!library.artists) library.artists = {};
+                    if (!library.playlists) library.playlists = {};
+                    if (!library.mixes) library.mixes = {};
+                    if (!userPlaylists) userPlaylists = {};
+                    if (!history) history = [];
+
+                    const mergeItem = (collection, item, type) => {
+                        const id = type === 'playlist' ? item.uuid || item.id : item.id;
+                        if (!collection[id]) {
+                            collection[id] = this._minifyItem(type, item);
+                            needsUpdate = true;
+                        }
+                    };
+
+                    localData.tracks.forEach((item) => mergeItem(library.tracks, item, 'track'));
+                    localData.albums.forEach((item) => mergeItem(library.albums, item, 'album'));
+                    localData.artists.forEach((item) => mergeItem(library.artists, item, 'artist'));
+                    localData.playlists.forEach((item) => mergeItem(library.playlists, item, 'playlist'));
+                    localData.mixes.forEach((item) => mergeItem(library.mixes, item, 'mix'));
+
+                    localData.userPlaylists.forEach((playlist) => {
+                        if (!userPlaylists[playlist.id]) {
+                            userPlaylists[playlist.id] = {
+                                id: playlist.id,
+                                name: playlist.name,
+                                cover: playlist.cover || null,
+                                tracks: playlist.tracks
+                                    ? playlist.tracks.map((t) => this._minifyItem('track', t))
+                                    : [],
+                                createdAt: playlist.createdAt || Date.now(),
+                                updatedAt: playlist.updatedAt || Date.now(),
+                                numberOfTracks: playlist.tracks ? playlist.tracks.length : 0,
+                                images: playlist.images || [],
+                                isPublic: playlist.isPublic || false,
+                            };
+                            needsUpdate = true;
+                        }
+                    });
+
+                    if (history.length === 0 && localData.history.length > 0) {
+                        history = localData.history;
+                        needsUpdate = true;
+                    }
+
+                    if (needsUpdate) {
+                        await this._updateUserJSON(user.uid, 'library', library);
+                        await this._updateUserJSON(user.uid, 'user_playlists', userPlaylists);
+                        await this._updateUserJSON(user.uid, 'history', history);
+                    }
 
-                if (data) {
                     const convertedData = {
-                        favorites_tracks: data.library.tracks
-                            ? Object.values(data.library.tracks).filter((t) => t && typeof t === 'object')
-                            : [],
-                        favorites_albums: data.library.albums
-                            ? Object.values(data.library.albums).filter((a) => a && typeof a === 'object')
-                            : [],
-                        favorites_artists: data.library.artists
-                            ? Object.values(data.library.artists).filter((a) => a && typeof a === 'object')
-                            : [],
-                        favorites_playlists: data.library.playlists
-                            ? Object.values(data.library.playlists).filter((p) => p && typeof p === 'object')
-                            : [],
-                        favorites_mixes: data.library.mixes
-                            ? Object.values(data.library.mixes).filter((m) => m && typeof m === 'object')
-                            : [],
-                        history_tracks: data.history || [],
-                        user_playlists: data.userPlaylists
-                            ? Object.values(data.userPlaylists).filter((p) => p && typeof p === 'object')
-                            : [],
+                        favorites_tracks: Object.values(library.tracks).filter((t) => t && typeof t === 'object'),
+                        favorites_albums: Object.values(library.albums).filter((a) => a && typeof a === 'object'),
+                        favorites_artists: Object.values(library.artists).filter((a) => a && typeof a === 'object'),
+                        favorites_playlists: Object.values(library.playlists).filter(
+                            (p) => p && typeof p === 'object'
+                        ),
+                        favorites_mixes: Object.values(library.mixes).filter((m) => m && typeof m === 'object'),
+                        history_tracks: history,
+                        user_playlists: Object.values(userPlaylists).filter((p) => p && typeof p === 'object'),
                     };
 
                     await db.importData(convertedData);
diff --git a/public/assets/installdesk.svg b/public/assets/installdesk.svg
new file mode 100644
index 0000000..698b830
--- /dev/null
+++ b/public/assets/installdesk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#8E8E96"><path d="M320-120v-80H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h320v80H160v480h640v-120h80v120q0 33-23.5 56.5T800-200H640v80H320Zm360-280L480-600l56-56 104 103v-287h80v287l104-103 56 56-200 200Z"/></svg>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index ab7191e..21b7df3 100644
--- a/styles.css
+++ b/styles.css
@@ -321,6 +321,16 @@ kbd {
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.sidebar-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.sidebar-nav.main {
+    flex: 1;
+}
+
 .main-content {
     grid-area: main;
     overflow-y: auto;