Release v2.19.2: reorganize shared UI modules

src/web/public/css/theme-custom.css

@@ -3944,7 +3944,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   text-transform: none;
 }
 
-.api-region-placeholder-section .chip {
+.placeholder-chip {
   padding: 0.2rem 0.45rem;
   border: 1px solid var(--bs-border-color);
   border-radius: 0.3rem;
@@ -3954,12 +3954,12 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   font-size: 0.75rem;
 }
 
-.api-region-placeholder-section .chip:hover {
+.placeholder-chip:hover {
   border-color: var(--bs-secondary-color);
   background: var(--bs-tertiary-bg);
 }
 
-.api-region-placeholder-section .chip:focus-visible {
+.placeholder-chip:focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;
 }

src/web/public/js/regions/type/time-date.js

@@ -208,7 +208,7 @@
     }
 
     return tokens.map(function (token) {
-      return '<span class="chip">{{' + token + '}}</span>';
+      return '<span class="chip placeholder-chip">{{' + token + '}}</span>';
     }).join('');
   }
 

src/web/public/js/regions/type/timetable.js

@@ -215,7 +215,7 @@
     }
 
     return tokens.map(function (token) {
-      return '<span class="chip">{{' + escapeHtml(token) + '}}</span>';
+      return '<span class="chip placeholder-chip">{{' + escapeHtml(token) + '}}</span>';
     }).join('');
   }
 

src/web/public/js/regions/type/weather.js

@@ -64,14 +64,14 @@
     if (visibleCount >= fields.length) return fields.map(function (field) {
       return window.placeholderChips && typeof window.placeholderChips.renderChip === 'function'
         ? window.placeholderChips.renderChip(field)
-        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+        : '<span class="chip placeholder-chip">{{' + escapeHtml(field) + '}}</span>';
     }).join('');
     var visibleFields = fields.slice(0, visibleCount);
     var overflowFields = fields.slice(visibleFields.length);
     var renderChip = function (field) {
       return window.placeholderChips && typeof window.placeholderChips.renderChip === 'function'
         ? window.placeholderChips.renderChip(field)
-        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+        : '<span class="chip placeholder-chip">{{' + escapeHtml(field) + '}}</span>';
     };
     var visibleMarkup = visibleFields.map(renderChip).join('');
     if (!overflowFields.length) return visibleMarkup;

src/web/public/js/shared/placeholder-chips.js

@@ -98,7 +98,7 @@
     var escapedCopyText = escapeHtml(copyText);
     ensureCopyHandler();
 
