fix: Retain old formatting when editing row

src/tracker.ts

@@ -319,26 +319,25 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
 
     renderNameAsMarkdown(nameField.label, getFile, component);
 
-    if (entry.subEntries?.length) {
-        let expandButton = new ButtonComponent(nameField.label)
-            .setClass("clickable-icon")
-            .setClass("simple-time-tracker-expand-button")
-            .setIcon(`chevron-${entry.collapsed ? 'right' : 'down'}`)
-            .setTooltip(entry.collapsed ? "Expand" : "Collapse")
-            .onClick(async () => {
-                if (entry.collapsed) {
-                    delete entry.collapsed;
-                } else {
-                    entry.collapsed = 1;
-                }
-                await saveTracker(tracker, this.app, getFile(), getSectionInfo());
-            });
-        let nameWrapper = nameField.cell.createDiv({cls: "simple-time-tracker-table-expandwrapper"});
-        nameWrapper.style.marginLeft = nameField.label.style.marginLeft;
-        nameField.label.style.marginLeft = null;
-        nameWrapper.insertBefore(nameField.label, null);
-        nameWrapper.insertBefore(expandButton.buttonEl, null);
-    }
+    let expandButton = new ButtonComponent(nameField.label)
+        .setClass("clickable-icon")
+        .setClass("simple-time-tracker-expand-button")
+        .setIcon(`chevron-${entry.collapsed ? 'right' : 'down'}`)
+        .setTooltip(entry.collapsed ? "Expand" : "Collapse")
+        .onClick(async () => {
+            if (entry.collapsed) {
+                delete entry.collapsed;
+            } else {
+                entry.collapsed = 1;
+            }
+            await saveTracker(tracker, this.app, getFile(), getSectionInfo());
+        });
+    if (!entry.subEntries?.length) expandButton.buttonEl.style.visibility = 'hidden';
+    let nameWrapper = nameField.cell.createDiv({cls: "simple-time-tracker-table-expandwrapper"});
+    nameWrapper.style.marginLeft = nameField.label.style.marginLeft;
+    nameField.label.style.marginLeft = null;
+    nameWrapper.insertBefore(expandButton.buttonEl, null);
+    nameWrapper.insertBefore(nameField.label, null);
 
     let entryButtons = row.createEl("td");
     entryButtons.addClass("simple-time-tracker-table-buttons");
@@ -358,6 +357,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
         .onClick(async () => {
             if (nameField.editing()) {
                 entry.name = nameField.endEdit();
+                expandButton.buttonEl.style.display = null;
                 startField.endEdit();
                 entry.startTime = startField.getTimestamp();
                 if (!entryRunning) {
@@ -370,6 +370,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
                 renderNameAsMarkdown(nameField.label, getFile, component);
             } else {
                 nameField.beginEdit(entry.name);
+                expandButton.buttonEl.style.display = 'none';
                 // only allow editing start and end times if we don't have sub entries
                 if (!entry.subEntries) {
                     startField.beginEdit(entry.startTime);

styles.css

@@ -79,20 +79,3 @@
 .simple-time-tracker-table tr:hover {
     background-color: var(--background-modifier-hover);
 }
-
-.simple-time-tracker-table :is(td,th):first-child {
-    /* HACKY hardcoded 2em to make room for expand/collapse button */
-    padding-left: 2em;
-}
-
-.simple-time-tracker-table-expandwrapper {
-    position: relative;
-}
-
-.simple-time-tracker-expand-button {
-    position: absolute;
-    /* HACKY there should be a better way to position this */
-    left: 0;
-    top: 50%;
-    transform: translate(-100%, -50%);
-}