Blame · Line-by-line history

`CommitRow.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

CommitRow.tsxBlame76 lines · 1 contributor

Normal view Raw

c53cf00Claude	1	import React from 'react';
	2	import { View, Text, StyleSheet } from 'react-native';
	3	import { colors } from '../theme/colors';
	4	import { fontSizes, fontWeights, fonts } from '../theme/typography';
	5	import { type Commit } from '../api/client';
	6
	7	interface Props {
	8	commit: Commit;
	9	}
	10
	11	function timeAgo(dateStr: string): string {
	12	const diff = Date.now() - new Date(dateStr).getTime();
	13	const minutes = Math.floor(diff / 60000);
	14	if (minutes < 60) return `${minutes}m ago`;
	15	const hours = Math.floor(minutes / 60);
	16	if (hours < 24) return `${hours}h ago`;
	17	const days = Math.floor(hours / 24);
	18	if (days < 30) return `${days}d ago`;
	19	return `${Math.floor(days / 30)}mo ago`;
	20	}
	21
	22	export function CommitRow({ commit }: Props) {
	23	const shortSha = commit.sha.slice(0, 7);
	24	const subject = commit.message.split('\n')[0];
	25
	26	return (
	27	<View style={styles.row}>
	28	<View style={styles.content}>
	29	<Text style={styles.message} numberOfLines={2}>
	30	{subject}
	31	</Text>
	32	<View style={styles.meta}>
	33	<Text style={styles.sha}>{shortSha}</Text>
	34	<Text style={styles.author}>{commit.author.name}</Text>
	35	<Text style={styles.time}>{timeAgo(commit.author.date)}</Text>
	36	</View>
	37	</View>
	38	</View>
	39	);
	40	}
	41
	42	const styles = StyleSheet.create({
	43	row: {
	44	padding: 12,
	45	borderBottomWidth: 1,
	46	borderBottomColor: colors.border,
	47	},
	48	content: {
	49	gap: 4,
	50	},
	51	message: {
	52	color: colors.text,
	53	fontSize: fontSizes.sm,
	54	fontWeight: fontWeights.regular,
	55	lineHeight: 18,
	56	},
	57	meta: {
	58	flexDirection: 'row',
	59	alignItems: 'center',
	60	gap: 8,
	61	},
	62	sha: {
	63	color: colors.accent,
	64	fontSize: fontSizes.xs,
	65	fontFamily: fonts.mono,
	66	fontWeight: fontWeights.medium,
	67	},
	68	author: {
	69	color: colors.textMuted,
	70	fontSize: fontSizes.xs,
	71	},
	72	time: {
	73	color: colors.textMuted,
	74	fontSize: fontSizes.xs,
	75	},
	76	});