Merge pull request #1019 from 200ok-ch/feat/visual-cue-for-overdue-headers

feat: Add visual cue for overdue headers when displaying headers

Author: munen

changelog.org

@@ -9,6 +9,21 @@ When there are updates to the changelog, you will be notified and see a 'gift' i
 
 * [2025-05-06 Tue]
 
+** Added
+
+*** Add visual cue for overdue headers when displaying headers
+
+- Before this change: When enabling the setting "Show Deadline
+  Display", the respective deadline will be displayed on each header
+  line.
+- After this change, in the deadline will show in grey if not overdue
+  and in red if overdue.
+
+This change was originally proposed and implemented by @dmorlitz:
+https://github.com/200ok-ch/organice/pull/970
+
+The merged PR is: https://github.com/200ok-ch/organice/pull/1019
+
 ** Fixed
 
 *** Resolved issue where search input field could scroll off-screen on iOS devices

sample.org

@@ -267,8 +267,8 @@ organice has native support for adding and editing DEADLINE and SCHEDULED items.
 
 Scheduling an item should not be understood in the same way that we understand scheduling a meeting. Setting a date for a meeting is just a simple appointment, you can mark this entry with a simple plain timestamp, to get this item shown on the date where it applies.
 
-** An item with a deadline
-   DEADLINE: <2018-10-03 Wed>
+** An item with a deadline in the far future
+   DEADLINE: <2088-05-06 Thu>
 
 Deadlines and scheduled items produce entries in the agenda when they are over-due, so it is important to be able to mark such an entry as done once you have done so. When you mark a ‘DEADLINE’ or a ‘SCHEDULED’ with the TODO keyword ‘DONE’, it no longer produces entries in the agenda.
 ** An item that is scheduled

src/components/OrgFile/components/Header/index.js

@@ -393,13 +393,25 @@ ${header.get('rawDescription')}`;
       .map((p) => p.get('timestamp'))
       .get(0);
 
-    const headerDeadline =
-      headerDeadlineMap !== undefined
-        ? headerDeadlineMap.get('month') +
-          '-' +
-          headerDeadlineMap.get('day') +
-          '-' +
-          headerDeadlineMap.get('year')
+    let isOverdue = false;
+    let deadlineString = '';
+    if (showDeadlineDisplay && headerDeadlineMap) {
+      const year = headerDeadlineMap.get('year');
+      const month = headerDeadlineMap.get('month');
+      const day = headerDeadlineMap.get('day');
+      // Ensure parts are parsed as integers for Date constructor
+      const deadlineDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+
+      const today = new Date();
+      today.setHours(0, 0, 0, 0); // Normalize today to midnight for date-only comparison
+
+      isOverdue = deadlineDate < today;
+      deadlineString = `${year}-${month}-${day}`;
+    }
+
+    const clockDisplayString =
+      showClockDisplay && header.get('totalTimeLoggedRecursive') !== 0
+        ? millisDuration(header.get('totalTimeLoggedRecursive'))
         : '';
 
     const {
@@ -551,15 +563,11 @@ ${header.get('rawDescription')}`;
                 isSelected={isSelected}
                 shouldDisableExplicitWidth={swipedDistance === 0}
                 shouldDisableActions={shouldDisableActions}
-                addition={
-                  (showClockDisplay && header.get('totalTimeLoggedRecursive') !== 0
-                    ? millisDuration(header.get('totalTimeLoggedRecursive'))
-                    : '') +
-                  // Spacing between 'clock display' and 'deadline
-                  // display' overlays
-                  (showClockDisplay && showDeadlineDisplay ? ' ' : '') +
-                  (showDeadlineDisplay && headerDeadline !== undefined ? headerDeadline : '')
-                }
+                addition={clockDisplayString}
+                showDeadlineDisplay={showDeadlineDisplay}
+                headerDeadlineMap={headerDeadlineMap}
+                deadlineString={deadlineString}
+                isOverdue={isOverdue}
               />
 
               <Collapse

src/components/OrgFile/components/Header/stylesheet.css

@@ -54,3 +54,11 @@
 .swipe-action-container__icon--right {
   left: 10px;
 }
+
+.header-deadline {
+  padding-right: 0.5em;
+}
+
+.header-deadline--overdue {
+  color: var(--red);
+}

src/components/OrgFile/components/TitleLine/index.js

@@ -104,6 +104,10 @@ class TitleLine extends PureComponent {
       shouldDisableExplicitWidth,
       todoKeywordSets,
       addition,
+      showDeadlineDisplay,
+      headerDeadlineMap,
+      deadlineString,
+      isOverdue,
     } = this.props;
     const { containerWidth } = this.state;
 
@@ -163,6 +167,16 @@ class TitleLine extends PureComponent {
                 {!header.get('opened') && hasContent ? '...' : ''}
               </span>
               {addition ? <span style={additionStyle}>{addition}</span> : null}
+              {showDeadlineDisplay && headerDeadlineMap && (
+                <span
+                  className={classNames('header-deadline', {
+                    'header-deadline--overdue': isOverdue,
+                  })}
+                >
+                  {addition ? ' ' : ''}
+                  {deadlineString}
+                </span>
+              )}
             </div>
             {header.getIn(['titleLine', 'tags']).size > 0 && (
               <div>