feat(touchedPlanModal): Update the styles of touched files.

Author: walkthunder

src/main.ts

@@ -341,6 +341,7 @@ export default class InvioPlugin extends Plugin {
       // The operations above are almost read only and kind of safe.
       // The operations below begins to write or delete (!!!) something.
       await insertSyncPlanRecordByVault(this.db, plan, this.vaultRandomID);
+      let view: StatsView;
       if (triggerSource !== "dry") {
         // getNotice(
         //   t("syncrun_step7", {
@@ -352,7 +353,7 @@ export default class InvioPlugin extends Plugin {
         // if we are at the root path export all files, otherwise only export files in the folder we are exporting
         allFiles = allFiles.filter((file: TFile) => new Path(file.path).directory.asString.startsWith(basePath.asString) && (file.extension === "md") && (!file.name.endsWith('.conflict.md')));
         // Make functions of StatsView static
-        const view = await HTMLGenerator.beginBatch(this, allFiles);
+        view = await HTMLGenerator.beginBatch(this, allFiles);
         log.info('init stats view: ', view);
         if (view) {
           const initData: Record<string, FileOrFolderMixedState> = {};
@@ -503,6 +504,10 @@ export default class InvioPlugin extends Plugin {
           maxSteps: `${MAX_STEPS}`,
         })
       );
+      view?.info(t("syncrun_step8", {
+        maxSteps: `${MAX_STEPS}`,
+      }));
+
       this.syncStatus = "finish";
       this.syncStatus = "idle";
 

src/touchedPlanModel.ts

@@ -1,7 +1,7 @@
 import { App, Modal, Notice, PluginSettingTab, Setting } from "obsidian";
 import type InvioPlugin from "./main"; // unavoidable
 import type { TransItemType } from "./i18n";
-import { createElement, FilePlus2, Trash, ArrowDownToLine, ArrowUpToLine } from "lucide";
+import { createElement, FilePlus2, Trash, ArrowDownToLine, ArrowUpToLine, FileText } from "lucide";
 
 import { log } from "./moreOnLog";
 import { FileOrFolderMixedState } from "./baseTypes";
@@ -71,20 +71,28 @@ export class TouchedPlanModel extends Modal {
       });
       const ulRemote = contentEl.createEl("ul");
       toRemoteFiles.forEach((val) => {
-        const li = ulRemote.createEl("li", {
-            text: val.key,
-            cls: 'file-item-action'
-          });
-          if (val.decision === 'uploadLocalToRemote') {
-            const iconSvgCreate = createElement(FilePlus2);
-            iconSvgCreate.addClass('file-item-action-icon')
-            li.appendChild(iconSvgCreate)
-          } else {
-            const iconSvgTrash = createElement(Trash);
-            iconSvgTrash.addClass('file-item-action-icon')
-            li.appendChild(iconSvgTrash)
-          }
+        const li = ulRemote.createEl('li', {
+          cls: 'file-item-action'
+        });
+        const fileIcon = createElement(FileText);
+        fileIcon.addClass('file-item-action-prefix')
+        li.appendChild(fileIcon);
+
+        li.createEl('span', {
+          text: val.key,
+          cls: 'file-item-action-name'
         });
+       
+        if (val.decision === 'uploadLocalToRemote') {
+          const iconSvgCreate = createElement(FilePlus2);
+          iconSvgCreate.addClass('file-item-action-icon')
+          li.appendChild(iconSvgCreate)
+        } else {
+          const iconSvgTrash = createElement(Trash);
+          iconSvgTrash.addClass('file-item-action-icon')
+          li.appendChild(iconSvgTrash)
+        }
+      });
     }
 
 
@@ -94,10 +102,18 @@ export class TouchedPlanModel extends Modal {
       });
       const ulLocal = contentEl.createEl("ul");
       toLocalFiles.forEach((val) => {
-        const li = ulLocal.createEl("li", {
-          text: val.key,
+        const li = ulLocal.createEl('li', {
           cls: 'file-item-action'
         });
+        const fileIcon = createElement(FileText);
+        fileIcon.addClass('file-item-action-prefix')
+        li.appendChild(fileIcon);
+
+        li.createEl('span', {
+          text: val.key,
+          cls: 'file-item-action-name'
+        });
+       
         if (val.decision === 'downloadRemoteToLocal') {
           const iconSvgCreate = createElement(FilePlus2);
           iconSvgCreate.addClass('file-item-action-icon')
@@ -116,10 +132,18 @@ export class TouchedPlanModel extends Modal {
       });
       const ulConflict = contentEl.createEl("ul");
       conflictFiles.forEach((val) => {
-        const li = ulConflict.createEl("li", {
-          text: val.key,
+        const li = ulConflict.createEl('li', {
           cls: 'file-item-action'
         });
+        const fileIcon = createElement(FileText);
+        fileIcon.addClass('file-item-action-prefix')
+        li.appendChild(fileIcon);
+
+        li.createEl('span', {
+          text: val.key,
+          cls: 'file-item-action-name'
+        });
+       
         if (val.decision === 'downloadRemoteToLocal') {
           const iconSvgSyncDown = createElement(ArrowDownToLine);
           iconSvgSyncDown.addClass('file-item-action-icon')

styles.css

@@ -150,12 +150,30 @@
 
 .file-item-action {
   margin: 8px auto;
+  width: 100%;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
+  color: currentColor;
+  border-bottom: 1px solid var(--divider-color);
+  padding: 8px 2px;
+}
+.file-item-action-name {
+  flex: 1 1 auto;
+  font-size: small;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-item-action-prefix {
+  flex: 0 0 auto;
+  font-size: var(--font-text-size);
+  width: var(--font-text-size);
+  height: var(--font-text-size);
+  margin-right: 4px;
 }
 
 .file-item-action-icon {
+  flex: 0 0 auto;
   font-size: var(--font-text-size);
   width: var(--font-text-size);
   height: var(--font-text-size);