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