Display session duration in sidebar and simplify date formatting
Show human-readable session duration (e.g. "23m", "1h 15m") in the session list metadata row when duration > 0. Add formatSessionDuration helper that handles sub-minute, minute-only, and hour+minute ranges. Also replace try/catch in formatDate with an isNaN guard on the parsed Date, which is more idiomatic and avoids swallowing unrelated errors. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -96,6 +96,12 @@ export function SessionList({ sessions, loading, selectedId, onSelect }: Props)
|
|||||||
<span>{formatDate(session.modified || session.created)}</span>
|
<span>{formatDate(session.modified || session.created)}</span>
|
||||||
<span className="text-border">·</span>
|
<span className="text-border">·</span>
|
||||||
<span className="tabular-nums">{session.messageCount} msgs</span>
|
<span className="tabular-nums">{session.messageCount} msgs</span>
|
||||||
|
{session.duration && session.duration > 0 && (
|
||||||
|
<>
|
||||||
|
<span className="text-border">·</span>
|
||||||
|
<span className="tabular-nums">{formatSessionDuration(session.duration)}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
@@ -154,17 +160,24 @@ function formatProjectName(project: string): string {
|
|||||||
return project;
|
return project;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatSessionDuration(ms: number): string {
|
||||||
|
const minutes = Math.floor(ms / 60000);
|
||||||
|
if (minutes < 1) return "<1m";
|
||||||
|
if (minutes < 60) return `${minutes}m`;
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
const rem = minutes % 60;
|
||||||
|
if (rem === 0) return `${hours}h`;
|
||||||
|
return `${hours}h ${rem}m`;
|
||||||
|
}
|
||||||
|
|
||||||
function formatDate(dateStr: string): string {
|
function formatDate(dateStr: string): string {
|
||||||
if (!dateStr) return "";
|
if (!dateStr) return "";
|
||||||
try {
|
|
||||||
const d = new Date(dateStr);
|
const d = new Date(dateStr);
|
||||||
|
if (isNaN(d.getTime())) return dateStr;
|
||||||
return d.toLocaleDateString(undefined, {
|
return d.toLocaleDateString(undefined, {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
});
|
});
|
||||||
} catch {
|
|
||||||
return dateStr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user