From 398a87ef20680df65a25d35c15afa81bcc5d24d4 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Wed, 25 Sep 2024 14:04:49 +0200
Subject: [PATCH 1/8] Add 'User settings' to application-settings

 including Theme and Language settings
---
 src/fontra/client/lang/en.json                |  1 +
 src/fontra/client/lang/zh-CN.json             |  1 +
 .../applicationsettings.html                  |  2 +
 .../applicationsettings.js                    |  7 ++
 .../views/applicationsettings/panel-base.js   |  1 +
 .../panel-user-settings.js                    | 90 +++++++++++++++++++
 6 files changed, 102 insertions(+)
 create mode 100644 src/fontra/views/applicationsettings/panel-user-settings.js

diff --git a/src/fontra/client/lang/en.json b/src/fontra/client/lang/en.json
index f6de03c07..c6acbed96 100644
--- a/src/fontra/client/lang/en.json
+++ b/src/fontra/client/lang/en.json
@@ -29,6 +29,7 @@
   "action.undo": "Undo",
   "application-settings.server-info.title": "Server info",
   "application-settings.shortcuts.title": "Shortcuts",
+  "application-settings.user-settings.title": "User settings",
   "axes.add": "Add new axis",
   "axes.axis-values": "Axis values",
   "axes.create": "New axis",
diff --git a/src/fontra/client/lang/zh-CN.json b/src/fontra/client/lang/zh-CN.json
index 3a5524263..ba65de77b 100644
--- a/src/fontra/client/lang/zh-CN.json
+++ b/src/fontra/client/lang/zh-CN.json
@@ -28,6 +28,7 @@
   "action.undo": "撤销",
   "application-settings.server-info.title": "服务器信息",
   "application-settings.shortcuts.title": "Shortcuts",
+  "application-settings.user-settings.title": "用户设置",
   "axes.add": "添加新参数轴",
   "axes.axis-values": "参数轴数值",
   "axes.create": "新建参数轴",
