Edit Work Queue

Name

Also known as (comma separated)

Brief definition Items requiring action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "queueName", "type": "text", "label": "Queue name", "default": "Review requests" }, { "id": "filter", "type": "select", "label": "Filter", "default": "all", "options": [ "all", "mine", "unassigned" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showCount", "type": "toggle", "label": "Show item count", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"wq wq--{{filter}}\">\n <p class=\"wq__title\">{{queueName}}</p>\n <div class=\"wq__row wq__row--mine\">PR #218 review<span class=\"wq__tag\" style=\"background:{{accent}};\">mine</span></div>\n <div class=\"wq__row wq__row--unassigned\">PR #219 review<span class=\"wq__tag wq__tag--muted\">unassigned</span></div>\n <div class=\"wq__row wq__row--mine\">PR #220 review<span class=\"wq__tag\" style=\"background:{{accent}};\">mine</span></div>\n {{#if showCount}}<p class=\"wq__count wq__count--all\">3 items</p><p class=\"wq__count wq__count--mine\">2 items</p><p class=\"wq__count wq__count--unassigned\">1 item</p>{{/if}}\n</div>\n<style>\n.wq { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.wq__title { margin: 0 0 10px; font-weight: 700; }\n.wq__row { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; margin-bottom: 6px; }\n.wq__tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; color: #241430; }\n.wq__tag--muted { background: #24143014; color: #24143099; font-weight: 400; }\n.wq--mine .wq__row--unassigned, .wq--unassigned .wq__row--mine { display: none; }\n.wq__count { display: none; margin: 8px 0 0; font-size: 10px; color: #24143099; }\n.wq--all .wq__count--all, .wq--mine .wq__count--mine, .wq--unassigned .wq__count--unassigned { display: block; }\n</style>", "tailwind": "<div class=\"wqtw wqtw--{{filter}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-bold\">{{queueName}}</p>\n <div class=\"wqtw__row wqtw__row--mine flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">PR #218 review<span class=\"text-[10px] py-0.5 px-2 rounded-full font-bold\" style=\"background:{{accent}};\">mine</span></div>\n <div class=\"wqtw__row wqtw__row--unassigned flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">PR #219 review<span class=\"text-[10px] py-0.5 px-2 rounded-full bg-[#24143014] text-[#24143099]\">unassigned</span></div>\n <div class=\"wqtw__row wqtw__row--mine flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">PR #220 review<span class=\"text-[10px] py-0.5 px-2 rounded-full font-bold\" style=\"background:{{accent}};\">mine</span></div>\n {{#if showCount}}<p class=\"wqtw__count wqtw__count--all hidden m-0 mt-2 text-[10px] text-[#24143099]\">3 items</p><p class=\"wqtw__count wqtw__count--mine hidden m-0 mt-2 text-[10px] text-[#24143099]\">2 items</p><p class=\"wqtw__count wqtw__count--unassigned hidden m-0 mt-2 text-[10px] text-[#24143099]\">1 item</p>{{/if}}\n</div>\n<style>\n.wqtw--mine .wqtw__row--unassigned, .wqtw--unassigned .wqtw__row--mine { display: none; }\n.wqtw--all .wqtw__count--all, .wqtw--mine .wqtw__count--mine, .wqtw--unassigned .wqtw__count--unassigned { display: block; }\n</style>", "react": "export function WorkQueue({\n queueName = \"{{queueName}}\",\n filter = \"{{filter}}\",\n accent = \"{{accent}}\",\n showCount = {{showCount}},\n}) {\n const rows = [\n { id: \"PR #218 review\", owner: \"mine\" },\n { id: \"PR #219 review\", owner: \"unassigned\" },\n { id: \"PR #220 review\", owner: \"mine\" },\n ].filter((r) => filter === \"all\" || r.owner === filter);\n const counts = { all: 3, mine: 2, unassigned: 1 };\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700 }}>{queueName}</p>\n {rows.map((r) => (\n <div key={r.id} style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", padding: 8, borderRadius: 6, background: \"#ffffff\", border: \"1px solid #24143014\", marginBottom: 6 }}>\n {r.id}\n <span style={{ fontSize: 10, padding: \"2px 8px\", borderRadius: 999, fontWeight: r.owner === \"mine\" ? 700 : 400, color: r.owner === \"mine\" ? \"#241430\" : \"#24143099\", background: r.owner === \"mine\" ? accent : \"#24143014\" }}>{r.owner}</span>\n </div>\n ))}\n {showCount && <p style={{ margin: \"8px 0 0\", fontSize: 10, color: \"#24143099\" }}>{counts[filter]} item{counts[filter] === 1 ? \"\" : \"s\"}</p>}\n </div>\n );\n}" }