1import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollView";
2import { useAtomSet, useAtomValue } from "@effect/atom-react";
3import type { SidebarProjectGroupingMode } from "@t3tools/contracts";
4import { AsyncResult } from "effect/reactivity";
5import { useSafeAreaInsets } from "react-native-safe-area-context";
6
7import { SettingsScreen } from "./components/SettingsScreen";
8import {
9 mobileProjectGroupingModePatch,
10 resolveMobileProjectGroupingSettings,
11} from "../../state/project-grouping";
12import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
13import { SettingsChoiceRow } from "./components/SettingsChoiceRow";
14import { SettingsSection } from "./components/SettingsSection";
15
16const GROUPING_OPTIONS: ReadonlyArray<{
17 readonly mode: SidebarProjectGroupingMode;
18 readonly label: string;
19 readonly description: string;
20}> = [
21 {
22 mode: "repository",
23 label: "Group by repository",
24 description: "Matching repositories appear as one project.",
25 },
26 {
27 mode: "repository_path",
28 label: "Group by repository path",
29 description: "Keep monorepo paths separate.",
30 },
31 {
32 mode: "separate",
33 label: "Keep separate",
34 description: "Show every workspace as its own project.",
35 },
36];
37
38export function SettingsProjectGroupingRouteScreen() {
39 const insets = useSafeAreaInsets();
40 const preferencesResult = useAtomValue(mobilePreferencesAtom);
41 const savePreferences = useAtomSet(updateMobilePreferencesAtom);
42 const preferencesReady = AsyncResult.isSuccess(preferencesResult) && !preferencesResult.waiting;
43 const selectedMode = AsyncResult.isSuccess(preferencesResult)
44 ? resolveMobileProjectGroupingSettings(preferencesResult.value).sidebarProjectGroupingMode
45 : null;
46
47 return (
48 <SettingsScreen title="Organization">
49 <ScrollView
50 contentInsetAdjustmentBehavior="automatic"
51 showsVerticalScrollIndicator={false}
52 className="flex-1"
53 contentContainerClassName="gap-3 px-5 pt-4"
54 contentContainerStyle={{ paddingBottom: Math.max(insets.bottom, 18) + 18 }}
55 >
56 <SettingsSection title="Project grouping">
57 {GROUPING_OPTIONS.map((option, index) => (
58 <SettingsChoiceRow
59 key={option.mode}
60 label={option.label}
61 description={option.description}
62 selected={selectedMode === option.mode}
63 separated={index > 0}
64 disabled={!preferencesReady}
65 onPress={() => savePreferences(mobileProjectGroupingModePatch(option.mode))}
66 />
67 ))}
68 </SettingsSection>
69 </ScrollView>
70 </SettingsScreen>
71 );
72}