crowbartools · CKY- · Jun 5, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
@@ -45,7 +45,6 @@ export async function createEffectQueueMonitorWindow() {
         icon: path.join(__dirname, "../../../../gui/images/logo_transparent_2.png")
     });
     effectQueueMonitorWindow.setMenu(null);
-
     effectQueueMonitorWindowState.manage(effectQueueMonitorWindow);
 
     effectQueueMonitorWindow.on("close", () => {

@@ -1,65 +1,73 @@
 <!DOCTYPE html>
 
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Effect Queue Monitor</title>
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <link rel="stylesheet" href="./styles/main.css">
-        <script>
-            // Parse URL parameters
-            const urlParams = new URLSearchParams(window.location.search);
-            const fontAwesomeKitId = urlParams.get('fontAwesomeKitId');
-            
-            // Dynamically load Font Awesome if kit ID is provided
-            if (fontAwesomeKitId) {
-                const fontAwesomeScript = document.createElement('script');
-                fontAwesomeScript.src = `https://kit.fontawesome.com/${fontAwesomeKitId}.js`;
-                fontAwesomeScript.crossOrigin = 'anonymous';
-                document.head.appendChild(fontAwesomeScript);
-            }
-        </script>
-        <script type="importmap">
+<head>
+    <meta charset="utf-8" />
+    <title>Effect Queue Monitor</title>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link rel="stylesheet" href="./styles/main.css">
+    <script>
+        // Parse URL parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const fontAwesomeKitId = urlParams.get('fontAwesomeKitId');
+
+        // Dynamically load Font Awesome if kit ID is provided
+        if (fontAwesomeKitId) {
+            const fontAwesomeScript = document.createElement('script');
+            fontAwesomeScript.src = `https://kit.fontawesome.com/${fontAwesomeKitId}.js`;
+            fontAwesomeScript.crossOrigin = 'anonymous';
+            document.head.appendChild(fontAwesomeScript);
+        }
+    </script>
+    <script type="importmap">
             {
                 "imports": {
                     "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
                 }
             }
         </script>
-        <script type="module" src="./main.mjs"></script>
-    </head>
+    <script type="module" src="./main.mjs"></script>
+</head>
 
-    <body>
-        <div id="app" v-cloak>
-          <div class="app-container">
+<body>
+    <div id="app" v-cloak>
+        <div class="app-container">
             <div class="queue-list-column">
                 <h2>Queues</h2>
                 <div 
                   class="queue-list-item" 
                   v-for="queue in queues" 
                   :key="queue.id" 
+                  @contextmenu.prevent="$refs.contextMenu.open($event, queue)"
                   @click="selectedQueueId = queue.id"
-                  :class="{ selected: selectedQueueId === queue.id }"
-                  style="display: flex; align-items: center; justify-content: space-between;"
+                    :class="{ selected: selectedQueueId === queue.id }"
+                    style="display: flex; align-items: center; justify-content: space-between;"
                 >
                     <div style="font-weight: 700;">{{ queue.name }}</div>
                     <queue-status-badge :queue="queue"></queue-status-badge>
                 </div>
+                <context-menu ref="contextMenu" 
+                :menu-items="[
+                              { label: 'Clear Queue', action: (queue) => clearQueue(queue.id), icon: 'fad fa-minus-circle' },
+                              { label: 'Resume Queue', action: (queue) => toggleQueue(queue.id), icon: 'far fa-clock', visible: (queue) => !queue.active },
+                              { label: 'Pause Queue', action: (queue) => toggleQueue(queue.id), icon: 'far fa-pause-circle', visible: (queue) => queue.active }
+                ]" />
                 <div v-if="queues.length === 0">
                     <p>No queues available.</p>
                 </div>
             </div>
 
             <div class="selected-queue-column">
-              <div v-if="selectedQueue">
-                <queue-header :queue="selectedQueue"></queue-header>
+                <div v-if="selectedQueue">
+                    <queue-header :queue="selectedQueue"></queue-header>
                 <queue-item-list 
                   :items="selectedQueueCombinedItems" 
                   list-name="Queued Items"
                   no-items-text="No queued items"
                 ></queue-item-list>
-              </div>
+                </div>
             </div>
         </div>
-    </body>
-</html>
+</body>
+
+</html>
@@ -7,6 +7,7 @@ import { queueStatusBadge } from "./modules/queue-status-badge.mjs";
 import { queueHeader } from "./modules/queue-header.mjs";
 import { queueItemList } from "./modules/queue-item-list.mjs";
 import { chip } from "./modules/chip.mjs";
+import { contextMenu } from "./modules/context-menu.mjs";
 
 const app = createApp({
     data() {
@@ -37,6 +38,14 @@ const app = createApp({
                 }))
             ];
         }
+    },
+    methods: {
+        clearQueue(queueId) {
+            window.queueManager.clearQueue(queueId);
+        },
+        toggleQueue(queueId) {
+            window.queueManager.toggleQueue(queueId);
+        }
     }
 });
 
