@underpostnet/underpost 2.96.1 → 2.97.1

package/src/client/components/core/Panel.js

@@ -2,8 +2,8 @@ import { getId, isValidDate, newInstance } from './CommonJs.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
-import { darkTheme, ThemeEvents } from './Css.js';
-import { append, getDataFromInputFile, htmls, s } from './VanillaJs.js';
+import { darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from './Css.js';
+import { append, copyData, getDataFromInputFile, htmls, s, sa } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Translate } from './Translate.js';
 import { DropDown } from './DropDown.js';
@@ -14,6 +14,9 @@ import { RichText } from './RichText.js';
 import { loggerFactory } from './Logger.js';
 import { Badge } from './Badge.js';
 import { Content } from './Content.js';
+import { DocumentService } from '../../services/document/document.service.js';
+import { NotificationManager } from './NotificationManager.js';
+import { getApiBaseUrl } from '../../services/core/core.service.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -30,6 +33,10 @@ const Panel = {
       originData: () => [],
       filesData: () => [],
       onClick: () => {},
+      share: {
+        copyLink: false,
+      },
+      showCreatorProfile: false,
     },
   ) {
     const idPanel = options?.idPanel ? options.idPanel : getId(this.Tokens, `${idPanel}-`);
@@ -87,6 +94,62 @@ const Panel = {
               htmls(`.${idPanel}-cell-col-a-${id}`, render);
             },
           });
+        if (options.share && options.share.copyLink) {
+          EventsUI.onClick(
+            `.${idPanel}-btn-copy-share-${id}`,
+            async (e) => {
+              try {
+                const shareUrl = `${window.location.origin}${window.location.pathname}?cid=${obj._id}`;
+                await copyData(shareUrl);
+                await NotificationManager.Push({
+                  status: 'success',
+                  html: html`<div>${Translate.Render('link-copied')}</div>`,
+                });
+                // Track the copy share link event
+                await DocumentService.patch({ id: obj._id, action: 'copy-share-link' });
+                // Update the count in the UI - read current value from span first
+                const countSpan = s(`.${idPanel}-share-count-${id}`);
+                if (countSpan) {
+                  const currentCount = parseInt(countSpan.textContent) || 0;
+                  const newCount = currentCount + 1;
+                  htmls(`.${idPanel}-share-count-${id}`, newCount);
+                } else {
+                  // Create count badge if it didn't exist before (was 0)
+                  const btn = s(`.${idPanel}-btn-copy-share-${id}`);
+                  if (btn) {
+                    const countBadge = document.createElement('span');
+                    countBadge.className = `${idPanel}-share-count-${id}`;
+                    countBadge.style.cssText =
+                      'position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;';
+                    countBadge.textContent = '1';
+                    btn.appendChild(countBadge);
+                  }
+                }
+              } catch (error) {
+                logger.error('Error copying share link:', error);
+                await NotificationManager.Push({
+                  status: 'error',
+                  html: html`<div>${Translate.Render('error-copying-link')}</div>`,
+                });
+              }
+            },
+            { context: 'modal' },
+          );
+
+          // Add tooltip hover effect
+          setTimeout(() => {
+            const btn = s(`.${idPanel}-btn-copy-share-${id}`);
+            const tooltip = s(`.${idPanel}-share-tooltip-${id}`);
+            if (btn && tooltip) {
+              btn.addEventListener('mouseenter', () => {
+                tooltip.style.opacity = '1';
+              });
+              btn.addEventListener('mouseleave', () => {
+                tooltip.style.opacity = '0';
+              });
+            }
+          });
+        }
         EventsUI.onClick(
           `.${idPanel}-btn-delete-${id}`,
           async (e) => {
@@ -99,6 +162,8 @@ const Panel = {
         );
         EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
           logger.warn('edit', obj);
+          const searchId = String(obj._id || obj.id);
+
           if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
           else if (obj.id) Panel.Tokens[idPanel].editId = obj.id;
 
@@ -106,14 +171,11 @@ const Panel = {
           s(`.btn-${idPanel}-label-add`).classList.add('hide');
 
           openPanelForm();
-          // s(`.btn-${idPanel}-add`).click();
-          s(`.${scrollClassContainer}`).scrollTop = 0;
-
+          // s(`.${scrollClassContainer}`).scrollTop = 0;
           const originData = options.originData();
           const filesData = options.filesData();
 
           // Convert IDs to strings for comparison to handle ObjectId vs string issues
-          const searchId = String(obj._id || obj.id);
           const foundOrigin = originData.find((d) => String(d._id || d.id) === searchId);
           const foundFiles = filesData.find((d) => String(d._id || d.id) === searchId);
 
@@ -133,6 +195,8 @@ const Panel = {
             );
           }
 
+          // Clear previous form values then populate with the current item's data
+          Input.cleanValues(formData);
           Input.setValues(formData, obj, foundOrigin, foundFiles);
           if (options.on.initEdit) await options.on.initEdit({ data: obj });
         });
