Merge pull request #292 from Expensify/dangrous-relativeTimestamps

JS00001 · web-flow · commit 71ce691e000f · 2026-01-08T07:43:13.000-05:00
Add a toggle to add timestamps to relative dates
diff --git a/assets/manifest-firefox.json b/assets/manifest-firefox.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
 
   "name": "K2 for GitHub",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "description": "Manage your Kernel Scheduling from directly inside GitHub",
 
   "browser_specific_settings": {
diff --git a/assets/manifest.json b/assets/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
 
   "name": "K2 for GitHub",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "description": "Manage your Kernel Scheduling from directly inside GitHub",
 
   "icons": {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "k2-extension",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "description": "A browser extension for Kernel Schedule",
   "private": true,
   "scripts": {
diff --git a/src/js/lib/actions/Preferences.js b/src/js/lib/actions/Preferences.js
@@ -2,6 +2,7 @@ import ReactNativeOnyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 
 let ghToken;
+let useAbsoluteTimestamps;
 ReactNativeOnyx.connect({
     key: ONYXKEYS.PREFERENCES,
     callback: (preferences) => {
@@ -11,6 +12,7 @@ ReactNativeOnyx.connect({
         }
 
         ghToken = preferences.ghToken;
+        useAbsoluteTimestamps = !!preferences.useAbsoluteTimestamps;
     },
 });
 
@@ -26,7 +28,21 @@ function setGitHubToken(value) {
     ReactNativeOnyx.merge(ONYXKEYS.PREFERENCES, {ghToken: value});
 }
 
+function getUseAbsoluteTimestamps() {
+    return !!useAbsoluteTimestamps;
+}
+
+/**
+ * @param {Boolean} value
+ */
+function setUseAbsoluteTimestamps(value) {
+    useAbsoluteTimestamps = value;
+    ReactNativeOnyx.merge(ONYXKEYS.PREFERENCES, {useAbsoluteTimestamps: value});
+}
+
 export {
     getGitHubToken,
     setGitHubToken,
+    getUseAbsoluteTimestamps,
+    setUseAbsoluteTimestamps,
 };
diff --git a/src/js/lib/pages/github/_base.js b/src/js/lib/pages/github/_base.js
@@ -1,6 +1,10 @@
 import $ from 'jquery';
 import _ from 'underscore';
+import ReactNativeOnyx from 'react-native-onyx';
 import * as API from '../../api';
+import * as Preferences from '../../actions/Preferences';
+import ONYXKEYS from '../../../ONYXKEYS';
+import convertTimestamps from '../../timestampConverter';
 
 /**
  * This class is to be extended by each of the distinct types of webpages that the extension works on
@@ -280,5 +284,35 @@ export default function () {
         });
     };
 
+    /**
+     * Listens for preference changes and applies the configured timestamp format once.
+     * Call once during setup to register the Onyx listener and perform an initial conversion.
+     */
+    Page.setupTimestampFormat = function setupTimestampFormat() {
+        ReactNativeOnyx.connect({
+            key: ONYXKEYS.PREFERENCES,
+            callback: (preferences) => {
+                if (!preferences) {
+                    return;
+                }
+                const preference = !!preferences.useAbsoluteTimestamps;
+                convertTimestamps(preference);
+            },
+        });
+
+        const initialPreference = Preferences.getUseAbsoluteTimestamps();
+        if (initialPreference !== undefined) {
+            convertTimestamps(!!initialPreference);
+        }
+    };
+
+    /**
+     * Applies the current timestamp format. Safe to invoke periodically for dynamic content.
+     */
+    Page.applyTimestampFormat = function applyTimestampFormat() {
+        const preference = Preferences.getUseAbsoluteTimestamps();
+        convertTimestamps(!!preference);
+    };
+
     return Page;
 }
diff --git a/src/js/lib/pages/github/all.js b/src/js/lib/pages/github/all.js
@@ -29,6 +29,10 @@ export default function () {
             $('nav.js-repo-nav *[data-selected-links*="repo_pulls"]')
                 .parent().after(k2Button({url: currentUrl}));
         }
+
+        // Set up timestamp format conversion
+        setTimeout(() => AllPages.applyTimestampFormat(), 500);
+        setInterval(() => AllPages.applyTimestampFormat(), 5000);
     };
 
     return AllPages;
diff --git a/src/js/lib/pages/github/issue.js b/src/js/lib/pages/github/issue.js
@@ -7,6 +7,7 @@ import K2picker from '../../../module/K2picker/K2picker';
 import K2pickerarea from '../../../module/K2pickerarea/K2pickerarea';
 import K2pickerType from '../../../module/K2pickertype/K2pickertype';
 import ToggleReview from '../../../module/ToggleReview/ToggleReview';
+import ToggleTimestamps from '../../../module/ToggleTimestamps/ToggleTimestamps';
 import K2comments from '../../../module/K2comments/K2comments';
 import K2previousissues from '../../../module/K2previousissues/K2previousissues';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -133,12 +134,33 @@ const refreshPicker = function () {
             .before(sidebarWrapperHTML);
     }
 
+    // Add timestamp toggle wrapper at the bottom if it doesn't exist
+    if (!$('.k2toggletimestamps-wrapper').length) {
+        // Find the last sidebar item or sidebar container and append to bottom
+        const lastSidebarItem = $('.discussion-sidebar-item').last();
+        if (lastSidebarItem.length) {
+            lastSidebarItem.after('<div class="discussion-sidebar-item js-discussion-sidebar-item k2toggletimestamps-wrapper"></div>');
+        } else {
+            // Fallback: append to sidebar container
+            const sidebar = $('.discussion-sidebar, [role="complementary"]').first();
+            if (sidebar.length) {
+                sidebar.append('<div class="discussion-sidebar-item js-discussion-sidebar-item k2toggletimestamps-wrapper"></div>');
+            }
+        }
+    }
+
     new K2picker().draw();
     new K2pickerType().draw();
     new K2pickerarea().draw();
     new ToggleReview().draw();
     new K2comments().draw();
     new K2previousissues().draw();
+
+    // Draw timestamp toggle if wrapper exists and is empty
+    const timestampWrapper = $('.k2toggletimestamps-wrapper');
+    if (timestampWrapper.length && timestampWrapper.children().length === 0) {
+        new ToggleTimestamps().draw();
+    }
 };
 
 /**
diff --git a/src/js/lib/pages/github/pr.js b/src/js/lib/pages/github/pr.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import Base from './_base';
+import ToggleTimestamps from '../../../module/ToggleTimestamps/ToggleTimestamps';
 
 /**
  * Replaces all `- [ ]` with `- [x]` in textareas with specific names
@@ -21,6 +22,38 @@ const renderReplaceChecklistButton = () => {
     $('.k2-replace-checklist').off().on('click', replaceChecklistItems);
 };
 
+const refreshSidebar = function () {
+    // Add the timestamp toggle wrapper to the DOM if it doesn't exist
+    if ($('.k2toggletimestamps-wrapper').length) {
+        // Draw the toggle if wrapper exists but is empty
+        const wrapper = $('.k2toggletimestamps-wrapper');
+        if (wrapper.children().length === 0) {
+            new ToggleTimestamps().draw();
+        }
+        return;
+    }
+
+    // Add timestamp toggle wrapper at the bottom of the sidebar
+    const lastSidebarItem = $('.discussion-sidebar-item').last();
+    if (lastSidebarItem.length) {
+        lastSidebarItem.after('<div class="discussion-sidebar-item js-discussion-sidebar-item k2toggletimestamps-wrapper"></div>');
+    } else {
+        // Fallback: append to sidebar container
+        const sidebar = $('.discussion-sidebar, [role="complementary"], .Layout-sidebar').first();
+        if (sidebar.length) {
+            sidebar.append('<div class="discussion-sidebar-item js-discussion-sidebar-item k2toggletimestamps-wrapper"></div>');
+        }
+    }
+
+    // Draw the timestamp toggle if the wrapper exists and is empty
+    const wrapper = $('.k2toggletimestamps-wrapper');
+    if (!wrapper.length || wrapper.children().length > 0) {
+        return;
+    }
+
+    new ToggleTimestamps().draw();
+};
+
 const refreshHold = function () {
     const prTitle = $('.js-issue-title').text();
 
@@ -93,6 +126,7 @@ export default function () {
      * Add buttons to the page and setup the event handler
      */
     PrPage.setup = function () {
+        setTimeout(refreshSidebar, 500);
         setInterval(refreshHold, 1000);
         setInterval(renderReplaceChecklistButton, 2000);
 
diff --git a/src/js/lib/timestampConverter.js b/src/js/lib/timestampConverter.js
@@ -0,0 +1,109 @@
+/**
+ * Formats a datetime string to "Dec 16, 2025 6:30 PM EST" format
+ * @param {String} datetimeString ISO 8601 datetime string
+ * @returns {String} Formatted date string
+ */
+function formatTimestamp(datetimeString) {
+    const date = new Date(datetimeString);
+    const options = {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+        timeZoneName: 'short',
+    };
+    return new Intl.DateTimeFormat('en-US', options).format(date);
+}
+
+/**
+ * Converts all relative-time elements on the page based on the preference
+ * @param {Boolean} useAbsoluteTimestamps Whether to use absolute timestamps
+ */
+function convertTimestamps(useAbsoluteTimestamps) {
+    const shouldUseAbsoluteTimestamps = !!useAbsoluteTimestamps;
+
+    if (shouldUseAbsoluteTimestamps) {
+        // Find all relative-time elements that don't have absolute timestamp added yet
+        const elements = document.querySelectorAll('relative-time:not([data-k2-absolute-added])');
+
+        Array.from(elements).forEach((el) => {
+            const datetime = el.getAttribute('datetime');
+
+            if (!datetime) {
+                return;
+            }
+
+            // Create a span for the absolute timestamp
+            const absoluteSpan = document.createElement('span');
+            const absoluteTime = formatTimestamp(datetime);
+            absoluteSpan.textContent = ` (${absoluteTime})`;
+            absoluteSpan.dataset.k2AbsolutePart = 'true';
+
+            // Add the absolute span after the relative-time element
+            const parent = el.parentNode;
+            if (parent) {
+                // Insert the absolute span right after the relative-time element
+                if (el.nextSibling) {
+                    parent.insertBefore(absoluteSpan, el.nextSibling);
+                } else {
+                    parent.appendChild(absoluteSpan);
+                }
+
+                // Mark that we've added the absolute part
+                // eslint-disable-next-line no-param-reassign
+                el.dataset.k2AbsoluteAdded = 'true';
+
+                // Store datetime for updates
+                // eslint-disable-next-line no-param-reassign
+                el.dataset.k2OriginalDatetime = datetime;
+            }
+        });
+
+        // Update existing absolute parts (refresh the absolute timestamp)
+        const elementsWithAbsolute = document.querySelectorAll('relative-time[data-k2-absolute-added]');
+        Array.from(elementsWithAbsolute).forEach((el) => {
+            const datetime = el.dataset.k2OriginalDatetime || el.getAttribute('datetime');
+            if (datetime) {
+                // Find the absolute span that follows this element
+                let absoluteSpan = el.nextSibling;
+                while (absoluteSpan && (!absoluteSpan.dataset || !absoluteSpan.dataset.k2AbsolutePart)) {
+                    absoluteSpan = absoluteSpan.nextSibling;
+                }
+
+                if (absoluteSpan && absoluteSpan.dataset.k2AbsolutePart) {
+                    const absoluteTime = formatTimestamp(datetime);
+                    // eslint-disable-next-line no-param-reassign
+                    absoluteSpan.textContent = ` (${absoluteTime})`;
+                }
+            }
+        });
+    } else {
+        // Find all relative-time elements that have absolute timestamps added
+        const elements = document.querySelectorAll('relative-time[data-k2-absolute-added]');
+
+        Array.from(elements).forEach((el) => {
+            // Find and remove the absolute timestamp span
+            let absoluteSpan = el.nextSibling;
+            while (absoluteSpan && (!absoluteSpan.dataset || !absoluteSpan.dataset.k2AbsolutePart)) {
+                absoluteSpan = absoluteSpan.nextSibling;
+            }
+
+            if (absoluteSpan && absoluteSpan.dataset.k2AbsolutePart) {
+                const parent = absoluteSpan.parentNode;
+                if (parent) {
+                    parent.removeChild(absoluteSpan);
+                }
+            }
+
+            // Remove our markers
+            // eslint-disable-next-line no-param-reassign
+            delete el.dataset.k2AbsoluteAdded;
+            // eslint-disable-next-line no-param-reassign
+            delete el.dataset.k2OriginalDatetime;
+        });
+    }
+}
+
+export default convertTimestamps;
diff --git a/src/js/module/ToggleTimestamps/Toggle.js b/src/js/module/ToggleTimestamps/Toggle.js
diff --git a/src/js/module/ToggleTimestamps/ToggleTimestamps.js b/src/js/module/ToggleTimestamps/ToggleTimestamps.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "k2-extension",`
`3`		`- "version": "1.5.15",`
	`3`	`+ "version": "1.5.16",`
`4`	`4`	`"description": "A browser extension for Kernel Schedule",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`