Restructure collab panel, make contact finder into a normal modal

styles/src/style_tree/app.ts

@@ -1,4 +1,3 @@
-import contacts_popover from "./contacts_popover"
 import command_palette from "./command_palette"
 import project_panel from "./project_panel"
 import search from "./search"
@@ -48,7 +47,6 @@ export default function app(): any {
         project_diagnostics: project_diagnostics(),
         project_panel: project_panel(),
         channels_panel: channels_panel(),
-        contacts_popover: contacts_popover(),
         collab_panel: collab_panel(),
         contact_finder: contact_finder(),
         toolbar_dropdown_menu: toolbar_dropdown_menu(),

styles/src/style_tree/collab_panel.ts

@@ -50,8 +50,10 @@ export default function contacts_panel(): any {
     }
 
     return {
-        // background: background(layer),
-        padding: { top: 12 },
+        background: background(layer),
+        padding: {
+            top: 12,
+        },
         user_query_editor: {
             background: background(layer, "on"),
             corner_radius: 6,
@@ -68,12 +70,17 @@ export default function contacts_panel(): any {
                 top: 4,
             },
             margin: {
-                left: 6,
+                left: side_padding,
+                right: side_padding,
             },
         },
         user_query_editor_height: 33,
         add_contact_button: {
-            margin: { left: 6, right: 12 },
+            color: foreground(layer, "on"),
+            button_width: 28,
+            icon_width: 16,
+        },
+        leave_call_button: {
             color: foreground(layer, "on"),
             button_width: 28,
             icon_width: 16,
@@ -83,13 +90,46 @@ export default function contacts_panel(): any {
         header_row: toggleable({
             base: interactive({
                 base: {
-                    ...text(layer, "mono", { size: "sm" }),
+                    ...text(layer, "mono", { size: "sm", weight: "bold" }),
                     margin: { top: 14 },
                     padding: {
                         left: side_padding,
                         right: side_padding,
                     },
-                    // background: background(layer, "default"), // posiewic: breaking change
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "active", { size: "sm" }),
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            },
+        }),
+        subheader_row: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "mono", { size: "sm" }),
+                    // margin: { top: 14 },
+                    padding: {
+                        left: side_padding,
+                        right: side_padding,
+                    },
                 },
                 state: {
                     hovered: {
@@ -139,25 +179,38 @@ export default function contacts_panel(): any {
                 },
             },
         }),
-        contact_row: {
-            inactive: {
-                default: {
+        contact_row: toggleable({
+            base: interactive({
+                base: {
                     padding: {
                         left: side_padding,
                         right: side_padding,
                     },
                 },
-            },
-            active: {
-                default: {
-                    background: background(layer, "active"),
-                    padding: {
-                        left: side_padding,
-                        right: side_padding,
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "active", { size: "sm" }),
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
                     },
                 },
             },
-        },
+        }),
         contact_avatar: {
             corner_radius: 10,
             width: 18,

styles/src/style_tree/contacts_popover.ts

@@ -4,13 +4,4 @@ import { background, border } from "./components"
 export default function contacts_popover(): any {
     const theme = useTheme()
 
-    return {
-        // background: background(theme.middle),
-        // corner_radius: 6,
-        padding: { top: 6, bottom: 6 },
-        // shadow: theme.popover_shadow,
-        border: border(theme.middle),
-        width: 300,
-        height: 400,
-    }
 }

styles/src/style_tree/titlebar.ts

@@ -178,6 +178,10 @@ export function titlebar(): any {
             left: 80,
             right: 0,
         },
+        menu: {
+            width: 300,
+            height: 400,
+        },
 
         // Project
         project_name_divider: text(theme.lowest, "sans", "variant"),