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 className="text-border">·</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>
|
||||
</button>
|
||||
);
|
||||
@@ -154,17 +160,24 @@ function formatProjectName(project: string): string {
|
||||
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 {
|
||||
if (!dateStr) return "";
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
if (isNaN(d.getTime())) return dateStr;
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user