diff --git a/js/lib/libghettoui/BaseUi.js b/js/lib/libghettoui/BaseUi.js
new file mode 100644
index 0000000..9550f65
--- /dev/null
+++ b/js/lib/libghettoui/BaseUi.js
@@ -0,0 +1,29 @@
+class BaseUi {
+ constructor(id, label, onClick, additionalClasses) {
+ this.element = document.createElement('div');
+ this.element.setAttribute('id', id);
+ if (additionalClasses) {
+ this.element.classList.add(...additionalClasses);
+ }
+ if (onClick) {
+ this.element.addEventListener('click', onClick);
+ }
+ this.element.innerHTML = label;
+ }
+
+ disable() {
+ this.element.classList.add('disabled');
+ }
+ enable() {
+ this.element.classList.remove('disabled');
+ }
+ hide() {
+ this.element.classList.add('hidden');
+ }
+ show() {
+ this.element.classList.remove('hidden');
+ }
+ appendTo(element) {
+ element.appendChild(this.element);
+ }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/buttons/Button.js b/js/lib/libghettoui/buttons/Button.js
new file mode 100644
index 0000000..ab5f213
--- /dev/null
+++ b/js/lib/libghettoui/buttons/Button.js
@@ -0,0 +1,11 @@
+class ShortcutButton extends BaseUi {
+ constructor(id, label, onClick, additionalClasses) {
+ super(
+ id,
+ label,
+ onClick,
+ additionalClasses
+ );
+ this.element.classList.add('button');
+ }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/buttons/ShortcutButton.js b/js/lib/libghettoui/buttons/ShortcutButton.js
new file mode 100644
index 0000000..d238f16
--- /dev/null
+++ b/js/lib/libghettoui/buttons/ShortcutButton.js
@@ -0,0 +1,10 @@
+class ShortcutButton extends Button {
+ constructor(id, label, shortcutLabel, onClick, additionalClasses) {
+ super(
+ id,
+ `${label}
(${shortcutLabel})`,
+ onClick,
+ additionalClasses
+ );
+ }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/popup/MenuItem.js b/js/lib/libghettoui/popup/MenuItem.js
new file mode 100644
index 0000000..c0b4e99
--- /dev/null
+++ b/js/lib/libghettoui/popup/MenuItem.js
@@ -0,0 +1,30 @@
+class MenuItem extends BaseUi {
+ constructor(id, label, sublabel, onClick, additionalClasses) {
+ super(
+ id,
+ `${label}`,
+ onClick,
+ additionalClasses
+ );
+ this.element.classList.add('menu-item');
+ this.element.subitemList = document.createElement('div');
+ }
+
+ insertSubitem(subitemElement) {
+ this.element.subitemList.appendChild(subitemElement);
+ }
+
+ removeSubitems() {
+ while (this.element.subitemList.firstChild) {
+ this.element.subitemList.removeChild(this.element.subitemList.firstChild);
+ }
+ }
+
+ showSubitems() {
+ this.element.subitemList.classList.remove('hidden');
+ }
+
+ hideSubitems() {
+ this.element.subitemList.classList.add('hidden');
+ }
+}
\ No newline at end of file