fix: different tree data structure

open all dirs by default

src/gitManager.ts

@@ -1,6 +1,6 @@
 import { App } from "obsidian";
 import ObsidianGit from "./main";
-import { BranchInfo, FileStatusResult, Status } from "./types";
+import { BranchInfo, FileStatusResult, Status, TreeItem } from "./types";
 
 
 export abstract class GitManager {
@@ -63,6 +63,32 @@ export abstract class GitManager {
 
     abstract getDiffString(filePath: string): Promise<string>;
 
+
+
+    getTreeStructure(children: FileStatusResult[], beginLength: number = 0): TreeItem[] {
+        let list: TreeItem[] = [];
+        children = [...children];
+        while (children.length > 0) {
+            const first = children.first();
+            const restPath = first.path.substring(beginLength);
+            if (restPath.contains("/")) {
+                const title = restPath.substring(0, restPath.indexOf("/"));
+                const childrenWithSameTitle = children.filter((item) => {
+                    return item.path.substring(beginLength).startsWith(title + "/");
+                });
+                childrenWithSameTitle.forEach((item) => children.remove(item));
+                list.push({
+                    title: title,
+                    children: this.getTreeStructure(childrenWithSameTitle, (beginLength > 0 ? (beginLength + title.length) : title.length) + 1)
+                });
+            } else {
+                list.push({ title: restPath, statusResult: first });
+                children.remove(first);
+            }
+        }
+        return list;
+    }
+
     async formatCommitMessage(message?: string): Promise<string> {
         let template = message ?? this.plugin.settings.commitMessage;
         let status: Status | undefined;

src/types.ts

@@ -50,4 +50,10 @@ export interface BranchInfo {
     current: string;
     tracking: string;
     branches: string[];
+}
+
+export interface TreeItem {
+    title: string;
+    statusResult?: FileStatusResult;
+    children?: TreeItem[];
 }

src/ui/sidebar/components/treeComponent.svelte

@@ -1,31 +1,32 @@
 <script lang="ts">
   import ObsidianGit from "src/main";
+  import { TreeItem } from "src/types";
   import { slide } from "svelte/transition";
   import GitView from "../sidebarView";
   import FileComponent from "./fileComponent.svelte";
   import StagedFileComponent from "./stagedFileComponent.svelte";
-  export let hierarchy: any;
+  export let hierarchy: TreeItem;
   export let plugin: ObsidianGit;
   export let view: GitView;
   export let staged: boolean;
   export let topLevel = false;
-  let open: boolean[] = [];
+
+  const closed: Record<string, boolean> = {};
 </script>
 
 <main class:topLevel>
-  {#each Object.keys(hierarchy) as entity, index}
-    <!-- this will break if there is a file called "_file_" without extension -->
-    {#if hierarchy[entity]._file_}
+  {#each hierarchy.children as entity}
+    {#if entity.statusResult}
       <div class="file-view">
         {#if staged}
           <StagedFileComponent
-            change={hierarchy[entity]._file_}
+            change={entity.statusResult}
             manager={plugin.gitManager}
             {view}
           />
         {:else}
           <FileComponent
-            change={hierarchy[entity]._file_}
+            change={entity.statusResult}
             manager={plugin.gitManager}
             {view}
             workspace={plugin.app.workspace}
@@ -35,8 +36,10 @@
     {:else}
       <div
         class="opener tree-item-self is-clickable"
-        class:open={open[index]}
-        on:click={() => (open[index] = !open[index])}
+        class:open={!closed[entity.title]}
+        on:click={() => {
+          closed[entity.title] = !closed[entity.title];
+        }}
       >
         <div>
           <div class="tree-item-icon collapse-icon" style="">
@@ -52,12 +55,12 @@
               /></svg
             >
           </div>
-          <span>{entity}</span>
+          <span>{entity.title}</span>
         </div>
       </div>
-      {#if open[index]}
+      {#if !closed[entity.title]}
         <div class="file-view" transition:slide|local={{ duration: 75 }}>
-          <svelte:self hierarchy={hierarchy[entity]} {plugin} {view} {staged} />
+          <svelte:self hierarchy={entity} {plugin} {view} {staged} />
         </div>
       {/if}
     {/if}

src/ui/sidebar/gitView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { debounce, EventRef, setIcon } from "obsidian";
   import ObsidianGit from "src/main";
-  import { Status } from "src/types";
+  import { Status, TreeItem } from "src/types";
   import { onDestroy } from "svelte";
   import { slide } from "svelte/transition";
   import FileComponent from "./components/fileComponent.svelte";
@@ -14,8 +14,8 @@
   let commitMessage = plugin.settings.commitMessage;
   let buttons: HTMLElement[] = [];
   let status: Status | null;
-  let changeHierarchy: any;
-  let stagedHierarchy: any;
+  let changeHierarchy: TreeItem;
+  let stagedHierarchy: TreeItem;
   let changesOpen = true;
   let stagedOpen = true;
   let loading = true;
@@ -64,36 +64,21 @@
     });
   }
 
-  function refresh() {
-    const promise = plugin.gitManager.status();
+  async function refresh() {
     loading = true;
-    promise.then((s) => {
-      status = s;
-      // https://stackoverflow.com/a/26652662
-      changeHierarchy = s.changed.reduce(function (hier: any, file) {
-        var x = hier;
-        file.path.split("/").forEach(function (item) {
-          if (!x[item]) {
-            x[item] = {};
-          }
-          x = x[item];
-        });
-        x._file_ = file;
-        return hier;
-      }, {});
-      stagedHierarchy = s.staged.reduce(function (hier: any, file) {
-        var x = hier;
-        file.path.split("/").forEach(function (item) {
-          if (!x[item]) {
-            x[item] = {};
-          }
-          x = x[item];
-        });
-        x._file_ = file;
-        return hier;
-      }, {});
-      loading = false;
-    });
+
+    status = await plugin.gitManager.status();
+
+    changeHierarchy = {
+      title: "",
+      children: plugin.gitManager.getTreeStructure(status.changed),
+    };
+    stagedHierarchy = {
+      title: "",
+      children: plugin.gitManager.getTreeStructure(status.staged),
+    };
+
+    loading = false;
   }
 
   function stageAll() {