feat: show git change markers on tabs

Author: devvaannsh

src/extensions/default/Git/main.js

@@ -27,7 +27,8 @@ define(function (require, exports, module) {
         "src/History",
         "src/NoRepo",
         "src/ProjectTreeMarks",
-        "src/Remotes"
+        "src/Remotes",
+        "src/TabBarIntegration"
     ];
     require(modules);
 
@@ -48,10 +49,12 @@ define(function (require, exports, module) {
 
     // export API's for other extensions
     if (typeof window === "object") {
+        const TabBarIntegration = require("src/TabBarIntegration");
         window.phoenixGitEvents = {
             EventEmitter: EventEmitter,
             Events: Events,
-            Git
+            Git,
+            TabBarIntegration
         };
     }
 });

src/extensions/default/Git/src/TabBarIntegration.js

@@ -0,0 +1,88 @@
+define(function (require) {
+    const EventEmitter = require("src/EventEmitter");
+    const Events = require("src/Events");
+    const Git = require("src/git/Git");
+    const Preferences = require("src/Preferences");
+
+    // the cache of file statuses by path
+    let fileStatusCache = {};
+
+    /**
+     * this function is responsible to get the Git status for a file path
+     *
+     * @param {string} fullPath - the file path
+     * @returns {Array|null} - Array of status strings or null if no status
+     */
+    function getFileStatus(fullPath) {
+        return fileStatusCache[fullPath] || null;
+    }
+
+    /**
+     * whether the file is modified or not
+     *
+     * @param {string} fullPath - the file path
+     * @returns {boolean} - True if the file is modified otherwise false
+     */
+    function isModified(fullPath) {
+        const status = getFileStatus(fullPath);
+        if (!status) {
+            return false;
+        }
+        return (
+            status.some(
+                (statusType) =>
+                    statusType === Git.FILE_STATUS.MODIFIED ||
+                    statusType === Git.FILE_STATUS.RENAMED ||
+                    statusType === Git.FILE_STATUS.COPIED
+            ) && !status.includes(Git.FILE_STATUS.STAGED)
+        );
+    }
+
+    /**
+     * whether the file is untracked or not
+     *
+     * @param {string} fullPath - the file path
+     * @returns {boolean} - True if the file is untracked otherwise false
+     */
+    function isUntracked(fullPath) {
+        const status = getFileStatus(fullPath);
+        if (!status) {
+            return false;
+        }
+
+        return status.includes(Git.FILE_STATUS.UNTRACKED);
+    }
+
+
+    // Update file status cache when Git status results are received
+    EventEmitter.on(Events.GIT_STATUS_RESULTS, function (files) {
+        // reset the cache
+        fileStatusCache = {};
+
+        const gitRoot = Preferences.get("currentGitRoot");
+        if (!gitRoot) {
+            return;
+        }
+
+        // we need to update cache with new status results
+        files.forEach(function (entry) {
+            const fullPath = gitRoot + entry.file;
+            fileStatusCache[fullPath] = entry.status;
+        });
+
+        // notify that file statuses have been updated
+        EventEmitter.emit("GIT_FILE_STATUS_CHANGED", fileStatusCache);
+    });
+
+    // clear cache when Git is disabled
+    EventEmitter.on(Events.GIT_DISABLED, function () {
+        fileStatusCache = {};
+        EventEmitter.emit("GIT_FILE_STATUS_CHANGED", fileStatusCache);
+    });
+
+    return {
+        getFileStatus: getFileStatus,
+        isModified: isModified,
+        isUntracked: isUntracked
+    };
+});

src/extensionsIntegrated/TabBar/main.js

@@ -131,16 +131,39 @@ define(function (require, exports, module) {
         const isDirty = Helper._isFileModified(FileSystem.getFileForPath(entry.path));
         const isPlaceholder = entry.isPlaceholder === true;
 
+        let gitStatus = ""; // this will be shown in the tooltip when a tab is hovered
+        let gitStatusClass = ""; // for styling
+        let gitStatusLetter = ""; // shown in the tab, either U or M
+
+        if (window.phoenixGitEvents && window.phoenixGitEvents.TabBarIntegration) {
+            const TabBarIntegration = window.phoenixGitEvents.TabBarIntegration;
+
+            // find the Git status
+            // if untracked we add the git-new class and U char
+            // if modified we add the git-modified class and M char
+            if (TabBarIntegration.isUntracked(entry.path)) {
+                gitStatus = "Untracked";
+                gitStatusClass = "git-new";
+                gitStatusLetter = "U";
+            } else if (TabBarIntegration.isModified(entry.path)) {
+                gitStatus = "Modified";
+                gitStatusClass = "git-modified";
+                gitStatusLetter = "M";
+            }
+        }
+
         // create tab with all the appropriate classes
         const $tab = $(
             `<div class="tab 
             ${isActive ? "active" : ""}
             ${isDirty ? "dirty" : ""}
-            ${isPlaceholder ? "placeholder" : ""}"
+            ${isPlaceholder ? "placeholder" : ""}
+            ${gitStatusClass}"
             data-path="${entry.path}" 
-            title="${Phoenix.app.getDisplayPath(entry.path)}">
+            title="${Phoenix.app.getDisplayPath(entry.path)}${gitStatus ? " (" + gitStatus + ")" : ""}">
             <div class="tab-icon"></div>
             <div class="tab-name"></div>
+            ${gitStatusLetter ? `<div class="tab-git-status">${gitStatusLetter}</div>` : ""}
             <div class="tab-close"><i class="fa-solid fa-times"></i></div>
         </div>`
         );
@@ -541,6 +564,12 @@ define(function (require, exports, module) {
         // For editor changes, update only the tabs.
         MainViewManager.on(MainViewManager.EVENT_CURRENT_FILE_CHANGE, debounceUpdateTabs);
 
+        // to listen for the Git status changes
+        // make sure that the git extension is available
+        if (window.phoenixGitEvents && window.phoenixGitEvents.EventEmitter) {
+            window.phoenixGitEvents.EventEmitter.on("GIT_FILE_STATUS_CHANGED", debounceUpdateTabs);
+        }
+
         // For working set changes, update only the tabs.
         const events = [
             "workingSetAdd",

src/styles/Extn-TabBar.less

@@ -137,6 +137,8 @@
     font-size: 0.7rem;
     opacity: 0.7;
     font-weight: normal;
+    position: relative;
+    top: 0.1rem;
 }
 
 .tab.active {
@@ -195,10 +197,10 @@
 .tab::before {
     content: "•";
     color: transparent;
-    font-size: 1.6rem;
+    font-size: 1.5rem;
     position: absolute;
     left: 0.4rem;
-    top: 0.25rem;
+    top: 0.33rem;
 }
 
 .tab.dirty::before {
@@ -215,7 +217,7 @@
 
 .tab-close {
     font-size: 0.75rem;
-    padding: 0.08rem 0.4rem;
+    padding: 0.1rem 0.4rem;
     margin-left: 0.25rem;
     color: #666;
     transition: all 0.2s ease;
@@ -420,3 +422,29 @@
     background-color: transparent;
     pointer-events: all;
 }
+
+/* ------ for the git status markers -------------- */
+.tab-git-status {
+    font-size: 0.9rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0.33rem;
+}
+
+.git-modified .tab-git-status {
+    color: #E3B551;
+}
+
+.dark .git-modified .tab-git-status {
+    color: #E3B551;
+}
+
+.git-new .tab-git-status {
+    color: #91CC41;
+}
+
+.dark .git-new .tab-git-status {
+    color: #91CC41;
+}