Add new features "Customize UI" and "Sidebar View"

src/public/interface/nattybox.html

@@ -73,6 +73,52 @@
         <fieldset id="templates">
           <legend>🧱 Templates</legend>
         </fieldset>
+        <fieldset id="customizeui">
+          <legend>🛠️ Customize UI</legend>
+          <div>
+            <a class="button" id="ligthTheme">Light Theme</a>
+            <a class="button" id="darkTheme">Dark Theme</a>
+            <label for="borderCheckbox">Use Border?</label>
+            <input type="checkbox" name="borderCheckbox" id="borderCheckbox">
+            <label for="sidebarCheckbox">Sidebar View?</label>
+            <input type="checkbox" name="sidebarCheckbox" id="sidebarCheckbox">
+          </div>
+          <div>
+
+            <label for="backgroundColor" class="help" title="Change the note background color">
+              Background Color
+            </label>
+            <input type="color" id="backgroundColor" name="backgroundColor" value="#f4ecd8">
+
+
+            <label for="fontColor" class="help" title="Change the note font color">
+              Font Color
+            </label>
+            <input type="color" id="fontColor" name="fontColor" value="#5b4636">
+
+            <label for="border" class="help" title="Change the note border color">
+              Border 
+            </label>
+            <input type="color" id="border" name="border" value="#5b4636">
+
+            <label for="linkColor" class="help" title="Change the note border color">
+              Link Color 
+            </label>
+            <input type="color" id="linkColor" name="linkColor" value="#5b4636">
+
+            <label for="fontSize" class="help" title="Change the note line color">
+              Font Size
+            </label>
+            <input type="number" id="fontSize" name="fontSize" value="15">
+
+            <label for="borderSize" class="help" title="Change the note border size">
+              Border Size
+            </label>
+            <input type="number" id="borderSize" name="borderSize" value="15">
+
+
+          </div>
+        </fieldset>
       </form>
       <div id="links">
         <a

src/public/styles/deck.css

@@ -1,15 +1,29 @@
+:root {
+  --useBorder: '1px';
+  --backgroundColor: #f4ecd8;
+  --fontColor: #5b4636; 
+  --borderColor: black; 
+  --linkColor: blue; 
+  --fontSize: 16px; 
+}
+
 #input {
   font-family: Georgia, "Times New Roman", Times, serif;
   cursor: text;
   outline: none;
   max-height: 160px;
   padding: 10px;
-  font-size: 16px;
-  background-color: #f4ecd8;
-  color: #5b4636;
+  border: solid var(--useBorder) var(--borderColor);
+  font-size: var(--fontSize);
+  background-color: var(--backgroundColor);
+  color: var(--fontColor);
   overflow-y: auto;
 }
 
