Move conflict view in root view and adjust style

src/main.ts

@@ -69,7 +69,7 @@ export default class GitHubSyncPlugin extends Plugin {
     if (leaves.length > 0) {
       leaf = leaves[0];
     } else {
-      leaf = workspace.getRightLeaf(false)!;
+      leaf = workspace.getLeaf(false)!;
       await leaf.setViewState({
         type: CONFLICTS_RESOLUTION_VIEW_TYPE,
         active: true,

src/views/conflicts-resolution/actions-gutter.tsx

@@ -177,6 +177,7 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
         height: "100%",
         overflow: "hidden",
         position: "relative",
+        backgroundColor: "var(--background-secondary)",
       }}
     >
       <svg

src/views/conflicts-resolution/files-tab-bar.tsx

@@ -17,14 +17,25 @@ const FilesTabBar: React.FC<FilesTabBarProps> = ({
       <div
         key={filePath}
         style={{
+          content: "none",
           maxWidth: "6rem",
         }}
-        className={`workspace-tab-header tappable ${filePath === currentFile ? "is-active mod-active" : ""}`}
+        className={`workspace-tab-header tappable`}
         aria-label={filePath}
         data-tooltip-delay="300"
         onClick={() => setCurrentFile(index)}
       >
-        <div className="workspace-tab-header-inner">
+        <div
+          style={{
+            color:
+              filePath === currentFile ? "var(--tab-text-color-focused)" : "",
+            backgroundColor:
+              filePath === currentFile
+                ? "var(--background-modifier-hover)"
+                : "",
+          }}
+          className="workspace-tab-header-inner"
+        >
           <div
             style={{
               textOverflow: "ellipsis",
@@ -48,7 +59,7 @@ const FilesTabBar: React.FC<FilesTabBarProps> = ({
     <div
       style={{
         display: "flex",
-        backgroundColor: "var(--tab-container-background)",
+        backgroundColor: "var(--background-primary)",
         height: "var(--header-height)",
         borderBottom: "var(--tab-outline-width) solid var(--tab-outline-color)",
         flex: "0 0 auto",

src/views/conflicts-resolution/view.tsx

@@ -1,4 +1,4 @@
-import { IconName, ItemView, WorkspaceLeaf } from "obsidian";
+import { IconName, ItemView, Menu, WorkspaceLeaf } from "obsidian";
 import { Root, createRoot } from "react-dom/client";
 import DiffView from "./component";
 import GitHubSyncPlugin from "src/main";
@@ -46,6 +46,8 @@ export class ConflictsResolutionView extends ItemView {
 
   private render(conflicts: ConflictFile[]) {
     if (!this.root) {
+      // Hides the navigation header
+      (this.containerEl.children[0] as HTMLElement).style.display = "none";
       const container = this.containerEl.children[1];
       container.empty();
       // We don't want any padding, the DiffView component will handle that