From a45c833860989e4ac627f77466dc78c727bf919a Mon Sep 17 00:00:00 2001
From: gusthoff <gusthoff@gusthoff.com>
Date: Fri, 29 Sep 2023 18:32:24 +0200
Subject: [PATCH 1/3] Widget: adding support for storing settings in cookies

---
 frontend/package.json                        |  1 +
 frontend/sphinx/widget/templates/widget.html |  2 +-
 frontend/src/ts/strings.ts                   |  2 +-
 frontend/src/ts/widget.ts                    | 97 +++++++++++++++-----
 frontend/yarn.lock                           |  5 +
 5 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 51cd3ca80..2f5ddc13c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -72,6 +72,7 @@
     "ts-node": "^10.9.1",
     "typedoc": "^0.24.8",
     "typescript": ">=5.1.6",
+    "typescript-cookies": "^0.0.5",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
diff --git a/frontend/sphinx/widget/templates/widget.html b/frontend/sphinx/widget/templates/widget.html
index 95eafbd4f..f598e917b 100644
--- a/frontend/sphinx/widget/templates/widget.html
+++ b/frontend/sphinx/widget/templates/widget.html
@@ -33,7 +33,7 @@
             <div class="dropdown-content">
                 <label>
                     <input id="{{ w.id }}.settings-bar.tab-setting" type="checkbox" class="checkbox tab-setting">
-                    Enable tabbed editor view for this editor
+                    Use tabbed editor view
                 </label>
                 <label>
                     <input id="{{ w.id }}.settings-bar.theme-setting" type="checkbox" class="checkbox theme-setting">
diff --git a/frontend/src/ts/strings.ts b/frontend/src/ts/strings.ts
index c5143fddb..3223837f3 100644
--- a/frontend/src/ts/strings.ts
+++ b/frontend/src/ts/strings.ts
@@ -11,7 +11,7 @@ export const DOWNLOAD_MAINTENANCE =
 // const SETTINGS_TOOLTIP = 'Modify settings for this editor';
 
 export const SETTINGS_TABBED_EDITOR_LABEL =
-'Enable tabbed editor view for this editor';
+'Use tabbed editor view';
 
 export const SETTINGS_THEME_EDITOR_LABEL =
 'Use the dark theme';
diff --git a/frontend/src/ts/widget.ts b/frontend/src/ts/widget.ts
index 2757b1d92..6db55967b 100644
--- a/frontend/src/ts/widget.ts
+++ b/frontend/src/ts/widget.ts
@@ -1,3 +1,5 @@
+import cookies from 'typescript-cookies';
+
 import {Area, OutputArea, LabContainer} from './areas';
 import {Editor, EditorTheme} from './editor';
 import {getElemsByClass, getElemById, getElemsByTag}
@@ -141,45 +143,49 @@ class Widget {
       });
     }
 
+    // Get tabbed view status from cookie
+    const cookieTabbedView = cookies.get('tabbed_view') as string;
+    const tabbedView = (cookieTabbedView != 'false');
+
     // attach handlers to the settings bar items
     const tabSetting =
       this.getElem('settings-bar', 'tab-setting') as HTMLInputElement;
-    tabSetting.checked = true;
+    tabSetting.checked = tabbedView;
+    this.setTabbedView(tabbedView);
+
     tabSetting.addEventListener('change', () => {
-      const isTabbed: boolean = tabSetting.checked;
-
-      const editorContainer =
-        this.getElem('editors', 'editor');
-      const nontabbedEditorContainer =
-        this.getElem('editors', 'non-tabbed-editor');
-
-      //  Show / hide editor containers
-      editorContainer.hidden = ! isTabbed;
-      nontabbedEditorContainer.hidden = isTabbed;
-
-      //  Show / hide buttons (for tabbed view)
-      const tab = this.getElem('tab');
-      const headers = getElemsByTag(tab, 'button');
-      for (const h of headers) {
-        h.hidden = ! isTabbed;
+      let tabbedView = 'true';
+      if (!tabSetting.checked) {
+        tabbedView = 'false';
       }
+      cookies.set('tabbed_view', tabbedView, {expires: 3650});
 
-      // Ask editor to refresh ACE editor
-      this.editor.refresh(isTabbed);
+      // Current approach: just reload the page to
+      // set the correct theme for all widgets.
+      location.reload();
     });
 
     this.initCompilerSwitches();
 
+    // Get selected theme from cookie
+    const cookieTheme = cookies.get('theme') as string;
+
     const themeSetting =
       this.getElem('settings-bar', 'theme-setting') as HTMLInputElement;
+    // Set checkbox according to value from cookie
+    themeSetting.checked = (cookieTheme == 'dark');
+    this.setTheme(cookieTheme);
+
     themeSetting.addEventListener('change', () => {
-      let theme = EditorTheme.Light;
+      let theme = 'light';
       if (themeSetting.checked) {
-        theme = EditorTheme.Dark;
-      }
-      for (const t of this.viewMap.values()) {
-        t.editor.setTheme(theme);
+        theme = 'dark';
       }
+      cookies.set('theme', theme, {expires: 3650});
+
+      // Current approach: just reload the page to
+      // set the correct theme for all widgets.
+      location.reload();
     });
 
     const resetButton =
@@ -375,6 +381,49 @@ class Widget {
     }
   }
 
