1import {
2 background,
3 border,
4 border_color,
5 foreground,
6 text,
7} from "./components"
8import { interactive, toggleable } from "../element"
9import { useTheme } from "../theme"
10import collab_modals from "./collab_modals"
11import { icon_button, toggleable_icon_button } from "../component/icon_button"
12import { indicator } from "../component/indicator"
13
14export default function contacts_panel(): any {
15 const theme = useTheme()
16
17 const CHANNEL_SPACING = 4 as const
18 const NAME_MARGIN = 6 as const
19 const SPACING = 12 as const
20 const INDENT_SIZE = 8 as const
21 const ITEM_HEIGHT = 28 as const
22
23 const layer = theme.middle
24
25 const input_editor = {
26 background: background(layer, "on"),
27 corner_radius: 6,
28 text: text(layer, "sans", "base"),
29 placeholder_text: text(layer, "sans", "base", "disabled", {
30 size: "xs",
31 }),
32 selection: theme.players[0],
33 border: border(layer, "on"),
34 padding: {
35 bottom: 4,
36 left: 8,
37 right: 8,
38 top: 4,
39 },
40 margin: {
41 left: SPACING,
42 right: SPACING,
43 },
44 }
45
46 const channel_name = {
47 padding: {
48 top: 4,
49 bottom: 4,
50 left: 4,
51 right: 4,
52 },
53 hash: {
54 ...text(layer, "sans", "base"),
55 },
56 name: text(layer, "sans", "base"),
57 }
58
59 return {
60 background: background(layer),
61 channel_select: {
62 header: channel_name,
63 item: channel_name,
64 active_item: channel_name,
65 hovered_item: channel_name,
66 hovered_active_item: channel_name,
67 menu: {
68 padding: {
69 top: 10,
70 bottom: 10,
71 }
72 }
73 },
74 input_editor,
75 message: {
76 body: text(layer, "sans", "base"),
77 sender: {
78 padding: {
79 left: 4,
80 right: 4,
81 },
82 ...text(layer, "sans", "base", "disabled"),
83 },
84 timestamp: text(layer, "sans", "base"),
85 },
86 pending_message: {
87 body: text(layer, "sans", "base"),
88 sender: {
89 padding: {
90 left: 4,
91 right: 4,
92 },
93 ...text(layer, "sans", "base", "disabled"),
94 },
95 timestamp: text(layer, "sans", "base"),
96 },
97 sign_in_prompt: {
98 default: text(layer, "sans", "base"),
99 },
100 timestamp: {
101 body: text(layer, "sans", "base"),
102 sender: {
103 padding: {
104 left: 4,
105 right: 4,
106 },
107 ...text(layer, "sans", "base", "disabled"),
108 }
109 }
110 }
111}