From f9995a219dc1cbc24e8f523a41e16331775a754b Mon Sep 17 00:00:00 2001
From: Josh Joseph <117572832+JoshJoseph1234@users.noreply.github.com>
Date: Fri, 18 Jul 2025 09:33:17 +0530
Subject: [PATCH] Fixed issue: #1033 (Added app category display in Dev Center
 in main app list) (#1350)

* Update README.md

* Fixed issue:  #1033 (Added app category display in Dev Center in main app list)

* Fixed issue:  #1033  (Added app category display in Dev Center in main app list)

* test 1033

* Fixed issue: #1033 (Added app category display in Dev Center in main app list)

* Fixed issue: #1033 (Added app category display in Dev Center in main app list)

* Center the app checkbox

---------

Co-authored-by: jelveh <nj@puter.com>
---
 src/dev-center/css/style.css    |  73 ++++++++++++++--
 src/dev-center/js/dev-center.js | 143 ++++++++++++++++++++++----------
 2 files changed, 167 insertions(+), 49 deletions(-)

diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css
index e823f9f99..4758a145e 100644
--- a/src/dev-center/css/style.css
+++ b/src/dev-center/css/style.css
@@ -242,6 +242,7 @@ section {
     background: white;
     overflow: hidden;
     position: relative;
+
 }
 
 .app-card:hover {
@@ -251,8 +252,16 @@ section {
     background-color: #e8eff6;
 }
 
-.app-card:hover .app-row-toolbar{
-    display: block;
+
+.app-card:hover .app-row-toolbar {
+    visibility: visible;
+    opacity: 1;
+}
+
+.app-toolbar-container {
+  height: 16px;
+  overflow: hidden;
+  position: relative;
 }
 
 .app-card h1 {
@@ -717,14 +726,24 @@ th.sorted{
     color: #394254;
 }
 
-.app-row-toolbar{
-    margin-top: -7px;
-    display: none;
-    width: 350px;
+.app-row-toolbar {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    height: auto; /* allow full content */
+    overflow: visible; /* allow overflow */
+    display: flex;
+    align-items: center;
+    gap: 4px; /* adjust spacing here */
+      font-size: 12px;
+  padding-top: 2px;
+ margin-top: -4px; 
+ 
 }
 
 .app-row-toolbar img {
     opacity: 0.5;
+    transition: opacity 0.2s ease;
 }
 
 .app-row-toolbar img:hover {
@@ -1212,4 +1231,44 @@ dialog{
 }
 .stats-cell img{
     width: 18px; margin-right: 5px; margin-bottom: -4px;
-}
\ No newline at end of file
+}
+.category-badge {
+  display: inline-block;
+  background-color: #f2f2f2;
+  color: #555;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 6px;
+  margin-left: 8px;
+  border-radius: 6px;
+  vertical-align: middle;
+}
+.app-category {
+  display: inline-block;
+  background-color: #f3f4f6;
+  color: #374151;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  margin-top: 2px;
+  max-height: 18px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.app-row-toolbar span {
+  margin: 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  vertical-align: middle;
+  padding: 2px 4px;
+}
+
+.app-row-toolbar span:hover {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #000; /* Optional: darken on hover */
+}
+
+
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index d87ae242a..772d80555 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -315,13 +315,18 @@ async function create_app(title, source_path = null, items = null) {
             // Update the app with the new hostname
             // ----------------------------------------------------
             puter.apps.update(app.name, {
-                title: title,
-                indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
-                icon: icon,
-                description: ' ',
-                maximizeOnStart: false,
-                background: false,
-            }).then(async (app) => {
+    title: title,
+    indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
+    icon: icon,
+    description: ' ',
+    maximizeOnStart: false,
+    background: false,
+    metadata: {
+        category: null, // default category on creation
+        window_resizable: true,
+        fullpage_on_landing: true,
+    }
+}).then(async (app) => {
                 // refresh app list
                 puter.apps.list({ icon_size: 64 }).then(async (resp) => {
                     apps = resp;
@@ -330,6 +335,8 @@ async function create_app(title, source_path = null, items = null) {
                     setTimeout(() => {
                         // open edit app section
                         edit_app_section(app.name);
+                        refresh_app_list(); // ✅ Refreshes main app list
+
                         // set drop area if source_path was provided or items were dropped
                         if (source_path || items) {
                             $('.drop-area').removeClass('drop-area-hover');
@@ -1381,6 +1388,8 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         },
         filetypeAssociations: filetype_associations,
     }).then(async (app) => {
+        refresh_app_list();
+
         currently_editing_app = app;
         trackOriginalValues();  // Update original values after save
         toggleSaveButton();  //Disable Save Button after succesful save
@@ -1654,53 +1663,103 @@ async function getBase64ImageFromUrl(imageUrl) {
  */
 function generate_app_card(app) {
     let h = ``;
-    h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}">`;
+h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}" style="height: 86px;">`;
     // check box
-    h += `<td style="height: 60px; width: 20px;">`;
+    h += `<td style="height: 60px; width: 20px; display: flex ; align-items: center;">`;
         h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
             h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
         h += `</div>`;
     h += `</td>`;
-    // App info
-    h += `<td style="height: 60px; width: 450px; display: flex; flex-direction: row; overflow:hidden;">`;
+  // App info (title, category, toolbar)
+h += `<td style="height: 72px; width: 450px;">`;
+
+  // Wrapper for icon + content side by side
+h += `<div style="display: flex; flex-direction: row; align-items: center; height: 86px; overflow: hidden;">`;
+
     // Icon
-    h += `<div class="got-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="background-position: center; background-repeat: no-repeat; background-size: 92%; background-image:url(${app.icon === null ? './img/app.svg' : app.icon}); width: 60px; height: 60px; float:left; margin-bottom: -14px; color: #414b56; cursor: pointer; background-color: white; border-radius: 3px; flex-shrink:0;"></div>`;
-    // Info
-    h += `<div style="float:left; padding-left: 10px;">`;
-    // Title
-    h += `<h3 class="got-to-edit-app app-card-title" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">${html_encode(app.title)}${app.metadata?.locked ? lock_svg_tippy : ''}</h3>`;
-    // // Category
-    // if (app.metadata?.category) {
-    //     const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
-    //     if (category) {
-    //         h += `<div class="app-categories">`;
-    //         h += `<span class="app-category">${category.label}</span>`;
-    //         h += `</div>`;
-    //     }
-    // }
+    h += `<div class="got-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 92%;
+      background-image: url(${app.icon === null ? './img/app.svg' : app.icon});
+      width: 60px;
+      height: 60px;
+      margin-right: 10px;
+      color: #414b56;
+      cursor: pointer;
+      background-color: white;
+      border-radius: 3px;
+      flex-shrink: 0;
+    "></div>`;
 
-    // link
-    h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank">${html_encode(applink(app))}</a>`;
+    // App info content
+    h += `<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: visible;">`;
 
-    // toolbar
-    h += `<div style="" class="app-row-toolbar disable-user-select">`;
+    // Info block with fixed layout
+h += `<div style="display: flex; flex-direction: column; justify-content: center; padding-left: 10px; flex-grow: 1; overflow: hidden; gap: 1px; height: 100%;">`;
 
-    // Open
-    h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="">Open</span>`;
-    h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
+  // Title
+  h += `<h3 class="got-to-edit-app app-card-title" style="
+    margin: 0;
+    font-size: 16px;
+    line-height: 20px;
+    height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  " data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">
+    ${html_encode(app.title)}${app.metadata?.locked ? lock_svg_tippy : ''}
+  </h3>`;
 
-    // Settings
-    h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
-    h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
+  // Category (optional)
+  if (app.metadata?.category) {
+    const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
+    if (category) {
+      h += `<span class="app-category" style="
+        background-color: #f3f4f6;
+        color: #374151;
+        padding: 1px 6px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        margin: 1px 0 0 0;
+        max-width: fit-content;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      ">${html_encode(category.label)}</span>`;
+    }
+  }
 
-    // add to desktop
-    h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`
-    h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
+  // Link
+  h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank" style="
+    font-size: 13px;
+    margin: 2px 0 0 0;
+    color: #2563eb;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+  ">${html_encode(applink(app))}</a>`;
+
+h += `</div>`;
+
+
+
+      // Toolbar
+      h += `<div class="app-toolbar-container" style="height: 16px; overflow: visible;">`;
+   h += `<div class="app-row-toolbar disable-user-select">`; // remove inline styles
+
+        h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}">Open</span>`;
+        h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
+        h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`;
+        h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
+      h += `</div>`;
+h += `</div>`;
+    h += `</div>`; // end info column
+  h += `</div>`; // end row
+h += `</td>`;
 
-    // Delete
-    h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
-    h += `</div>`;
-    h += `</td>`;
 
     // users count
     h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`;