1import { AppText as Text } from "../../components/AppText";
2import { cn } from "../../lib/cn";
3import type { ComponentProps, ReactNode } from "react";
4import { Pressable, View } from "react-native";
5import { THREAD_WORK_ROW_MIN_HEIGHT, type deriveThreadWorkLogSizing } from "../../lib/layout";
6
7export function WorkLogBlock({
8 children,
9 layout = "standalone",
10 continues = false,
11}: {
12 children: ReactNode;
13 layout?: "standalone" | "group-header";
14 continues?: boolean | undefined;
15}) {
16 return (
17 <View className={continues || layout === "group-header" ? "-mx-1 px-1" : "-mx-1 mb-1 px-1"}>
18 {children}
19 </View>
20 );
21}
22
23export function WorkLogRows({ children }: { children: ReactNode }) {
24 return <View className="gap-px">{children}</View>;
25}
26
27export function WorkLogIconSlot({ children }: { children: ReactNode }) {
28 return <View className="relative h-6 w-6 shrink-0 items-center justify-center">{children}</View>;
29}
30
31/** Consumers supply actions/content; sizing comes from the feed's accessibility-aware metrics. */
32export function WorkLogPressable({
33 children,
34 rowSizing,
35 ...props
36}: Omit<ComponentProps<typeof Pressable>, "children" | "className" | "style" | "hitSlop"> & {
37 children: ReactNode;
38 rowSizing?: ReturnType<typeof deriveThreadWorkLogSizing>;
39}) {
40 return (
41 <Pressable {...props} hitSlop={4} className="rounded-md px-0.5 py-0 active:bg-subtle">
42 <View
43 className="flex-row items-center gap-1.5"
44 style={{ minHeight: rowSizing?.estimatedRowHeight ?? THREAD_WORK_ROW_MIN_HEIGHT }}
45 >
46 {children}
47 </View>
48 </Pressable>
49 );
50}
51
52/** Headers stay one line; only the separate detail content can wrap. */
53export function WorkLogLabel({
54 children,
55 tone = "default",
56}: {
57 children: ReactNode;
58 tone?: "default" | "danger" | "warning";
59}) {
60 return (
61 <Text
62 selectable={false}
63 numberOfLines={1}
64 ellipsizeMode="tail"
65 className={cn(
66 "min-w-0 flex-1 text-sm text-foreground-muted",
67 tone === "danger" && "font-t3-medium text-adaptive-rose-600-400",
68 tone === "warning" && "font-t3-medium text-warning-foreground",
69 )}
70 >
71 {children}
72 </Text>
73 );
74}