Render nested checkboxes with indentation (#315)

Author: shunichironomura

crates/procnote-core/src/execution/engine.rs

@@ -94,6 +94,7 @@ pub struct ExecutionCheckbox {
     pub text: String,
     pub initial_checked: bool,
     pub checked: bool,
+    pub nesting_level: u32,
     pub toggled_at: Option<DateTime<Utc>>,
 }
 
@@ -519,13 +520,19 @@ impl ExecutionState {
                 .content
                 .iter()
                 .map(|item| match item {
-                    StepContent::Checkbox { text, checked, .. } => {
+                    StepContent::Checkbox {
+                        text,
+                        checked,
+                        nesting_level,
+                        ..
+                    } => {
                         let id = format!("{step_id}/cb-{cb_index}");
                         cb_index += 1;
                         StepContent::Checkbox {
                             id: Some(id),
                             text: text.clone(),
                             checked: *checked,
+                            nesting_level: *nesting_level,
                         }
                     }
                     // InputDefinition already has its own `id` from the template YAML.
@@ -1059,7 +1066,12 @@ fn execution_content_with_checkbox_ids(
         .iter()
         .map(|item| match item {
             StepContent::Prose { text } => ExecutionStepContent::Prose { text: text.clone() },
-            StepContent::Checkbox { id, text, checked } => {
+            StepContent::Checkbox {
+                id,
+                text,
+                checked,
+                nesting_level,
+            } => {
                 let id = id.clone().unwrap_or_else(|| {
                     loop {
                         let candidate = format!("{step_id}/cb-{checkbox_index}");
@@ -1074,6 +1086,7 @@ fn execution_content_with_checkbox_ids(
                     text: text.clone(),
                     initial_checked: *checked,
                     checked: *checked,
+                    nesting_level: nesting_level.unwrap_or_default(),
                     toggled_at: None,
                 })
             }
@@ -1275,6 +1288,7 @@ mod tests {
                         id: None,
                         text: "Ready".to_string(),
                         checked: false,
+                        nesting_level: None,
                     }],
                 },
                 Step {
@@ -1816,6 +1830,7 @@ mod tests {
             id: None,
             text: "Already verified by setup".to_string(),
             checked: true,
+            nesting_level: None,
         }];
         let mut state = ExecutionState::new();
         state.start(&template).unwrap();
@@ -1835,6 +1850,7 @@ mod tests {
             id: None,
             text: "Initially checked".to_string(),
             checked: true,
+            nesting_level: None,
         }];
         let mut state = ExecutionState::new();
         state.start(&template).unwrap();
@@ -1897,6 +1913,7 @@ mod tests {
                     id: None,
                     text: "Dynamic check".to_string(),
                     checked: false,
+                    nesting_level: None,
                 }],
                 Some("step-1"),
             )

crates/procnote-core/src/snapshot.rs

@@ -166,14 +166,18 @@ fn render_step(number: usize, step: &StepState, output: &mut String) {
             ExecutionStepContent::Prose { text } => render_prose(text, output),
             ExecutionStepContent::Checkbox(checkbox) => {
                 let marker = if checkbox.checked { "x" } else { " " };
+                let indent = "  ".repeat(checkbox.nesting_level as usize);
                 push_fmt(
                     output,
-                    format_args!("- [{marker}] {}\n", escape_inline_text(&checkbox.text)),
+                    format_args!(
+                        "{indent}- [{marker}] {}\n",
+                        escape_inline_text(&checkbox.text)
+                    ),
                 );
                 if let Some(toggled_at) = checkbox.toggled_at {
                     push_fmt(
                         output,
-                        format_args!("  Toggled at: {}\n", toggled_at.to_rfc3339()),
+                        format_args!("{indent}  Toggled at: {}\n", toggled_at.to_rfc3339()),
                     );
                 }
                 push_fmt(output, format_args!("\n"));
@@ -527,6 +531,7 @@ mod tests {
                         text: "Probe connected".to_string(),
                         initial_checked: false,
                         checked: true,
+                        nesting_level: 0,
                         toggled_at: Some(timestamp(1)),
                     }),
                     ExecutionStepContent::InputBlock {

crates/procnote-core/src/template/parser.rs

@@ -303,20 +303,36 @@ fn collect_task_checkboxes(
     list_start_index: usize,
     list_end_index: usize,
 ) -> Vec<StepContent> {
-    events
+    let mut checkboxes = Vec::new();
+    let mut list_depth = 1usize;
+
+    for (index, (event, _)) in events
         .iter()
         .enumerate()
         .take(list_end_index)
         .skip(list_start_index + 1)
-        .filter_map(|(index, (event, _))| match event {
-            Event::TaskListMarker(checked) => Some(StepContent::Checkbox {
+    {
+        match event {
+            Event::Start(Tag::List(_)) => list_depth += 1,
+            Event::End(TagEnd::List(_)) => {
+                list_depth = list_depth.saturating_sub(1);
+            }
+            Event::TaskListMarker(checked) => checkboxes.push(StepContent::Checkbox {
                 id: None,
                 text: collect_task_text(events, index),
                 checked: *checked,
+                nesting_level: checkbox_nesting_level(list_depth),
             }),
-            _ => None,
-        })
-        .collect()
+            _ => {}
+        }
+    }
+
+    checkboxes
+}
+
+fn checkbox_nesting_level(list_depth: usize) -> Option<u32> {
+    let level = list_depth.saturating_sub(1);
+    (level > 0).then(|| u32::try_from(level).unwrap_or(u32::MAX))
 }
 
 /// Collect the text of one task item, excluding nested lists from the parent text.
@@ -889,15 +905,22 @@ version: "0.1"
             .content
             .iter()
             .filter_map(|c| match c {
-                StepContent::Checkbox { text, .. } => Some(text.clone()),
+                StepContent::Checkbox {
+                    text,
+                    nesting_level,
+                    ..
+                } => Some((text.clone(), nesting_level.unwrap_or_default())),
                 _ => None,
             })
             .collect();
 
-        // Both should be captured as independent checkboxes with no duplicated prose.
+        // Both should be captured as independent checkboxes with their nesting.
         assert_eq!(
             checkboxes,
-            vec!["parent checkbox".to_string(), "nested checkbox".to_string()]
+            vec![
+                ("parent checkbox".to_string(), 0),
+                ("nested checkbox".to_string(), 1)
+            ]
         );
         assert_eq!(
             template.steps[0]

crates/procnote-core/src/template/types.rs

@@ -60,6 +60,10 @@ pub enum StepContent {
         id: Option<String>,
         text: String,
         checked: bool,
+        /// Zero-based nesting level within a pure Markdown task list.
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        #[ts(optional)]
+        nesting_level: Option<u32>,
     },
     /// A block of input definitions from a fenced `inputs` code block.
     InputBlock { inputs: Vec<InputDefinition> },

procedures/example-tvt/template.md

@@ -21,7 +21,7 @@ requirement_traces:
 Connect PSU to DUT J1 connector. Set voltage to 5.0V. Enable output.
 
 - [ ] a checkbox item
-- [ ] a nested checkbox item
+  - [ ] a nested checkbox item
 
 ### Some heading
 

src-tauri/src/commands/execution.rs

@@ -73,6 +73,8 @@ pub enum StepContentSummary {
         id: Option<String>,
         text: String,
         checked: bool,
+        /// Zero-based nesting level within a Markdown task list.
+        nesting_level: u32,
         /// ISO 8601 timestamp of the last toggle, if any.
         #[ts(optional)]
         at: Option<String>,
@@ -177,6 +179,7 @@ pub(super) fn summarize(
                             id: Some(checkbox.id.clone()),
                             text: checkbox.text.clone(),
                             checked: checkbox.checked,
+                            nesting_level: checkbox.nesting_level,
                             at: datetime_string(checkbox.toggled_at),
                         },
                         ExecutionStepContent::InputBlock { inputs } => {

src/lib/components/CheckboxItem.svelte

@@ -14,6 +14,11 @@
         ontoggle: (checkboxId: string, checked: boolean) => Promise<boolean> | boolean;
     } = $props();
 
+    function nestingIndent(level: number): string {
+        const safeLevel = Math.min(Math.max(Math.trunc(level), 0), 12);
+        return `${safeLevel * 20}px`;
+    }
+
     async function handleChange(event: Event) {
         const input = event.currentTarget as HTMLInputElement;
         if (!checkbox.id) {
@@ -27,7 +32,12 @@
     }
 </script>
 
-<label class="checkbox-item" class:checked={checkbox.checked} class:disabled>
+<label
+    class="checkbox-item"
+    class:checked={checkbox.checked}
+    class:disabled
+    style={`--checkbox-indent: ${nestingIndent(checkbox.nesting_level)};`}
+>
     <input
         type="checkbox"
         checked={checkbox.checked}
@@ -45,7 +55,7 @@
         display: flex;
         align-items: flex-start;
         gap: 8px;
-        padding: 6px 0;
+        padding: 6px 0 6px var(--checkbox-indent, 0px);
         cursor: pointer;
         font-size: 13px;
     }

src/lib/types/generated/StepContent.ts

@@ -14,5 +14,9 @@ export type StepContent =
       id?: string;
       text: string;
       checked: boolean;
+      /**
+       * Zero-based nesting level within a pure Markdown task list.
+       */
+      nesting_level?: number;
     }
   | { type: "InputBlock"; inputs: Array<InputDefinition> };

src/lib/types/generated/StepContentSummary.ts

@@ -11,6 +11,10 @@ export type StepContentSummary =
       id?: string;
       text: string;
       checked: boolean;
+      /**
+       * Zero-based nesting level within a Markdown task list.
+       */
+      nesting_level: number;
       /**
        * ISO 8601 timestamp of the last toggle, if any.
        */