mirror of
https://github.com/0xWheatyz/handler.git
synced 2026-08-30 09:46:24 +00:00
Claude
daecaa7e6b
Build the committed 2a interactive prototype from Handler Mobile.dc.html as a real Expo app: six wired screens (Fleet, Agent detail, Answer, Spawn, Log, Settings) with the exact state logic ported from the design's renderVals(). - Port Leeworks tokens (colors light/dark, typography, spacing, radii, shadows) to typed RN values in src/theme. - Reimplement the design-system components used by the screens (Button, Badge, Icon, Switch, Select, TextField, segmented control, chip, tab bar). - Shared store mirrors the prototype's single-screen navigation and the Waiting -> Running flip when agt-7a1d is answered. - Real OS status bar / home indicator (safe-area insets) replace the mock phone chrome; dark mode follows system appearance. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PdF2hHVQ4UUBFPtpeMQ81o
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Pressable, StyleSheet, Text } from "react-native";
|
|
import { fonts, radius } from "../theme/tokens";
|
|
import { useTheme } from "../theme/useTheme";
|
|
|
|
/**
|
|
* Pill chip used for both the answer quick-replies and the log filters.
|
|
* Ported from the `chip()` style helper in the DC script.
|
|
*/
|
|
export function Chip({
|
|
label,
|
|
selected,
|
|
onPress,
|
|
}: {
|
|
label: string;
|
|
selected: boolean;
|
|
onPress: () => void;
|
|
}) {
|
|
const { colors } = useTheme();
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={[
|
|
styles.chip,
|
|
{
|
|
backgroundColor: selected ? colors.interactive : colors.surfacePage,
|
|
borderColor: selected ? colors.borderStrong : colors.borderDefault,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.label,
|
|
{ color: selected ? "#ffffff" : colors.textBody },
|
|
]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
chip: {
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 14,
|
|
borderRadius: radius.pill,
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
fontFamily: fonts.bodyMedium,
|
|
fontSize: 13,
|
|
lineHeight: 13,
|
|
},
|
|
});
|