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