| 1 | import { CUSTOMIZE_SECTIONS } from "@g1t/contracts/customize"; |
| 2 | import { Stack, router } from "expo-router"; |
| 3 | import { Blocks, Plug, Sparkles } from "lucide-react-native"; |
| 4 | import { View } from "react-native"; |
| 5 | |
| 6 | import { Row, Screen, Text } from "@/components/ui"; |
| 7 | import { CUSTOMIZE, customizeItems } from "@/lib/customize"; |
| 8 | import { useSignedIn } from "@/lib/session"; |
| 9 | import { space, useColors } from "@/theme"; |
| 10 | |
| 11 | const ICONS = { skills: Sparkles, connectors: Plug, plugins: Blocks } as const; |
| 12 | |
| 13 | /** |
| 14 | * Customize: what shapes how this workspace's agents work. Skills are what |
| 15 | * they know how to do, Connectors what they can reach, Plugins what adds |
| 16 | * to the workspace. It replaces the Marketplace. |
| 17 | */ |
| 18 | export default function Customize() { |
| 19 | const { workspace } = useSignedIn(); |
| 20 | const colors = useColors(); |
| 21 | const slug = workspace?.slug ?? ""; |
| 22 | return ( |
| 23 | <Screen> |
| 24 | <Stack.Screen options={{ title: "Customize" }} /> |
| 25 | <View style={{ padding: space.lg }}> |
| 26 | <Text tone="muted">Skills, connectors and plugins for {workspace?.name ?? slug}. Owners add them; anyone else asks an owner.</Text> |
| 27 | </View> |
| 28 | {CUSTOMIZE_SECTIONS.map((section) => { |
| 29 | const Icon = ICONS[section]; |
| 30 | const count = customizeItems(section, slug).length; |
| 31 | return ( |
| 32 | <Row |
| 33 | key={section} |
| 34 | leading={<Icon size={22} color={colors.accent} />} |
| 35 | title={`${CUSTOMIZE[section].title} · ${count}`} |
| 36 | subtitle={CUSTOMIZE[section].description} |
| 37 | onPress={() => router.push({ pathname: "/customize/[section]", params: { section } })} |
| 38 | /> |
| 39 | ); |
| 40 | })} |
| 41 | </Screen> |
| 42 | ); |
| 43 | } |