1import {
2 background,
3 border,
4 text,
5} from "./components"
6import { icon_button } from "../component/icon_button"
7import { useTheme } from "../theme"
8import { interactive } from "../element"
9
10export default function chat_panel(): any {
11 const theme = useTheme()
12 const layer = theme.middle
13
14 const SPACING = 12 as const
15
16 const channel_name = {
17 padding: {
18 left: SPACING,
19 right: SPACING,
20 top: 4,
21 bottom: 4,
22 },
23 hash: {
24 ...text(layer, "sans", "base"),
25 },
26 name: text(layer, "sans", "base"),
27 }
28
29 return {
30 background: background(layer),
31 avatar: {
32 icon_width: 24,
33 icon_height: 24,
34 corner_radius: 4,
35 outer_width: 24,
36 outer_corner_radius: 16,
37 },
38 avatar_container: {
39 padding: {
40 right: 6,
41 left: 2,
42 top: 2,
43 bottom: 2,
44 }
45 },
46 list: {
47
48 },
49 channel_select: {
50 header: {
51 ...channel_name,
52 border: border(layer, { bottom: true })
53 },
54 item: channel_name,
55 active_item: {
56 ...channel_name,
57 background: background(layer, "on", "active"),
58 },
59 hovered_item: {
60 ...channel_name,
61 background: background(layer, "on", "hovered"),
62 },
63 menu: {
64 background: background(layer, "on"),
65 border: border(layer, { bottom: true })
66 }
67 },
68 icon_button: icon_button({
69 variant: "ghost",
70 color: "variant",
71 size: "sm",
72 }),
73 input_editor: {
74 background: background(layer, "on"),
75 corner_radius: 6,
76 text: text(layer, "sans", "base"),
77 placeholder_text: text(layer, "sans", "base", "disabled", {
78 size: "xs",
79 }),
80 selection: theme.players[0],
81 border: border(layer, "on"),
82 margin: {
83 left: SPACING,
84 right: SPACING,
85 bottom: SPACING,
86 },
87 padding: {
88 bottom: 4,
89 left: 8,
90 right: 8,
91 top: 4,
92 },
93 },
94 message: {
95 ...interactive({
96 base: {
97 margin: { top: SPACING },
98 padding: {
99 top: 4,
100 bottom: 4,
101 left: SPACING / 2,
102 right: SPACING / 3,
103 }
104 },
105 state: {
106 hovered: {
107 background: background(layer, "hovered"),
108 },
109 },
110 }),
111 body: text(layer, "sans", "base"),
112 sender: {
113 margin: {
114 right: 8,
115 },
116 ...text(layer, "sans", "base", { weight: "bold" }),
117 },
118 timestamp: text(layer, "sans", "base", "disabled"),
119 },
120 last_message_bottom_spacing: SPACING,
121 continuation_message: {
122 body: text(layer, "sans", "base"),
123 sender: {
124 margin: {
125 right: 8,
126 },
127 ...text(layer, "sans", "base", { weight: "bold" }),
128 },
129 timestamp: text(layer, "sans", "base", "disabled"),
130 ...interactive({
131 base: {
132 padding: {
133 top: 4,
134 bottom: 4,
135 left: SPACING / 2,
136 right: SPACING / 3,
137 }
138 },
139 state: {
140 hovered: {
141 background: background(layer, "hovered"),
142 },
143 },
144 }),
145 },
146 pending_message: {
147 body: text(layer, "sans", "base"),
148 sender: {
149 margin: {
150 right: 8,
151 },
152 ...text(layer, "sans", "base", "disabled"),
153 },
154 timestamp: text(layer, "sans", "base"),
155 ...interactive({
156 base: {
157 padding: {
158 top: 4,
159 bottom: 4,
160 left: SPACING / 2,
161 right: SPACING / 3,
162 }
163 },
164 state: {
165 hovered: {
166 background: background(layer, "hovered"),
167 },
168 },
169 }),
170 },
171 sign_in_prompt: {
172 default: text(layer, "sans", "base"),
173 }
174 }
175}