awful terrible js html templating stuff to get anki to work

Author: aecsocket

crates/wordbase/src/records.html

@@ -301,7 +301,7 @@
     for_el_with_class(
       script,
       class_name,
-      (el) => (el.style.display = "hidden"),
+      (el) => (el.style.display = "none"),
     );
   }
 </script>
@@ -375,6 +375,7 @@
         </div>
 
         <div
+          class="manage-notes"
           style="
             padding: 1.5em 0;
             display: flex;
@@ -408,12 +409,11 @@
               class="suggested-action"
               onclick="
               {
-                const on_add_note = () => {
-
+                const on_add_new_note = () => {
+                  this.closest('.manage-notes').update_manage_notes();
                 };
+                {{ fn_add_new_note | replace(from="<js_callback>", to="on_add_new_note") | safe }}
               }
-
-              {{ fn_add_new_note | safe }}
               "
             >
               <svg class="icon">
@@ -428,7 +428,14 @@
               <div style="flex: 1; position: relative">
                 <button
                   title="{{ config.s_add_duplicate_note }}"
-                  onclick="{{ fn_add_duplicate_note | safe }}"
+                  onclick="
+                  {
+                    const on_add_new_note = () => {
+                      this.closest('.manage-notes').update_manage_notes();
+                    };
+                    {{ fn_add_duplicate_note | replace(from="<js_callback>", to="on_add_new_note") | safe }}
+                  }
+                  "
                   style="flex: 1; position: relative"
                 >
                   <svg class="icon">
@@ -454,27 +461,30 @@
           <script>
             {
               const script = document.currentScript;
-
-              const on_num_existing_notes = (num) => {
-                hide_with_class(script, "add-note");
-                hide_with_class(script, "note-actions");
-                hide_with_class(script, "multiple-notes");
-
-                if (num > 0) {
-                  show_with_class(script, "note-actions");
-                  if (num > 1) {
-                    for_el_with_class(script, "multiple-notes", (el) => {
-                      el.style.display = "flex";
-                      el.innerHTML = `${num}`;
-                    });
+              function update_manage_notes() {
+                const on_num_existing_notes = (num) => {
+                  hide_with_class(script, "add-note");
+                  hide_with_class(script, "note-actions");
+                  hide_with_class(script, "multiple-notes");
+
+                  if (num > 0) {
+                    show_with_class(script, "note-actions");
+                    if (num > 1) {
+                      for_el_with_class(script, "multiple-notes", (el) => {
+                        el.style.display = "flex";
+                        el.innerHTML = `${num}`;
+                      });
+                    }
+                  } else {
+                    show_with_class(script, "add-note");
                   }
-                } else {
-                  show_with_class(script, "add-note");
-                }
-              };
+                };
 
-              // prettier-ignore
-              {{ fn_num_existing_notes | replace(from="<js_callback>", to="on_num_existing_notes") | safe }}
+                // prettier-ignore
+                {{ fn_num_existing_notes | replace(from="<js_callback>", to="on_num_existing_notes") | safe }}
+              }
+              script.parentElement.update_manage_notes = update_manage_notes;
+              update_manage_notes();
             }
           </script>
         </div>

wordbase-android/app/src/main/java/io/github/aecsocket/wordbase/RecordsView.kt

@@ -351,8 +351,8 @@ fun RawRecordsView(
                 sViewNote = sViewNote,
                 sAddDuplicateNote = sAddDuplicateNote,
                 fnNumExistingNotes = jsCall("num_existing_notes", callback = true),
-                fnAddNewNote = jsCall("add_new_note"),
-                fnAddDuplicateNote = jsCall("add_duplicate_note"),
+                fnAddNewNote = jsCall("add_new_note", callback = true),
+                fnAddDuplicateNote = jsCall("add_duplicate_note", callback = true),
                 fnViewNote = jsCall("view_note"),
             ),
         )
@@ -404,7 +404,7 @@ fun RawRecordsView(
     }
 
     @Composable
-    fun <R> registerJsFunction(methodName: String, fn: (suspend (Term) -> R?)?) {
+    fun <R> registerJsFunction(methodName: String, fn: (suspend (Term) -> R)?) {
         var jsHandler by remember { mutableStateOf<IJsMessageHandler?>(null) }
         LaunchedEffect(jsBridge, fn) {
             println("UnRegistered $methodName")
@@ -431,7 +431,14 @@ fun RawRecordsView(
                         )
 
                         CoroutineScope(Dispatchers.IO).launch {
-                            fn(term)?.let { r -> callback(r.toString()) }
+                            fn(term)?.let { r ->
+                                // todo this is suck a hack 🙄
+                                if (r == Unit) {
+                                    callback("{}")
+                                } else {
+                                    callback(r.toString())
+                                }
+                            }
                         }
                     }
                 }