Skip to content

Instantly share code, notes, and snippets.

@defong

defong/dfe-optimise-sanity.js

Last active August 13, 2025 21:01
Show Gist options
  • Save defong/c8106ad4dccf10602ee7341304bd36c6 to your computer and use it in GitHub Desktop.
Save defong/c8106ad4dccf10602ee7341304bd36c6 to your computer and use it in GitHub Desktop.
Download ZIP
[DfE] Optimise insanity
Raw
dfe-optimise-sanity.js
// ==UserScript==
// @name Slick Sidebar Taking Left Side with Pinned Footer
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Sidebar with fixed header & footer, scrollable middle, toggle state, and layout separation of old items
// @author You
// @match https://qa.register-of-training-providers.education.gov.uk/*
// @match https://github.com/DFE-Digital/register-training-providers/pull/173/*
// @match https://register-training-providers-pr-173.test.teacherservices.cloud/*
// @require https://gist.githubusercontent.com/defong/c8106ad4dccf10602ee7341304bd36c6/raw/dfe-optimise-sanity.js
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
const items = [
{ old: false, id: "provider-filter-demo", title: "Provider filter demo 🔍", focus: true },
{ old: false, id: "static-pages", title: "Static pages 📄" },
{ old: false, id: "service-error-pages", title: "Service error pages 🚨" },
{ old: true, id: "view-provider-list", title: "View Provider List with Pagination 📄" },
{ old: true, id: "view-provider", title: "View Provider 👀" },
{ old: true, id: "add-provider-flow", title: "Add Provider Flow ➕", autofill: true },
{ old: true, id: "change-provider-details", title: "Change Provider Details 🔄" },
{ old: true, id: "archive-provider", title: "Archive Provider 🏛️" },
{ old: true, id: "add-service-to-dfe-sign-in", title: "Add Service to DfE Sign-in 🔒" },
// { old: true, id: 'rebrand', title: 'Rebrand 🎨', focus: true },
// { old: true, id: 'view-your-account', title: 'View Your account 👤' },
// { old: true, id: 'view-support-user', title: 'View support user 👥' },
// { old: true, id: 'delete-support-user', title: 'Delete support user ⚠️' },
// { old: true, id: 'add-support-user-flow', title: 'Add support user flow ➕' },
// { old: true, id: 'change-support-user-details', title: 'Change support user details 📝' },
// { old: true, id: 'view-support-user-list', title: 'View support user list with pagination 📄' }
];
const STORAGE_KEY = 'slickSidebarDoneState';
let doneState = {};
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
doneState = JSON.parse(stored);
}
} catch (e) {
console.error('Error loading done state', e);
}
const sidebar = document.createElement('div');
sidebar.id = 'my-slick-sidebar';
document.body.appendChild(sidebar);
const header = document.createElement('div');
header.className = 'slick-header';
header.textContent = '✅ Development work completed';
sidebar.appendChild(header);
const contentWrapper = document.createElement('div');
contentWrapper.className = 'slick-content-wrapper';
sidebar.appendChild(contentWrapper);
function createFocusOverlay() {
const overlay = document.createElement('div');
overlay.id = 'focus-overlay';
document.body.appendChild(overlay);
const targets = document.querySelectorAll('.app-filter');
targets.forEach(el => {
const rect = el.getBoundingClientRect();
const clone = el.cloneNode(true);
clone.style.position = 'fixed';
clone.style.top = `${rect.top}px`;
clone.style.left = `${rect.left}px`;
clone.style.width = `${rect.width}px`;
clone.style.height = `${rect.height}px`;
clone.style.transformOrigin = 'center center';
clone.style.zIndex = '10001';
clone.style.pointerEvents = 'none';
overlay.appendChild(clone);
});
overlay.addEventListener('click', () => {
overlay.remove();
});
}
function createCard(item) {
const card = document.createElement('div');
card.className = 'slick-card';
card.dataset.id = item.id;
const textSpan = document.createElement('span');
textSpan.textContent = item.title;
card.appendChild(textSpan);
const checkSpan = document.createElement('span');
checkSpan.className = 'checkmark';
checkSpan.textContent = '✔';
card.appendChild(checkSpan);
if (item.focus || item.autofill) {
const icon = document.createElement('span');
icon.className = 'focus-icon';
icon.textContent = item.focus ? '👁' : '🪄';
icon.title = item.focus ? 'Focus on header logo' : 'Autofill provider form';
icon.style.marginLeft = '8px';
icon.style.cursor = 'pointer';
icon.addEventListener('click', (e) => {
e.stopPropagation();
if (item.focus) {
createFocusOverlay();
} else if (item.autofill) {
autofillProviderForm();
}
});
card.appendChild(icon);
}
const isDone = doneState[item.id] === true;
card.dataset.done = String(isDone);
card.addEventListener('click', () => {
const wasDone = card.dataset.done === 'true';
card.dataset.done = String(!wasDone);
doneState[item.id] = !wasDone;
localStorage.setItem(STORAGE_KEY, JSON.stringify(doneState));
card.classList.add('move-out');
setTimeout(() => {
card.remove();
if (wasDone) {
contentWrapper.insertBefore(card, contentWrapper.children[0]);
} else {
contentWrapper.appendChild(card);
}
card.classList.remove('move-out');
card.classList.add('move-in');
setTimeout(() => card.classList.remove('move-in'), 300);
}, 200);
});
return card;
}
const currentItems = items.filter(i => !i.old).sort((a, b) => {
const aDone = doneState[a.id] === true;
const bDone = doneState[b.id] === true;
return aDone - bDone;
});
const oldItems = items.filter(i => i.old).sort((a, b) => {
const aDone = doneState[a.id] === true;
const bDone = doneState[b.id] === true;
return aDone - bDone;
});
currentItems.forEach(item => {
const card = createCard(item);
contentWrapper.appendChild(card);
});
const footerSection = document.createElement('div');
footerSection.className = 'slick-footer';
const oldHeader = document.createElement('div');
oldHeader.className = 'slick-header';
oldHeader.textContent = '📜 Previous development';
footerSection.appendChild(oldHeader);
oldItems.forEach(item => {
const card = createCard(item);
footerSection.appendChild(card);
});
sidebar.appendChild(footerSection);
function autofillProviderForm() {
const setValue = (selector, value) => {
const el = document.querySelector(selector);
if (el) el.value = value;
};
setValue('#provider-operating-name-field', '1 Magic Provider Ltd');
setValue('#provider-legal-name-field', '1 Magic Provider Legal Entity');
setValue('#provider-ukprn-field', '12345678');
setValue('#provider-urn-field', '123456');
setValue('#provider-code-field', '1MP');
console.log('🔮 Autofilled provider form!');
}
const monkeyImg = document.createElement('img');
// monkeyImg.src = 'https://gist.githubusercontent.com/defong/c8106ad4dccf10602ee7341304bd36c6/raw/b1f662ee854309ae2831d16288e2b7a31d7752de/monkey.png';
monkeyImg.src = "https://gist.githubusercontent.com/defong/c8106ad4dccf10602ee7341304bd36c6/raw/e0b87caa1c9dbc8ce29f3e829cfc1eb0cff8202f/red%2520sweaty%2520monkey.png";
monkeyImg.alt = 'Optimise Insanity Red sweaty Monkey';
monkeyImg.className = 'slick-monkey';
sidebar.appendChild(monkeyImg);
GM_addStyle(`
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#my-slick-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background-color: #e5fff4;
border-right: 1px solid #e0e0e0;
padding: 16px;
overflow: hidden;
z-index: 9999;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: flex;
flex-direction: column;
}
body {
margin-left: 300px !important;
}
.slick-header {
font-weight: 800;
font-size: 18px;
color: #333;
margin-bottom: 12px;
padding: 8px 12px;
background: #f3f4f6;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.slick-content-wrapper {
flex: 1;
overflow-y: auto;
margin-bottom: 16px;
padding-right: 4px;
}
.slick-footer {
border-top: 1px solid #ccc;
padding-top: 12px;
}
.slick-card {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
color: #222;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.slick-card:hover {
background: #e9f0ff;
border-color: #b0c4ff;
}
.slick-card[data-done="true"] {
background: #e0f7e9;
border-color: #a4d4ae;
color: #555;
text-decoration: line-through;
}
.slick-card .checkmark {
font-size: 14px;
color: #4caf50;
opacity: 0;
transition: opacity 0.2s ease;
}
.slick-card[data-done="true"] .checkmark {
opacity: 1;
}
.slick-card.move-out {
opacity: 0;
transform: translateX(20px);
}
.slick-card.move-in {
opacity: 1;
transform: translateX(0);
}
#focus-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 10000;
cursor: pointer;
}
.slick-monkey {
margin-top: auto;
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 12px;
padding-bottom: 8px;
opacity: 0.8;
}
`);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment