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 { icon_button, toggleable_icon_button } from "../component/icon_button"
12import { indicator } from "../component/indicator"
13
14export default function contacts_panel(): any {
15 const theme = useTheme()
16
17 const NAME_MARGIN = 6 as const
18 const SPACING = 12 as const
19 const INDENT_SIZE = 8 as const
20 const ITEM_HEIGHT = 28 as const
21
22 const layer = theme.middle
23
24 const contact_button = {
25 background: background(layer, "on"),
26 color: foreground(layer, "on"),
27 icon_width: 14,
28 button_width: 16,
29 corner_radius: 8
30 }
31
32 const project_row = {
33 guest_avatar_spacing: 4,
34 height: 24,
35 guest_avatar: {
36 corner_radius: 8,
37 width: 14,
38 },
39 name: {
40 ...text(layer, "sans", { size: "sm" }),
41 margin: {
42 left: NAME_MARGIN,
43 right: 4,
44 },
45 },
46 guests: {
47 margin: {
48 left: NAME_MARGIN,
49 right: NAME_MARGIN,
50 },
51 },
52 padding: {
53 left: SPACING,
54 right: SPACING,
55 },
56 }
57
58 const icon_style = {
59 color: foreground(layer, "variant"),
60 width: 14,
61 }
62
63 const header_icon_button = toggleable_icon_button(theme, {
64 variant: "ghost",
65 size: "sm",
66 active_layer: theme.lowest,
67 })
68
69 const subheader_row = toggleable({
70 base: interactive({
71 base: {
72 ...text(layer, "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(theme.lowest, "sans", { size: "sm" }),
91 background: background(theme.lowest),
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, "sans", "base"),
104 placeholder_text: text(layer, "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 const item_row = toggleable({
122 base: interactive({
123 base: {
124 padding: {
125 left: SPACING,
126 right: SPACING,
127 },
128 },
129 state: {
130 clicked: {
131 background: background(layer, "pressed"),
132 },
133 },
134 }),
135 state: {
136 inactive: {
137 hovered: {
138 background: background(layer, "hovered"),
139 },
140 },
141 active: {
142 default: {
143 ...text(theme.lowest, "sans", { size: "sm" }),
144 background: background(theme.lowest),
145 },
146 clicked: {
147 background: background(layer, "pressed"),
148 },
149 },
150 },
151 })
152
153 return {
154 ...collab_modals(),
155 log_in_button: interactive({
156 base: {
157 background: background(theme.middle),
158 border: border(theme.middle, "active"),
159 corner_radius: 4,
160 margin: {
161 top: 4,
162 left: 16,
163 right: 16,
164 },
165 padding: {
166 top: 3,
167 bottom: 3,
168 left: 7,
169 right: 7,
170 },
171 ...text(theme.middle, "sans", "default", { size: "sm" }),
172 },
173 state: {
174 hovered: {
175 ...text(theme.middle, "sans", "default", { size: "sm" }),
176 background: background(theme.middle, "hovered"),
177 border: border(theme.middle, "active"),
178 },
179 clicked: {
180 ...text(theme.middle, "sans", "default", { size: "sm" }),
181 background: background(theme.middle, "pressed"),
182 border: border(theme.middle, "active"),
183 },
184 },
185 }),
186 background: background(layer),
187 padding: {
188 top: SPACING,
189 },
190 user_query_editor: filter_input,
191 channel_hash: icon_style,
192 user_query_editor_height: 33,
193 add_contact_button: header_icon_button,
194 add_channel_button: header_icon_button,
195 leave_call_button: header_icon_button,
196 row_height: ITEM_HEIGHT,
197 channel_indent: INDENT_SIZE * 2,
198 section_icon_size: 14,
199 header_row: {
200 ...text(layer, "sans", { size: "sm", weight: "bold" }),
201 margin: { top: SPACING },
202 padding: {
203 left: SPACING,
204 right: SPACING,
205 },
206 },
207 subheader_row,
208 leave_call: interactive({
209 base: {
210 background: background(layer),
211 border: border(layer),
212 corner_radius: 6,
213 margin: {
214 top: 1,
215 },
216 padding: {
217 top: 1,
218 bottom: 1,
219 left: 7,
220 right: 7,
221 },
222 ...text(layer, "sans", "variant", { size: "xs" }),
223 },
224 state: {
225 hovered: {
226 ...text(layer, "sans", "hovered", { size: "xs" }),
227 background: background(layer, "hovered"),
228 border: border(layer, "hovered"),
229 },
230 },
231 }),
232 contact_row: toggleable({
233 base: interactive({
234 base: {
235 padding: {
236 left: SPACING,
237 right: SPACING,
238 },
239 },
240 state: {
241 clicked: {
242 background: background(layer, "pressed"),
243 },
244 },
245 }),
246 state: {
247 inactive: {
248 hovered: {
249 background: background(layer, "hovered"),
250 },
251 },
252 active: {
253 default: {
254 ...text(theme.lowest, "sans", { size: "sm" }),
255 background: background(theme.lowest),
256 },
257 clicked: {
258 background: background(layer, "pressed"),
259 },
260 },
261 },
262 }),
263 channel_row: item_row,
264 channel_name: {
265 ...text(layer, "sans", { size: "sm" }),
266 margin: {
267 left: NAME_MARGIN,
268 },
269 },
270 list_empty_label_container: {
271 margin: {
272 left: NAME_MARGIN,
273 }
274 },
275 list_empty_icon: {
276 color: foreground(layer, "variant"),
277 width: 14,
278 },
279 list_empty_state: toggleable({
280 base: interactive({
281 base: {
282 ...text(layer, "sans", "variant", { size: "sm" }),
283 padding: {
284 top: SPACING / 2,
285 bottom: SPACING / 2,
286 left: SPACING,
287 right: SPACING
288 },
289 },
290 state: {
291 clicked: {
292 background: background(layer, "pressed"),
293 },
294 },
295 }),
296 state: {
297 inactive: {
298 hovered: {
299 background: background(layer, "hovered"),
300 },
301 },
302 active: {
303 default: {
304 ...text(theme.lowest, "sans", { size: "sm" }),
305 background: background(theme.lowest),
306 },
307 clicked: {
308 background: background(layer, "pressed"),
309 },
310 },
311 },
312 }),
313 contact_avatar: {
314 corner_radius: 10,
315 width: 20,
316 },
317 channel_avatar: {
318 corner_radius: 10,
319 width: 20,
320 },
321 extra_participant_label: {
322 corner_radius: 10,
323 padding: {
324 left: 10,
325 right: 4,
326 },
327 background: background(layer, "hovered"),
328 ...text(layer, "sans", "hovered", { size: "xs" })
329 },
330 contact_status_free: indicator({ layer, color: "positive" }),
331 contact_status_busy: indicator({ layer, color: "negative" }),
332 contact_username: {
333 ...text(layer, "sans", { size: "sm" }),
334 margin: {
335 left: NAME_MARGIN,
336 },
337 },
338 contact_button_spacing: NAME_MARGIN,
339 contact_button: icon_button({
340 variant: "ghost",
341 color: "variant",
342 size: "sm",
343 }),
344 disabled_button: {
345 ...contact_button,
346 background: background(layer, "on"),
347 color: foreground(layer, "on"),
348 },
349 calling_indicator: {
350 ...text(layer, "mono", "variant", { size: "xs" }),
351 },
352 tree_branch: toggleable({
353 base: interactive({
354 base: {
355 color: border_color(layer),
356 width: 1,
357 },
358 state: {
359 hovered: {
360 color: border_color(layer),
361 },
362 },
363 }),
364 state: {
365 active: {
366 default: {
367 color: border_color(layer),
368 },
369 },
370 },
371 }),
372 project_row: toggleable({
373 base: interactive({
374 base: {
375 ...project_row,
376 icon: {
377 margin: { left: NAME_MARGIN },
378 color: foreground(layer, "variant"),
379 width: 14,
380 },
381 name: {
382 ...project_row.name,
383 ...text(layer, "mono", { size: "sm" }),
384 },
385 },
386 state: {
387 hovered: {
388 background: background(layer, "hovered"),
389 },
390 },
391 }),
392 state: {
393 active: {
394 default: { background: background(theme.lowest) },
395 },
396 },
397 }),
398 face_overlap: 8,
399 channel_editor: {
400 padding: {
401 left: NAME_MARGIN,
402 }
403 }
404 }
405}