From 6914830ce03651b7f9604ba7be81581636a34f5b Mon Sep 17 00:00:00 2001
From: Vinzent <vinzent03@proton.me>
Date: Thu, 15 Sep 2022 14:44:24 +0200
Subject: [PATCH] fix: open diff in new leaf

close #306
---
 .editorconfig                                 |  10 +
 src/main.ts                                   |   3 +-
 .../sidebar/components/fileComponent.svelte   | 357 +++++++++---------
 .../components/pulledFileComponent.svelte     | 171 ++++-----
 .../components/stagedFileComponent.svelte     | 327 ++++++++--------
 src/utils.ts                                  |  13 +
 6 files changed, 458 insertions(+), 423 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..5fd185c8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,10 @@
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+tab_width = 4
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index ee46f97c..fd59c6fb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,7 @@ import DiffView from "./ui/diff/diffView";
 import { GeneralModal } from "./ui/modals/generalModal";
 import { IgnoreModal } from "./ui/modals/ignoreModal";
 import GitView from "./ui/sidebar/sidebarView";
+import { getNewLeaf } from "./utils";
 
 export default class ObsidianGit extends Plugin {
     gitManager: GitManager;
@@ -130,7 +131,7 @@ export default class ObsidianGit extends Plugin {
             id: 'open-diff-view',
             name: 'Open diff view',
             editorCallback: async (editor, view) => {
-                this.app.workspace.createLeafBySplit(view.leaf).setViewState({ type: DIFF_VIEW_CONFIG.type, state: { staged: false, file: view.file.path } });
+                getNewLeaf().setViewState({ type: DIFF_VIEW_CONFIG.type, state: { staged: false, file: view.file.path } });
             },
         });
 
diff --git a/src/ui/sidebar/components/fileComponent.svelte b/src/ui/sidebar/components/fileComponent.svelte
index f19d9da4..820ddac1 100644
--- a/src/ui/sidebar/components/fileComponent.svelte
+++ b/src/ui/sidebar/components/fileComponent.svelte
@@ -1,202 +1,211 @@
 <script lang="ts">
-  import { setIcon, Workspace } from "obsidian";
-  import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
-  import { DIFF_VIEW_CONFIG } from "src/constants";
-  import { GitManager } from "src/gitManager";
-  import { FileStatusResult } from "src/types";
-  import { DiscardModal } from "src/ui/modals/discardModal";
-  import GitView from "../sidebarView";
+    import {
+        requireApiVersion,
+        setIcon,
+        Workspace,
+        WorkspaceLeaf,
+    } from "obsidian";
+    import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
+    import { DIFF_VIEW_CONFIG } from "src/constants";
+    import { GitManager } from "src/gitManager";
+    import { FileStatusResult } from "src/types";
+    import { DiscardModal } from "src/ui/modals/discardModal";
+    import { getNewLeaf } from "src/utils";
+    import GitView from "../sidebarView";
 
-  export let change: FileStatusResult;
-  export let view: GitView;
-  export let manager: GitManager;
-  export let workspace: Workspace;
-  let buttons: HTMLElement[] = [];
-  $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
+    export let change: FileStatusResult;
+    export let view: GitView;
+    export let manager: GitManager;
+    export let workspace: Workspace;
+    let buttons: HTMLElement[] = [];
+    $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
 
-  window.setTimeout(
-    () => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon"), 16)),
-    0,
-  );
+    window.setTimeout(
+        () => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon"), 16)),
+        0
+    );
 