-    return '<span class="chip" ' + CHIP_ATTR + '="1" data-copy-text="' + escapedCopyText + '" role="button" tabindex="0" title="Click to copy ' + escapedCopyText + '" aria-label="Copy ' + escapedCopyText + '">' + escapedCopyText + '</span>';
+    return '<span class="chip placeholder-chip" ' + CHIP_ATTR + '="1" data-copy-text="' + escapedCopyText + '" role="button" tabindex="0" title="Click to copy ' + escapedCopyText + '" aria-label="Copy ' + escapedCopyText + '">' + escapedCopyText + '</span>';
   }
 
   function renderChips(tokens) {

src/web/public/js/slides/slide-form-regions.js

@@ -137,7 +137,7 @@ export function createSlideFormRegionHelpers(options) {
     var visibleMarkup = visibleFields.map(function (field) {
       return typeof placeholderChips.renderChip === 'function'
         ? placeholderChips.renderChip(field)
-        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+        : '<span class="chip placeholder-chip">{{' + escapeHtml(field) + '}}</span>';
     }).join('');
     var transformHint = includeTransformHint === false ? '' : '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{publishedAt.format("MMM D, YYYY")}}</code>, or <code>{{amount.multiply(10)}}</code>.</div>';
 
@@ -153,7 +153,7 @@ export function createSlideFormRegionHelpers(options) {
         '<div class="d-flex flex-wrap gap-2 mt-1">' + overflowFields.map(function (field) {
           return typeof placeholderChips.renderChip === 'function'
             ? placeholderChips.renderChip(field)
-            : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+            : '<span class="chip placeholder-chip">{{' + escapeHtml(field) + '}}</span>';
         }).join('') + '</div>' +
       '</details>';
   }
@@ -226,7 +226,7 @@ export function createSlideFormRegionHelpers(options) {
     var chips = Array.isArray(fieldList) ? fieldList.map(function (field) {
       return typeof placeholderChips.renderChip === 'function'
         ? placeholderChips.renderChip(field)
-        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+        : '<span class="chip placeholder-chip">{{' + escapeHtml(field) + '}}</span>';
     }).join('') : '';
 
     container.innerHTML = chips || '<span class="muted slide-image-file">' + escapeHtml(emptyLabel) + '</span>';

src/web/routes/settings/index.js

@@ -14,6 +14,6 @@ module.exports = function renderSettingsPage(settings, suggestedAnnouncementIcon
     defaultAnnouncementIconSuggestions: iconOptions.filter(function (option) { return option.isSelected; }),
     mediaSettings: mediaSettings || {},
     diagnostics: diagnostics || {},
-    scripts: ['js/icon-picker.js', 'js/settings/settings-page.js']
+    scripts: ['js/shared/ui/icon-picker.js', 'js/settings/settings-page.js']
   });
 };

src/web/routes/settings/rbac/form-view-model.js

@@ -119,7 +119,7 @@ function buildRbacAddViewModel(message, currentUser, formValues, permissionGroup
     users: users || [],
     pagination: pagination || null,
     roleEditBasePath: '/settings/roles/new',
-    scripts: ['js/rbac-permissions.js'],
+    scripts: ['js/rbac/permissions.js'],
     formAttrs: 'data-async-save data-async-save-close-url="/settings/roles" data-async-save-new-redirect="response-url" data-async-save-new-url="/settings/roles/new"'
   };
 }
@@ -155,7 +155,7 @@ function buildRbacEditViewModel(role, message, currentUser, permissionGroups, us
     users: users || [],
     pagination: pagination || null,
     roleEditBasePath: '/settings/roles/' + Number(role && role.id) + '/edit',
-    scripts: ['js/rbac-permissions.js'],
+    scripts: ['js/rbac/permissions.js'],
     formAttrs: 'data-async-save data-async-save-close-url="/settings/roles" data-async-save-new-url="/settings/roles/new"'
   };
 }

src/web/view.js

@@ -6,7 +6,7 @@ const Handlebars = require('handlebars');
 const { version: appVersion } = require('#root/package.json');
 const { hasPermission, hasAnyPermission, hasAssignedPermission } = require('#src/rbac');
 const { registerHandlebars } = require('#src/web/handlebars');
-const { getMessageVariant: inferMessageVariant } = require('#src/web/public/js/toast');
+const { getMessageVariant: inferMessageVariant } = require('#src/web/public/js/shared/ui/toast');
 
 const VIEWS_ROOT = path.join(__dirname, 'views');
 const cache = new Map();

src/web/views/shared/frame-layout.hbs

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{{title}} - Pulse</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
-    <script src="/assets/js/theme-init.js"></script>
+    <script src="/assets/js/shared/theme-init.js"></script>
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
@@ -83,12 +83,12 @@
       {{/if}}
     <script src="/assets/adminlte/js/bootstrap.bundle.min.js"></script>
     <script src="/assets/adminlte/js/adminlte.min.js"></script>
-      <script src="/assets/js/web-ui-helpers.js"></script>
-    <script src="/assets/js/toast.js"></script>
+      <script src="/assets/js/shared/web-ui-helpers.js"></script>
+    <script src="/assets/js/shared/ui/toast.js"></script>
     <script src="/assets/js/table/table-sort.js"></script>
     <script src="/assets/js/table/table-search.js"></script>
     <script src="/assets/js/admin/admin-page.js"></script>
