From 4686f8901024a5843636a9a05879b8e21d180c0b Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Mon, 25 Mar 2024 10:12:50 +0800
Subject: [PATCH] rebuild settings GUI

---
 gui/layouts/settings.json | 114 --------------------------------------
 gui/settings.htm          |  65 +++++++++++++++++++++-
 gui/styles/ui.css         |  21 +++++++
 3 files changed, 85 insertions(+), 115 deletions(-)
 delete mode 100644 gui/layouts/settings.json
diff --git a/gui/layouts/settings.json b/gui/layouts/settings.json
deleted file mode 100644
index 3317181..0000000
--- a/gui/layouts/settings.json
+++ /dev/null
@@ -1,114 +0,0 @@
-{
-  "general": {
-    "type": "tab",
-    "content": {
-      "appearance": {
-        "type": "group",
-        "content": {
-          "showApplicable": {
-            "type": "tickbox",
-            "preference": ["preferences", "appearance", "showApplicable"]
-          },
-          "injectPage": {
-            "type": "tickbox",
-            "preference": ["preferences", "appearance", "injectPage"]
-          }
-        }
-      },
-      "behavior": {
-        "type": "group",
-        "content": {
-          "autoRun": {
-            "type": "tickbox",
-            "description": "autoRunDisclaimer",
-            "preference": ["preferences", "behavior", "autoRun"]
-          }
-        }
-      }
-    }
-  },
-  "filters": {
-    "type": "tab",
-    "content": {
-      "filters": {
-          "type": "filter",
-          "search criteria": {
-              "search": {
-                  "type": "search",
-                  "directory": ["filters"],
-                  "criteria": [".", "URL"]
-              },
-              "add": {
-                  "type": "button",
-                  "action": "add"
-              }
-          },
-          "result selection": {
-              "foundItems": {
-                  "type": "select"
-              }
-          },
-          "result detail": {
-              "rulesViewer": {
-                  "type": "textbox",
-                  "result": ["filters", "."]
-              },
-              "preferences": {
-                  "type": "footer",
-                  "content": {
-                      "enable": {
-                          "type": "tickbox",
-                          "preference": ["filter preferences", ".", "enabled"]
-                      },
-                      "remove": {
-                          "type": "button",
-                          "action": "remove"
-                      },
-                      "save": {
-                          "type": "button",
-                          "action": "save"
-                      }
-                  }
-              }
-          }
-      }
-    }
-  },
-  "storage": {
-    "type": "tab",
-    "content": {
-      "storage_management": {
-        "type": "group",
-        "content": {
-            "description": {
-              "type": "label"
-            },
-            "delete": {
-                "type": "button",
-                "action": "remove"
-            }
-        }
-      }
-    }
-  },
-  "about": {
-    "type": "tab",
-    "content": {
-      "app_logo": {
-          "type": "image"
-      },
-      "manifest_name": {
-          "type": "label"
-      },
-      "extension_version": {
-          "type": "label"
-      },
-      "extension_description": {
-          "type": "label"
-      },
-      "extension_help": {
-          "type": "label"
-      }
-    }
-  }
-}
diff --git a/gui/settings.htm b/gui/settings.htm
index c1ec429..90a3a3a 100644
--- a/gui/settings.htm
+++ b/gui/settings.htm
@@ -3,5 +3,68 @@
 	<script type="module" src="scripts/settings.js"></script>
 </head>
 <body>
-	
+	<main class="window-body has-space">
+		<menu role="tablist" aria-label="Window with Tabs">
+  		<button role="tab" aria-controls="settings"></button>
+  		<button role="tab" aria-controls="filters"></button>
+  		<button role="tab" aria-controls="storage"></button>
+			<button role="tab" aria-controls="about"></button>
+		</menu>
+		<section class="view_main">
+			<section role="tabpanel" id="settings">
+				<fieldset id="settings_general">
+					<legend></legend>
+					<form class="field-row">
+						<input type="checkbox" id="settings_general_showApplicable" data-store="settings,general,showApplicable">
+	      		<label for="settings_general_showApplicable"></label>
+					</form>
+					<form class="field-row">
+						<input type="checkbox" id="settings_general_injectToPage" data-store="settings,general,injectToPage">
+		      	<label for="settings_general_injectToPage"></label>
+					</form>
+				</fieldset>
+				<fieldset id="settings_behavior">
+					<legend></legend>
+					<form class="field-row">
+						<input type="checkbox" id="settings_behavior_autoRun" data-store="settings,behavior,autoRun">
+		      	<label for="settings_behavior_autoRun"></label>
+					</form>
+				</fielset>
+			</section>
+			<section role="tabpanel" id="filters">
+				<fieldset id="filters">
+					<legend></legend>
+					<label data-name="settings_filters_description"></label>
+					<div class="field-row action-buttons">
+						<button id="settings_filters_clear" data-action="filters,clear"></button>
+						<button id="settings_filters_open" data-action="open,filters"></button>
+					</div>
+				</fieldset>
+			</section>
+			<section role="tabpanel" id="storage">
+				<fieldset id="storage">
+					<legend></legend>
+					<label data-name="settings_storage_description"></label>
+					<div class="field-row action-buttons">
+						<button id="settings_filters_clear" data-action="storage,clear"></button>
+					</div>
+				</fieldset>
+			</section>
+		</section>
+		<section role="tabpanel" id="about">
+			<img id="about_app_logo" />
+			<h1 data-text="manifest_name"></h1>
+			<p data-text="extension_version"></p>
+			<p data-text="extension_description"></p>
+			<div class="field-row action-buttons">
+				<button data-action="open,help"></button>
+			</div>
+		</section>
+	</section>
+		<footer class="field-row action-buttons">
+			<button class="default" id="apply">Apply</button>
+      <button id="cancel">Cancel</button>
+		</footer>
+	</main>
+	</div>
 </body></html>
diff --git a/gui/styles/ui.css b/gui/styles/ui.css
index e69de29..b010071 100644
--- a/gui/styles/ui.css
+++ b/gui/styles/ui.css
@@ -0,0 +1,21 @@
+/*
+ShopAI's GUI appearance
+*/
+
+.window-body {
+  display: flex;
+  flex-direction: column;
+}
+
+
+.window-body .view_main {
+
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.window-body .action-buttons {
+  display: flex;
+  align-items: end;
+  justify-content:end;
+}
