From 182b459235c9370f95a4627009411da0a2331dd7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Thu, 26 Mar 2026 16:45:29 -0500
Subject: [PATCH] Add "Today" divider line in inbox between recent and older
 items

Shows a dark gray horizontal line with "Today" label on the right,
vertically centered, between items from the last 24 hours and older
items. Applies to all inbox tabs (Mine, Recent, Unread, All).

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/Inbox.tsx | 41 +++++++++++++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 149bd292..9e6fa39e 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { Link, useLocation, useNavigate } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { approvalsApi } from "../api/approvals";
@@ -1051,7 +1051,24 @@ export function Inbox() {
           {showSeparatorBefore("work_items") && <Separator />}
           <div>
             <div className="overflow-hidden rounded-xl border border-border bg-card">
-              {workItemsToRender.map((item) => {
+              {workItemsToRender.flatMap((item, index) => {
+                const todayCutoff = Date.now() - 24 * 60 * 60 * 1000;
+                const showTodayDivider =
+                  index > 0 &&
+                  item.timestamp > 0 &&
+                  item.timestamp < todayCutoff &&
+                  workItemsToRender[index - 1].timestamp >= todayCutoff;
+                const elements: ReactNode[] = [];
+                if (showTodayDivider) {
+                  elements.push(
+                    <div key="today-divider" className="flex items-center gap-3 px-4 my-2">
+                      <div className="flex-1 border-t border-zinc-600" />
+                      <span className="shrink-0 text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+                        Today
+                      </span>
+                    </div>,
+                  );
+                }
                 const isMineTab = tab === "mine";
 
                 if (item.kind === "approval") {
@@ -1076,7 +1093,7 @@ export function Inbox() {
                       }
                     />
                   );
-                  return isMineTab ? (
+                  elements.push(isMineTab ? (
                     <SwipeToArchive
                       key={approvalKey}
                       disabled={isArchiving}
@@ -1084,7 +1101,8 @@ export function Inbox() {
                     >
                       {row}
                     </SwipeToArchive>
-                  ) : row;
+                  ) : row);
+                  return elements;
                 }
 
                 if (item.kind === "failed_run") {
@@ -1111,7 +1129,7 @@ export function Inbox() {
                       }
                     />
                   );
-                  return isMineTab ? (
+                  elements.push(isMineTab ? (
                     <SwipeToArchive
                       key={runKey}
                       disabled={isArchiving}
@@ -1119,7 +1137,8 @@ export function Inbox() {
                     >
                       {row}
                     </SwipeToArchive>
-                  ) : row;
+                  ) : row);
+                  return elements;
                 }
 
                 if (item.kind === "join_request") {
@@ -1143,7 +1162,7 @@ export function Inbox() {
                       }
                     />
                   );
-                  return isMineTab ? (
+                  elements.push(isMineTab ? (
                     <SwipeToArchive
                       key={joinKey}
                       disabled={isArchiving}
@@ -1151,7 +1170,8 @@ export function Inbox() {
                     >
                       {row}
                     </SwipeToArchive>
-                  ) : row;
+                  ) : row);
+                  return elements;
                 }
 
                 const issue = item.issue;
@@ -1212,7 +1232,7 @@ export function Inbox() {
                   />
                 );
 
-                return isMineTab ? (
+                elements.push(isMineTab ? (
                   <SwipeToArchive
                     key={`issue:${issue.id}`}
                     disabled={isArchiving || archiveIssueMutation.isPending}
@@ -1220,7 +1240,8 @@ export function Inbox() {
                   >
                     {row}
                   </SwipeToArchive>
-                ) : row;
+                ) : row);
+                return elements;
               })}
             </div>
           </div>