@@ -144,34 +208,120 @@ const Panel = {
           e.preventDefault();
           // if (options.onClick) await options.onClick({ payload });
         };
+
+        // Add theme change handler for creator profile header
+        if (options.showCreatorProfile && obj.userInfo) {
+          const updateCreatorProfileTheme = () => {
+            const profileHeader = s(`.creator-profile-header-${id}`);
+            if (profileHeader) {
+              profileHeader.style.borderBottom = `1px solid ${darkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)'}`;
+              profileHeader.style.background = `${darkTheme ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)'}`;
+
+              // Update avatar border if it's an image
+              const avatarImg = profileHeader.querySelector('.creator-avatar');
+              if (avatarImg && avatarImg.tagName === 'IMG') {
+                avatarImg.style.border = `2px solid ${darkTheme ? 'rgba(102, 126, 234, 0.5)' : 'rgba(102, 126, 234, 0.3)'}`;
+              }
+
+              // Update username color
+              const username = profileHeader.querySelector('.creator-username');
+              if (username) {
+                username.style.color = `${darkTheme ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.85)'}`;
+              }
+
+              // Update "Creator" label color
+              const creatorLabel = username?.nextElementSibling;
+              if (creatorLabel) {
+                creatorLabel.style.color = `${darkTheme ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.45)'}`;
+              }
+            }
+          };
+
+          // Register theme change handler
+          const profileThemeHandlerId = `${id}-creator-profile-theme`;
+          ThemeEvents[profileThemeHandlerId] = updateCreatorProfileTheme;
+        }
       });
       if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
-      return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}">
+
+      // Check if document is public (from obj.isPublic field)
+      const isPublic = obj.isPublic === true;
+      // Visibility icon: globe for public, padlock for private
+      const visibilityIcon = isPublic
+        ? '<i class="fas fa-globe" title="Public document"></i>'
+        : '<i class="fas fa-lock" title="Private document"></i>';
+
+      return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}" style="position: relative;">
         <div class="fl ${idPanel}-tools session-fl-log-in  ${obj.tools ? '' : 'hide'}">
           ${await BtnIcon.Render({
-            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
-            label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
+            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
+            label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
             useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
-              text: `${Translate.Render(`edit`)}`,
+              text: `${Translate.Render(`delete`)}`,
               classList: '',
-              style: { top: `-22px`, left: '-5px' },
+              style: { top: `-22px`, left: '-13px' },
             }),
           })}
           ${await BtnIcon.Render({
-            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
-            label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
+            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
+            label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
             useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
-              text: `${Translate.Render(`delete`)}`,
+              text: `${Translate.Render(`edit`)}`,
               classList: '',
-              style: { top: `-22px`, left: '-13px' },
+              style: { top: `-22px`, left: '-5px' },
             }),
           })}
         </div>
         <div class="in container-${idPanel}-${id}">
