feat: favorite button

6 files changed, 201 insertions, 11 deletions

diff --git a/public/index.php b/public/index.php
index 73b4d18..ea4bde7 100644
--- a/public/index.php
+++ b/public/index.php
@@ -196,6 +196,12 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                         <section class="box">
                             <div class="tab row wrap gap-8">
                                 <div class="grow">
+                                    <div style="display: none;">
+                                        <p id="file-id"><?= $file['id'] ?></p>
+                                        <p id="file-mime"><?= $file['mime'] ?></p>
+                                        <p id="file-extension"><?= $file['extension'] ?></p>
+                                        <p id="file-size"><?= $file['size'] ?></p>
+                                    </div>
                                     <?php if (isset($file['title'])): ?>
                                         <p><i><?= $file['title'] ?></i></p>
                                     <?php else: ?>
@@ -304,7 +310,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                 <div class="tab">
                     <p>Form Upload</p>
                 </div>
-                <div class="tabs" id="form-upload-tabs" style="display: none;">
+                <div class="tab-category tabs" id="form-upload-tabs" style="display: none;">
                     <div class="form-upload-tab tab" id="form-tab-file">
                         <button onclick="showUploadType('file')" class="transparent">
                             <p>File Upload</p>
@@ -421,11 +427,24 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
             </section>
 
             <section class="box column" style="display:none">
-                <div class="tab">
-                    <p>Uploaded files<span title="Your file ownership is stored locally." style="cursor:help">*</span></p>
+                <div class="tab-category tabs" id="file-tabs">
+                    <div class="tab" id="uploaded-files-tab">
+                        <button class="transparent">
+                            <p>Uploaded files<span title="Your file ownership is stored locally."
+                                    style="cursor:help">*</span></p>
+                        </button>
+                    </div>
+                    <div class="tab" id="favorite-files-tab">
+                        <button class="transparent">
+                            <p>Favorites<span title="Favorite files are stored locally." style="cursor:help">*</span>
+                            </p>
+                        </button>
+                    </div>
                 </div>
                 <div class="content grid grid-3 gap-8" id="uploaded-files">
                 </div>
+                <div class="content grid grid-3 gap-8" id="favorite-files" style="display: none;">
+                </div>
             </section>
 
             <?php html_footer() ?>
@@ -438,6 +457,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
         const fileTabButtons = document.getElementById('file-tab-buttons');
         fileTabButtons.innerHTML += `<button onclick="navigator.clipboard.writeText('${window.location.href}')">Copy URL</button>`;
     </script>
+    <script src="/static/scripts/favorites.js"></script>
 <?php endif; ?>
 
 <?php if ($file && !isset($_SESSION['is_moderator'])): ?>
@@ -455,6 +475,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
     </script>
     <script src="/static/scripts/audiorecorder.js"></script>
     <script src="/static/scripts/options.js"></script>
+    <script src="/static/scripts/tabs.js"></script>
     <script>
         document.querySelectorAll(".remove-script").forEach((x) => {
             x.remove();
@@ -596,6 +617,9 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                         return;
                     }
 
+                    showTab('uploaded-files');
+                    displayTab('file-tabs', 'uploaded-files');
+
                     uploadedFiles.innerHTML = addUploadedFile(json.data) + uploadedFiles.innerHTML;
                     uploadedFiles.parentElement.style.display = 'flex';
                     textArea.value = '';
@@ -698,6 +722,14 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
             return file;
         }
 
+        function setFormDetailsVisiblity(show) {
+            formDetails.style.display = show ? 'flex' : 'none';
+            formSubmitButton.style.display = show ? 'block' : 'none';
+        }
+    </script>
+    <script src="/static/scripts/favorites.js"></script>
+    <script>
+
         // loading already existing uploaded files
         function loadUploadedFiles() {
             let files = getUploadedFiles();
@@ -708,7 +740,19 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                 html += addUploadedFile(file);
             }
 
-            uploadedFiles.parentElement.style.display = html.length > 0 ? 'flex' : 'none';
+            if (html.length > 0) {
+                showTab('uploaded-files');
+                displayTab('file-tabs', 'uploaded-files');
+            } else {
+                hideTab('uploaded-files');
+            }
+
+            if (getFavoriteFiles().length > 0 && html.length == 0) {
+                showTab('favorite-files');
+                displayTab('file-tabs', 'favorite-files');
+            }
+
+            uploadedFiles.parentElement.style.display = html.length > 0 || getFavoriteFiles().length > 0 ? 'flex' : 'none';
 
             uploadedFiles.innerHTML = html;
         }
@@ -748,11 +792,6 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                 }
             }
         }
-
-        function setFormDetailsVisiblity(show) {
-            formDetails.style.display = show ? 'flex' : 'none';
-            formSubmitButton.style.display = show ? 'block' : 'none';
-        }
     </script>
     <script src="/static/scripts/form.js"></script>
 <?php endif; ?>