-    <script src="/assets/js/system-status.js"></script>
+    <script src="/assets/js/shared/system-status.js"></script>
     {{#if scripts.length}}
       {{#each scripts}}
         <script src="/assets/{{this}}"></script>

src/web/views/shared/layout.hbs

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>{{title}} - Pulse</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
-    <script src="/assets/js/theme-init.js"></script>
+    <script src="/assets/js/shared/theme-init.js"></script>
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
@@ -26,7 +26,7 @@
         </div>
       </main>
       <script src="/assets/js/admin/admin-page.js"></script>
-      <script src="/assets/js/system-status.js"></script>
+      <script src="/assets/js/shared/system-status.js"></script>
     {{else if authShell}}
       <div id="app-toast-container" class="toast-container app-toast-container position-fixed end-0 p-3">
         {{#if message}}
@@ -56,9 +56,9 @@
           {{{body}}}
         </div>
       </main>
-      <script src="/assets/js/toast.js"></script>
+      <script src="/assets/js/shared/ui/toast.js"></script>
       <script src="/assets/js/admin/admin-page.js"></script>
-      <script src="/assets/js/system-status.js"></script>
+      <script src="/assets/js/shared/system-status.js"></script>
     {{else}}
       <div id="app-toast-container" class="toast-container app-toast-container position-fixed end-0 p-3">
         {{#if message}}
@@ -413,8 +413,8 @@
       </dialog>
       <script src="/assets/adminlte/js/bootstrap.bundle.min.js"></script>
       <script src="/assets/adminlte/js/adminlte.min.js"></script>
-      <script src="/assets/js/web-ui-helpers.js"></script>
-      <script src="/assets/js/toast.js"></script>
+      <script src="/assets/js/shared/web-ui-helpers.js"></script>
+      <script src="/assets/js/shared/ui/toast.js"></script>
       <script src="/assets/js/table/table-sort.js"></script>
       <script src="/assets/js/table/table-search.js"></script>
       <script src="/assets/js/admin/admin-page.js"></script>
@@ -427,7 +427,7 @@
       {{/if}}
     {{/each}}
   {{/if}}
-      <script src="/assets/js/system-status.js"></script>
+      <script src="/assets/js/shared/system-status.js"></script>
     {{/if}}
   </body>
 </html>

src/web/views/signage/announcements/form.hbs

@@ -174,7 +174,7 @@
       </div>
     </div>
   </div>
-  <script src="/assets/js/icon-picker.js?v={{appVersion}}"></script>
+  <script src="/assets/js/shared/ui/icon-picker.js?v={{appVersion}}"></script>
   <script type="module" src="/assets/js/announcements/announcement-form.js?v={{appVersion}}"></script>
 </form>
 

src/web/views/signage/slides/form.hbs

@@ -247,5 +247,5 @@
 {{/each}}
 <script type="module" src="/assets/js/slides/slide-form.js?v={{assetVersion}}"></script>
 <script type="module" src="/assets/js/slides/slide-image-cropper.js?v={{assetVersion}}"></script>
-<script type="module" src="/assets/js/media-picker.js?v={{appVersion}}"></script>
+<script type="module" src="/assets/js/shared/ui/media-picker.js?v={{appVersion}}"></script>
 

src/web/views/signage/templates/form.hbs

@@ -213,4 +213,4 @@
 <textarea id="template-region-editor-data" hidden>{{json regionEditorData}}</textarea>
 <script src="/assets/vendor/tinymce/tinymce.min.js"></script>
 <script type="module" src="/assets/js/templates/template-default-content-editor.js?v={{appVersion}}"></script>
-<script type="module" src="/assets/js/media-picker.js?v={{appVersion}}"></script>
+<script type="module" src="/assets/js/shared/ui/media-picker.js?v={{appVersion}}"></script>