feat(core)*: introduce a dropdown menu for each panel (#8351)

This is the initial work to support the two related issues mentioned above, which is introducing the context menu for each tab panel, which will give us the place to list related actions.

Relates to #8272.
Relates to #8273.

Author: MilosPaunovic

ui/src/components/MultiPanelTabs.vue

@@ -52,6 +52,29 @@
                         />
                     </svg>
                 </button>
+                
+                <el-dropdown trigger="click" placement="bottom-end">
+                    <DotsVertical class="me-2 tab-icon" />
+                    <template #dropdown>
+                        <el-dropdown-menu class="m-2">
+                            <el-dropdown-item disabled :icon="DockRight">
+                                <span class="small-text">
+                                    {{ t("multi_panel_editor.move_right") }}
+                                </span>
+                            </el-dropdown-item>
+                            <el-dropdown-item disabled :icon="DockLeft">
+                                <span class="small-text">
+                                    {{ t("multi_panel_editor.move_left") }}
+                                </span>
+                            </el-dropdown-item>
+                            <el-dropdown-item disabled :icon="Close">
+                                <span class="small-text">
+                                    {{ t("multi_panel_editor.close_all_tabs") }}
+                                </span>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
             </div>
             <div
                 class="content-panel"
@@ -74,10 +97,19 @@
 
 <script lang="ts" setup>
     import {nextTick, ref, watch} from "vue";
+    import {useI18n} from "vue-i18n";
+
     import "splitpanes/dist/splitpanes.css"
     import {Splitpanes, Pane} from "splitpanes"
+
     import CloseIcon from "vue-material-design-icons/Close.vue"
     import CircleMediumIcon from "vue-material-design-icons/CircleMedium.vue"
+    import DotsVertical from "vue-material-design-icons/DotsVertical.vue";
+    import DockLeft from "vue-material-design-icons/DockLeft.vue";
+    import DockRight from "vue-material-design-icons/DockRight.vue";
+    import Close from "vue-material-design-icons/Close.vue";
+
+    const {t} = useI18n({useScope: "global"});
 
     function throttle(callback: () => void, limit: number): () => void {
         let waiting = false;
@@ -387,6 +419,18 @@
         }
     }
 
+    .tab-icon{
+        color: var(--ks-content-inactive);
+    }
+
+    .small-text {
+        font-size: .8rem;
+    }
+
+    :deep(.el-dropdown-menu__item.is-disabled) {
+        color: var(--ks-border-inactive);
+    }
+
     .editor-tabs .editor-tab{
         padding: 3px .5rem;
         border: none;
@@ -401,9 +445,7 @@
         gap: .5rem;
         color: var(--ks-content-secondary);
         opacity: .6;
-        .tab-icon{
-            color: var(--ks-content-inactive);
-        }
+
         &.active {
             opacity: 1;
             color: var(--ks-content-primary);

ui/src/translations/en.json

@@ -1288,6 +1288,11 @@
       }
     },
     "toggle_word_wrap": "Toggle Word Wrap",
-    "copied_logs_to_clipboard": "Copied logs to clipboard."
+    "copied_logs_to_clipboard": "Copied logs to clipboard.",
+    "multi_panel_editor": {
+      "move_right": "Move right",
+      "move_left": "Move left",
+      "close_all_tabs": "Close all tabs"
+    }
   }
 }