1import { background, border, foreground, text } from "./components"
2import { interactive, toggleable } from "../element"
3import { useTheme } from "../common"
4import { text_button } from "../component/text_button"
5
6export default function status_bar(): any {
7 const theme = useTheme()
8
9 const layer = theme.lowest
10
11 const status_container = {
12 corner_radius: 6,
13 padding: { top: 3, bottom: 3, left: 6, right: 6 },
14 }
15
16 const diagnostic_status_container = {
17 corner_radius: 6,
18 padding: { top: 1, bottom: 1, left: 6, right: 6 },
19 }
20
21 return {
22 height: 30,
23 item_spacing: 8,
24 padding: {
25 top: 1,
26 bottom: 1,
27 left: 6,
28 right: 6,
29 },
30 border: border(layer, { top: true, overlay: true }),
31 cursor_position: text(layer, "sans", "base", { size: "xs" }),
32 vim_mode_indicator: {
33 margin: { left: 6 },
34 ...text(layer, "mono", "base", { size: "xs" }),
35 },
36 active_language: text_button({
37 color: "base",
38 }),
39 auto_update_progress_message: text(layer, "sans", "base", {
40 size: "xs",
41 }),
42 auto_update_done_message: text(layer, "sans", "base", { size: "xs" }),
43 lsp_status: interactive({
44 base: {
45 ...diagnostic_status_container,
46 icon_spacing: 4,
47 icon_width: 14,
48 height: 18,
49 message: text(layer, "sans", { size: "xs" }),
50 icon_color: foreground(layer),
51 },
52 state: {
53 hovered: {
54 message: text(layer, "sans", { size: "xs" }),
55 icon_color: foreground(layer),
56 background: background(layer, "hovered"),
57 },
58 },
59 }),
60 diagnostic_message: interactive({
61 base: {
62 ...text(layer, "sans", { size: "xs" }),
63 },
64 state: { hovered: text(layer, "sans", "hovered", { size: "xs" }) },
65 }),
66 diagnostic_summary: interactive({
67 base: {
68 height: 20,
69 icon_width: 14,
70 icon_spacing: 2,
71 summary_spacing: 6,
72 text: text(layer, "sans", { size: "sm" }),
73 icon_color_ok: foreground(layer, "base"),
74 icon_color_warning: foreground(layer, "warning"),
75 icon_color_error: foreground(layer, "negative"),
76 container_ok: {
77 corner_radius: 6,
78 padding: { top: 2, bottom: 2, left: 6, right: 6 },
79 },
80 container_warning: diagnostic_status_container,
81 container_error: diagnostic_status_container,
82 },
83 state: {
84 hovered: {
85 icon_color_ok: foreground(layer, "on"),
86 container_ok: {
87 background: background(layer, "hovered"),
88 },
89 container_warning: {
90 background: background(layer, "hovered"),
91 },
92 container_error: {
93 background: background(layer, "hovered"),
94 },
95 },
96 clicked: {
97 icon_color_ok: foreground(layer, "on"),
98 container_ok: {
99 background: background(layer, "pressed"),
100 },
101 container_warning: {
102 background: background(layer, "pressed"),
103 },
104 container_error: {
105 background: background(layer, "pressed"),
106 },
107 },
108 },
109 }),
110 panel_buttons: {
111 group_left: {},
112 group_bottom: {},
113 group_right: {},
114 button: toggleable({
115 base: interactive({
116 base: {
117 ...status_container,
118 icon_size: 14,
119 icon_color: foreground(layer, "base"),
120 background: background(layer, "default"),
121 label: {
122 margin: { left: 6 },
123 ...text(layer, "sans", { size: "xs" }),
124 },
125 },
126 state: {
127 hovered: {
128 background: background(layer, "hovered"),
129 },
130 clicked: {
131 background: background(layer, "pressed"),
132 },
133 },
134 }),
135 state: {
136 active: {
137 default: {
138 icon_color: foreground(layer, "accent", "default"),
139 background: background(layer, "default"),
140 },
141 hovered: {
142 icon_color: foreground(layer, "accent", "hovered"),
143 background: background(layer, "hovered"),
144 },
145 clicked: {
146 icon_color: foreground(layer, "accent", "pressed"),
147 background: background(layer, "pressed"),
148 },
149 },
150 },
151 }),
152 badge: {
153 corner_radius: 3,
154 padding: 2,
155 margin: { bottom: -1, right: -1 },
156 border: border(layer),
157 background: background(layer, "accent"),
158 },
159 },
160 }
161}