@@ -47,7 +56,8 @@ app
     .component('QueueStatusBadge', queueStatusBadge)
     .component('QueueHeader', queueHeader)
     .component('QueueItemList', queueItemList)
-    .component('Chip', chip);
+    .component('Chip', chip)
+    .component('ContextMenu', contextMenu);
 
 
 const mountedApp = app.mount('#app');

@@ -0,0 +1,79 @@
+export const contextMenu = {
+    name: 'ContextMenu',
+    props: {
+        menuItems: {
+            type: Array,
+            default: null
+        }
+    },
+    template: `
+     <ul
+       v-if="visible"
+       class="context-menu"
+       :style="menuStyle"
+       ref="contextMenu"
+       @click.stop
+     >
+      <template v-for="item in computedMenuItems" :key="item.label">
+        <li
+          v-if="item.visible == null ? true : item.visible(contextQueue)"
+          @click="handleItemClick(item)"
+          @mouseenter="hovered = item.label"
+          :class="{ hovered: hovered === item.label }"
+        >
+          <i
+            :class="[item.icon]"
+            :style="{ fontSize: '18px', marginRight: '5px', transform: 'translateY(1px)' }"
+          ></i>
+          {{ item.label }}
+        </li>
+      </template>
+     </ul>
+  `,
+    data() {
+        return {
+            visible: false,
+            hovered: null,
+            contextQueue: null,
+            menuStyle: {
+                top: '0px',
+                left: '0px'
+            }
+        };
+    },
+    computed: {
+        computedMenuItems() {
+            return this.menuItems;
+        }
+    },
+    methods: {
+        open(event, queue) {
+            event.preventDefault();
+            this.contextQueue = queue;
+            this.menuStyle.top = `${event.clientY}px`;
+            this.menuStyle.left = `${event.clientX}px`;
+            this.visible = true;
+        },
+        handleItemClick(item) {
+            if (item.action) {
+                item.action(this.contextQueue);
+            }
+            this.close();
+        },
+        close() {
+            this.visible = false;
+        },
+        handleClickOutside(event) {
+            const menu = this.$refs.contextMenu;
+            if (this.visible && (!menu || !menu.contains(event.target))) {
+                this.close();
+            }
+        }
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeUnmount() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+};
@@ -8,4 +8,13 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
             listener(data);
         });
     }
+});
+
+contextBridge.exposeInMainWorld('queueManager', {
+    clearQueue: (queueID) => {
+        ipcRenderer.send("clearEffectQueue", queueID);
+    },
+    toggleQueue: (queueID) => {
+        ipcRenderer.send("toggleEffectQueue", queueID);
+    }
 });
@@ -0,0 +1,38 @@
+/* Context Menus */
+.context-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    border-radius: 8px;
+    border: 2px solid #47494e;
+    background-color: #43454a;
+    z-index: 999999999;
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+  color: whitesmoke;
+  font-family: InterVariable, sans-serif;  
+    display: block;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    white-space: nowrap;
+}
+
+.context-menu li:hover {
+  background-color: rgba(19, 20, 24, 0.5);
+}
@@ -4,3 +4,4 @@
 @import "./item-list.css";
 @import "./effects.css";
 @import "./modals.css";
+@import "./context-menu.css";