1import {
2 background,
3 border,
4 border_color,
5 foreground,
6 text,
7} from "./components"
8import { interactive, toggleable } from "../element"
9import { useTheme } from "../theme"
10import collab_modals from "./collab_modals"
11import { text_button } from "../component/text_button"
12import { toggleable_icon_button } from "../component/icon_button"
13import { indicator } from "../component/indicator"
14
15export default function contacts_panel(): any {
16 const theme = useTheme()
17
18 const NAME_MARGIN = 6 as const
19 const SPACING = 12 as const
20 const INDENT_SIZE = 8 as const
21 const ITEM_HEIGHT = 28 as const
22
23 const layer = theme.middle
24
25 const contact_button = {
26 background: background(layer, "on"),
27 color: foreground(layer, "on"),
28 icon_width: 14,
29 button_width: 16,
30 corner_radius: 8,
31 }
32
33 const project_row = {
34 guest_avatar_spacing: 4,
35 height: 24,
36 guest_avatar: {
37 corner_radius: 8,
38 width: 14,
39 },
40 name: {
41 ...text(layer, "ui_sans", { size: "sm" }),
42 margin: {
43 left: NAME_MARGIN,
44 right: 4,
45 },
46 },
47 guests: {
48 margin: {
49 left: NAME_MARGIN,
50 right: NAME_MARGIN,
51 },
52 },
53 padding: {
54 left: SPACING,
55 right: SPACING,
56 },
57 }
58
59 const icon_style = {
60 color: foreground(layer, "variant"),
61 width: 14,
62 }
63
64 const header_icon_button = toggleable_icon_button(theme, {
65 layer: theme.middle,
66 variant: "ghost",
67 })
68
69 const subheader_row = toggleable({
70 base: interactive({
71 base: {
72 ...text(layer, "ui_sans", { size: "sm" }),
73 padding: {
74 left: SPACING,
75 right: SPACING,
76 },
77 },
78 state: {
79 hovered: {
80 background: background(layer, "hovered"),
81 },
82 clicked: {
83 background: background(layer, "pressed"),
84 },
85 },
86 }),
87 state: {
88 active: {
89 default: {
90 ...text(layer, "ui_sans", "active", { size: "sm" }),
91 background: background(layer, "active"),
92 },
93 clicked: {
94 background: background(layer, "pressed"),
95 },
96 },
97 },
98 })
99
100 const filter_input = {
101 background: background(layer, "on"),
102 corner_radius: 6,
103 text: text(layer, "ui_sans", "base"),
104 placeholder_text: text(layer, "ui_sans", "base", "disabled", {
105 size: "xs",
106 }),
107 selection: theme.players[0],
108 border: border(layer, "on"),
109 padding: {
110 bottom: 4,
111 left: 8,
112 right: 8,
113 top: 4,
114 },
115 margin: {
116 left: SPACING,
117 right: SPACING,
118 },
119 }
120
121 return {
122 ...collab_modals(),
123 log_in_button: text_button(),
124 background: background(layer),
125 padding: {
126 top: SPACING,
127 },
128 user_query_editor: filter_input,
129 channel_hash: icon_style,
130 user_query_editor_height: 33,
131 add_contact_button: header_icon_button,
132 add_channel_button: header_icon_button,
133 leave_call_button: header_icon_button,
134 row_height: ITEM_HEIGHT,
135 channel_indent: INDENT_SIZE,
136 section_icon_size: 14,
137 header_row: {
138 ...text(layer, "ui_sans", { size: "sm", weight: "bold" }),
139 margin: { top: SPACING },
140 padding: {
141 left: SPACING,
142 right: SPACING,
143 },
144 },
145 subheader_row,
146 leave_call: interactive({
147 base: {
148 background: background(layer),
149 border: border(layer),
150 corner_radius: 6,
151 margin: {
152 top: 1,
153 },
154 padding: {
155 top: 1,
156 bottom: 1,
157 left: 7,
158 right: 7,
159 },
160 ...text(layer, "sans", "variant", { size: "xs" }),
161 },
162 state: {
163 hovered: {
164 ...text(layer, "sans", "hovered", { size: "xs" }),
165 background: background(layer, "hovered"),
166 border: border(layer, "hovered"),
167 },
168 },
169 }),
170 contact_row: toggleable({
171 base: interactive({
172 base: {
173 padding: {
174 left: SPACING,
175 right: SPACING,
176 },
177 },
178 state: {
179 clicked: {
180 background: background(layer, "pressed"),
181 },
182 },
183 }),
184 state: {
185 inactive: {
186 hovered: {
187 background: background(layer, "hovered"),
188 },
189 },
190 active: {
191 default: {
192 ...text(layer, "ui_sans", "active", { size: "sm" }),
193 background: background(layer, "active"),
194 },
195 clicked: {
196 background: background(layer, "pressed"),
197 },
198 },
199 },
200 }),
201 list_empty_label_container: {
202 margin: {
203 left: NAME_MARGIN,
204 }
205 },
206 list_empty_icon: {
207 color: foreground(layer, "variant"),
208 width: 14,
209 },
210 list_empty_state: toggleable({
211 base: interactive({
212 base: {
213 ...text(layer, "ui_sans", "variant", { size: "sm" }),
214 padding: {
215 top: SPACING / 2,
216 bottom: SPACING / 2,
217 left: SPACING,
218 right: SPACING
219 },
220 },
221 state: {
222 clicked: {
223 background: background(layer, "pressed"),
224 },
225 },
226 }),
227 state: {
228 inactive: {
229 hovered: {
230 background: background(layer, "hovered"),
231 },
232 },
233 active: {
234 default: {
235 ...text(layer, "ui_sans", "active", { size: "sm" }),
236 background: background(layer, "active"),
237 },
238 clicked: {
239 background: background(layer, "pressed"),
240 },
241 },
242 },
243 }),
244 contact_avatar: {
245 corner_radius: 10,
246 width: 20,
247 },
248 contact_status_free: indicator({ layer, color: "positive" }),
249 contact_status_busy: indicator({ layer, color: "negative" }),
250 contact_username: {
251 ...text(layer, "ui_sans", { size: "sm" }),
252 margin: {
253 left: NAME_MARGIN,
254 },
255 },
256 contact_button_spacing: NAME_MARGIN,
257 contact_button: interactive({
258 base: { ...contact_button },
259 state: {
260 hovered: {
261 background: background(layer, "hovered"),
262 },
263 },
264 }),
265 disabled_button: {
266 ...contact_button,
267 background: background(layer, "on"),
268 color: foreground(layer, "on"),
269 },
270 calling_indicator: {
271 ...text(layer, "mono", "variant", { size: "xs" }),
272 },
273 tree_branch: toggleable({
274 base: interactive({
275 base: {
276 color: border_color(layer),
277 width: 1,
278 },
279 state: {
280 hovered: {
281 color: border_color(layer),
282 },
283 },
284 }),
285 state: {
286 active: {
287 default: {
288 color: border_color(layer),
289 },
290 },
291 },
292 }),
293 project_row: toggleable({
294 base: interactive({
295 base: {
296 ...project_row,
297 icon: {
298 margin: { left: NAME_MARGIN },
299 color: foreground(layer, "variant"),
300 width: 14,
301 },
302 name: {
303 ...project_row.name,
304 ...text(layer, "mono", { size: "sm" }),
305 },
306 },
307 state: {
308 hovered: {
309 background: background(layer, "hovered"),
310 },
311 },
312 }),
313 state: {
314 active: {
315 default: { background: background(layer, "active") },
316 },
317 },
318 }),
319 face_overlap: 8,
320 channel_editor: {
321 padding: {
322 left: NAME_MARGIN,
323 }
324 }
325 }
326}