diff --git a/src/fontra/views/applicationsettings/applicationsettings.html b/src/fontra/views/applicationsettings/applicationsettings.html
index a8d27ddaf..b16530375 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.html
+++ b/src/fontra/views/applicationsettings/applicationsettings.html
@@ -6,6 +6,8 @@
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Application Settings</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
+    <script type="module" src="/web-components/grouped-settings.js"></script>
+    <script type="module" src="/web-components/simple-settings.js"></script>
     <style>
       body {
         overflow: scroll;
diff --git a/src/fontra/views/applicationsettings/applicationsettings.js b/src/fontra/views/applicationsettings/applicationsettings.js
index 35aadaa2c..5abbd0569 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.js
+++ b/src/fontra/views/applicationsettings/applicationsettings.js
@@ -1,10 +1,16 @@
 import * as html from "../core/html-utils.js";
+import { EditorController } from "../editor/editor.js";
 import { ServerInfoPanel } from "./panel-server-info.js";
 import { ShortCutsPanel } from "./panel-shortcuts.js";
+import { UserSettingsPanel } from "./panel-user-settings.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 import { message } from "/web-components/modal-dialog.js";
 
 export class ApplicationSettingsController {
+  // constructor() {
+  //   this.editorController = new EditorController();
+  // }
+
   async start() {
     await ensureLanguageHasLoaded;
 
@@ -23,6 +29,7 @@ export class ApplicationSettingsController {
       // TODO: Add more panels here:
       // EditorAppearancePanel,
       // ExtensionsPanel,
+      UserSettingsPanel,
     ]) {
       const headerElement = html.div(
         {
diff --git a/src/fontra/views/applicationsettings/panel-base.js b/src/fontra/views/applicationsettings/panel-base.js
index 2618d2a12..baab6a52a 100644
--- a/src/fontra/views/applicationsettings/panel-base.js
+++ b/src/fontra/views/applicationsettings/panel-base.js
@@ -1,6 +1,7 @@
 export class BaseInfoPanel {
   constructor(applicationSettingsController, panelElement) {
     this.applicationSettingsController = applicationSettingsController;
+    // this.editorController = applicationSettingsController.editorController;
     this.panelElement = panelElement;
   }
 
diff --git a/src/fontra/views/applicationsettings/panel-user-settings.js b/src/fontra/views/applicationsettings/panel-user-settings.js
new file mode 100644
index 000000000..45011a304
--- /dev/null
+++ b/src/fontra/views/applicationsettings/panel-user-settings.js
@@ -0,0 +1,90 @@
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { languageController, translate } from "../core/localization.js";
+import { themeController } from "../core/theme-settings.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-user-settings-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class UserSettingsPanel extends BaseInfoPanel {
+  static title = "application-settings.user-settings.title";
+  static id = "user-settings-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        id: "user-settings",
+      });
+      container.className = "fontra-ui-user-settings-panel-card";
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: translate("sidebar.user-settings.theme"),
+        controller: themeController,
+        descriptions: [
+          {
+            key: "theme",
+            ui: "radio",
+            options: [
+              {
+                key: "automatic",
+                displayName: translate("sidebar.user-settings.theme.auto"),
+              },
+              {
+                key: "light",
+                displayName: translate("sidebar.user-settings.theme.light"),
+              },
+              {
+                key: "dark",
+                displayName: translate("sidebar.user-settings.theme.dark"),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        displayName: "Display Language",
+        controller: languageController,
+        descriptions: [
+          {
+            key: "language",
+            ui: "radio",
+            options: [
+              { key: "en", displayName: "English" },
+              { key: "zh-CN", displayName: "Simplified Chinese" },
+            ],
+          },
+        ],
+      },
+      // {
+      //   displayName: translate("sidebar.user-settings.clipboard"),
+      //   controller: this.editorController.clipboardFormatController,
+      //   descriptions: [
+      //     {
+      //       key: "format",
+      //       ui: "radio",
+      //       options: [
+      //         { key: "glif", displayName: "GLIF (RoboFont)" },
+      //         { key: "svg", displayName: "SVG" },
+      //         { key: "fontra-json", displayName: "JSON (Fontra)" },
+      //       ],
+      //     },
+      //   ],
+      // }
+    ];
+  }
+}

From 2dae33613e145cda8a0b1a646004fde438e1c1d6 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Wed, 25 Sep 2024 15:46:39 +0200
Subject: [PATCH 2/8] Create clipboard-format.js similar to theme-settings.js

---
 src/fontra/client/core/clipboard-format.js    |  5 +++
 .../applicationsettings.html                  |  1 -
 .../applicationsettings.js                    |  4 ---
 .../panel-user-settings.js                    | 31 ++++++++++---------
 src/fontra/views/editor/editor.js             |  4 +--
 5 files changed, 23 insertions(+), 22 deletions(-)
 create mode 100644 src/fontra/client/core/clipboard-format.js

diff --git a/src/fontra/client/core/clipboard-format.js b/src/fontra/client/core/clipboard-format.js
new file mode 100644
index 000000000..f37b7358b
--- /dev/null
+++ b/src/fontra/client/core/clipboard-format.js
@@ -0,0 +1,5 @@
+import { ObservableController } from "./observable-object.js";
+
+export const clipboardFormatController = new ObservableController({ format: "glif" });
+
+clipboardFormatController.synchronizeWithLocalStorage("fontra-clipboard-");
diff --git a/src/fontra/views/applicationsettings/applicationsettings.html b/src/fontra/views/applicationsettings/applicationsettings.html
index b16530375..f2c850f4a 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.html
+++ b/src/fontra/views/applicationsettings/applicationsettings.html
@@ -7,7 +7,6 @@
     <title>Fontra Application Settings</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
     <script type="module" src="/web-components/grouped-settings.js"></script>
-    <script type="module" src="/web-components/simple-settings.js"></script>
     <style>
       body {
         overflow: scroll;
diff --git a/src/fontra/views/applicationsettings/applicationsettings.js b/src/fontra/views/applicationsettings/applicationsettings.js
index 5abbd0569..6d11d7708 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.js
+++ b/src/fontra/views/applicationsettings/applicationsettings.js
@@ -7,10 +7,6 @@ import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 import { message } from "/web-components/modal-dialog.js";
 
 export class ApplicationSettingsController {
-  // constructor() {
-  //   this.editorController = new EditorController();
-  // }
-
   async start() {
     await ensureLanguageHasLoaded;
 
diff --git a/src/fontra/views/applicationsettings/panel-user-settings.js b/src/fontra/views/applicationsettings/panel-user-settings.js
index 45011a304..fc38d459e 100644
--- a/src/fontra/views/applicationsettings/panel-user-settings.js
+++ b/src/fontra/views/applicationsettings/panel-user-settings.js
@@ -1,3 +1,4 @@
+import { clipboardFormatController } from "../core/clipboard-format.js";
 import * as html from "../core/html-utils.js";
 import { addStyleSheet } from "../core/html-utils.js";
 import { languageController, translate } from "../core/localization.js";
@@ -70,21 +71,21 @@ export class UserSettingsPanel extends BaseInfoPanel {
           },
         ],
       },
-      // {
-      //   displayName: translate("sidebar.user-settings.clipboard"),
-      //   controller: this.editorController.clipboardFormatController,
-      //   descriptions: [
-      //     {
-      //       key: "format",
-      //       ui: "radio",
-      //       options: [
-      //         { key: "glif", displayName: "GLIF (RoboFont)" },
-      //         { key: "svg", displayName: "SVG" },
-      //         { key: "fontra-json", displayName: "JSON (Fontra)" },
-      //       ],
-      //     },
-      //   ],
-      // }
+      {
+        displayName: translate("sidebar.user-settings.clipboard"),
+        controller: clipboardFormatController,
+        descriptions: [
+          {
+            key: "format",
+            ui: "radio",
+            options: [
+              { key: "glif", displayName: "GLIF (RoboFont)" },
+              { key: "svg", displayName: "SVG" },
+              { key: "fontra-json", displayName: "JSON (Fontra)" },
+            ],
+          },
+        ],
+      },
     ];
   }
 }
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
index 54c7f1e6b..560859d38 100644
--- a/src/fontra/views/editor/editor.js
+++ b/src/fontra/views/editor/editor.js
@@ -86,6 +86,7 @@ import TextEntryPanel from "./panel-text-entry.js";
 import TransformationPanel from "./panel-transformation.js";
 import UserSettingsPanel from "./panel-user-settings.js";
 import Panel from "./panel.js";
+import { clipboardFormatController } from "/core/clipboard-format.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 
 const MIN_CANVAS_SPACE = 200;
@@ -128,8 +129,7 @@ export class EditorController {
       async (...args) => await this.editListenerCallback(...args)
     );
 
-    this.clipboardFormatController = new ObservableController({ format: "glif" });
-    this.clipboardFormatController.synchronizeWithLocalStorage("fontra-clipboard-");
+    this.clipboardFormatController = clipboardFormatController;
 
     this.experimentalFeaturesController = new ObservableController({
       scalingEditBehavior: false,

From 50ccf8aa62a8260c87cd349985f1d2203bd86afd Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Wed, 25 Sep 2024 15:48:42 +0200
Subject: [PATCH 3/8] Remove unnecessary import

---
 src/fontra/views/applicationsettings/applicationsettings.js | 1 -
 src/fontra/views/applicationsettings/panel-base.js          | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/fontra/views/applicationsettings/applicationsettings.js b/src/fontra/views/applicationsettings/applicationsettings.js
index 6d11d7708..79e83754f 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.js
+++ b/src/fontra/views/applicationsettings/applicationsettings.js
@@ -1,5 +1,4 @@
 import * as html from "../core/html-utils.js";
-import { EditorController } from "../editor/editor.js";
 import { ServerInfoPanel } from "./panel-server-info.js";
 import { ShortCutsPanel } from "./panel-shortcuts.js";
 import { UserSettingsPanel } from "./panel-user-settings.js";
diff --git a/src/fontra/views/applicationsettings/panel-base.js b/src/fontra/views/applicationsettings/panel-base.js
index baab6a52a..2618d2a12 100644
--- a/src/fontra/views/applicationsettings/panel-base.js
+++ b/src/fontra/views/applicationsettings/panel-base.js
@@ -1,7 +1,6 @@
 export class BaseInfoPanel {
   constructor(applicationSettingsController, panelElement) {
     this.applicationSettingsController = applicationSettingsController;
-    // this.editorController = applicationSettingsController.editorController;
     this.panelElement = panelElement;
   }
 

From 1c5a9562af8b709f5ec408f349035862e2668c58 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Thu, 26 Sep 2024 12:06:11 +0200
Subject: [PATCH 4/8] Split 'user settings' into separate sections: theme,
 language, clipboard

---
 src/fontra/client/lang/en.json                |  4 +-
 src/fontra/client/lang/zh-CN.json             |  4 +-
 .../applicationsettings.js                    |  8 ++-
 .../applicationsettings/panel-clipboard.js    | 51 +++++++++++++++++++
 .../panel-display-language.js                 | 49 ++++++++++++++++++
 ...er-settings.js => panel-theme-settings.js} | 44 +++-------------
 6 files changed, 119 insertions(+), 41 deletions(-)
 create mode 100644 src/fontra/views/applicationsettings/panel-clipboard.js
 create mode 100644 src/fontra/views/applicationsettings/panel-display-language.js
 rename src/fontra/views/applicationsettings/{panel-user-settings.js => panel-theme-settings.js} (52%)

diff --git a/src/fontra/client/lang/en.json b/src/fontra/client/lang/en.json
index c6acbed96..b97c1509b 100644
--- a/src/fontra/client/lang/en.json
+++ b/src/fontra/client/lang/en.json
@@ -27,9 +27,11 @@
   "action.select-none": "Select None",
   "action.set-contour-start": "Set Start Point",
   "action.undo": "Undo",
+  "application-settings.clipboard.title": "Clipboard",
+  "application-settings.display-language.title": "Display Language",
   "application-settings.server-info.title": "Server info",
   "application-settings.shortcuts.title": "Shortcuts",
-  "application-settings.user-settings.title": "User settings",
+  "application-settings.theme-settings.title": "Theme settings",
   "axes.add": "Add new axis",
   "axes.axis-values": "Axis values",
   "axes.create": "New axis",
diff --git a/src/fontra/client/lang/zh-CN.json b/src/fontra/client/lang/zh-CN.json
index ba65de77b..cd5df1834 100644
--- a/src/fontra/client/lang/zh-CN.json
+++ b/src/fontra/client/lang/zh-CN.json
@@ -26,9 +26,11 @@
   "action.select-none": "取消选择",
   "action.set-contour-start": "设置起点",
   "action.undo": "撤销",
+  "application-settings.clipboard.title": "剪贴板导出格式",
+  "application-settings.display-language.title": "Display Language",
   "application-settings.server-info.title": "服务器信息",
   "application-settings.shortcuts.title": "Shortcuts",
-  "application-settings.user-settings.title": "用户设置",
+  "application-settings.theme-settings.title": "主题设置",
   "axes.add": "添加新参数轴",
   "axes.axis-values": "参数轴数值",
   "axes.create": "新建参数轴",
diff --git a/src/fontra/views/applicationsettings/applicationsettings.js b/src/fontra/views/applicationsettings/applicationsettings.js
index 79e83754f..8fe9e51a8 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.js
+++ b/src/fontra/views/applicationsettings/applicationsettings.js
@@ -1,7 +1,9 @@
 import * as html from "../core/html-utils.js";
+import { ClipboardPanel } from "./panel-clipboard.js";
+import { DisplayLanguagePanel } from "./panel-display-language.js";
 import { ServerInfoPanel } from "./panel-server-info.js";
 import { ShortCutsPanel } from "./panel-shortcuts.js";
-import { UserSettingsPanel } from "./panel-user-settings.js";
+import { ThemeSettingsPanel } from "./panel-theme-settings.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 import { message } from "/web-components/modal-dialog.js";
 
@@ -24,7 +26,9 @@ export class ApplicationSettingsController {
       // TODO: Add more panels here:
       // EditorAppearancePanel,
       // ExtensionsPanel,
-      UserSettingsPanel,
+      ThemeSettingsPanel,
+      DisplayLanguagePanel,
+      ClipboardPanel,
     ]) {
       const headerElement = html.div(
         {
diff --git a/src/fontra/views/applicationsettings/panel-clipboard.js b/src/fontra/views/applicationsettings/panel-clipboard.js
new file mode 100644
index 000000000..aa6c3090c
--- /dev/null
+++ b/src/fontra/views/applicationsettings/panel-clipboard.js
@@ -0,0 +1,51 @@
+import { clipboardFormatController } from "../core/clipboard-format.js";
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { translate } from "../core/localization.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-clipboard-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class ClipboardPanel extends BaseInfoPanel {
+  static title = "application-settings.clipboard.title";
+  static id = "clipboard-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        class: "fontra-ui-clipboard-panel-card",
+      });
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: translate("sidebar.user-settings.clipboard"),
+        controller: clipboardFormatController,
+        descriptions: [
+          {
+            key: "format",
+            ui: "radio",
+            options: [
+              { key: "glif", displayName: "GLIF (RoboFont)" },
+              { key: "svg", displayName: "SVG" },
+              { key: "fontra-json", displayName: "JSON (Fontra)" },
+            ],
+          },
+        ],
+      },
+    ];
+  }
+}
diff --git a/src/fontra/views/applicationsettings/panel-display-language.js b/src/fontra/views/applicationsettings/panel-display-language.js
new file mode 100644
index 000000000..26e031e2b
--- /dev/null
+++ b/src/fontra/views/applicationsettings/panel-display-language.js
@@ -0,0 +1,49 @@
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { languageController } from "../core/localization.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-display-language-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class DisplayLanguagePanel extends BaseInfoPanel {
+  static title = "application-settings.display-language.title";
+  static id = "display-language-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        class: "fontra-ui-display-language-panel-card",
+      });
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: "Display Language",
+        controller: languageController,
+        descriptions: [
+          {
+            key: "language",
+            ui: "radio",
+            options: [
+              { key: "en", displayName: "English" },
+              { key: "zh-CN", displayName: "Simplified Chinese" },
+            ],
+          },
+        ],
+      },
+    ];
+  }
+}
diff --git a/src/fontra/views/applicationsettings/panel-user-settings.js b/src/fontra/views/applicationsettings/panel-theme-settings.js
similarity index 52%
rename from src/fontra/views/applicationsettings/panel-user-settings.js
rename to src/fontra/views/applicationsettings/panel-theme-settings.js
index fc38d459e..7a2bdcc2a 100644
--- a/src/fontra/views/applicationsettings/panel-user-settings.js
+++ b/src/fontra/views/applicationsettings/panel-theme-settings.js
@@ -1,21 +1,20 @@
-import { clipboardFormatController } from "../core/clipboard-format.js";
 import * as html from "../core/html-utils.js";
 import { addStyleSheet } from "../core/html-utils.js";
