1 files changed, 35 insertions, 38 deletions

diff --git a/html/import_frame.js b/html/import_frame.js
index 4075433..c0eb2f0 100644
--- a/html/import_frame.js
+++ b/html/import_frame.js
@@ -9,6 +9,7 @@
  * IMPORTS_START
  * IMPORT get_remote_storage
  * IMPORT by_id
+ * IMPORT clone_template
  * IMPORT nice_name
  * IMPORT make_once
  * IMPORTS_END
@@ -16,48 +17,38 @@
 
 let storage;
 
-const import_li_template = by_id("import_li_template");
-import_li_template.removeAttribute("id");
-
-function import_li_id(prefix, item)
-{
-    return `ili_${prefix}_${item}`;
-}
-
-let import_ul = by_id("import_ul");
+let import_list = by_id("import_list");
 let import_chbxs_colliding = undefined;
+let entry_objects = undefined;
 let settings_import_map = undefined;
 
-function add_import_li(prefix, name)
+function add_import_entry(prefix, name)
 {
-    let li = import_li_template.cloneNode(true);
-    let name_span = li.firstElementChild;
-    let chbx = name_span.nextElementSibling;
-    let warning_span = chbx.nextElementSibling;
+    const cloned_template = clone_template("import_entry");
+    Object.assign(cloned_template, {prefix, name});
 
-    li.setAttribute("data-prefix", prefix);
-    li.setAttribute("data-name", name);
-    li.id = import_li_id(prefix, name);
-    name_span.textContent = nice_name(prefix, name);
+    cloned_template.name_span.textContent = nice_name(prefix, name);
 
     if (storage.get(prefix, name) !== undefined) {
-	import_chbxs_colliding.push(chbx);
-	warning_span.textContent = "(will overwrite existing setting!)";
+	import_chbxs_colliding.push(cloned_template.chbx);
+	cloned_template.warning.textContent = "!";
     }
 
-    import_ul.appendChild(li);
+    import_list.appendChild(cloned_template.entry);
+
+    return cloned_template;
 }
 
 function check_all_imports()
 {
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = true;
+    for (const entry_object of entry_objects)
+	entry_object.chbx.checked = true;
 }
 
 function uncheck_all_imports()
 {
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = false;
+    for (const entry_object of entry_objects)
+	entry_object.chbx.checked = false;
 }
 
 function uncheck_colliding_imports()
@@ -68,17 +59,13 @@ function uncheck_colliding_imports()
 
 function commit_import()
 {
-    for (let li of import_ul.children) {
-	let chbx = li.firstElementChild.nextElementSibling;
-
-	if (!chbx.checked)
+    for (const entry_object of entry_objects) {
+	if (!entry_object.chbx.checked)
 	    continue;
 
-	let prefix = li.getAttribute("data-prefix");
-	let name = li.getAttribute("data-name");
-	let key = prefix + name;
-	let value = settings_import_map.get(key);
-	storage.set(prefix, name, value);
+	const key = entry_object.prefix + entry_object.name;
+	const value = settings_import_map.get(key);
+	storage.set(entry_object.prefix, entry_object.name, value);
     }
 
     deactivate();
@@ -105,38 +92,48 @@ function show_error(errormsg, errordetail)
 }
 
 const import_selection_radio = by_id("import_selection_radio");
+const existing_settings_note = by_id("existing_settings_note");
 
 function show_selection(settings)
 {
     import_selection_radio.checked = true;
 
-    let old_children = import_ul.children;
+    let old_children = import_list.children;
     while (old_children[0] !== undefined)
-	import_ul.removeChild(old_children[0]);
+	import_list.removeChild(old_children[0]);
 
     import_chbxs_colliding = [];
+    entry_objects = [];
     settings_import_map = new Map();
 
     for (let setting of settings) {
 	let [key, value] = Object.entries(setting)[0];
 	let prefix = key[0];
 	let name = key.substring(1);
-	add_import_li(prefix, name);
+	entry_objects.push(add_import_entry(prefix, name));
 	settings_import_map.set(key, value);
     }
+
+    const op = import_chbxs_colliding.length > 0 ? "remove" : "add";
+    existing_settings_note.classList[op]("hide");
 }
 
 function deactivate()
 {
     /* Let GC free some memory */
     import_chbxs_colliding = undefined;
+    entry_objects = undefined;
     settings_import_map = undefined;
 
     if (exports.onclose)
 	exports.onclose();
 }
 
-const exports = {show_loading, show_error, show_selection, deactivate};
+const wrapper = by_id("import_table_wrapper");
+const style_table = (...cls) => cls.forEach(c => wrapper.classList.add(c));
+
+const exports =
+      {show_loading, show_error, show_selection, deactivate, style_table};
 
 async function init()
 {