diff --git a/public/static/img/icons/star-gray.png b/public/static/img/icons/star-gray.png
new file mode 100755
index 0000000..594bd33
--- /dev/null
+++ b/public/static/img/icons/star-gray.png
diff --git a/public/static/img/icons/star.png b/public/static/img/icons/star.png
new file mode 100755
index 0000000..b88c857
--- /dev/null
+++ b/public/static/img/icons/star.png
diff --git a/public/static/scripts/favorites.js b/public/static/scripts/favorites.js
new file mode 100644
index 0000000..0986d63
--- /dev/null
+++ b/public/static/scripts/favorites.js
@@ -0,0 +1,93 @@
+function saveFavoriteFiles(files) {
+    localStorage.setItem('favorite-files', JSON.stringify(files));
+}
+
+function getFavoriteFiles() {
+    const files = JSON.parse(localStorage.getItem('favorite-files') ?? '[]');
+    return files;
+}
+
+function addFavoriteFile(f) {
+    if (isFavoriteFile(f)) {
+        return;
+    }
+
+    const files = getFavoriteFiles();
+    files.push(f);
+    saveFavoriteFiles(files);
+}
+
+function removeFavoriteFile(f) {
+    if (!isFavoriteFile(f)) {
+        return;
+    }
+
+    let files = getFavoriteFiles();
+    files = files.filter((x) => x.id != f.id);
+    saveFavoriteFiles(files);
+}
+
+function isFavoriteFile(f) {
+    const files = getFavoriteFiles();
+    return files.find((x) => x.id == f.id) != undefined;
+}
+
+window.addEventListener('load', () => {
+    const tabs = document.getElementById('file-tab-buttons');
+    if (tabs != null) {
+        const addIcon = document.createElement('img');
+        addIcon.src = '/static/img/icons/star-gray.png';
+        addIcon.alt = 'Favorite';
+
+        const delIcon = document.createElement('img');
+        delIcon.src = '/static/img/icons/star.png';
+        delIcon.alt = 'Unfavorite';
+
+        const btn = document.createElement('button');
+
+        const file = {
+            id: document.getElementById('file-id').innerText,
+            mime: document.getElementById('file-mime').innerText,
+            extension: document.getElementById('file-extension').innerText,
+            size: document.getElementById('file-size').innerText
+        };
+
+        btn.addEventListener('click', (e) => {
+            if (isFavoriteFile(file)) {
+                removeFavoriteFile(file);
+            } else {
+                addFavoriteFile(file);
+            }
+
+            btn.innerHTML = '';
+
+            const isf = isFavoriteFile(file);
+
+            btn.appendChild(isf ? delIcon : addIcon);
+            btn.title = isf ? 'Unfavorite this file' : 'Favorite file';
+        });
+
+        const isf = isFavoriteFile(file);
+
+        btn.appendChild(isf ? delIcon : addIcon);
+        btn.title = isf ? 'Unfavorite this file' : 'Favorite file';
+
+        tabs.appendChild(btn);
+    }
+
+    const files = document.getElementById('favorite-files');
+    if (files != null) {
+        const data = getFavoriteFiles();
+        if (data.length > 0) {
+            files.parentElement.style.display = 'flex';
+            files.innerHTML = '';
+            enableTab('favorite-files');
+        } else {
+            disableTab('favorite-files');
+        }
+        data.forEach((x) => {
+            const html = addUploadedFile(x);
+            files.innerHTML += html;
+        });
+    }
+});
\ No newline at end of file
diff --git a/public/static/scripts/tabs.js b/public/static/scripts/tabs.js
new file mode 100644
index 0000000..fb8d598
--- /dev/null
+++ b/public/static/scripts/tabs.js
@@ -0,0 +1,56 @@
+function displayTab(category, id) {
+    const tabs = document.querySelectorAll(`#${category} .tab`);
+    tabs.forEach((tab) => {
+        let tabId = tab.getAttribute('id');
+        tabId = tabId.substring(0, tabId.length - 4);
+
+        tab.setAttribute('show-disabled', tabId != id);
+
+        const content = document.getElementById(tabId);
+        if (content) {
+            let display = 'flex';
+            if (content.classList.contains('grid')) {
+                display = 'grid';
+            }
+            content.style.display = tabId == id ? display : 'none';
+        }
+    });
+}
+
+function enableTab(id) {
+    document.getElementById(`${id}-tab`).style.display = 'flex';
+}
+
+function disableTab(id) {
+    document.getElementById(`${id}-tab`).style.display = 'none';
+}
+
+function hideTab(id) {
+    disableTab(id);
+    document.getElementById(id).style.display = 'none';
+}
+
+function showTab(id) {
+    enableTab(id);
+    const content = document.getElementById(id);
+    if (content) {
+        content.style.display = content.classList.contains('grid') ? 'grid' : 'flex';
+    }
+}
+
+window.addEventListener('load', () => {
+    const categories = document.querySelectorAll('.tab-category');
+
+    categories.forEach((c) => {
+        const category = c.getAttribute('id');
+        const tabs = document.querySelectorAll(`#${category} .tab>button`);
+        tabs.forEach((tab) => {
+            let id = tab.parentElement.getAttribute('id');
+            id = id.substring(0, id.length - 4);
+
+            tab.addEventListener('click', () => displayTab(category, id));
+
+            console.log(id);
+        });
+    });
+});
\ No newline at end of file
diff --git a/public/static/style.css b/public/static/style.css
index fbf33cf..51377a4 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -209,13 +209,15 @@ button[type=submit].fancy:hover {
     font-weight: bold;
 }
 
-.tabs>.tab.disabled {
+.tabs>.tab.disabled,
+.tabs>.tab[show-disabled='true'] {
     background: var(--box-tab-background-dark);
     padding: 4px 8px;
     margin-bottom: -8px;
 }
 
-.tabs>.tab.disabled:hover {
+.tabs>.tab.disabled:hover,
+.tabs>.tab[show-disabled='true']:hover {
     background: var(--box-tab-background-light);
 }