Ajustes visuais no comportamento da função de mostrar/ocultar a sidebar

content-script.js

@@ -285,44 +285,10 @@
       return;
     }
 
+    mount?.remove();
     hcmTile?.remove();
-
-    const header = document.querySelector(SELECTORS.header);
-    const functionsContainer = header?.querySelector(SELECTORS.functions);
-    const anchor = functionsContainer ? findUserAnchor(functionsContainer) : null;
-
-    if (!header || !functionsContainer) {
-      return;
-    }
-
-    ensureStyles();
-
-    const themedMount = mount ?? createMount();
-    const overlay = ensureModal();
-
-    applyTheme(header, functionsContainer, anchor, themedMount, overlay);
-
-    const targetSibling = resolveInsertionTarget(
-      functionsContainer,
-      anchor,
-      themedMount
-    );
-
-    if (
-      themedMount.parentElement !== functionsContainer ||
-      themedMount.nextElementSibling !== targetSibling
-    ) {
-      const verifiedTarget =
-        targetSibling && targetSibling.parentElement === functionsContainer
-          ? targetSibling
-          : null;
-
-      if (verifiedTarget) {
-        functionsContainer.insertBefore(themedMount, verifiedTarget);
-      } else {
-        functionsContainer.appendChild(themedMount);
-      }
-    }
+    removeModal();
+    unlockScroll();
   }
 
   function createMount() {
@@ -507,7 +473,8 @@
     if (
       action === "calendar-prev" ||
       action === "calendar-next" ||
-      action === "calendar-today"
+      action === "calendar-today" ||
+      action === "toggle-sidebar"
     ) {
       return `[data-action="${action}"]`;
     }
@@ -559,14 +526,6 @@
             <span class="arch-panel-extension-shell-note">
               ${getHeaderSummary()}
             </span>
-            <button
-              type="button"
-              class="arch-panel-extension-theme-toggle"
-              data-action="toggle-sidebar"
-              aria-label="Toggle sidebar"
-            >
-              ${appState.sidebarCollapsed ? "Show sidebar" : "Hide sidebar"}
-            </button>
             <button
               type="button"
               class="arch-panel-extension-theme-toggle"

page-bridge.js

@@ -57,6 +57,10 @@
   function getAllowedTopMessageOrigin() {
     const candidates = [];
 
+    if (window.top === window) {
+      return getSafeTargetOrigin();
+    }
+
     try {
       const referrerOrigin = document.referrer
         ? new URL(document.referrer).origin
@@ -76,10 +80,6 @@
       // ancestorOrigins is browser-specific and may be unavailable.
     }
 
-    if (window.top === window) {
-      candidates.push(getSafeTargetOrigin());
-    }
-
     for (const origin of candidates) {
       if (ALLOWED_TOP_MESSAGE_ORIGINS.has(origin)) {
         return origin;

src/content/styles.css

@@ -53,6 +53,7 @@ body.arch-panel-extension-modal-open {
 .arch-panel-extension-close:focus-visible,
 .arch-panel-extension-theme-toggle:focus-visible,
 .arch-panel-extension-sidebar-button:focus-visible,
+.arch-panel-extension-sidebar-toggle:focus-visible,
 .arch-panel-extension-utility-button:focus-visible,
 .arch-panel-extension-summary-card-button:focus-visible,
 .arch-panel-extension-sort-button:focus-visible,
@@ -339,19 +340,54 @@ body.arch-panel-extension-modal-open {
 }
 
 .arch-panel-extension-shell-body.is-sidebar-collapsed {
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: 44px minmax(0, 1fr);
 }
 
 .arch-panel-extension-sidebar {
+  position: relative;
   background: var(--wb-sidebar);
   border-right: 1px solid var(--wb-border);
-  padding: 20px 14px;
+  padding: 44px 14px 20px;
 }
 
 .arch-panel-extension-sidebar.is-collapsed {
+  padding: 44px 6px 20px;
+}
+
+.arch-panel-extension-sidebar.is-collapsed .arch-panel-extension-sidebar-group {
   display: none;
 }
 
+.arch-panel-extension-sidebar-toggle {
+  position: absolute;
+  top: 10px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--wb-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.arch-panel-extension-sidebar-toggle:hover {
+  border-color: var(--wb-border);
+  background: var(--wb-panel);
+  color: var(--wb-text);
+}
+
+.arch-panel-extension-sidebar-toggle svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  pointer-events: none;
+}
+
 .arch-panel-extension-sidebar-group + .arch-panel-extension-sidebar-group {
   margin-top: 18px;
   padding-top: 18px;
@@ -2722,7 +2758,21 @@ body.arch-panel-extension-modal-open {
   }
 
   .arch-panel-extension-sidebar {
-    display: none;
+    border-right: 0;
+    border-bottom: 1px solid var(--wb-border);
+  }
+
+  .arch-panel-extension-shell-body.is-sidebar-collapsed {
+    grid-template-columns: 1fr;
+  }
+
+  .arch-panel-extension-sidebar.is-collapsed {
+    min-height: 44px;
+    padding: 8px 10px;
+  }
+
+  .arch-panel-extension-sidebar.is-collapsed .arch-panel-extension-sidebar-toggle {
+    right: 10px;
   }
 }
 

src/views/dashboard-view.js

@@ -88,6 +88,23 @@
 
       return `
         <aside class="arch-panel-extension-sidebar${appState.sidebarCollapsed ? " is-collapsed" : ""}" aria-label="Dataset summary">
+          <button
+            type="button"
+            class="arch-panel-extension-sidebar-toggle"
+            data-action="toggle-sidebar"
+            aria-label="${appState.sidebarCollapsed ? "Show sidebar" : "Hide sidebar"}"
+            aria-expanded="${appState.sidebarCollapsed ? "false" : "true"}"
+            title="${appState.sidebarCollapsed ? "Show sidebar" : "Hide sidebar"}"
+          >
+            <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+              ${
+                appState.sidebarCollapsed
+                  ? `<path d="M7.22 15.78a.75.75 0 0 1 0-1.06L11.94 10 7.22 5.28a.75.75 0 0 1 1.06-1.06l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0Z"></path>`
+                  : `<path d="M12.78 4.22a.75.75 0 0 1 0 1.06L8.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z"></path>`
+              }
+            </svg>
+          </button>
+
           <div class="arch-panel-extension-sidebar-group">
             <p class="arch-panel-extension-sidebar-label">Current user</p>
             ${renderCurrentUserSidebar(user)}