Add channels panel with stubbed out information

co-authored-by: nate <nate@zed.dev>

styles/src/style_tree/app.ts

@@ -24,6 +24,7 @@ import { titlebar } from "./titlebar"
 import editor from "./editor"
 import feedback from "./feedback"
 import { useTheme } from "../common"
+import channels_panel from "./channels_panel"
 
 export default function app(): any {
     const theme = useTheme()
@@ -46,6 +47,7 @@ export default function app(): any {
         editor: editor(),
         project_diagnostics: project_diagnostics(),
         project_panel: project_panel(),
+        channels_panel: channels_panel(),
         contacts_popover: contacts_popover(),
         contact_finder: contact_finder(),
         contact_list: contact_list(),

styles/src/style_tree/channels_panel.ts

@@ -0,0 +1,68 @@
+// import { with_opacity } from "../theme/color"
+import {
+    //     Border,
+    //     TextStyle,
+    // background,
+    //     border,
+    foreground,
+    text,
+} from "./components"
+import { interactive, toggleable } from "../element"
+// import merge from "ts-deepmerge"
+import { useTheme } from "../theme"
+export default function channels_panel(): any {
+    const theme = useTheme()
+
+    // const { is_light } = theme
+
+    return {
+        spacing: 10,
+        channel_tree: {
+            channel_indent: 10,
+            channel_name: text(theme.middle, "sans", "variant", { size: "md" }),
+            root_name: text(theme.middle, "sans", "variant", { size: "lg", weight: "bold" }),
+            channel_icon: (() => {
+                const base_icon = (asset: any, color: any) => {
+                    return {
+                        icon: {
+                            color,
+                            asset,
+                            dimensions: {
+                                width: 12,
+                                height: 12,
+                            }
+                        },
+                        container: {
+                            corner_radius: 4,
+                            padding: {
+                                top: 4, bottom: 4, left: 4, right: 4
+                            },
+                            margin: {
+                                right: 4,
+                            },
+                        }
+                    }
+                }
+
+                return toggleable({
+                    state: {
+                        inactive: interactive({
+                            state: {
+                                default: base_icon("icons/chevron_right_8.svg", foreground(theme.middle, "variant")),
+                                hovered: base_icon("icons/chevron_right_8.svg", foreground(theme.middle, "hovered")),
+                                clicked: base_icon("icons/chevron_right_8.svg", foreground(theme.middle, "active")),
+                            },
+                        }),
+                        active: interactive({
+                            state: {
+                                default: base_icon("icons/chevron_down_8.svg", foreground(theme.highest, "variant")),
+                                hovered: base_icon("icons/chevron_down_8.svg", foreground(theme.highest, "hovered")),
+                                clicked: base_icon("icons/chevron_down_8.svg", foreground(theme.highest, "active")),
+                            },
+                        }),
+                    },
+                })
+            })(),
+        }
+    }
+}