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 mention_highlight: { weight: 'bold' },
95 message: {
96 ...interactive({
97 base: {
98 margin: { top: SPACING },
99 padding: {
100 top: 4,
101 bottom: 4,
102 left: SPACING / 2,
103 right: SPACING / 3,
104 }
105 },
106 state: {
107 hovered: {
108 background: background(layer, "hovered"),
109 },
110 },
111 }),
112 body: text(layer, "sans", "base"),
113 sender: {
114 margin: {
115 right: 8,
116 },
117 ...text(layer, "sans", "base", { weight: "bold" }),
118 },
119 timestamp: text(layer, "sans", "base", "disabled"),
120 },
121 last_message_bottom_spacing: SPACING,
122 continuation_message: {
123 body: text(layer, "sans", "base"),
124 sender: {
125 margin: {
126 right: 8,
127 },
128 ...text(layer, "sans", "base", { weight: "bold" }),
129 },
130 timestamp: text(layer, "sans", "base", "disabled"),
131 ...interactive({
132 base: {
133 padding: {
134 top: 4,
135 bottom: 4,
136 left: SPACING / 2,
137 right: SPACING / 3,
138 }
139 },
140 state: {
141 hovered: {
142 background: background(layer, "hovered"),
143 },
144 },
145 }),
146 },
147 pending_message: {
148 body: text(layer, "sans", "base"),
149 sender: {
150 margin: {
151 right: 8,
152 },
153 ...text(layer, "sans", "base", "disabled"),
154 },
155 timestamp: text(layer, "sans", "base"),
156 ...interactive({
157 base: {
158 padding: {
159 top: 4,
160 bottom: 4,
161 left: SPACING / 2,
162 right: SPACING / 3,
163 }
164 },
165 state: {
166 hovered: {
167 background: background(layer, "hovered"),
168 },
169 },
170 }),
171 },
172 sign_in_prompt: {
173 default: text(layer, "sans", "base"),
174 }
175 }
176}