+#input a {
+  color: var(--linkColor);
+}
+
 img {
   max-width: 170px;
   max-height: 170px;

src/public/styles/options.css

@@ -19,7 +19,7 @@ body {
   align-items: center;
   outline: none;
   border: 0;
-  margin: 0;
+  margin: auto;
   padding: 0;
   background-color: var(--main);
   color: var(--secondary);
@@ -65,11 +65,31 @@ fieldset {
 
 fieldset legend {
   font-weight: bolder;
-  font-size: 24px;
+  font-size: 22px;
   margin-bottom: 10px;
   cursor: default;
 }
 
+fieldset .button {
+  cursor: pointer;
+  text-align: center;
+  border-radius: 3px;
+  border: 1px solid var(--secondary);
+  padding: 5px;
+  background-color: var(--main);
+  color: var(--secondary);
+  font-size: 14px;
+  margin: 0 0 5px 0
+}
+
+fieldset .button:hover {
+  background-color: var(--disabled);
+}
+
+fieldset input {
+  width: auto;
+}
+
 fieldset div {
   display: flex;
   flex-direction: column;
@@ -104,7 +124,7 @@ input[type="range"] {
   appearance: none;
   background: transparent;
   cursor: pointer;
-  width: 15rem;
+  width: auto;
 }
 
 input[type="range"]::-webkit-slider-runnable-track {

src/src/Deck.js

@@ -12,92 +12,93 @@
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.  */
 
-import userSettings from "./settings";
-import { UIElement } from "./UIElement";
-import player from "./player";
-import { matchKey, goToEOL } from "./utils";
-
-export class Deck extends UIElement {
-  constructor() {
-    const input = document.createElement(`div`);
-    input.id = `input`;
-    input.setAttribute(`contenteditable`, ``);
-    const style = [`styles/deck.css`];
-    super(input, style);
-    this.addEventListeners();
-    this.show();
-    this._timeoutID = 0;
-    this.metadata = undefined;
-  }
-
-  addEventListeners() {
-    const observer = new MutationObserver(
-      function () {
-        if (this._timeoutID) {
-          clearTimeout(this._timeoutID);
-        }
-
-        this._timeoutID = setTimeout(this.sync.bind(this), 2000);
-      }.bind(this)
-    );
-    observer.observe(this.current, {
-      attributes: false,
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
-
-    this.current.addEventListener(
-      `keydown`,
-      function (e) {
-        e.stopPropagation();
-        if (e.code === `Escape` || matchKey(e, userSettings.kybndg.deckBlur)) {
-          this.current.blur();
-          player.video.focus();
-          player.video.scrollIntoView({ block: `end`, behavior: `smooth` });
-        }
-      }.bind(this)
-    );
-  }
-
-  clear() {
-    this.current.innerHTML = ``;
-  }
-
-  appendChild(child) {
-    if (child instanceof HTMLElement) {
-      this.current.append(child);
-    } else if (child instanceof HTMLCollection) {
-      this.current.append(...child);
-    } else {
-      const p = document.createElement(`p`);
-      p.innerHTML = child;
-      this.current.appendChild(p);
-    }
-
-    this._scrollTillEnd();
-  }
-  _goToEOL() {
-    goToEOL(this.current);
-  }
-  _scrollTillEnd() {
-    this.current.scrollTop = this.current.scrollHeight;
-  }
-
-  sync(metadata) {
-    this.metadata = metadata ? metadata : this.metadata;
-    if (
-      this.current?.innerHTML &&
-      this.current?.isConnected &&
-      this.current?.classList.contains(`block`)
-    ) {
-      chrome.storage.local.set({
-        [this.metadata.vidId]: {
-          content: this.current.innerHTML,
-          timestamp: Date.now(),
-          ...this.metadata,
-        },
-      });
-    }
-  }
-}
+   import userSettings from "./settings";
+   import { UIElement } from "./UIElement";
+   import player from "./player";
+   import { matchKey, goToEOL } from "./utils";
+
+   export class Deck extends UIElement {
+     constructor() {
+       const input = document.createElement(`div`);
+       input.id = `input`;
+       input.setAttribute(`contenteditable`, ``);
+       const style = [`styles/deck.css`];
+       super(input, style);
+       this.addEventListeners();
+       this.show();
+       this._timeoutID = 0;
+       this.metadata = undefined;
+     }
+
+     addEventListeners() {
+       const observer = new MutationObserver(
+         function () {
+           if (this._timeoutID) {
+             clearTimeout(this._timeoutID);
+           }
+
+           this._timeoutID = setTimeout(this.sync.bind(this), 2000);
+         }.bind(this)
+       );
+       observer.observe(this.current, {
+         attributes: false,
+         childList: true,
+         subtree: true,
+         characterData: true,
+       });
+
+       this.current.addEventListener(
+         `keydown`,
+         function (e) {
+           e.stopPropagation();
+           if (e.code === `Escape` || matchKey(e, userSettings.kybndg.deckBlur)) {
+             this.current.blur();
+             player.video.focus();
+             player.video.scrollIntoView({ block: `end`, behavior: `smooth` });
+           }
+         }.bind(this)
+       );
+     }
+
+     clear() {
+       this.current.innerHTML = ``;
+     }
+
+     appendChild(child) {
+       if (child instanceof HTMLElement) {
+         this.current.append(child);
+       } else if (child instanceof HTMLCollection) {
+         this.current.append(...child);
+       } else {
+         const p = document.createElement(`p`);
+         p.innerHTML = child;
+         this.current.appendChild(p);
+       }
+
+       this._scrollTillEnd();
+     }
+     _goToEOL() {
+       goToEOL(this.current);
+     }
+     _scrollTillEnd() {
+       this.current.scrollTop = this.current.scrollHeight;
+     }
+
+     sync(metadata) {
+       this.metadata = metadata ? metadata : this.metadata;
+       if (
+         this.current?.innerHTML &&
+         this.current?.isConnected &&
+         this.current?.classList.contains(`block`)
+       ) {
+         chrome.storage.local.set({
+           [this.metadata.vidId]: {
+             content: this.current.innerHTML,
+             timestamp: Date.now(),
+             ...this.metadata,
+           },
+         });
+       }
+     }
+   }
+