+  /**
+   * Set the editor theme
+   *
+   * @param {string} themeStr - the theme for the editor
+   */
+  private setTheme(themeStr : string) : void {
+    let theme = EditorTheme.Light;
+    if (themeStr == 'dark') {
+      theme = EditorTheme.Dark;
+    }
+
+    for (const t of this.viewMap.values()) {
+      t.editor.setTheme(theme);
+    }
+  }
+
+  /**
+   * Set status for tabbed view of editor
+   *
+   * @param {string} isTabbed - use tabbed view
+   */
+  private setTabbedView(isTabbed : boolean) : void {
+    const editorContainer =
+      this.getElem('editors', 'editor');
+    const nontabbedEditorContainer =
+      this.getElem('editors', 'non-tabbed-editor');
+
+    //  Show / hide editor containers
+    editorContainer.hidden = ! isTabbed;
+    nontabbedEditorContainer.hidden = isTabbed;
+
+    //  Show / hide buttons (for tabbed view)
+    const tab = this.getElem('tab');
+    const headers = getElemsByTag(tab, 'button');
+    for (const h of headers) {
+      h.hidden = ! isTabbed;
+    }
+
+    // Ask editor to refresh ACE editor
+    this.editor.refresh(isTabbed);
+  }
+
+
   /**
    * Gets an element by its id inside the current widget layout
    *
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 5705e96e7..dac0c8e22 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -9628,6 +9628,11 @@ typedoc@^0.24.8:
     minimatch "^9.0.0"
     shiki "^0.14.1"
 
+typescript-cookies@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/typescript-cookies/-/typescript-cookies-0.0.5.tgz#538b00cce4de2c256b5d22f39b6b2dbcdb6c3c92"
+  integrity sha512-J+3lR5z3qokjiVSktlMoXXVwIPBETBdiALxR1jqNlQLBEZB9pQj+SJRexlw2CudIVVaMpFZYtizjtW+hlxz+yQ==
+
 typescript@>=5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"

From 61329eb55c1b4aa6dee9570b2107e7ecd9c4cb16 Mon Sep 17 00:00:00 2001
From: gusthoff <gusthoff@gusthoff.com>
Date: Fri, 29 Sep 2023 19:39:22 +0200
Subject: [PATCH 2/3] Widget: set status after change

Although we're reloading the page afterwards, we need to set the correct status
for testing purposes.
---
 frontend/src/ts/widget.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/ts/widget.ts b/frontend/src/ts/widget.ts
index 6db55967b..cdc7910a6 100644
--- a/frontend/src/ts/widget.ts
+++ b/frontend/src/ts/widget.ts
@@ -159,6 +159,7 @@ class Widget {
         tabbedView = 'false';
       }
       cookies.set('tabbed_view', tabbedView, {expires: 3650});
+      this.setTabbedView(tabSetting.checked);
 
       // Current approach: just reload the page to
       // set the correct theme for all widgets.
@@ -182,6 +183,7 @@ class Widget {
         theme = 'dark';
       }
       cookies.set('theme', theme, {expires: 3650});
+      this.setTheme(theme);
 
       // Current approach: just reload the page to
       // set the correct theme for all widgets.

From 33de4367a9acc1c941b5355dbf759ec1925b269b Mon Sep 17 00:00:00 2001
From: gusthoff <gusthoff@gusthoff.com>
Date: Fri, 29 Sep 2023 19:41:44 +0200
Subject: [PATCH 3/3] Widget: adding unit test for tab setting

---
 frontend/tests/ts/widget.spec.ts | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/tests/ts/widget.spec.ts b/frontend/tests/ts/widget.spec.ts
index b04eda40b..301515c76 100644
--- a/frontend/tests/ts/widget.spec.ts
+++ b/frontend/tests/ts/widget.spec.ts
@@ -396,10 +396,11 @@ describe('Widget', () => {
     });
 
     describe('Settings Bar', () => {
+      let editorDiv: HTMLElement;
       let editor: ace.Editor;
 
       before(() => {
-        const editorDiv = getElemById(root.id + '.editors.editor');
+        editorDiv = getElemById(root.id + '.editors.editor');
         editor = ace.edit(editorDiv);
       });
 
@@ -413,9 +414,25 @@ describe('Widget', () => {
       });
 
       it('should have a checkbox that switches tab setting', () => {
-        // const box = getElemById(root.id + '.settings-bar.tab-setting') as
-        //     HTMLInputElement;
-        // expect.fail('Test not implemented.');
+        const nonTabbedEditorDiv: HTMLElement = getElemById(root.id + '.editors.non-tabbed-editor');
+        const box = getElemById(root.id + '.settings-bar.tab-setting') as
+            HTMLInputElement;
+
+        const origIsTabbedView : boolean = !editorDiv.hidden;
+        expect(nonTabbedEditorDiv.hidden).to.equal(origIsTabbedView);
+
+        box.checked = !box.checked;
+        triggerEvent(box, 'change');
+        expect(editorDiv.hidden).to.equal(origIsTabbedView);
+        expect(nonTabbedEditorDiv.hidden).to.not.equal(origIsTabbedView);
+
+        //  Test hiding / showing buttons for tabbed view
+        const tabs = getElemById(root.id + '.tab');
+        const headers = getElemsByTag(tabs, 'button');
+
+        for (const h of headers) {
+          expect(h.hidden).to.equal(origIsTabbedView);
+        }
       });
 
       it('should have a button that resets the editor', () => {