directus-extension-admin-polish 1.0.0

package/README.md

@@ -0,0 +1,20 @@
+# directus-extension-admin-polish
+
+A Directus 11 bundle extension with two small quality-of-life improvements for the admin app.
+
+## Features
+
+### Clean page titles
+Removes the "Directus · " prefix from browser tab titles so your project name is shown on its own.
+
+Before: `Directus · My Project`
+After: `My Project`
+
+### Theme toggle
+Adds a light/dark theme toggle button to the bottom of the module bar (next to the user avatar), so you can switch themes without digging into user settings.
+
+## Installation
+
+Drop the extension folder into your Directus `extensions/` directory and restart. No configuration needed.
+
+Requires `MARKETPLACE_TRUST=all`.

package/dist/api.js

@@ -0,0 +1,26 @@
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { readFileSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const clientScript = readFileSync(join(__dirname, 'client.js'), 'utf8');
+
+function hookConfig({ embed }) {
+  embed('head', '<script src="/admin-tools-endpoint"></script>');
+}
+
+function endpointConfig(router) {
+  router.get('/', (req, res) => {
+    res.setHeader('Content-Type', 'application/javascript');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.send(clientScript);
+  });
+}
+
+export default {
+  hooks: [{ name: 'admin-tools-hook', config: hookConfig }],
+  endpoints: [{ name: 'admin-tools-endpoint', config: endpointConfig }],
+  operations: [],
+};

package/dist/app.js

@@ -0,0 +1 @@
+export const interfaces=[];export const displays=[];export const layouts=[];export const modules=[];export const panels=[];export const themes=[];export const operations=[];

package/dist/client.js

@@ -0,0 +1,70 @@
+(function () {
+	function cleanTitle(val) {
+		var s = String(val);
+		s = s.replace(/^Directus\s*[·|\-]\s*/i, '');
+		s = s.replace(/\s*[·|\-]\s*Directus\s*$/i, '');
+		return s.trim() || val;
+	}
+	var titleDesc = Object.getOwnPropertyDescriptor(Document.prototype, 'title');
+	if (titleDesc && titleDesc.set) {
+		Object.defineProperty(document, 'title', {
+			configurable: true,
+			get: function () { return titleDesc.get.call(document); },
+			set: function (val) { titleDesc.set.call(document, cleanTitle(val)); },
+		});
+		document.title = document.title;
+	}
+	var _authToken = null;
+	var _origFetch = window.fetch;
+	window.fetch = function (url, opts) {
+		if (!_authToken && opts && opts.headers) {
+			var h = opts.headers;
+			var auth = (typeof h.get === 'function' ? h.get('Authorization') : null) || h['Authorization'] || h['authorization'] || '';
+			if (auth.indexOf('Bearer ') === 0) _authToken = auth.slice(7);
+		}
+		return _origFetch.apply(this, arguments);
+	};
+	function isDark() { return document.body.classList.contains('dark'); }
+	function findUserStore() {
+		try {
+			var pinia = document.querySelector('#app').__vue_app__.config.globalProperties.$pinia;
+			var found = null;
+			pinia._s.forEach(function (store) { if (!found && store.currentUser && 'appearance' in store.currentUser) found = store; });
+			return found;
+		} catch (e) { return null; }
+	}
+	function applyTheme(appearance) {
+		var store = findUserStore();
+		if (store) { store.$patch(function (s) { s.currentUser.appearance = appearance; }); }
+		else { document.body.classList.remove('dark', 'light'); document.body.classList.add(appearance); }
+		var opts = { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ appearance: appearance }) };
+		if (_authToken) opts.headers['Authorization'] = 'Bearer ' + _authToken; else opts.credentials = 'include';
+		fetch('/users/me', opts).catch(function () {});
+	}
+	var SUN = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>';
+	var MOON = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+	var btn = null;
+	function syncIcon() {
+		if (!btn) return;
+		var dark = isDark();
+		btn.innerHTML = dark ? SUN : MOON;
+		btn.title = dark ? 'Switch to light mode' : 'Switch to dark mode';
+	}
+	function injectButton() {
+		if (btn && !document.contains(btn)) btn = null;
+		var bar = document.querySelector('.module-bar');
+		if (!bar || btn) return;
+		btn = document.createElement('button');
+		btn.id = 'directus-theme-toggle';
+		btn.style.cssText = 'display:flex;align-items:center;justify-content:center;width:60px;height:44px;border:none;background:transparent;cursor:pointer;color:var(--theme--navigation--modules--button--foreground,#fff);transition:background .15s;flex-shrink:0;';
+		btn.addEventListener('mouseenter', function () { btn.style.background = 'var(--theme--navigation--modules--button--background-hover,rgba(255,255,255,.1))'; });
+		btn.addEventListener('mouseleave', function () { btn.style.background = 'transparent'; });
+		btn.addEventListener('click', function () { applyTheme(isDark() ? 'light' : 'dark'); });
+		syncIcon();
+		var avatar = bar.querySelector('.module-bar-avatar');
+		if (avatar) bar.insertBefore(btn, avatar); else bar.appendChild(btn);
+		new MutationObserver(syncIcon).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+	}
+	new MutationObserver(injectButton).observe(document.documentElement, { childList: true, subtree: true });
+	injectButton();
+})();

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "directus-extension-admin-polish",
+  "version": "1.0.0",
+  "description": "Removes Directus from page titles and adds a theme toggle to the module bar",
+  "keywords": ["directus-extension"],
+  "license": "MIT",
+  "type": "module",
+  "directus:extension": {
+    "host": "^11.0.0",
+    "type": "bundle",
+    "path": { "app": "./dist/app.js", "api": "./dist/api.js" },
+    "entries": [
+      { "type": "hook", "name": "admin-tools-hook", "source": "./src/hook/index.js" },
+      { "type": "endpoint", "name": "admin-tools-endpoint", "source": "./src/endpoint/index.js" }
+    ]
+  }
+}