-import { languageController, translate } from "../core/localization.js";
+import { translate } from "../core/localization.js";
 import { themeController } from "../core/theme-settings.js";
 import { BaseInfoPanel } from "./panel-base.js";
 
 addStyleSheet(`
-  .fontra-ui-user-settings-panel-card {
+  .fontra-ui-theme-settings-panel-card {
     background-color: var(--ui-element-background-color);
     border-radius: 0.5em;
     padding: 1em;
   }
   `);
 
-export class UserSettingsPanel extends BaseInfoPanel {
-  static title = "application-settings.user-settings.title";
-  static id = "user-settings-panel";
+export class ThemeSettingsPanel extends BaseInfoPanel {
+  static title = "application-settings.theme-settings.title";
+  static id = "theme-settings-panel";
 
   async setupUI() {
     this.panelElement.innerHTML = "";
@@ -23,9 +22,8 @@ export class UserSettingsPanel extends BaseInfoPanel {
 
     for (const cardContent of this.cards()) {
       const container = html.createDomElement("grouped-settings", {
-        id: "user-settings",
+        class: "fontra-ui-theme-settings-panel-card",
       });
-      container.className = "fontra-ui-user-settings-panel-card";
       container.items = [cardContent];
       this.panelElement.appendChild(container);
     }
@@ -57,35 +55,7 @@ export class UserSettingsPanel extends BaseInfoPanel {
           },
         ],
       },
-      {
-        displayName: "Display Language",
-        controller: languageController,
-        descriptions: [
-          {
-            key: "language",
-            ui: "radio",
-            options: [
-              { key: "en", displayName: "English" },
-              { key: "zh-CN", displayName: "Simplified Chinese" },
-            ],
-          },
-        ],
-      },
-      {
-        displayName: translate("sidebar.user-settings.clipboard"),
-        controller: clipboardFormatController,
-        descriptions: [
-          {
-            key: "format",
-            ui: "radio",
-            options: [
-              { key: "glif", displayName: "GLIF (RoboFont)" },
-              { key: "svg", displayName: "SVG" },
-              { key: "fontra-json", displayName: "JSON (Fontra)" },
-            ],
-          },
-        ],
-      },
+      // TODO: There might come more in future, like font size, colors etc.
     ];
   }
 }

