add 'add card' button

Author: aecsocket

crates/wordbase-cli/src/lookup.rs

@@ -2,7 +2,7 @@ use {
     anyhow::{Context, Result},
     std::{fmt::Write as _, path::Path, time::Instant},
     tokio::fs,
-    wordbase::{Engine, Profile, RecordKind},
+    wordbase::{Engine, Profile, RecordKind, render::RenderConfig},
 };
 
 pub fn deinflect(engine: &Engine, text: &str) {
@@ -46,7 +46,13 @@ pub async fn render(engine: &Engine, profile: &Profile, text: &str, output: &Pat
 
     let start = Instant::now();
     let mut html = engine
-        .render_to_html(&records)
+        .render_to_html(
+            &records,
+            &RenderConfig {
+                add_card_text: "Add Card".into(),
+                add_card_js_fn: "unimplemented".into(),
+            },
+        )
         .context("failed to render HTML")?;
     let end = Instant::now();
     println!("Rendered HTML in {:?}", end.duration_since(start));

crates/wordbase/src/render.rs

@@ -8,18 +8,30 @@ use wordbase_api::{DictionaryId, Record, RecordKind, RecordLookup, Term, dict};
 use crate::{Engine, IndexMap};
 
 impl Engine {
-    pub fn render_to_html(&self, records: &[RecordLookup]) -> Result<String> {
+    pub fn render_to_html(
+        &self,
+        records: &[RecordLookup],
+        config: &RenderConfig,
+    ) -> Result<String> {
         let terms = group_terms(records);
 
         let mut context = tera::Context::new();
         context.insert("dictionaries", &self.dictionaries().0);
         context.insert("terms", &terms);
+        context.insert("config", config);
 
         let html = self.renderer.render("records.html", &context)?;
         Ok(html)
     }
 }
 
+#[derive(Debug, Clone, Serialize)]
+#[cfg_attr(feature = "uniffi", derive(uniffi::Record))]
+pub struct RenderConfig {
+    pub add_card_text: String,
+    pub add_card_js_fn: String,
+}
+
 fn group_terms(records: &[RecordLookup]) -> Vec<RecordTerm> {
     // note on ordering:
     // by default, tera will not preserve the order of IndexMap entries,
@@ -197,8 +209,12 @@ const _: () = {
 
     #[uniffi::export]
     impl Wordbase {
-        pub fn render_to_html(&self, records: &[RecordLookup]) -> FfiResult<String> {
-            Ok(self.0.render_to_html(records)?)
+        pub fn render_to_html(
+            &self,
+            records: &[RecordLookup],
+            translations: &RenderConfig,
+        ) -> FfiResult<String> {
+            Ok(self.0.render_to_html(records, translations)?)
         }
     }
 };

record-templates/records.html

@@ -115,6 +115,10 @@
     background-color: var(--button-active-color);
   }
 
+  button.suggested-action {
+    background: var(--accent-color);
+  }
+
   table {
     border-collapse: collapse;
     margin: 8px 0;
@@ -241,14 +245,31 @@
   {% for group in terms %}
   <div style="display: flex; flex-direction: column; gap: 8px">
     <div class="header">
-      <div class="content">
-        <div style="padding: 16px 0; font-size: 2em">
+      <div
+        class="content"
+        style="width: 100%; display: flex; flex-direction: row; gap: 16px"
+      >
+        <div style="padding: 16px 0; font-size: 2em; flex: 1">
           <ruby>
             {%- for part in group.furigana_parts -%}
             <span>{{- part[0] -}}</span><rt>{{- part[1] -}}</rt>
             {%- endfor -%}
           </ruby>
         </div>
+
+        <div
+          style="display: flex; flex-direction: column; justify-content: center"
+        >
+          <button
+            class="suggested-action"
+            onclick='{{ config.add_card_js_fn }}({
+              headword: {% if group.term.headword %}"{{ group.term.headword | addslashes }}"{% else %}null{% endif %},
+              reading: {% if group.term.reading %}"{{ group.term.reading | addslashes }}"{% else %}null{% endif %},
+            })'
+          >
+            {{ config.add_card_text }}
+          </button>
+        </div>
       </div>
     </div>