+          <div class="panel-visibility-icon">${visibilityIcon}</div>
+          ${options.showCreatorProfile && obj.userInfo
+            ? html`<div
+                class="creator-profile-header creator-profile-header-${id}"
+                style="padding: 10px 12px; margin-bottom: 10px; border-bottom: 1px solid ${darkTheme
+                  ? 'rgba(255,255,255,0.1)'
+                  : 'rgba(0,0,0,0.08)'}; display: flex; align-items: center; gap: 10px; background: ${darkTheme
+                  ? 'rgba(255,255,255,0.02)'
+                  : 'rgba(0,0,0,0.02)'}; border-radius: 4px 4px 0 0;"
+              >
+                ${obj.userInfo.profileImageId && obj.userInfo.profileImageId._id
+                  ? html`<img
+                      class="creator-avatar"
+                      src="${getApiBaseUrl({ id: obj.userInfo.profileImageId._id, endpoint: 'file/blob' })}"
+                      alt="${obj.userInfo.username || obj.userInfo.email}"
+                      style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid ${darkTheme
+                        ? 'rgba(102, 126, 234, 0.5)'
+                        : 'rgba(102, 126, 234, 0.3)'}; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"
+                      title="${obj.userInfo.email || obj.userInfo.username}"
+                    />`
+                  : html`<div
+                      class="creator-avatar"
+                      style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"
+                      title="${obj.userInfo.email || obj.userInfo.username}"
+                    >
+                      ${(obj.userInfo.username || obj.userInfo.email || 'U').charAt(0).toUpperCase()}
+                    </div>`}
+                <div style="display: flex; flex-direction: column; min-width: 0; flex: 1;">
+                  <span
+                    class="creator-username"
+                    style="font-size: 14px; font-weight: 600; color: ${darkTheme
+                      ? 'rgba(255,255,255,0.9)'
+                      : 'rgba(0,0,0,0.85)'}; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+                  >
+                    ${obj.userInfo.username || obj.userInfo.email || 'Unknown'}
+                  </span>
+                  <span
+                    style="font-size: 11px; color: ${darkTheme
+                      ? 'rgba(255,255,255,0.5)'
+                      : 'rgba(0,0,0,0.45)'}; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;"
+                    >Creator</span
+                  >
+                </div>
+              </div>`
+            : ''}
           <div class="in ${idPanel}-head">
             <div class="in ${idPanel}-title">
               ${options.titleIcon}
