Renamable backgrounds

public/index.html

@@ -3107,6 +3107,15 @@
         </div>
     </div>
 
+    <div id="background_template" class="template_element">
+        <div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
+            <div title="Rename background" bgfile="" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
+            <div title="Delete background" bgfile="" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></div>
+            <div class="BGSampleTitle">
+            </div>
+        </div>
+    </div>
+
     <!-- templates for JS to reuse when needed -->
     <div id="context_editor_template" class="template_element">
         <div class="context_editor">

public/script.js

@@ -966,22 +966,25 @@ async function getBackgrounds() {
         const getData = await response.json();
         //background = getData;
         //console.log(getData.length);
+        $("#bg_menu_content").empty();
         for (const bg of getData) {
-            const thumbPath = getThumbnailUrl('bg', bg);
+            const template = getBackgroundFromTemplate(bg);
-            $("#bg_menu_content").append(
+            $("#bg_menu_content").append(template);
-                `<div class="bg_example flex-container" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
-                    <div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
-                    <div class="BGSampleTitle">
-                        ${bg
-                    .replace('.png', '')
-                    .replace('.jpg', '')
-                    .replace('.webp', '')}
-                </div>
-                </div>`
-            );
         }
     }
 }
+
+function getBackgroundFromTemplate(bg) {
+    const thumbPath = getThumbnailUrl('bg', bg);
+    const template = $('#background_template .bg_example').clone();
+    template.attr('bgfile', bg);
+    template.attr('title', bg);
+    template.find('.bg_button').attr('bgfile', bg);
+    template.css('background-image', `url('${thumbPath}')`);
+    template.find('.BGSampleTitle').text(bg.slice(0, bg.lastIndexOf('.')));
+    return template;
+}
+
 async function isColab() {
     is_checked_colab = true;
     const response = await fetch("/iscolab", {
@@ -5673,11 +5676,7 @@ function read_bg_load(input) {
                         "background-image",
                         `url("${e.target.result}")`
                     );
-                    $("#form_bg_download").after(
+                    $("#form_bg_download").after(getBackgroundFromTemplate(html));
-                        `<div class="bg_example" bgfile="${html}" style="background-image: url('${getThumbnailUrl('bg', html)}');">
-                            <div class="bg_example_cross fa-solid fa-circle-xmark"></div>
-                        </div>`
-                    );
                 },
                 error: function (jqXHR, exception) {
                     console.log(exception);
@@ -7074,6 +7073,41 @@ $(document).ready(function () {
         });
 
     });
+
+    $(document).on('click', '.bg_example_edit', async function (e) {
+        e.stopPropagation();
+        const old_bg = $(this).attr('bgfile');
+
+        if (!old_bg) {
+            console.debug('no bgfile');
+            return;
+        }
+
+        const fileExtension = old_bg.split('.').pop();
+        const old_bg_extensionless = old_bg.replace(`.${fileExtension}`, '');
+        const new_bg_extensionless = await callPopup('<h3>Enter new background name:</h3>', 'input', old_bg_extensionless);
+        const new_bg = `${new_bg_extensionless}.${fileExtension}`;
+
+        if (old_bg_extensionless === new_bg_extensionless) {
+            console.debug('new_bg === old_bg');
+            return;
+        }
+
+        const data = { old_bg, new_bg };
+        const response = await fetch('/renamebackground', {
+            method: 'POST',
+            headers:getRequestHeaders(),
+            body: JSON.stringify(data),
+            cache: 'no-cache',
+        });
+
+        if (response.ok) {
+            await getBackgrounds();
+        } else {
+            toastr.warning('Failed to rename background');
+        }
+    });
+
     $(document).on("click", ".bg_example_cross", function (e) {
         e.stopPropagation();
         bg_file_for_del = $(this);

public/style.css

@@ -1626,6 +1626,7 @@ body.big-avatars .ch_description {
     cursor: pointer;
     aspect-ratio: 16/9;
     justify-content: flex-end;
+    position: relative;
 }
 
 .BGSampleTitle {
@@ -1642,12 +1643,10 @@ body.big-avatars .ch_description {
     font-size: calc(var(--fontScale) * 0.9em);
 }
 
-.bg_example_cross {
+.bg_button {
     width: 15px;
     height: 15px;
-    position: relative;
+    position: absolute;
-    /* float: right; */
-    right: 10px;
     top: 5px;
     cursor: pointer;
     opacity: 0.7;
@@ -1658,6 +1657,19 @@ body.big-avatars .ch_description {
     padding: 0;
     margin: 0;
     filter: drop-shadow(0px 0px 3px white);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.bg_button:hover {
+    opacity: 1;
+}
+
+.bg_example_cross {
+    right: 10px;
+}
+
+.bg_example_edit {
+    left: 10px;
 }
 
 .no-border {

server.js

@@ -1338,6 +1338,27 @@ app.post("/delchat", jsonParser, function (request, response) {
     return response.send('ok');
 });
 
+app.post('/renamebackground', jsonParser, function (request, response) {
+    if (!request.body) return response.sendStatus(400);
+
+    const oldFileName = path.join('public/backgrounds/', sanitize(request.body.old_bg));
+    const newFileName = path.join('public/backgrounds/', sanitize(request.body.new_bg));
+
+    if (!fs.existsSync(oldFileName)) {
+        console.log('BG file not found');
+        return response.sendStatus(400);
+    }
+
+    if (fs.existsSync(newFileName)) {
+        console.log('New BG file already exists');
+        return response.sendStatus(400);
+    }
+
+    fs.renameSync(oldFileName, newFileName);
+    invalidateThumbnail('bg', request.body.old_bg);
+    return response.send('ok');
+});
+
 app.post("/downloadbackground", urlencodedParser, function (request, response) {
     response_dw_bg = response;
     if (!request.body || !request.file) return response.sendStatus(400);