//! The Device panel, as T3 Code's: a thread's simulators and emulators in
//! the right panel, one tab per device. A tab without a device lists them to
//! open or start; one with a device shows it live. A device can float over
//! the chat instead, in a small window of its own.
mod backend;
mod setup;
mod view;
pub use backend::{Backend, RemoteDevices, answer as answer_device_call};
pub use setup::{AGENT_DESCRIPTION, DeviceSetup, HUB_DESCRIPTION, agent_status, hub_status, platform_line};
pub use view::{DeviceView, DeviceViewEvent};
use gpui_kit::component::{
Icon, IconName, h_flex,
input::{Input, InputEvent, InputState},
menu::{ContextMenuExt as _, PopupMenuItem},
v_flex, Sizable as _,
};
use gpui_kit::prelude::FluentBuilder as _;
use gpui_kit::*;
use crate::device::{self, DeviceSummary, HostStatus, Platform, State};
use crate::ui::icons::Lucide;
use crate::ui::metal::{self, Led, MetalButton, MetalStyled as _, Palette};
/// The panel's share of the sheet until the user drags it.
const SHARE: f32 = 0.42;
const MIN_WIDTH: f32 = 380.;
/// The device service's state, as the UI last heard of it, and each
/// connected device's, by its connection's id.
pub struct DeviceWatch {
pub state: State,
pub remote: std::collections::HashMap<String, State>,
}
impl Global for DeviceWatch {}
impl DeviceWatch {
pub fn init(cx: &mut App) {
cx.set_global(DeviceWatch { state: device::service().state(), remote: Default::default() });
let events = device::service().subscribe();
cx.spawn(async move |cx| {
while let Ok(event) = events.recv().await {
while events.try_recv().is_ok() {}
let _ = event;
cx.update(|cx| {
cx.global_mut::<DeviceWatch>().state = device::service().state();
cx.refresh_windows();
});
}
})
.detach();
}
/// This machine's devices.
pub fn state(cx: &App) -> &State {
&cx.global::<DeviceWatch>().state
}
}
/// Runs blocking device work off the UI thread, then hands the result back.
pub(crate) fn background<V: 'static, T: Send + 'static>(
cx: &mut Context<V>,
work: impl FnOnce() -> T + Send + 'static,
then: impl FnOnce(&mut V, T, &mut Context<V>) + 'static,
) {
cx.spawn(async move |this, cx| {
let result = cx.background_executor().spawn(async move { work() }).await;
let _ = this.update(cx, |this, cx| then(this, result, cx));
})
.detach();
}
/// What stands in for a device while it opens, starts or connects.
pub(crate) fn loading_view(name: &str, description: &str, message: SharedString, error: bool, p: &Palette) -> Div {
v_flex()
.size_full()
.items_center()
.justify_center()
.gap(px(10.))
.px(px(24.))
.child(Icon::new(Lucide::Smartphone).size(px(24.)).text_color(p.ink3))
.child(div().text_size(px(14.)).font_weight(FontWeight::MEDIUM).text_color(p.ink).child(name.to_string()))
.when(!description.is_empty(), |this| {
this.child(div().text_size(px(12.)).text_color(p.ink3).child(description.to_string()))
})
.child(
h_flex()
.gap(px(8.))
.max_w(px(360.))
.text_size(px(12.5))
.text_color(if error { p.red } else { p.ink2 })
.when(!error, |this| this.child(metal::led("device-loading", Led::Waiting, true, p)))
.child(div().text_center().child(message)),
)
}
/// The panel's width once the user drags its edge, shared by all threads.
#[derive(Default)]
struct DeviceWidth(Option<Pixels>);
impl Global for DeviceWidth {}
struct ResizeDevice;
pub enum DevicePanelEvent {
/// Close the right panel.
Close,
/// A device floats over the chat now: the right panel makes way.
Floated,
/// A floating device went back into the right panel.
Docked,
}
struct Tab {
id: u64,
/// A name the user gave the tab.
name: Option<String>,
view: Option<Entity<DeviceView>>,
}
pub struct DevicePanel {
/// The thread, by the id its devices' machine knows it by.
thread_id: String,
backend: Backend,
tabs: Vec<Tab>,
active: u64,
next_id: u64,
/// The device being opened from the list.
pending: Option<DeviceSummary>,
error: Option<SharedString>,
renaming: Option<(u64, Entity<InputState>)>,
/// The tab floating over the chat.
floating: Option<u64>,
visible: bool,
float_visible: bool,
/// Whether the devices were listed since the panel was last shown.
listed: bool,
_subscriptions: Vec<Subscription>,
}
impl EventEmitter<DevicePanelEvent> for DevicePanel {}
impl DevicePanel {
pub fn new(thread_id: String, backend: Backend, _: &mut Window, cx: &mut Context<Self>) -> Self {
let subscriptions = vec![cx.observe_global::<DeviceWatch>(|this, cx| this.sync(cx))];
Self {
thread_id,
backend,
tabs: vec![Tab { id: 1, name: None, view: None }],
active: 1,
next_id: 2,
pending: None,
error: None,
renaming: None,
floating: None,
visible: false,
float_visible: false,
listed: false,
_subscriptions: subscriptions,
}
}
/// Shows the panel (`panel`) and the floating device (`floating`); only
/// the device on screen streams.
pub fn set_visible(&mut self, panel: bool, floating: bool, window: &mut Window, cx: &mut Context<Self>) {
if panel && !self.visible {
self.listed = false;
}
self.visible = panel;
self.float_visible = floating;
if panel && !self.listed {
self.refresh(cx);
}
let docked = (panel && self.floating != Some(self.active)).then_some(self.active);
let floated = floating.then_some(self.floating).flatten();
for tab in &self.tabs {
if let Some(view) = &tab.view {
let shown = Some(tab.id) == docked || Some(tab.id) == floated;
let compact = Some(tab.id) == self.floating;
view.update(cx, |view, cx| {
view.compact = compact;
view.set_visible(shown, window, cx);
});
}
}
}
/// Lists the devices; never installs or starts anything before setup.
fn refresh(&mut self, cx: &mut Context<Self>) {
let state = self.backend.state(cx);
if state.host_status == HostStatus::Disabled || !state.onboarding_completed {
return;
}
self.listed = true;
let backend = self.backend.clone();
background(cx, move || backend.list(), |_, _, _| {});
}
pub fn backend(&self) -> &Backend {
&self.backend
}
pub fn thread_id(&self) -> &str {
&self.thread_id
}
/// The thread's id where its devices are, once a new remote thread has one.
pub fn set_thread_id(&mut self, thread_id: String) {
self.thread_id = thread_id;
}
/// Keeps open views' devices current.
fn sync(&mut self, cx: &mut Context<Self>) {
let state = self.backend.state(cx);
for tab in &self.tabs {
if let Some(view) = &tab.view {
let current = view.read(cx).device.clone();
if let Some(device) = state.device(¤t.host_id, ¤t.id).cloned() {
view.update(cx, |view, cx| view.update_device(device, cx));
}
}
}
cx.notify();
}
pub fn floating_view(&self) -> Option<Entity<DeviceView>> {
let id = self.floating?;
self.tabs.iter().find(|tab| tab.id == id)?.view.clone()
}
/// Brings the floating device back into the right panel.
pub fn dock(&mut self, cx: &mut Context<Self>) {
if let Some(id) = self.floating.take() {
self.active = id;
cx.emit(DevicePanelEvent::Docked);
cx.notify();
}
}
/// Stops floating the device; its tab stays.
pub fn unfloat(&mut self, cx: &mut Context<Self>) {
if self.floating.take().is_some() {
cx.notify();
}
}
fn view_for(&self, device_id: &str, cx: &App) -> Option<u64> {
self.tabs.iter().find(|tab| tab.view.as_ref().is_some_and(|view| view.read(cx).device.id == device_id)).map(|tab| tab.id)
}
/// Shows a device: in its tab if it has one, else in the empty tab
/// showing, else in a new tab. `float` floats it over the chat.
pub fn show_device(&mut self, device: DeviceSummary, float: bool, window: &mut Window, cx: &mut Context<Self>) {
let id = match self.view_for(&device.id, cx) {
Some(id) => id,
None => {
let host_label = self.backend.state(cx).host_label(&device.host_id);
let backend = self.backend.clone();
let view = cx.new(|cx| DeviceView::new(device, host_label, backend, window, cx));
self._subscriptions.push(cx.subscribe_in(&view, window, Self::on_view_event));
let empty = self.tabs.iter_mut().find(|tab| tab.id == self.active && tab.view.is_none());
match empty {
Some(tab) => {
tab.view = Some(view);
tab.id
}
None => {
let id = self.next_id;
self.next_id += 1;
self.tabs.push(Tab { id, name: None, view: Some(view) });
id
}
}
}
};
if float {
self.floating = Some(id);
} else {
self.active = id;
if self.floating == Some(id) {
self.floating = None;
}
}
cx.notify();
}
/// Drops the tabs showing a device (all of them for `None`), as when an agent closes it.
pub fn forget_device(&mut self, device_id: Option<&str>, cx: &mut Context<Self>) {
let ids: Vec<u64> = self
.tabs
.iter()
.filter(|tab| tab.view.as_ref().is_some_and(|view| device_id.is_none_or(|id| view.read(cx).device.id == id)))
.map(|tab| tab.id)
.collect();
for id in ids {
self.remove_tab(id, cx);
}
}
fn on_view_event(&mut self, view: &Entity<DeviceView>, event: &DeviceViewEvent, window: &mut Window, cx: &mut Context<Self>) {
let Some(id) = self.tabs.iter().find(|tab| tab.view.as_ref() == Some(view)).map(|tab| tab.id) else { return };
match event {
DeviceViewEvent::Float => {
self.floating = Some(id);
cx.emit(DevicePanelEvent::Floated);
}
DeviceViewEvent::Close => {
self.remove_tab(id, cx);
}
DeviceViewEvent::PowerOff => {
let device = view.read(cx).device.clone();
let thread = self.thread_id.clone();
let backend = self.backend.clone();
self.error = None;
background(
cx,
move || backend.close(&thread, Some(&device.id), true),
move |this, result, cx| match result {
Ok(()) => this.remove_tab(id, cx),
Err(err) => {
this.error = Some(err.into());
cx.notify();
}
},
);
}
}
let _ = window;
cx.notify();
}
fn remove_tab(&mut self, id: u64, cx: &mut Context<Self>) {
let Some(ix) = self.tabs.iter().position(|tab| tab.id == id) else { return };
// Dropping the view lets go of its stream.
self.tabs.remove(ix);
if self.floating == Some(id) {
self.floating = None;
}
if self.tabs.is_empty() {
let id = self.next_id;
self.next_id += 1;
self.tabs.push(Tab { id, name: None, view: None });
self.active = id;
if self.visible {
cx.emit(DevicePanelEvent::Close);
}
} else if self.active == id {
self.active = self.tabs[ix.min(self.tabs.len() - 1)].id;
}
cx.notify();
}
fn new_tab(&mut self, cx: &mut Context<Self>) {
let id = self.next_id;
self.next_id += 1;
self.tabs.push(Tab { id, name: None, view: None });
self.active = id;
self.listed = false;
self.refresh(cx);
cx.notify();
}
fn start_rename(&mut self, id: u64, window: &mut Window, cx: &mut Context<Self>) {
let current = self.tab_title(id, cx);
let input = cx.new(|cx| InputState::new(window, cx).default_value(current));
input.update(cx, |input, cx| input.focus(window, cx));
self._subscriptions.push(cx.subscribe_in(&input, window, move |this, input, event: &InputEvent, _, cx| match event {
InputEvent::PressEnter { .. } | InputEvent::Blur => {
if this.renaming.as_ref().is_some_and(|(renaming, _)| *renaming == id) {
let name = input.read(cx).value().trim().to_string();
if let Some(tab) = this.tabs.iter_mut().find(|tab| tab.id == id) {
tab.name = (!name.is_empty()).then_some(name);
}
this.renaming = None;
cx.notify();
}
}
_ => {}
}));
self.renaming = Some((id, input));
cx.notify();
}
fn tab_title(&self, id: u64, cx: &App) -> String {
let Some(tab) = self.tabs.iter().find(|tab| tab.id == id) else { return String::new() };
tab.name
.clone()
.or_else(|| tab.view.as_ref().map(|view| view.read(cx).device.name.clone()))
.unwrap_or_else(|| "Device".into())
}
/// Opens a device picked from the list, starting it if it's off.
fn select_device(&mut self, device: DeviceSummary, window: &mut Window, cx: &mut Context<Self>) {
if self.pending.is_some() {
return;
}
self.error = None;
self.pending = Some(device.clone());
let thread = self.thread_id.clone();
let id = device.id.clone();
let backend = self.backend.clone();
cx.spawn_in(window, async move |this, cx| {
let result = cx.background_executor().spawn(async move { backend.open(&thread, &id, true) }).await;
let _ = this.update_in(cx, |this, window, cx| {
this.pending = None;
match result {
Ok(session) => {
let opened = this.backend.state(cx).device(&session.host_id, &session.device_id).cloned().unwrap_or(device);
this.show_device(opened, false, window, cx);
let (panel, floating) = (this.visible, this.float_visible);
this.set_visible(panel, floating, window, cx);
}
Err(err) => this.error = Some(err.into()),
}
cx.notify();
});
})
.detach();
cx.notify();
}
// ---- rendering ----
fn render_tabs(&self, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let tabs = self.tabs.iter().map(|tab| {
let id = tab.id;
let active = id == self.active;
let title = self.tab_title(id, cx);
let renaming = self.renaming.as_ref().filter(|(renaming, _)| *renaming == id).map(|(_, input)| input.clone());
let floating = self.floating == Some(id);
h_flex()
.id(("device-tab", id as usize))
.flex_none()
.max_w(px(180.))
.h(px(28.))
.pl(px(10.))
.pr(px(4.))
.gap(px(6.))
.rounded(px(9.))
.text_size(px(12.5))
.map(|this| if active { this.bg(vertical(p)).shadow(p.btn.clone()).text_color(p.ink) } else { this.text_color(p.ink3).hover(|style| style.bg(p.row_hover)) })
.cursor_pointer()
.on_click(cx.listener(move |this, event: &ClickEvent, window, cx| {
if event.click_count() >= 2 {
this.start_rename(id, window, cx);
} else {
this.active = id;
this.listed = false;
this.refresh(cx);
cx.notify();
}
}))
.child(Icon::new(if floating { Lucide::PictureInPicture2 } else { Lucide::Smartphone }).size(px(13.)).text_color(p.ink3))
.child(match renaming {
Some(input) => div().w(px(110.)).child(Input::new(&input).appearance(false).small()).into_any_element(),
None => div().min_w_0().truncate().child(title).into_any_element(),
})
.child(
MetalButton::new(("device-tab-close", id as usize))
.ghost()
.mini()
.icon(Lucide::X)
.tooltip("Close tab")
.on_click(cx.listener(move |this, _, _, cx| this.remove_tab(id, cx))),
)
.context_menu({
let weak = cx.weak_entity();
move |menu, _, _| {
let rename = weak.clone();
let close = weak.clone();
menu.item(PopupMenuItem::new("Rename").on_click(move |_, window, cx| {
let _ = rename.update(cx, |this, cx| this.start_rename(id, window, cx));
}))
.item(PopupMenuItem::new("Close").on_click(move |_, _, cx| {
let _ = close.update(cx, |this, cx| this.remove_tab(id, cx));
}))
}
})
});
h_flex()
.h(px(44.))
.flex_none()
.px(px(8.))
.gap(px(4.))
.child(h_flex().id("device-tabs").flex_1().min_w_0().gap(px(4.)).overflow_x_scroll().children(tabs))
.child(
MetalButton::new("device-new-tab")
.ghost()
.mini()
.icon(Lucide::Plus)
.tooltip("Open another device")
.on_click(cx.listener(|this, _, _, cx| this.new_tab(cx))),
)
.child(
MetalButton::new("device-panel-close")
.ghost()
.mini()
.icon(IconName::Close)
.tooltip("Close panel")
.on_click(cx.listener(|_, _, _, cx| cx.emit(DevicePanelEvent::Close))),
)
}
fn render_body(&self, cx: &mut Context<Self>) -> AnyElement {
let p = metal::palette(cx);
let state = self.backend.state(cx);
let tab = self.tabs.iter().find(|tab| tab.id == self.active);
let view = tab.and_then(|tab| tab.view.clone()).filter(|_| self.floating != Some(self.active));
if let Some(view) = view {
return div().size_full().child(view).into_any_element();
}
if tab.is_some_and(|tab| tab.view.is_some()) {
// The active tab floats over the chat.
return v_flex()
.size_full()
.items_center()
.justify_center()
.gap(px(10.))
.child(Icon::new(Lucide::PictureInPicture2).size(px(22.)).text_color(p.ink3))
.child(div().text_size(px(12.5)).text_color(p.ink3).child("This device floats over the chat."))
.child(
MetalButton::new("device-dock-here")
.compact()
.label("Open in right panel")
.on_click(cx.listener(|this, _, _, cx| {
this.floating = None;
cx.emit(DevicePanelEvent::Docked);
cx.notify();
})),
)
.into_any_element();
}
if state.host_status == HostStatus::Disabled || !state.onboarding_completed {
return v_flex()
.size_full()
.items_center()
.justify_center()
.gap(px(12.))
.px(px(24.))
.child(Icon::new(Lucide::Smartphone).size(px(24.)).text_color(p.ink3))
.child(div().text_size(px(14.)).font_weight(FontWeight::MEDIUM).child("Set up devices"))
.child(
div()
.max_w(px(320.))
.text_center()
.text_size(px(12.5))
.line_height(px(18.))
.text_color(p.ink3)
.child("Review what runs on this machine before using simulators and emulators."),
)
.child(
MetalButton::new("device-open-setup")
.primary()
.compact()
.label("Set up devices")
.on_click({
let backend = self.backend.clone();
move |_, window, cx| DeviceSetup::open(backend.clone(), window, cx)
}),
)
.into_any_element();
}
let ready = state.host_status == HostStatus::Ready;
if let Some(pending) = &self.pending {
return loading_view(
&pending.name,
&format!("{} · {}", state.host_label(&pending.host_id), pending.version),
if pending.booted { "Opening device…" } else { "Starting device…" }.into(),
false,
p,
)
.into_any_element();
}
if state.busy() {
let message: SharedString = if state.host_status == HostStatus::Installing {
state.host_detail.clone().unwrap_or_else(|| "Installing device support…".into()).into()
} else {
"Finding devices…".into()
};
return loading_view("Devices", "", message, false, p).into_any_element();
}
self.render_list(&state, ready, cx)
}
fn render_list(&self, state: &State, ready: bool, cx: &mut Context<Self>) -> AnyElement {
let p = metal::palette(cx);
let mut groups = Vec::new();
for platform in [Platform::Ios, Platform::Android] {
let mut devices: Vec<DeviceSummary> = state.devices.iter().filter(|device| device.platform == platform).cloned().collect();
devices.sort_by(|a, b| b.booted.cmp(&a.booted).then_with(|| a.name.cmp(&b.name)));
if !devices.is_empty() {
groups.push((platform, devices));
}
}
let empty = groups.is_empty();
let android_missing = ready
&& !state.devices.iter().any(|device| device.platform == Platform::Android)
&& !state.hosts.iter().flat_map(|host| &host.platforms).any(|platform| platform.platform == Platform::Android && !platform.available);
let mut content = v_flex().w_full().max_w(px(560.)).gap(px(22.)).when(empty, |this| this.my_auto().items_center());
if empty {
content = content.child(Icon::new(Lucide::Smartphone).size(px(22.)).text_color(p.ink3)).child(
div().max_w(px(340.)).text_center().text_size(px(13.)).line_height(px(19.)).text_color(p.ink3).child(
if state.host_status == HostStatus::Failed {
state.host_detail.clone().unwrap_or_else(|| "The device hub failed to start.".into())
} else {
"No simulators or emulators were found on this machine.".into()
},
),
);
if state.host_status == HostStatus::Failed {
content = content.child(
MetalButton::new("device-retry")
.compact()
.label("Retry")
.on_click(cx.listener(|this, _, _, cx| {
let backend = this.backend.clone();
background(cx, move || backend.retry(), |_, _, _| {})
})),
);
}
}
if ready {
for (platform, devices) in groups {
let rows = devices.into_iter().map(|device| {
let key = format!("device-row-{}", device.id);
let description = format!(
"{} · {} · {}",
state.host_label(&device.host_id),
device.version,
if device.booted { "Running" } else { "Stopped" }
);
let action = if device.booted { "Open" } else { "Start" };
let picked = device.clone();
h_flex()
.id(SharedString::from(key))
.gap(px(12.))
.px(px(10.))
.py(px(8.))
.rounded(px(10.))
.cursor_pointer()
.hover(|style| style.bg(p.row_hover))
.on_click(cx.listener(move |this, _, window, cx| this.select_device(picked.clone(), window, cx)))
.child(
div()
.flex_none()
.size(px(32.))
.flex()
.items_center()
.justify_center()
.rounded(px(8.))
.well(p)
.child(Icon::new(Lucide::Smartphone).size(px(15.)).text_color(p.ink2)),
)
.child(
v_flex()
.flex_1()
.min_w_0()
.child(div().truncate().text_size(px(13.)).font_weight(FontWeight::MEDIUM).text_color(p.ink).child(device.name.clone()))
.child(div().truncate().text_size(px(11.5)).text_color(p.ink3).child(description)),
)
.child(div().flex_none().text_size(px(11.5)).text_color(p.ink3).child(action))
});
content = content.child(
v_flex()
.gap(px(8.))
.child(
h_flex()
.gap(px(8.))
.text_size(px(12.5))
.text_color(p.ink3)
.child(Icon::new(Lucide::Smartphone).size(px(14.)))
.child(div().font_weight(FontWeight::MEDIUM).child(platform.group_label())),
)
.child(v_flex().p(px(4.)).rounded(px(14.)).well(p).children(rows)),
);
}
}
if android_missing {
content = content.child(
div()
.max_w(px(340.))
.text_size(px(11.5))
.line_height(px(16.))
.text_color(p.ink3)
.child("No Android virtual devices found. Create one in Android Studio's Device Manager, then refresh."),
);
}
content = content.child(
div().when(empty, |this| this.flex().justify_center()).child(
MetalButton::new("device-refresh")
.compact()
.when(!empty, |this| this.ghost())
.label("Refresh devices")
.on_click(cx.listener(|this, _, _, cx| {
this.listed = false;
this.refresh(cx);
})),
),
);
div().id("device-list").size_full().overflow_y_scroll().px(px(20.)).py(px(28.)).flex().flex_col().items_center().child(content).into_any_element()
}
fn render_notices(&self, cx: &mut Context<Self>) -> Vec<AnyElement> {
let p = metal::palette(cx);
let state = self.backend.state(cx);
let state = &state;
let mut notices = Vec::new();
let notice = |text: String, p: &Palette| {
div()
.px(px(14.))
.py(px(7.))
.border_b_1()
.border_color(p.rule)
.text_size(px(11.5))
.line_height(px(16.))
.text_color(p.ink3)
.child(text)
};
let active_has_device = self.tabs.iter().any(|tab| tab.id == self.active && tab.view.is_some());
if state.host_status == HostStatus::Ready
&& !active_has_device
&& let Some(detail) = &state.host_detail
{
notices.push(notice(detail.clone(), p).into_any_element());
}
let booting: Vec<String> =
state.booting.iter().filter(|(_, thread)| *thread == self.thread_id).map(|(device, _)| device.name.clone()).collect();
if !booting.is_empty() {
notices.push(notice(format!("Starting {}… This can take a minute.", booting.join(", ")), p).into_any_element());
}
if let Some(error) = &self.error {
notices.push(
h_flex()
.items_start()
.gap(px(8.))
.px(px(14.))
.py(px(7.))
.border_b_1()
.border_color(p.rule)
.bg(p.red.opacity(0.06))
.child(div().flex_1().min_w_0().text_size(px(11.5)).line_height(px(16.)).text_color(p.red).child(error.clone()))
.child(
MetalButton::new("device-error-dismiss")
.ghost()
.mini()
.icon(Lucide::X)
.tooltip("Dismiss device error")
.on_click(cx.listener(|this, _, _, cx| {
this.error = None;
cx.notify();
})),
)
.into_any_element(),
);
}
notices
}
}
fn vertical(p: &Palette) -> Background {
metal::vertical(p.cap)
}
impl Render for DevicePanel {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let width = cx.default_global::<DeviceWidth>().0;
let notices = self.render_notices(cx);
v_flex()
.relative()
.h_full()
.min_w(px(MIN_WIDTH))
.map(|this| match width {
Some(width) => this.w(width),
None => this.flex_basis(relative(SHARE)),
})
.p(px(12.))
.pl(px(0.))
.on_drag_move(cx.listener(|_, event: &DragMoveEvent<ResizeDevice>, _, cx| {
let right = event.bounds.right();
let width = (right - event.event.position.x).max(px(MIN_WIDTH));
cx.set_global(DeviceWidth(Some(width)));
cx.notify();
}))
.child(
div()
.id("device-resize")
.absolute()
.left(px(-6.))
.top_0()
.bottom_0()
.w(px(8.))
.cursor_col_resize()
.on_drag(ResizeDevice, |_, _, _, cx| cx.new(|_| EmptyView)),
)
.child(
v_flex()
.size_full()
.rounded(px(18.))
.raised(p)
.overflow_hidden()
.child(self.render_tabs(cx))
.children(notices)
.child(
div()
.flex_1()
.min_h_0()
.m(px(6.))
.mt(px(0.))
.rounded(px(12.))
.overflow_hidden()
.well(p)
.child(self.render_body(cx)),
),
)
}
}