-  function hover(event: MouseEvent) {
-    //Don't show previews of config- or hidden files.
-    if (
-      !change.path.startsWith(view.app.vault.configDir) ||
-      !change.path.startsWith(".")
-    ) {
-      hoverPreview(
-        event,
-        view as any,
-        change.vault_path.split("/").last().replace(".md", "")
-      );
+    function hover(event: MouseEvent) {
+        //Don't show previews of config- or hidden files.
+        if (
+            !change.path.startsWith(view.app.vault.configDir) ||
+            !change.path.startsWith(".")
+        ) {
+            hoverPreview(
+                event,
+                view as any,
+                change.vault_path.split("/").last().replace(".md", "")
+            );
+        }
     }
-  }
 
-  function open(event: MouseEvent) {
-    if (
-      !(
-        change.path.startsWith(view.app.vault.configDir) ||
-        change.path.startsWith(".") ||
-        change.working_dir === "D"
-      )
-    ) {
-      openOrSwitch(change.vault_path, event);
+    function open(event: MouseEvent) {
+        if (
+            !(
+                change.path.startsWith(view.app.vault.configDir) ||
+                change.path.startsWith(".") ||
+                change.working_dir === "D"
+            )
+        ) {
+            openOrSwitch(change.vault_path, event);
+        }
     }
-  }
-
-  function stage() {
-    manager.stage(change.path, false).finally(() => {
-      dispatchEvent(new CustomEvent("git-refresh"));
-    });
-  }
 
-  function showDiff(event: MouseEvent) {
-    const leaf = workspace.getMostRecentLeaf(workspace.rootSplit);
-
-    if (
-      leaf &&
-      !leaf.getViewState().pinned &&
-      !(event.ctrlKey || event.getModifierState("Meta"))
-    ) {
-      leaf.setViewState({
-        type: DIFF_VIEW_CONFIG.type,
-        state: {
-          file: change.path,
-          staged: false,
-        },
-      });
-    } else {
-      workspace.createLeafInParent(workspace.rootSplit, 0).setViewState({
-        type: DIFF_VIEW_CONFIG.type,
-        active: true,
-        state: {
-          file: change.path,
-          staged: false,
-        },
-      });
+    function stage() {
+        manager.stage(change.path, false).finally(() => {
+            dispatchEvent(new CustomEvent("git-refresh"));
+        });
     }
-  }
 
-  function discard() {
-    const deleteFile = change.working_dir == "U";
-    new DiscardModal(view.app, deleteFile, change.vault_path)
-      .myOpen()
-      .then((shouldDiscard) => {
-        if (shouldDiscard === true) {
-          if (deleteFile) {
-            view.app.vault.adapter.remove(change.vault_path).finally(() => {
-              dispatchEvent(new CustomEvent("git-refresh"));
+    function showDiff(event: MouseEvent) {
+        const leaf = workspace.getMostRecentLeaf(workspace.rootSplit);
+        if (
+            leaf &&
+            !leaf.getViewState().pinned &&
+            !(event.ctrlKey || event.getModifierState("Meta"))
+        ) {
+            leaf.setViewState({
+                type: DIFF_VIEW_CONFIG.type,
+                state: {
+                    file: change.path,
+                    staged: false,
+                },
             });
-          } else {
-            manager.discard(change.path).finally(() => {
-              dispatchEvent(new CustomEvent("git-refresh"));
+        } else {
+           
+            getNewLeaf().setViewState({
+                type: DIFF_VIEW_CONFIG.type,
+                active: true,
+                state: {
+                    file: change.path,
+                    staged: false,
+                },
             });
-          }
         }
-      });
-  }
+    }
+
+    function discard() {
+        const deleteFile = change.working_dir == "U";
+        new DiscardModal(view.app, deleteFile, change.vault_path)
+            .myOpen()
+            .then((shouldDiscard) => {
+                if (shouldDiscard === true) {
+                    if (deleteFile) {
+                        view.app.vault.adapter
+                            .remove(change.vault_path)
+                            .finally(() => {
+                                dispatchEvent(new CustomEvent("git-refresh"));
+                            });
+                    } else {
+                        manager.discard(change.path).finally(() => {
+                            dispatchEvent(new CustomEvent("git-refresh"));
+                        });
+                    }
+                }
+            });
+    }
 </script>
 
 <!-- TODO: Fix arai-label for left sidebar and if it's too long -->
 <main on:mouseover={hover} on:click|self={showDiff} on:focus>
-  <!-- svelte-ignore a11y-unknown-aria-attribute -->
-  <span
-    class="path"
-    aria-label-position={side}
-    aria-label={change.vault_path.split("/").last() != change.vault_path
-      ? change.vault_path
-      : ""}
-    on:click|self={showDiff}
-  >
-    {change.vault_path.split("/").last().replace(".md", "")}
-  </span>
-  <div class="tools">
-    <div class="buttons">
-      {#if view.app.vault.getAbstractFileByPath(change.vault_path)}
-        <div
-          data-icon="go-to-file"
-          aria-label="Open File"
-          bind:this={buttons[1]}
-          on:click={open}
-        />
-      {/if}
-      <div
-        data-icon="skip-back"
-        aria-label="Discard"
-        bind:this={buttons[0]}
-        on:click={discard}
-      />
-      <div
-        data-icon="plus"
-        aria-label="Stage"
-        bind:this={buttons[2]}
-        on:click={stage}
-      />
-    </div>
-    <span class="type" data-type={change.working_dir}>{change.working_dir}</span
+    <!-- svelte-ignore a11y-unknown-aria-attribute -->
+    <span
+        class="path"
+        aria-label-position={side}
+        aria-label={change.vault_path.split("/").last() != change.vault_path
+            ? change.vault_path
+            : ""}
+        on:click|self={showDiff}
     >
-  </div>
+        {change.vault_path.split("/").last().replace(".md", "")}
+    </span>
+    <div class="tools">
+        <div class="buttons">
+            {#if view.app.vault.getAbstractFileByPath(change.vault_path)}
+                <div
+                    data-icon="go-to-file"
+                    aria-label="Open File"
+                    bind:this={buttons[1]}
+                    on:click={open}
+                />
+            {/if}
+            <div
+                data-icon="skip-back"
+                aria-label="Discard"
+                bind:this={buttons[0]}
+                on:click={discard}
+            />
+            <div
+                data-icon="plus"
+                aria-label="Stage"
+                bind:this={buttons[2]}
+                on:click={stage}
+            />
+        </div>
+        <span class="type" data-type={change.working_dir}
+            >{change.working_dir}</span
+        >
+    </div>
 </main>
 
 <style lang="scss">
-  main {
-    cursor: pointer;
-    background-color: var(--background-secondary);
-    border-radius: 4px;
-    width: 98%;
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.8rem;
-    margin-bottom: 2px;
+    main {
+        cursor: pointer;
+        background-color: var(--background-secondary);
+        border-radius: 4px;
+        width: 98%;
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.8rem;
+        margin-bottom: 2px;
 
-    .path {
-      color: var(--text-muted);
-      white-space: nowrap;
-      max-width: 75%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+        .path {
+            color: var(--text-muted);
+            white-space: nowrap;
+            max-width: 75%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
-    &:hover .path {
-      color: var(--text-normal);
-      transition: all 200ms;
-    }
+        &:hover .path {
+            color: var(--text-normal);
+            transition: all 200ms;
+        }
 
-    .tools {
-      display: flex;
-      align-items: center;
+        .tools {
+            display: flex;
+            align-items: center;
 
-      .type {
-        height: 16px;
-        width: 16px;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &[data-type="M"] {
-          color: orange;
-        }
-        &[data-type="D"] {
-          color: red;
-        }
-      }
-      .buttons {
-        display: flex;
-        > * {
-          color: var(--text-faint);
-          height: 16px;
-          width: 16px;
-          margin: 0;
-          transition: all 0.2s;
-          border-radius: 2px;
-          margin-right: 1px;
-          &:hover {
-            color: var(--text-normal);
-            background-color: var(--interactive-accent);
-          }
+            .type {
+                height: 16px;
+                width: 16px;
+                margin: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                &[data-type="M"] {
+                    color: orange;
+                }
+                &[data-type="D"] {
+                    color: red;
+                }
+            }
+            .buttons {
+                display: flex;
+                > * {
+                    color: var(--text-faint);
+                    height: 16px;
+                    width: 16px;
+                    margin: 0;
+                    transition: all 0.2s;
+                    border-radius: 2px;
+                    margin-right: 1px;
+                    &:hover {
+                        color: var(--text-normal);
+                        background-color: var(--interactive-accent);
+                    }
+                }
+            }
         }
-      }
     }
-  }
 </style>
diff --git a/src/ui/sidebar/components/pulledFileComponent.svelte b/src/ui/sidebar/components/pulledFileComponent.svelte
index e3eed400..c5119565 100644
--- a/src/ui/sidebar/components/pulledFileComponent.svelte
+++ b/src/ui/sidebar/components/pulledFileComponent.svelte
@@ -1,100 +1,101 @@
 <script lang="ts">
-  import { setIcon, Workspace } from "obsidian";
-  import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
-  import { FileStatusResult } from "src/types";
-  import GitView from "../sidebarView";
+	import { setIcon, Workspace } from "obsidian";
+	import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
+	import { FileStatusResult } from "src/types";
+	import GitView from "../sidebarView";
 
-  export let change: FileStatusResult;
-  export let view: GitView;
-  $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
+	export let change: FileStatusResult;
+	export let view: GitView;
+	$: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
 
-  function hover(event: MouseEvent) {
-    //Don't show previews of config- or hidden files.
-    if (
-      !change.path.startsWith(view.app.vault.configDir) ||
-      !change.path.startsWith(".")
-    ) {
-      hoverPreview(
-        event,
-        view as any,
-        change.vault_path.split("/").last().replace(".md", "")
-      );
-    }
-  }
+	function hover(event: MouseEvent) {
+		//Don't show previews of config- or hidden files.
+		if (
+			!change.path.startsWith(view.app.vault.configDir) ||
+			!change.path.startsWith(".")
+		) {
+			hoverPreview(
+				event,
+				view as any,
+				change.vault_path.split("/").last().replace(".md", "")
+			);
+		}
+	}
 
-  function open(event: MouseEvent) {
-    if (
-      !(
-        change.path.startsWith(view.app.vault.configDir) ||
-        change.path.startsWith(".") ||
-        change.working_dir === "D"
-      )
-    ) {
-      openOrSwitch(change.vault_path, event);
-    }
-  }
+	function open(event: MouseEvent) {
+		if (
+			!(
+				change.path.startsWith(view.app.vault.configDir) ||
+				change.path.startsWith(".") ||
+				change.working_dir === "D"
+			)
+		) {
+			openOrSwitch(change.vault_path, event);
+		}
+	}
 </script>
 
 <main on:mouseover={hover} on:click|self={open} on:focus>
-  <!-- svelte-ignore a11y-unknown-aria-attribute -->
-  <span
-    class="path"
-    aria-label-position={side}
-    aria-label={change.vault_path.split("/").last() != change.vault_path
-      ? change.vault_path
-      : ""}
-    on:click|self={open}
-  >
-    {change.vault_path.split("/").last().replace(".md", "")}
-  </span>
-  <div class="tools">
-    <span class="type" data-type={change.working_dir}>{change.working_dir}</span
-    >
-  </div>
+	<!-- svelte-ignore a11y-unknown-aria-attribute -->
+	<span
+		class="path"
+		aria-label-position={side}
+		aria-label={change.vault_path.split("/").last() != change.vault_path
+			? change.vault_path
+			: ""}
+		on:click|self={open}
+	>
+		{change.vault_path.split("/").last().replace(".md", "")}
+	</span>
+	<div class="tools">
+		<span class="type" data-type={change.working_dir}
+			>{change.working_dir}</span
+		>
+	</div>
 </main>
 
 <style lang="scss">
-  main {
-    cursor: pointer;
-    background-color: var(--background-secondary);
-    border-radius: 4px;
-    width: 98%;
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.8rem;
-    margin-bottom: 2px;
+	main {
+		cursor: pointer;
+		background-color: var(--background-secondary);
+		border-radius: 4px;
+		width: 98%;
+		display: flex;
+		justify-content: space-between;
+		font-size: 0.8rem;
+		margin-bottom: 2px;
 
-    .path {
-      color: var(--text-muted);
-      white-space: nowrap;
-      max-width: 75%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+		.path {
+			color: var(--text-muted);
+			white-space: nowrap;
+			max-width: 75%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 
-    &:hover .path {
-      color: var(--text-normal);
-      transition: all 200ms;
-    }
+		&:hover .path {
+			color: var(--text-normal);
+			transition: all 200ms;
+		}
 
-    .tools {
-      display: flex;
-      align-items: center;
+		.tools {
+			display: flex;
+			align-items: center;
 
-      .type {
-        height: 16px;
-        width: 16px;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &[data-type="M"] {
-          color: orange;
-        }
-        &[data-type="D"] {
-          color: red;
-        }
-      }
-    }
-  }
+			.type {
+				height: 16px;
+				width: 16px;
+				margin: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&[data-type="M"] {
+					color: orange;
+				}
+				&[data-type="D"] {
+					color: red;
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/ui/sidebar/components/stagedFileComponent.svelte b/src/ui/sidebar/components/stagedFileComponent.svelte
index a89f5927..9dbf86e7 100644
--- a/src/ui/sidebar/components/stagedFileComponent.svelte
+++ b/src/ui/sidebar/components/stagedFileComponent.svelte
@@ -1,182 +1,183 @@
 <script lang="ts">
-  import { FileView, setIcon, TAbstractFile } from "obsidian";
-  import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
-  import { DIFF_VIEW_CONFIG } from "src/constants";
-  import { GitManager } from "src/gitManager";
-  import { FileStatusResult } from "src/types";
-  import GitView from "../sidebarView";
+	import { FileView, setIcon, TAbstractFile } from "obsidian";
+	import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
+	import { DIFF_VIEW_CONFIG } from "src/constants";
+	import { GitManager } from "src/gitManager";
+	import { FileStatusResult } from "src/types";
+	import { getNewLeaf } from "src/utils";
+	import GitView from "../sidebarView";
 
-  export let change: FileStatusResult;
-  export let view: GitView;
-  export let manager: GitManager;
-  let buttons: HTMLElement[] = [];
-  $: formattedPath = change.vault_path;
-  $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
+	export let change: FileStatusResult;
+	export let view: GitView;
+	export let manager: GitManager;
+	let buttons: HTMLElement[] = [];
+	$: formattedPath = change.vault_path;
+	$: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
 
-  window.setTimeout(
-    () => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon"), 16)),
-    0
-  );
+	window.setTimeout(
+		() => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon"), 16)),
+		0
+	);
 
-  function hover(event: MouseEvent) {
-    //Don't show previews of config- or hidden files.
-    if (
-      !change.path.startsWith(view.app.vault.configDir) ||
-      !change.path.startsWith(".")
-    ) {
-      hoverPreview(
-        event,
-        view as any,
-        formattedPath.split("/").last().replace(".md", "")
-      );
-    }
-  }
+	function hover(event: MouseEvent) {
+		//Don't show previews of config- or hidden files.
+		if (
+			!change.path.startsWith(view.app.vault.configDir) ||
+			!change.path.startsWith(".")
+		) {
+			hoverPreview(
+				event,
+				view as any,
+				formattedPath.split("/").last().replace(".md", "")
+			);
+		}
+	}
 
-  function open(event: MouseEvent) {
-    if (
-      !(
-        change.path.startsWith(view.app.vault.configDir) ||
-        change.path.startsWith(".") ||
-        change.index === "D"
-      )
-    ) {
-      openOrSwitch(formattedPath, event);
-    }
-  }
+	function open(event: MouseEvent) {
+		if (
+			!(
+				change.path.startsWith(view.app.vault.configDir) ||
+				change.path.startsWith(".") ||
+				change.index === "D"
+			)
+		) {
+			openOrSwitch(formattedPath, event);
+		}
+	}
 
-  function showDiff(event: MouseEvent) {
-    const workspace = view.app.workspace;
-    const leaf = workspace.getMostRecentLeaf(workspace.rootSplit);
+	function showDiff(event: MouseEvent) {
+		const workspace = view.app.workspace;
+		const leaf = workspace.getMostRecentLeaf(workspace.rootSplit);
 
-    if (
-      leaf &&
-      !leaf.getViewState().pinned &&
-      !(event.ctrlKey || event.getModifierState("Meta"))
-    ) {
-      leaf.setViewState({
-        type: DIFF_VIEW_CONFIG.type,
-        state: {
-          file: change.path,
-          staged: true,
-        },
-      });
-      workspace.setActiveLeaf(leaf, true, true);
-    } else {
-      workspace.createLeafInParent(workspace.rootSplit, 0).setViewState({
-        type: DIFF_VIEW_CONFIG.type,
-        active: true,
-        state: {
-          file: change.path,
-          staged: true,
-        },
-      });
-    }
-  }
+		if (
+			leaf &&
+			!leaf.getViewState().pinned &&
+			!(event.ctrlKey || event.getModifierState("Meta"))
+		) {
+			leaf.setViewState({
+				type: DIFF_VIEW_CONFIG.type,
+				state: {
+					file: change.path,
+					staged: true,
+				},
+			});
+			workspace.setActiveLeaf(leaf, true, true);
+		} else {
+			getNewLeaf().setViewState({
+				type: DIFF_VIEW_CONFIG.type,
+				active: true,
+				state: {
+					file: change.path,
+					staged: true,
+				},
+			});
+		}
+	}
 
-  function unstage() {
-    manager.unstage(change.path, false).finally(() => {
-      dispatchEvent(new CustomEvent("git-refresh"));
-    });
-  }
+	function unstage() {
+		manager.unstage(change.path, false).finally(() => {
+			dispatchEvent(new CustomEvent("git-refresh"));
+		});
+	}
 </script>
 
 <main on:mouseover={hover} on:focus on:click|self={showDiff}>
-  <!-- svelte-ignore a11y-unknown-aria-attribute -->
-  <span
-  class="path"
-    aria-label-position={side}
-    aria-label={formattedPath.split("/").last() != formattedPath
-      ? formattedPath
-      : ""}
-    on:click={showDiff}
-  >
-    {formattedPath.split("/").last().replace(".md", "")}
-  </span>
-  <div class="tools">
-    <div class="buttons">
-      {#if view.app.vault.getAbstractFileByPath(formattedPath)}
-        <div
-          data-icon="go-to-file"
-          aria-label="Open File"
-          bind:this={buttons[1]}
-          on:click={open}
-        />
-      {/if}
-      <div
-        data-icon="minus"
-        aria-label="Unstage"
-        bind:this={buttons[0]}
-        on:click={unstage}
-      />
-    </div>
-    <span class="type" data-type={change.index}>{change.index}</span>
-  </div>
+	<!-- svelte-ignore a11y-unknown-aria-attribute -->
+	<span
+		class="path"
+		aria-label-position={side}
+		aria-label={formattedPath.split("/").last() != formattedPath
+			? formattedPath
+			: ""}
+		on:click={showDiff}
+	>
+		{formattedPath.split("/").last().replace(".md", "")}
+	</span>
+	<div class="tools">
+		<div class="buttons">
+			{#if view.app.vault.getAbstractFileByPath(formattedPath)}
+				<div
+					data-icon="go-to-file"
+					aria-label="Open File"
+					bind:this={buttons[1]}
+					on:click={open}
+				/>
+			{/if}
+			<div
+				data-icon="minus"
+				aria-label="Unstage"
+				bind:this={buttons[0]}
+				on:click={unstage}
+			/>
+		</div>
+		<span class="type" data-type={change.index}>{change.index}</span>
+	</div>
 </main>
 
 <style lang="scss">
-  main {
-    cursor: pointer;
-    background-color: var(--background-secondary);
-    border-radius: 4px;
-    width: 98%;
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.8rem;
-    margin-bottom: 2px;
+	main {
+		cursor: pointer;
+		background-color: var(--background-secondary);
+		border-radius: 4px;
+		width: 98%;
+		display: flex;
+		justify-content: space-between;
+		font-size: 0.8rem;
+		margin-bottom: 2px;
 
-    .path {
-      color: var(--text-muted);
-      white-space: nowrap;
-      max-width: 75%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+		.path {
+			color: var(--text-muted);
+			white-space: nowrap;
+			max-width: 75%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 
-    &:hover .path {
-      color: var(--text-normal);
-      transition: all 200ms;
-    }
+		&:hover .path {
+			color: var(--text-normal);
+			transition: all 200ms;
+		}
 
-    .tools {
-      display: flex;
-      align-items: center;
+		.tools {
+			display: flex;
+			align-items: center;
 
-      .type {
-        height: 16px;
-        width: 16px;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &[data-type="M"] {
-          color: orange;
-        }
-        &[data-type="D"] {
-          color: red;
-        }
-        &[data-type="A"] {
-          color: yellowgreen;
-        }
-        &[data-type="R"] {
-          color: violet;
-        }
-      }
-      .buttons {
-        display: flex;
-        > * {
-          color: var(--text-faint);
-          height: 16px;
-          width: 16px;
-          margin: 0;
-          transition: all 0.2s;
-          border-radius: 2px;
-          margin-right: 1px;
-          &:hover {
-            color: var(--text-normal);
-            background-color: var(--interactive-accent);
-          }
-        }
-      }
-    }
-  }
+			.type {
+				height: 16px;
+				width: 16px;
+				margin: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&[data-type="M"] {
+					color: orange;
+				}
+				&[data-type="D"] {
+					color: red;
+				}
+				&[data-type="A"] {
+					color: yellowgreen;
+				}
+				&[data-type="R"] {
+					color: violet;
+				}
+			}
+			.buttons {
+				display: flex;
+				> * {
+					color: var(--text-faint);
+					height: 16px;
+					width: 16px;
+					margin: 0;
+					transition: all 0.2s;
+					border-radius: 2px;
+					margin-right: 1px;
+					&:hover {
+						color: var(--text-normal);
+						background-color: var(--interactive-accent);
+					}
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/utils.ts b/src/utils.ts
index 765d82ca..fdb85e62 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,5 @@
+import { requireApiVersion, WorkspaceLeaf } from "obsidian";
+
 export const worthWalking = (filepath: string, root: string) => {
     if (filepath === '.' || root == null || root.length === 0 || root === '.') {
         return true;
@@ -8,3 +10,14 @@ export const worthWalking = (filepath: string, root: string) => {
         return filepath.startsWith(root);
     }
 };
+
+
+export function getNewLeaf(): WorkspaceLeaf {
+    let leaf: WorkspaceLeaf;
+    if (requireApiVersion("0.16.0")) {
+        leaf = app.workspace.getLeaf("tab");
+    } else {
+        leaf = app.workspace.createLeafInParent(app.workspace.rootSplit, 0);
+    }
+    return leaf;
+}
\ No newline at end of file