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