Edit Task Queue

Name

Also known as (comma separated)

Brief definition Collection of tasks awaiting processing.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "queueName", "type": "text", "label": "Queue name", "default": "Video encoding" }, { "id": "stage", "type": "select", "label": "Task #1 stage", "default": "processing", "options": [ "queued", "processing", "done" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "queueLength", "type": "number", "label": "Tasks waiting behind it", "default": 2, "min": 0, "max": 9, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tq tq--{{stage}}\">\n <p class=\"tq__name\">{{queueName}}</p>\n <div class=\"tq__row\">\n <span class=\"tq__dot\" style=\"background:{{accent}};\"></span>\n <span class=\"tq__task\">Task #1</span>\n <span class=\"tq__badge tq__badge--queued\" role=\"status\">queued</span>\n <span class=\"tq__badge tq__badge--processing\" role=\"status\">processing&hellip;</span>\n <span class=\"tq__badge tq__badge--done\" role=\"status\">done</span>\n </div>\n <p class=\"tq__waiting\">{{queueLength}} more task(s) waiting behind it</p>\n</div>\n<style>\n.tq { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.tq__name { margin: 0 0 12px; font-weight: 700; }\n.tq__row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; }\n.tq__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: .3; }\n.tq__task { flex: 1; font-weight: 600; font-size: 12px; }\n.tq__badge { display: none; font-size: 10px; padding: 3px 9px; border-radius: 999px; background: #24143014; }\n.tq--queued .tq__badge--queued, .tq--processing .tq__badge--processing, .tq--done .tq__badge--done { display: inline-block; }\n.tq--processing .tq__dot { opacity: 1; }\n.tq--done .tq__dot { opacity: 1; }\n.tq__waiting { margin: 10px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"tqtw tqtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 font-bold\">{{queueName}}</p>\n <div class=\"flex items-center gap-2 p-2.5 rounded-lg bg-white border border-[#24143018]\">\n <span class=\"tqtw__dot w-2.5 h-2.5 rounded-full shrink-0 opacity-30\" style=\"background:{{accent}};\"></span>\n <span class=\"flex-1 font-semibold text-xs\">Task #1</span>\n <span class=\"tqtw__badge tqtw__badge--queued hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]\" role=\"status\">queued</span>\n <span class=\"tqtw__badge tqtw__badge--processing hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]\" role=\"status\">processing&hellip;</span>\n <span class=\"tqtw__badge tqtw__badge--done hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]\" role=\"status\">done</span>\n </div>\n <p class=\"mt-2.5 text-[10px] text-[#24143099]\">{{queueLength}} more task(s) waiting behind it</p>\n</div>\n<style>\n.tqtw--queued .tqtw__badge--queued, .tqtw--processing .tqtw__badge--processing, .tqtw--done .tqtw__badge--done { display: inline-block; }\n.tqtw--processing .tqtw__dot, .tqtw--done .tqtw__dot { opacity: 1; }\n</style>", "react": "export function TaskQueue({\n queueName = \"{{queueName}}\",\n stage = \"{{stage}}\",\n accent = \"{{accent}}\",\n queueLength = {{queueLength}},\n}) {\n const badgeText = { queued: \"queued\", processing: \"processing\\u2026\", done: \"done\" }[stage];\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontWeight: 700 }}>{queueName}</p>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: 10, borderRadius: 8, background: \"#ffffff\", border: \"1px solid #24143018\" }}>\n <span style={{ width: 10, height: 10, borderRadius: \"50%\", flexShrink: 0, opacity: stage === \"queued\" ? .3 : 1, background: accent }} />\n <span style={{ flex: 1, fontWeight: 600, fontSize: 12 }}>Task #1</span>\n <span role=\"status\" style={{ fontSize: 10, padding: \"3px 9px\", borderRadius: 999, background: \"#24143014\" }}>{badgeText}</span>\n </div>\n <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>{queueLength} more task(s) waiting behind it</p>\n </div>\n );\n}" }