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