`.html()` now using `H`

src/UI/Components/Button.js

@@ -73,7 +73,7 @@ export default def(class Button extends Component {
         if ( this.get('on_click') ) {
             const $button = $(this.dom_).find('button');
             $button.on('click', async () => {
-                $button.html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+                $button.html(H`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
                 const on_click = this.get('on_click');
                 await on_click();
                 $button.html(this.get('label'));

src/UI/Components/CodeEntryView.js

@@ -122,7 +122,7 @@ export default def(class CodeEntryView extends Component {
             if ( is_checking_code ) {
                 // set animation
                 $button.prop('disabled', true);
-                $button.html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+                $button.html(H`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
                 return;
             }
 

src/UI/Components/Flexer.js

@@ -42,7 +42,7 @@ export default def(class Flexer extends Component {
     create_template ({ template }) {
         // TODO: The way we handle loading assets doesn't work well
         // with web components, so for now it goes in the template.
-        $(template).html(`
+        $(template).html(H`
             <div><slot name="inside"></slot></div>
         `);
     }

src/UI/Components/JustHTML.js

@@ -27,7 +27,7 @@ export default def(class JustHTML extends Component {
 
     static PROPERTIES = { html: { value: '' } };
     create_template ({ template }) {
-        $(template).html(`<span></span>`);
+        $(template).html(H`<span></span>`);
     }
     on_ready ({ listen }) {
         listen('html', html => {

src/UI/Components/QRCode.js

@@ -54,7 +54,7 @@ export default def(class QRCodeView extends Component {
     `
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <div class="qr-code opt-qr-code">
             </div>
         `);

src/UI/Components/RecoveryCodesView.js

@@ -75,7 +75,7 @@ export default def(class RecoveryCodesView extends Component {
 
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
             <div class="recovery-codes">
                 <div class="recovery-codes-list">

src/UI/Components/StepView.js

@@ -34,7 +34,7 @@ export default def(class StepView extends Component {
     `;
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <div id="wrapper">
                 <slot name="inside"></slot>
             </div>

src/UI/Components/StringView.js

@@ -43,14 +43,14 @@ export default def(class StringView extends Component {
     `;
 
     create_template ({ template }) {
-        $(template).html(`<span></span>`);
+        $(template).html(H`<span></span>`);
     }
 
     on_ready ({ listen }) {
         // TODO: listener composition, to avoid this
         const either = ({ heading, text }) => {
             const wrapper_nodeName = heading ? 'h' + heading : 'span';
-            $(this.dom_).find('span').html(`<${wrapper_nodeName}>${
+            $(this.dom_).find('span').html(H`<${wrapper_nodeName}>${
                 this.get('no_html_encode') ? text : html_encode(text)
             }</${wrapper_nodeName}>`);
         };

src/UI/Components/Table.js

@@ -68,7 +68,7 @@ export default def(class Table extends Component {
     `;
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <table>
                 <thead>
                     <tr class="headings"></tr>

src/UI/Components/TestView.js

@@ -34,7 +34,7 @@ export default def(class TestView extends Component {
     `;
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <div>I am a test view</div>
         `);
     }

src/UI/Settings/UITabAbout.js

@@ -97,11 +97,11 @@ export default {
         puter.os.version()
         .then(res => {
             const deployed_date = new Date(res.deploy_timestamp).toLocaleString();
-            $el_window.find('.version').html(`Version: ${html_encode(res.version)} • Server: ${html_encode(res.location)} • Deployed: ${html_encode(deployed_date)}`);
+            $el_window.find('.version').html(H`Version: ${res.version} • Server: ${res.location} • Deployed: ${deployed_date}`);
         })
         .catch(error => {
             console.error("Failed to fetch server info:", error);
-            $el_window.find('.version').html("Failed to load version information.");
+            $el_window.find('.version').html(`Failed to load version information.`);
         });
 
         $el_window.find('.credits').on('click', function (e) {

src/UI/UIWindow.js

@@ -2785,7 +2785,7 @@ window.update_window_path = async function(el_window, target_path){
     $(el_window).find(`.window-sidebar-item[data-path="${html_encode(target_path)}"]`).addClass('window-sidebar-item-active');
 
     // clean
-    $(el_window).find('.explore-table-headers-th > .header-sort-icon').html('');
+    $(el_window).find('.explore-table-headers-th > .header-sort-icon').html(``);
 
     if(is_dir){
         // if nav history for this window is empty, disable forward btn
@@ -3448,7 +3448,7 @@ $(document).on('click', '.explore-table-headers-th', function(e){
     // remove active class from all headers
     $(e.target).closest('.window').find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
     // remove icons from all headers
-    $(e.target).closest('.window').find('.header-sort-icon').html('');
+    $(e.target).closest('.window').find('.header-sort-icon').html(``);
 
     // add active class to this header
     $(e.target).addClass('explore-table-headers-th-active');
@@ -3505,7 +3505,7 @@ window.set_layout = function(item_uid, layout){
 
 window.update_details_layout_sort_visuals = function(el_window, sort_by, sort_order){
     let sort_icon = '';
-    $(el_window).find('.explore-table-headers-th > .header-sort-icon').html('');
+    $(el_window).find('.explore-table-headers-th > .header-sort-icon').html(``);
 
     if(!sort_order || sort_order === 'asc')
         sort_icon = `<img src="${window.icons['up-arrow.svg']}">`;

src/UI/UIWindowChangePassword.js

@@ -94,7 +94,7 @@ async function UIWindowChangePassword(options){
 
         // check if all fields are filled
         if(!current_password || !new_password || !confirm_new_password){
-            $(el_window).find('.form-error-msg').html('All fields are required.');
+            $(el_window).find('.form-error-msg').html(`All fields are required.`);
             $(el_window).find('.form-error-msg').fadeIn();
             return;
         }

src/UI/UIWindowEmailConfirmationRequired.js

@@ -107,7 +107,7 @@ function UIWindowEmailConfirmationRequired(options){
             is_checking_code = true;
 
             // set animation
-            $(el_window).find('.email-confirm-btn').html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+            $(el_window).find('.email-confirm-btn').html(H`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
 
             setTimeout(() => {
                 $.ajax({
@@ -132,7 +132,7 @@ function UIWindowEmailConfirmationRequired(options){
                             window.refresh_user_data(window.auth_token)
                             resolve(true);
                         }else{
-                            $(el_window).find('.error').html('Invalid confirmation code.');
+                            $(el_window).find('.error').html(`Invalid confirmation code.`);
                             $(el_window).find('.error').fadeIn();
                             $(el_window).find('.digit-input').val('');
                             $(el_window).find('.digit-input').first().focus();

src/UI/UIWindowItemProperties.js

@@ -177,7 +177,7 @@ async function UIWindowItemProperties(item_name, item_path, item_uid, left, top,
                     null).then(()=>{ 
                         $(el_window).find(`.item-prop-website-entry[data-uuid="${$(e.target).attr('data-uuid')}"]`).remove();
                         if($(el_window).find(`.item-prop-website-entry`).length === 0){
-                            $(el_window).find(`.item-prop-val-websites`).html('-');
+                            $(el_window).find(`.item-prop-val-websites`).html(`-`);
                             // remove the website badge from all instances of the dir
                             $(`.item[data-uid="${item_uid}"]`).find('.item-has-website-badge').fadeOut(200);
                         }

src/UI/UIWindowLogin.js

@@ -83,7 +83,7 @@ async function UIWindowLogin(options){
         puter.os.version()
         .then(res => {
             const deployed_date = new Date(res.deploy_timestamp).toLocaleString();
-            $("#version-placeholder").html(`Version: ${html_encode(res.version)} • Server: ${html_encode(res.location)} • Deployed: ${html_encode(deployed_date)}`);
+            $("#version-placeholder").html(H`Version: ${res.version} • Server: ${res.location} • Deployed: ${deployed_date}`);
         })
         .catch(() => {
             $("#version-placeholder").html("Failed to load version or server information.");
@@ -346,14 +346,14 @@ async function UIWindowLogin(options){
                     const $errorMessage = $(el_window).find('.login-error-msg');
                     if (err.status === 404) {
                         // Don't include the whole 404 page
-                        $errorMessage.html(`Error 404: "${window.gui_origin}/login" not found`);
+                        $errorMessage.html(H`Error 404: "${window.gui_origin}/login" not found`);
                     } else if (err.responseText) {
                         $errorMessage.html(html_encode(err.responseText));
                     } else {
                         // No message was returned. *Probably* this means we couldn't reach the server.
                         // If this is a self-hosted instance, it's probably a configuration issue.
                         if (window.app_domain !== 'puter.com') {
-                            $errorMessage.html(`<div style="text-align: left;">
+                            $errorMessage.html(H`<div style="text-align: left;">
                                 <p>Error reaching "${window.gui_origin}/login". This is likely to be a configuration issue.</p>
                                 <p>Make sure of the following:</p>
                                 <ul style="padding-left: 2em;">
@@ -364,7 +364,7 @@ async function UIWindowLogin(options){
                                 </ul>
                             </div>`);
                         } else {
-                            $errorMessage.html(`Failed to log in: Error ${html_encode(err.status)}`);
+                            $errorMessage.html(H`Failed to log in: Error ${err.status}`);
                         }
                     }
                     $(el_window).find('.login-error-msg').fadeIn();

src/UI/UIWindowMyWebsites.js

@@ -63,7 +63,7 @@ async function UIWindowMyWebsites(options){
     // /sites
     let init_ts = Date.now();
     let loading = setTimeout(function(){
-        $(el_window).find('.window-body').html(`<p style="text-align: center;
+        $(el_window).find('.window-body').html(H`<p style="text-align: center;
         margin-top: 40px;
         margin-bottom: 50px;
         -webkit-font-smoothing: antialiased;
@@ -100,7 +100,7 @@ async function UIWindowMyWebsites(options){
             }
             // has no sites
             else{
-                $(el_window).find('.window-body').html(`<p style="text-align: center;
+                $(el_window).find('.window-body').html(H`<p style="text-align: center;
                 margin-top: 40px;
                 margin-bottom: 50px;
                 -webkit-font-smoothing: antialiased;

src/UI/UIWindowNewPassword.js

@@ -120,14 +120,14 @@ async function UIWindowNewPassword(options){
             if( time_remaining <= 0 ) {
                 clearInterval(expiration_clock);
                 $(el_window).find('.change-password-btn').prop('disabled', true);
-                $(el_window).find('.change-password-btn').html('Token Expired');
+                $(el_window).find('.change-password-btn').html(`Token Expired`);
                 return;
             }
 
             const svc_locale = globalThis.services.get('locale');
             const countdown = svc_locale.format_duration(time_remaining);
 
-            $(el_window).find('.change-password-btn').html(`Set New Password (${countdown})`);
+            $(el_window).find('.change-password-btn').html(H`Set New Password (${countdown})`);
         }, 1000);
         el_window.on_close = () => {
             clearInterval(expiration_clock);
@@ -140,7 +140,7 @@ async function UIWindowNewPassword(options){
             const confirm_new_password = $(el_window).find('.confirm-new-password').val();
 
             if(!new_password || !confirm_new_password){
-                $(el_window).find('.form-error-msg').html('All fields are required.');
+                $(el_window).find('.form-error-msg').html(`All fields are required.`);
                 $(el_window).find('.form-error-msg').fadeIn();
                 return;
             }

src/UI/UIWindowTaskManager.js

@@ -68,7 +68,7 @@ class TaskManagerTable extends Component {
     #svc_process = globalThis.services.get('process');
 
     create_template ({ template }) {
-        $(template).html(`
+        $(template).html(H`
             <div class="taskmgr-taskarea"></div>
         `);
     }

src/helpers/refresh_item_container.js

@@ -58,7 +58,7 @@ const refresh_item_container = function(el_item_container, options){
         // show the loading spinner
         $(loading_spinner).show();
         setTimeout(function(){
-            $(loading_spinner).find('.explorer-loading-spinner-msg').html('Taking a little longer than usual. Please wait...');
+            $(loading_spinner).find('.explorer-loading-spinner-msg').html(`Taking a little longer than usual. Please wait...`);
         }, 3000)
     }, 1000);
 
@@ -247,7 +247,7 @@ const refresh_item_container = function(el_item_container, options){
         $(empty_message).hide();
 
         // show error message
-        $(error_message).html('Failed to load directory' + html_encode((e && e.message ? ': ' + e.message : '')));
+        $(error_message).html(H`Failed to load directory${e && e.message ? ': ' + e.message : ''}`);
         $(error_message).show();
     });
 }