From b27d5bfc5dd8d4d5523e26c31417f0bb61d539cc Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 10 Mar 2026 11:30:47 +0100
Subject: [PATCH] improvements to dropdown and storing theme settings

---
 www/common/common-ui-elements.js | 12 ++++++++---
 www/diagram/inner.js             | 36 +++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a559d7fc5..8870dd49a 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1611,7 +1611,6 @@ define([
                     }
                 });
             }
-
             // Everything is added as an "li" tag
             // Links and items with action are focusable
             // Add correct "role" attribute
@@ -1642,7 +1641,14 @@ define([
                     if ($(e.target).attr('href') === '#') {
                         e.preventDefault();
                     }
-                    if (config.isSelect) { return; }
+                    if (config.isSelect && config.attributes["data-app"] !== 'diagram') { return; }
+                    if ($el.length !== 1) { return; }
+                    if (config.attributes["data-app"] === 'diagram') {
+                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
+                        $el.addClass('cp-dropdown-element-active');
+                        $el.closest('li').focus();
+                    }
+                    
                     e.stopPropagation();
                     if (typeof(config.action) === "function") {
                         var close = config.action(e);
@@ -1829,7 +1835,7 @@ define([
             }
             $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
             setTimeout(() => {
-                if (config.isSelect && value) {
+                if (config.isSelect && value || config.attributes && config.attributes["data-app"] === 'diagram' && value) {
                     // We use JSON.stringify here to escape quotes
                     if (typeof(value) === "object") { value = JSON.stringify(value); }
                     var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index cd47899da..9c7ad4865 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -194,23 +194,27 @@ define([
         // starting the CryptPad framework
         framework.start();
 
+        var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+
         var checkTheme = function (fileChannel) {
-            var themes = localStorage.original.getItem('drawio-theme') || [];
-            if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]); };
+            if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
         };
 
-        var loadDiagram = function () {
+        var checkDefaultTheme = function () {
             privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-
             var defaultTheme;
             if (framework.isIntegrated()) {
                 defaultTheme = 'kennedy';
             } else if (checkTheme(privateData.channel)) {
-                defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
+                defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
             } else {
                 defaultTheme = 'sketch';
             }
+            return defaultTheme;
+        };
 
+        var loadDiagram = function () {
+            var defaultTheme = checkDefaultTheme();
             parameters.set('ui', defaultTheme);
 
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
@@ -230,25 +234,27 @@ define([
             }
         }, false);
 
-        var addTheme = function (fileChannel, theme) {
-            var existingThemes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+        var setTheme = function (fileChannel, theme) {
             if (checkTheme(fileChannel)) {
-                existingThemes[fileChannel] = theme;
+                var currentTheme = themes.find(obj => obj.hasOwnProperty(fileChannel));
+                currentTheme[fileChannel] = theme;
             } else {
-                existingThemes.push({[fileChannel]: theme});
+                themes.push({[fileChannel]: theme});
             }
-            localStorage.original.setItem('drawio-theme', JSON.stringify(existingThemes));
+            localStorage.original.setItem('drawio-theme', JSON.stringify(themes));
         };
 
         var mkModeButton = function (framework) {
             var modes = ['kennedy', 'sketch'];
             var types = [];
+            
             modes.forEach(function(mode){
                 types.push({
                     tag: 'a',
                     attributes: {
                         'data-value': mode,
                         'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
+                        'data-app': 'diagram'
                     },
                     content: mode,
                     action: function () {
@@ -256,16 +262,18 @@ define([
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
                         privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-                        addTheme(privateData.channel, mode);
+                        setTheme(privateData.channel, mode);
                     },
                 });
             });
                         
-            const $drawer = UIElements.createDropdown({
-                text: Messages.diagram_modes, // XXX
+            var $drawer = UIElements.createDropdown({
+                text: Messages.diagram_modes,
                 options: types,
                 common: framework._.sfCommon,
-                iconCls: 'color-palette'
+                isSelect: true,
+                iconCls: 'color-palette',
+                initialValue: parameters.get('ui') || checkDefaultTheme(),
             });
             framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
             framework._.toolbar.$bottomL.append($drawer);