5 files changed, 153 insertions, 2 deletions

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);
 }