Restore chat functionality with a very rough UI

styles/src/style_tree/app.ts

@@ -12,6 +12,7 @@ import simple_message_notification from "./simple_message_notification"
 import project_shared_notification from "./project_shared_notification"
 import tooltip from "./tooltip"
 import terminal from "./terminal"
+import chat_panel from "./chat_panel"
 import collab_panel from "./collab_panel"
 import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
 import incoming_call_notification from "./incoming_call_notification"
@@ -55,6 +56,7 @@ export default function app(): any {
         terminal: terminal(),
         assistant: assistant(),
         feedback: feedback(),
+        chat_panel: chat_panel(),
         component_test: component_test(),
     }
 }

styles/src/style_tree/chat_panel.ts

@@ -0,0 +1,111 @@
+import {
+    background,
+    border,
+    border_color,
+    foreground,
+    text,
+} from "./components"
+import { interactive, toggleable } from "../element"
+import { useTheme } from "../theme"
+import collab_modals from "./collab_modals"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
+import { indicator } from "../component/indicator"
+
+export default function contacts_panel(): any {
+    const theme = useTheme()
+
+    const CHANNEL_SPACING = 4 as const
+    const NAME_MARGIN = 6 as const
+    const SPACING = 12 as const
+    const INDENT_SIZE = 8 as const
+    const ITEM_HEIGHT = 28 as const
+
+    const layer = theme.middle
+
+    const input_editor = {
+        background: background(layer, "on"),
+        corner_radius: 6,
+        text: text(layer, "sans", "base"),
+        placeholder_text: text(layer, "sans", "base", "disabled", {
+            size: "xs",
+        }),
+        selection: theme.players[0],
+        border: border(layer, "on"),
+        padding: {
+            bottom: 4,
+            left: 8,
+            right: 8,
+            top: 4,
+        },
+        margin: {
+            left: SPACING,
+            right: SPACING,
+        },
+    }
+
+    const channel_name = {
+        padding: {
+            top: 4,
+            bottom: 4,
+            left: 4,
+            right: 4,
+        },
+        hash: {
+            ...text(layer, "sans", "base"),
+        },
+        name: text(layer, "sans", "base"),
+    }
+
+    return {
+        background: background(layer),
+        channel_select: {
+            header: channel_name,
+            item: channel_name,
+            active_item: channel_name,
+            hovered_item: channel_name,
+            hovered_active_item: channel_name,
+            menu: {
+                padding: {
+                    top: 10,
+                    bottom: 10,
+                }
+            }
+        },
+        input_editor,
+        message: {
+            body: text(layer, "sans", "base"),
+            sender: {
+                padding: {
+                    left: 4,
+                    right: 4,
+                },
+                ...text(layer, "sans", "base", "disabled"),
+            },
+            timestamp: text(layer, "sans", "base"),
+        },
+        pending_message: {
+            body: text(layer, "sans", "base"),
+            sender: {
+                padding: {
+                    left: 4,
+                    right: 4,
+                },
+                ...text(layer, "sans", "base", "disabled"),
+            },
+            timestamp: text(layer, "sans", "base"),
+        },
+        sign_in_prompt: {
+            default: text(layer, "sans", "base"),
+        },
+        timestamp: {
+            body: text(layer, "sans", "base"),
+            sender: {
+                padding: {
+                    left: 4,
+                    right: 4,
+                },
+                ...text(layer, "sans", "base", "disabled"),
+            }
+        }
+    }
+}