frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Loading } from "@/components/primitives/Loading";
2import { Text } from "@/components/primitives/Text";
3import { AddChannelModalContent } from "@/components/Settings/AddChannelModalContent";
4import { ChannelInfo } from "@/components/Settings/ChannelInfo";
5import { useFacet } from "@/lib/facet";
6import { fade, lighten } from "@/lib/facet/src/lib/colors";
7import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
8import { useCurrentPalette } from "@/providers/ThemeProvider";
9import { useChannelsQuery } from "@/queries/hooks/useChannelsQuery";
10import { MessagesSquare, Plus } from "lucide-react-native";
11import { useState } from "react";
12import { Modal, Pressable, View } from "react-native";
13
14export const ChannelSettings = () => {
15 const { atoms, typography } = useFacet();
16 const { semantic } = useCurrentPalette();
17 const session = useOAuthSessionGuaranteed();
18 const [showAddModal, setShowAddModal] = useState(false);
19 const { useQuery } = useChannelsQuery(session);
20
21 const { isLoading, data: channels } = useQuery();
22
23 return isLoading ? (
24 <Loading />
25 ) : (
26 <View
27 style={{
28 borderWidth: 1,
29 borderColor: semantic.borderVariant,
30 borderRadius: atoms.radii.lg,
31 padding: 12,
32 paddingVertical: 16,
33 gap: 16,
34 width: "50%",
35 }}
36 >
37 <View
38 style={{
39 flexDirection: "row",
40 alignItems: "center",
41 marginLeft: 6,
42 gap: 6,
43 }}
44 >
45 <MessagesSquare height={20} width={20} color={semantic.text} />
46 <Text
47 style={[
48 typography.weights.byName.medium,
49 typography.sizes.xl,
50 ]}
51 >
52 Channels
53 </Text>
54 </View>
55 {channels && channels.length > 0 && (
56 <View
57 style={{
58 gap: 4,
59 marginLeft: 8,
60 }}
61 >
62 {channels.map((channel, idx) => (
63 <ChannelInfo key={idx} channel={channel} />
64 ))}
65 </View>
66 )}
67 <View>
68 <Pressable
69 style={{ alignSelf: "flex-start", marginLeft: 10 }}
70 onPress={() => {
71 setShowAddModal(true);
72 }}
73 >
74 {({ hovered }) => (
75 <View
76 style={{
77 flexDirection: "row",
78 alignItems: "center",
79
80 gap: 4,
81 backgroundColor: hovered
82 ? lighten(semantic.primary, 7)
83 : semantic.primary,
84 alignSelf: "flex-start",
85 padding: 8,
86 paddingRight: 12,
87 borderRadius: atoms.radii.md,
88 }}
89 >
90 <Plus
91 height={16}
92 width={16}
93 color={semantic.textInverse}
94 />
95 <Text
96 style={[
97 typography.weights.byName.normal,
98 { color: semantic.textInverse },
99 ]}
100 >
101 Add
102 </Text>
103 </View>
104 )}
105 </Pressable>
106 <Modal
107 visible={showAddModal}
108 onRequestClose={() => {
109 setShowAddModal(!showAddModal);
110 }}
111 animationType="fade"
112 transparent={true}
113 >
114 <Pressable
115 style={{
116 flex: 1,
117 cursor: "auto",
118 alignItems: "center",
119 justifyContent: "center",
120 backgroundColor: fade(
121 semantic.backgroundDarker,
122 60,
123 ),
124 }}
125 onPress={() => {
126 setShowAddModal(false);
127 }}
128 >
129 <Pressable
130 style={{
131 alignSelf: "center",
132 cursor: "auto",
133 }}
134 onPress={(e) => {
135 e.stopPropagation();
136 }}
137 >
138 <AddChannelModalContent
139 setShowAddModal={setShowAddModal}
140 />
141 </Pressable>
142 </Pressable>
143 </Modal>
144 </View>
145 </View>
146 );
147};