@@ -201,18 +351,79 @@ const Panel = {
                   }
 
                   if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'tags')) {
-                    setTimeout(async () => {
+                    // Function to render tags with current theme
+                    const renderTags = async () => {
                       let tagRender = html``;
                       for (const tag of obj[infoKey]) {
+                        // Use subThemeManager colors for consistent theming
+                        const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+                        const hasThemeColor = themeColor && themeColor !== null;
+
+                        let tagBg, tagColor;
+                        if (darkTheme) {
+                          tagBg = hasThemeColor ? darkenHex(themeColor, 0.6) : '#4a4a4a';
+                          tagColor = hasThemeColor ? lightenHex(themeColor, 0.7) : '#ffffff';
+                        } else {
+                          tagBg = hasThemeColor ? lightenHex(themeColor, 0.7) : '#a2a2a2';
+                          tagColor = hasThemeColor ? darkenHex(themeColor, 0.5) : '#ffffff';
+                        }
+
                         tagRender += await Badge.Render({
                           text: tag,
-                          style: { color: 'white' },
-                          classList: 'inl',
-                          style: { margin: '3px', background: `#a2a2a2` },
+                          style: { color: tagColor },
+                          classList: 'inl panel-tag-clickable',
+                          style: {
+                            margin: '3px',
+                            background: tagBg,
+                            color: tagColor,
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                          },
                         });
                       }
-                      if (s(`.tag-render-${id}`)) htmls(`.tag-render-${id}`, tagRender);
-                    });
+                      if (s(`.tag-render-${id}`)) {
+                        htmls(`.tag-render-${id}`, tagRender);
+
+                        // Add click handlers to tags for search integration
+                        setTimeout(() => {
+                          const tagElements = sa(`.tag-render-${id} .panel-tag-clickable`);
+                          tagElements.forEach((tagEl) => {
+                            tagEl.onclick = (e) => {
+                              e.stopPropagation();
+                              const tagText = tagEl.textContent.trim();
+
+                              // Open search bar if closed
+                              if (
+                                !s('.main-body-btn-ui-bar-custom-open').classList.contains('hide') ||
+                                !s(`.main-body-btn-ui-open`).classList.contains('hide')
+                              )
+                                s('.main-body-btn-bar-custom').click();
+
+                              // Find and populate search box if it exists
+                              const searchBox = s('.top-bar-search-box');
+                              if (searchBox) {
+                                searchBox.value = tagText;
+                                searchBox.focus();
+
+                                // Trigger input event to start search
+                                const inputEvent = new Event('input', { bubbles: true });
+                                searchBox.dispatchEvent(inputEvent);
+
+                                logger.info(`Tag clicked: ${tagText} - search triggered`);
+                              }
+                            };
+                          });
+                        }, 100);
+                      }
+                    };
+
+                    // Initial render
+                    setTimeout(renderTags);
+
+                    // Add theme change handler for this tag set
+                    const tagThemeHandlerId = `${id}-tags-${infoKey}-theme`;
+                    ThemeEvents[tagThemeHandlerId] = renderTags;
+
                     return html``;
                   }
                   {
@@ -266,6 +477,32 @@ const Panel = {
             </div>
           </div>
         </div>
+        ${options.share && options.share.copyLink
+          ? html`<div
+              class="${idPanel}-share-btn-container ${idPanel}-share-btn-container-${id}"
+              style="position: absolute; bottom: 8px; right: 8px; z-index: 2;"
+            >
+              <button
+                class="btn-icon ${idPanel}-btn-copy-share-${id}"
+                style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
+              >
+                <i class="fas fa-link" style="font-size: 20px;"></i>
+                ${obj.totalCopyShareLinkCount && obj.totalCopyShareLinkCount > 0
+                  ? html`<span
+                      class="${idPanel}-share-count-${id}"
+                      style="position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;"
+                      >${obj.totalCopyShareLinkCount}</span
+                    >`
+                  : ''}
+              </button>
+              <div
+                class="${idPanel}-share-tooltip-${id}"
+                style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
+              >
+                ${Translate.Render('copy-share-link')}
+              </div>
+            </div>`
+          : ''}
       </div>`;
     };
 
@@ -410,6 +647,11 @@ const Panel = {
               </div>`,
             // disabled: true,
             // disabledEye: true,
+          })}
+          ${await BtnIcon.Render({
+            class: `inl section-mp btn-custom btn-${idPanel}-clean-file`,
+            label: html`<i class="fa-solid fa-file-circle-xmark"></i> ${Translate.Render('clear-file')}`,
+            type: 'button',
           })}`;
           break;
         default:
@@ -476,6 +718,15 @@ const Panel = {
       s(`.btn-${idPanel}-clean`).onclick = () => {
         Input.cleanValues(formData);
       };
+      s(`.btn-${idPanel}-clean-file`).onclick = () => {
+        // Clear file input specifically
+        const fileFormData = formData.find((f) => f.inputType === 'file');
+        if (fileFormData && s(`.${fileFormData.id}`)) {
+          s(`.${fileFormData.id}`).value = '';
+          s(`.${fileFormData.id}`).inputFiles = null;
+          htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
+        }
+      };
       s(`.btn-${idPanel}-close`).onclick = (e) => {
         e.preventDefault();
         s(`.${idPanel}-form-body`).style.opacity = 0;
@@ -494,10 +745,26 @@ const Panel = {
       };
       s(`.btn-${idPanel}-add`).onclick = async (e) => {
         e.preventDefault();
-        // s(`.btn-${idPanel}-clean`).click();
+
+        // Clean all form inputs and reset data scope
+        Input.cleanValues(formData);
+
+        // Clean file input specifically
+        const fileFormData = formData.find((f) => f.inputType === 'file');
+        if (fileFormData && s(`.${fileFormData.id}`)) {
+          s(`.${fileFormData.id}`).value = '';
+          s(`.${fileFormData.id}`).inputFiles = null;
+          htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
+        }
+
+        // Reset edit ID to ensure we're in "add" mode
         Panel.Tokens[idPanel].editId = undefined;
+
+        // Update button labels
         s(`.btn-${idPanel}-label-add`).classList.remove('hide');
         s(`.btn-${idPanel}-label-edit`).classList.add('hide');
+
+        // Scroll to top
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
@@ -544,6 +811,29 @@ const Panel = {
           ? getDarkStyles(idPanel, scrollClassContainer)
           : getLightStyles(idPanel, scrollClassContainer);
       }
+
+      // Update tag hover styles
+      const tagStyleElement = s(`.${idPanel}-tag-styles`);
+      if (tagStyleElement) {
+        const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        let hoverBg;
+        if (darkTheme) {
+          hoverBg = hasThemeColor ? darkenHex(themeColor, 0.5) : '#5a5a5a';
+        } else {
+          hoverBg = hasThemeColor ? lightenHex(themeColor, 0.6) : '#8a8a8a';
+        }
+
+        tagStyleElement.textContent = css`
+          .panel-tag-clickable:hover {
+            background: ${hoverBg} !important;
+            transform: scale(1.05);
+          }
+          .panel-tag-clickable:active {
+            transform: scale(0.98);
+          }
+        `;
+      }
     };
 
     // Add theme change listener
@@ -562,15 +852,39 @@ const Panel = {
           width: 100%;
         }
         .${idPanel}-title {
-          color: rgba(109, 104, 255, 1);
+          color: ${(() => {
+            const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+            const hasThemeColor = themeColor && themeColor !== null;
+            if (hasThemeColor) {
+              return darkTheme ? lightenHex(themeColor, 0.3) : darkenHex(themeColor, 0.2);
+            } else {
+              return darkTheme ? '#8a85ff' : 'rgba(109, 104, 255, 1)';
+            }
+          })()};
           font-size: 24px;
           padding: 5px;
         }
         .a-title-${idPanel} {
-          color: rgba(109, 104, 255, 1);
+          color: ${(() => {
+            const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+            const hasThemeColor = themeColor && themeColor !== null;
+            if (hasThemeColor) {
+              return darkTheme ? lightenHex(themeColor, 0.3) : darkenHex(themeColor, 0.2);
+            } else {
+              return darkTheme ? '#8a85ff' : 'rgba(109, 104, 255, 1)';
+            }
+          })()};
         }
         .a-title-${idPanel}:hover {
-          color: #e89f4c;
+          color: ${(() => {
+            const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+            const hasThemeColor = themeColor && themeColor !== null;
+            if (hasThemeColor) {
+              return darkTheme ? lightenHex(themeColor, 0.5) : lightenHex(themeColor, 0.3);
+            } else {
+              return darkTheme ? '#ffb74d' : '#e89f4c';
+            }
+          })()};
         }
         .${idPanel}-row {
           padding: 5px;
@@ -587,6 +901,7 @@ const Panel = {
           margin-left: 10px;
           top: -7px;
         }
+
         .${idPanel}-row-key {
         }
         .${idPanel}-row-value {
@@ -617,8 +932,53 @@ const Panel = {
           color: #000000 !important;
           font-size: 17px !important;
         }
+        .${idPanel}-share-btn-container button:hover {
+          background: transparent !important;
+          transform: scale(1.1);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
+        }
+        .${idPanel}-share-btn-container button:focus {
+          outline: none;
+          background: transparent !important;
+        }
+        .${idPanel}-share-btn-container button:focus {
+          outline: none;
+          background: transparent !important;
+        }
+        .${idPanel}-share-btn-container button:active {
+          transform: scale(0.95);
+        }
+        .${idPanel}-share-btn-container span[class*='share-count'] {
+          animation: ${idPanel}-share-pulse 2s infinite;
+        }
+        @keyframes ${idPanel}-share-pulse {
+          0%,
+          100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+        }
       </style>
       <style class="${idPanel}-styles"></style>
+      <style class="${idPanel}-tag-styles">
+        .panel-tag-clickable:hover {
+          background: ${(() => {
+            const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+            const hasThemeColor = themeColor && themeColor !== null;
+            if (darkTheme) {
+              return hasThemeColor ? darkenHex(themeColor, 0.5) : '#5a5a5a';
+            } else {
+              return hasThemeColor ? lightenHex(themeColor, 0.6) : '#8a8a8a';
+            }
+          })()} !important;
+          transform: scale(1.05);
+        }
+        .panel-tag-clickable:active {
+          transform: scale(0.98);
+        }
+      </style>
       <div class="${idPanel}-container">
         <div class="in modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}">
           <div class="in ${idPanel}-form-header">
@@ -710,6 +1070,19 @@ function getBaseStyles(idPanel, scrollClassContainer) {
     .${idPanel}-dropdown {
       min-height: 100px;
     }
+    .panel-visibility-icon {
+      position: absolute;
+      top: 34px;
+      left: 0px;
+      font-size: 14px;
+      opacity: 0.7;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+      z-index: 10;
+    }
+    .${idPanel}:hover .panel-visibility-icon {
+      opacity: 1;
+    }
   `;
 }
 
