From 0cd1f151b5986ede431f1792139fa1a5471ae059 Mon Sep 17 00:00:00 2001
From: ron <saubhagyaprasad31122001@gmail.com>
Date: Wed, 4 Dec 2024 12:35:36 +0530
Subject: [PATCH] feat: added tagify in Filetype-Association input in dev
 center

---
 src/dev-center/index.html       |  3 ++
 src/dev-center/js/dev-center.js | 58 ++++++++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/dev-center/index.html b/src/dev-center/index.html
index 5c0a8219b..81bc6c37c 100644
--- a/src/dev-center/index.html
+++ b/src/dev-center/index.html
@@ -19,6 +19,9 @@
     <link rel="preload" as="image" href="./img/wallet.svg">
     <link rel="preload" as="image" href="./img/wallet-white.svg">
     <link rel="preload" as="image" href="./img/paypal.svg">
+    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
     <style>
         .social-link{
             opacity: 0.7;
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 063f5bb25..481d6d9eb 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -555,8 +555,8 @@ function generate_edit_app_section(app) {
                 </select>
 
                 <label for="edit-app-filetype-associations">File Associations</label>
-                <p style="margin-top: 10px; font-size:13px;">A comma-separated list of file type specifiers. For example if you include <code>.txt</code>, your apps could be opened when a user clicks on a TXT file.</p>
-                <textarea id="edit-app-filetype-associations" placeholder=".txt, .jpg, application/json">${app.filetype_associations}</textarea>
+               <p style="margin-top: 10px; font-size:13px;">A list of file type specifiers. For example if you include <code>.txt</code> your apps could be opened when a user clicks on a TXT file.</p>
+               <textarea id="edit-app-filetype-associations"  placeholder=".txt  .jpg    application/json">${JSON.stringify(app.filetype_associations.map(item => ({ "value": item })), null, app.filetype_associations.length)}</textarea>
 
                 <h3 style="font-size: 23px; border-bottom: 1px solid #EEE; margin-top: 50px; margin-bottom: 0px;">Window</h3>
                 <div>
@@ -762,6 +762,30 @@ async function edit_app_section(cur_app_name) {
     toggleResetButton();  // Ensure Reset button is initially disabled
     $('#edit-app').show();
 
+    const filetype_association_input = document.querySelector('textarea[id=edit-app-filetype-associations]');
+    let tagify = new Tagify(filetype_association_input, {
+      pattern: /\.(?:[a-z0-9]+)|(?:[a-z]+\/[a-z0-9.-]+)/, // pattern for filetype file like .pdf or MIME type like text/plain
+      delimiters: null,
+      whitelist: [
+        // Document file types
+        ".doc", ".docx", ".pdf", ".txt", ".odt", ".rtf", ".tex",
+        // Spreadsheet file types 
+        ".xls", ".xlsx", ".csv", ".ods",
+        // Image file types
+        ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tiff", ".svg", ".webp",
+        // Video file types
+        ".mp4", ".avi", ".mov", ".wmv", ".mkv", ".flv", ".webm",
+        // Audio file types
+        ".mp3", ".wav", ".aac", ".flac", ".ogg", ".m4a",
+        // Code file types
+        ".js", ".ts", ".html", ".css", ".json", ".xml", ".php", ".py", ".java", ".cpp",
+        // Archive file types
+        ".zip", ".rar", ".7z", ".tar", ".gz",
+        // Other
+        ".exe", ".dll", ".iso"
+      ],
+    })
+
     // --------------------------------------------------------
     // Dragster
     // --------------------------------------------------------
@@ -1102,6 +1126,32 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         }
     }
 
+    // parse filetype_associations
+
+    filetype_associations = JSON.parse(filetype_associations);
+    filetype_associations = filetype_associations.map((type) => {
+        const fileType = type.value;
+
+
+       if (
+           !fileType ||
+           fileType === "." ||
+           fileType === "/"
+       ) {
+      error = `<strong>File Association Type</strong> must be valid.`;
+      return null; // Return null for invalid cases
+    }
+    const lower = fileType.toLocaleLowerCase();
+
+    if (fileType.includes("/")) {
+      return lower;
+    } else if (fileType.includes(".")) {
+      return "." + lower.split(".")[1];
+    } else {
+      return "." + lower;
+    }
+    }).filter(Boolean);
+
     // error?
     if (error) {
         $('#edit-app-error').show();
@@ -1113,8 +1163,8 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
     // show working spinner
     puter.ui.showSpinner();
 
-    // parse filetype_associations
-    filetype_associations = filetype_associations.split(',').map(element => element.trim());
+    
+    
     // disable submit button
     $('.edit-app-save-btn').prop('disabled', true);