From 34d7763e55c561d0e2ccbc829ea09a9e42bcc05d Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Thu, 26 Sep 2024 13:32:26 +0200
Subject: [PATCH 5/8] Extend menu bar

---
 src/fontra/views/editor/editor.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
index 560859d38..92954c9e0 100644
--- a/src/fontra/views/editor/editor.js
+++ b/src/fontra/views/editor/editor.js
@@ -612,7 +612,13 @@ export class EditorController {
         title: "Fontra",
         bold: true,
         getItems: () => {
-          const menuItems = ["shortcuts", "server-info"];
+          const menuItems = [
+            "shortcuts",
+            "server-info",
+            "theme-settings",
+            "display-language",
+            "clipboard",
+          ];
           return menuItems.map((panelID) => ({
             title: translate(`application-settings.${panelID}.title`),
             enabled: () => true,

From bfd30ab714ce49a77c64b842c4931d032f8ceb68 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Thu, 26 Sep 2024 16:27:09 +0200
Subject: [PATCH 6/8] Use clipboardFormatController without 'this.'

---
 src/fontra/views/editor/editor.js              | 4 +---
 src/fontra/views/editor/panel-user-settings.js | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
index 92954c9e0..c9dce0743 100644
--- a/src/fontra/views/editor/editor.js
+++ b/src/fontra/views/editor/editor.js
@@ -129,8 +129,6 @@ export class EditorController {
       async (...args) => await this.editListenerCallback(...args)
     );
 
-    this.clipboardFormatController = clipboardFormatController;
-
     this.experimentalFeaturesController = new ObservableController({
       scalingEditBehavior: false,
       quadPenTool: false,
@@ -1655,7 +1653,7 @@ export class EditorController {
 
     const mapping = { "svg": svgString, "glif": glifString, "fontra-json": jsonString };
     const plainTextString =
-      mapping[this.clipboardFormatController.model.format] || glifString;
+      mapping[clipboardFormatController.model.format] || glifString;
 
     localStorage.setItem("clipboardSelection.text-plain", plainTextString);
     localStorage.setItem("clipboardSelection.glyph", jsonString);
diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js
index 317e6280d..3523e4463 100644
--- a/src/fontra/views/editor/panel-user-settings.js
+++ b/src/fontra/views/editor/panel-user-settings.js
@@ -1,5 +1,6 @@
 import { loaderSpinner } from "../core/loader-spinner.js";
 import Panel from "./panel.js";
+import { clipboardFormatController } from "/core/clipboard-format.js";
 import * as html from "/core/html-utils.js";
 import { languageController, translate } from "/core/localization.js";
 import { themeController } from "/core/theme-settings.js";
@@ -58,7 +59,7 @@ export default class UserSettingsPanel extends Panel {
 
     items.push({
       displayName: translate("sidebar.user-settings.clipboard"),
-      controller: this.editorController.clipboardFormatController,
+      controller: clipboardFormatController,
       descriptions: [
         {
           key: "format",

From 3690be0c076237a8166aa0ea379f90bbf5e54579 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Tue, 1 Oct 2024 11:29:41 +0200
Subject: [PATCH 7/8] Move "server-info" to last position

---
 src/fontra/views/applicationsettings/applicationsettings.js | 2 +-
 src/fontra/views/editor/editor.js                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/fontra/views/applicationsettings/applicationsettings.js b/src/fontra/views/applicationsettings/applicationsettings.js
index 8fe9e51a8..ccf317776 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.js
+++ b/src/fontra/views/applicationsettings/applicationsettings.js
@@ -22,13 +22,13 @@ export class ApplicationSettingsController {
 
     for (const panelClass of [
       ShortCutsPanel,
-      ServerInfoPanel,
       // TODO: Add more panels here:
       // EditorAppearancePanel,
       // ExtensionsPanel,
       ThemeSettingsPanel,
       DisplayLanguagePanel,
       ClipboardPanel,
+      ServerInfoPanel,
     ]) {
       const headerElement = html.div(
         {
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
index c9dce0743..62984be39 100644
--- a/src/fontra/views/editor/editor.js
+++ b/src/fontra/views/editor/editor.js
@@ -612,10 +612,10 @@ export class EditorController {
         getItems: () => {
           const menuItems = [
             "shortcuts",
-            "server-info",
             "theme-settings",
             "display-language",
             "clipboard",
+            "server-info",
           ];
           return menuItems.map((panelID) => ({
             title: translate(`application-settings.${panelID}.title`),

From 2610af2e5ec2c48f45a7fe3de3123822f470bff4 Mon Sep 17 00:00:00 2001
From: Olli Meier <hallo@olli-meier.de>
Date: Tue, 1 Oct 2024 11:37:33 +0200
Subject: [PATCH 8/8] Adding "/core/theme-settings.js" to
 applicationsettings.html

---
 src/fontra/views/applicationsettings/applicationsettings.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/fontra/views/applicationsettings/applicationsettings.html b/src/fontra/views/applicationsettings/applicationsettings.html
index f2c850f4a..0ce4689c8 100644
--- a/src/fontra/views/applicationsettings/applicationsettings.html
+++ b/src/fontra/views/applicationsettings/applicationsettings.html
@@ -7,6 +7,7 @@
     <title>Fontra Application Settings</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
     <script type="module" src="/web-components/grouped-settings.js"></script>
+    <script type="module" src="/core/theme-settings.js"></script>
     <style>
       body {
         overflow: scroll;