@@ -726,15 +1099,27 @@ function getLightStyles(idPanel, scrollClassContainer) {
       background: #ffffff;
     }
     .${idPanel}-title {
-      color: rgba(109, 104, 255, 1);
+      color: ${(() => {
+        const themeColor = subThemeManager.lightColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? darkenHex(themeColor, 0.2) : 'rgba(109, 104, 255, 1)';
+      })()};
       font-size: 24px;
       padding: 5px;
     }
     .a-title-${idPanel} {
-      color: rgba(109, 104, 255, 1);
+      color: ${(() => {
+        const themeColor = subThemeManager.lightColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? darkenHex(themeColor, 0.2) : 'rgba(109, 104, 255, 1)';
+      })()};
     }
     .a-title-${idPanel}:hover {
-      color: #e89f4c;
+      color: ${(() => {
+        const themeColor = subThemeManager.lightColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? lightenHex(themeColor, 0.3) : '#e89f4c';
+      })()};
     }
     .${idPanel}-row-pin-value {
       font-size: 20px;
@@ -748,6 +1133,10 @@ function getLightStyles(idPanel, scrollClassContainer) {
       color: #000000 !important;
       font-size: 17px !important;
     }
+    .panel-visibility-icon .fa-globe,
+    .panel-visibility-icon .fa-lock {
+      color: #666;
+    }
   `;
 }
 
@@ -764,15 +1153,27 @@ function getDarkStyles(idPanel, scrollClassContainer) {
       background: #3a3a3a;
     }
     .${idPanel}-title {
-      color: #8a85ff;
+      color: ${(() => {
+        const themeColor = subThemeManager.darkColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? lightenHex(themeColor, 0.3) : '#8a85ff';
+      })()};
       font-size: 24px;
       padding: 5px;
     }
     .a-title-${idPanel} {
-      color: #8a85ff;
+      color: ${(() => {
+        const themeColor = subThemeManager.darkColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? lightenHex(themeColor, 0.3) : '#8a85ff';
+      })()};
     }
     .a-title-${idPanel}:hover {
-      color: #ffb74d;
+      color: ${(() => {
+        const themeColor = subThemeManager.darkColor;
+        const hasThemeColor = themeColor && themeColor !== null;
+        return hasThemeColor ? lightenHex(themeColor, 0.5) : '#ffb74d';
+      })()};
     }
     .${idPanel}-row-pin-value {
       font-size: 20px;
@@ -786,6 +1187,10 @@ function getDarkStyles(idPanel, scrollClassContainer) {
       color: #ffffff !important;
       font-size: 17px !important;
     }
+    .panel-visibility-icon .fa-globe,
+    .panel-visibility-icon .fa-lock {
+      color: #999;
+    }
   `;
 }