feat: ability to reposition the sidekick

src/extension/_locales/de/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "Dunkles Design"
   },
+  "drag_to_reposition": {
+    "message": "Zum Neupositionieren ziehen"
+  },
   "delete": {
     "message": "Löschen"
   },

src/extension/_locales/en/messages.json

@@ -256,6 +256,9 @@
     "dark_mode": {
       "message": "Dark theme"
     },
+    "drag_to_reposition": {
+      "message": "Drag to reposition"
+    },
     "delete": {
       "message": "Delete"
     },

src/extension/_locales/es/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "Tema oscuro"
   },
+  "drag_to_reposition": {
+    "message": "Arrastrar para cambiar la posición"
+  },
   "delete": {
     "message": "Eliminar"
   },

src/extension/_locales/fr/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "Thème sombre"
   },
+  "drag_to_reposition": {
+    "message": "Faire glisser pour repositionner"
+  },
   "delete": {
     "message": "Supprimer"
   },

src/extension/_locales/it/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "Tema scuro"
   },
+  "drag_to_reposition": {
+    "message": "Trascina per riposizionare"
+  },
   "delete": {
     "message": "Elimina"
   },

src/extension/_locales/ja/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "ダークテーマ"
   },
+  "drag_to_reposition": {
+    "message": "ドラッグして位置を変更"
+  },
   "delete": {
     "message": "削除"
   },

src/extension/_locales/ko/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "어두운 테마"
   },
+  "drag_to_reposition": {
+    "message": "재배치하려면 드래그"
+  },
   "delete": {
     "message": "삭제"
   },

src/extension/_locales/pt_BR/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "Tema escuro"
   },
+  "drag_to_reposition": {
+    "message": "Arraste para reposicionar"
+  },
   "delete": {
     "message": "Excluir"
   },

src/extension/_locales/zh_CN/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "深色主题"
   },
+  "drag_to_reposition": {
+    "message": "拖动以重新定位"
+  },
   "delete": {
     "message": "删除"
   },

src/extension/_locales/zh_TW/messages.json

@@ -317,6 +317,9 @@
   "dark_mode": {
     "message": "深色主題"
   },
+  "drag_to_reposition": {
+    "message": "拖曳以重新定位"
+  },
   "delete": {
     "message": "刪除"
   },

src/extension/app/aem-sidekick.css.js

@@ -66,8 +66,8 @@ export const style = css`
   @media (max-width: 800px) {
     plugin-action-bar {
       min-width: unset;
-      width: 100%;
-      max-width: unset;
+      width: 100vw;
+      max-width: 100vw;
       bottom: 0;
     }
   }

src/extension/app/components/action-bar/action-bar.js

@@ -19,6 +19,7 @@ export class ActionBar extends LitElement {
     .action-bar {
       display: flex;
       border-radius: var(--spectrum2-sidekick-border-radius);
+      clip-path: border-box;
       color: var(--spectrum2-sidekick-color));
       background-color: var(--spectrum2-sidekick-background);
       border: 1px solid var(--spectrum2-sidekick-border-color);
@@ -59,6 +60,7 @@ export class ActionBar extends LitElement {
       .action-bar {
         border-radius: 0;
       }
+    }
   `;
 
   render() {

src/extension/app/components/plugin/env-switcher/env-switcher.js

@@ -376,6 +376,6 @@ export class EnvironmentSwitcher extends ConnectedElement {
   }
 
   render() {
-    return html`<action-bar-picker class="env-switcher" icons="none" @change=${this.onChange} .disabled=${!this.ready} @keydown=${this.keydown}></action-bar-picker>`;
+    return html`<action-bar-picker class="env-switcher" icons="none" placement="top-start" @change=${this.onChange} .disabled=${!this.ready} @keydown=${this.keydown}></action-bar-picker>`;
   }
 }

src/extension/app/components/plugin/plugin-action-bar.css.js

@@ -15,6 +15,11 @@
 import { css } from 'lit';
 
 export const style = css`
+  :host([dragging="true"]) {
+    user-select: none;
+    opacity: 0.95;
+  }
+
   action-bar > div.action-group {
     display: flex;
     padding: 12px;
@@ -38,7 +43,9 @@ export const style = css`
     flex-shrink: 0;
   }
 
-
+  action-bar > div.plugin-menu-container.hidden {
+    display: none;
+  }
 
   action-bar > div.badge-plugins-container {
     position: absolute;
@@ -55,16 +62,48 @@ export const style = css`
   }
 
   action-bar .logo {
-    padding: 12px;
-    width: 32px;
+    width: 42px;
     height: 32px;
+    padding: 12px 12px 12px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+
+  action-bar .logo > svg {
+    width: 24px;
+  }
+
+  action-bar .logo .drag-handle {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100%;
+    cursor: grab;
+    flex-shrink: 0;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    padding: 0 8px;
+  }
+
+  action-bar .logo .drag-handle .drag-bar {
+    width: 2px;
+    height: 16px;
+    background-color: var(--spectrum2-sidekick-color);
+    opacity: 0.2;
+    border-radius: 2px;
+    transition: opacity 0.2s;
+  }
+
+  action-bar .logo .drag-handle:hover .drag-bar {
+    opacity: 0.5;
   }
 
-  action-bar .logo > svg{
-    width: 56px;
+  action-bar .logo .drag-handle:active {
+    cursor: grabbing;
   }
 
   #plugin-menu {
@@ -126,8 +165,6 @@ export const style = css`
     width: 37px;
     flex-shrink: 0;
     cursor: pointer;
-    border-top-right-radius: var(--spectrum2-sidekick-border-radius);
-    border-bottom-right-radius: var(--spectrum2-sidekick-border-radius);
     background-color: var(--spectrum2-sidekick-background-close);
     backdrop-filter: var(--sidekick-backdrop-filter);
   }
@@ -161,16 +198,15 @@ export const style = css`
     color: var(--spectrum-global-color-gray-600);
   }
 
-  @media (max-width: 500px) {
-    #properties {
-      display: none;
+  @media (max-width: 800px) {
+    action-bar .logo {
+      width: 32px;
+      min-width: 32px;
+      padding-left: 12px;
     }
-  }
 
-  @media (max-width: 800px) {
-    action-bar .close-button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+    action-bar .logo .drag-handle {
+      display: none;
     }
   }
 `;