Edit-mode: Add panel to list custom mini-widgets bars contents

Signed-off-by: Arturo Manzoli <[email protected]>

Author: ArturoManzoli

src/components/EditMenu.vue

@@ -439,6 +439,65 @@
           </div>
         </template>
       </ExpansiblePanel>
+      <ExpansiblePanel
+        v-for="miniWidgetContainer in miniWidgetsBars"
+        :key="miniWidgetContainer.name"
+        :compact="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? true : false"
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-top-divider
+        :is-expanded="miniWidgetContainer.widgets.length > 0"
+      >
+        <template #title>
+          <div
+            class="flex w-[90%] justify-between items-center 2xl:text-[18px] xl:text-[16px] lg:text-[14px] -mb-3 font-normal ml-2"
+          >
+            {{ miniWidgetContainer.name }}
+            <v-badge
+              :content="miniWidgetContainer.widgets.length"
+              color="#3B78A8"
+              rounded="md"
+              class="ml-10 2xl:mb-1 opacity-90"
+              :class="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? 'scale-75' : ''"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div class="w-full mb-1">
+            <span class="w-full px-1 2xl:text-sm text-xs text-left select-none text-slate-400">{{
+              miniWidgetContainer.name
+            }}</span>
+            <div class="flex flex-col items-center w-full 2xl:px-3 overflow-x-hidden grow">
+              <TransitionGroup name="fade">
+                <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full">
+                  ---
+                </div>
+                <div
+                  v-for="widget in miniWidgetContainer.widgets"
+                  :key="widget.hash"
+                  class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md 2xl:mx-2 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+                  :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                  @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                  @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                >
+                  <div class="flex items-center justify-start w-full overflow-auto">
+                    <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap 2xl:text-sm text-xs ml-3">
+                      {{ widget.name || widget.component }}
+                    </p>
+                  </div>
+                  <v-divider vertical class="opacity-10 mr-1" />
+                  <div
+                    class="icon-btn mdi mdi-cog"
+                    @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
+                  />
+                  <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                </div>
+              </TransitionGroup>
+            </div>
+          </div>
+        </template>
+      </ExpansiblePanel>
     </div>
   </div>
   <div class="flex items-center justify-between edit-panel bottom-panel" :class="{ active: editMode }">
@@ -679,6 +738,12 @@ const { showDialog, closeDialog } = useInteractionDialog()
 const interfaceStore = useAppInterfaceStore()
 const store = useWidgetManagerStore()
 
+const miniWidgetsBars = computed(() =>
+  store.miniWidgetContainersInCurrentView.filter(
+    (container) => !container.name.startsWith('Top') && !container.name.startsWith('Bottom')
+  )
+)
+
 const trashList = ref<Widget[]>([])
 watch(trashList, () => {
   nextTick(() => (trashList.value = []))