gb_flea/paperclip
1
0
Fork 0
forked from farhoodlabs/paperclip
Code Pull Requests Activity

Add "Today" divider line in inbox between recent and older items

Browse Source 
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>
This commit is contained in:
dotta
2026-03-26 16:45:29 -05:00
parent 94d6ae4049
commit 182b459235
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/Inbox.tsx
+31 -10
View File
@@ -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>