From 64845186f51ab1cfe287d607cba9e29f3be36c99 Mon Sep 17 00:00:00 2001
From: Victoria Brekenfeld <victoria@system76.com>
Date: Thu, 22 Jun 2023 20:58:39 +0200
Subject: [PATCH] stacking: Refactored view code into widgets

---
 src/shell/element/stack.rs                    | 466 +++--------
 src/shell/element/stack/tab.rs                | 429 ++++++++++
 .../iced => shell/element/stack}/tab_text.rs  |   7 +-
 src/shell/element/stack/tabs.rs               | 778 ++++++++++++++++++
 src/utils/{iced/mod.rs => iced.rs}            |   2 -
 5 files changed, 1314 insertions(+), 368 deletions(-)
 create mode 100644 src/shell/element/stack/tab.rs
 rename src/{utils/iced => shell/element/stack}/tab_text.rs (93%)
 create mode 100644 src/shell/element/stack/tabs.rs
 rename src/utils/{iced/mod.rs => iced.rs} (99%)

diff --git a/src/shell/element/stack.rs b/src/shell/element/stack.rs
index d1692cf0..3102c139 100644
--- a/src/shell/element/stack.rs
+++ b/src/shell/element/stack.rs
@@ -2,7 +2,7 @@ use super::CosmicSurface;
 use crate::{
     shell::{focus::FocusDirection, layout::tiling::Direction, Shell},
     state::State,
-    utils::iced::{tab_text::tab_text, IcedElement, Program},
+    utils::iced::{IcedElement, Program},
     utils::prelude::SeatExt,
     wayland::handlers::screencopy::ScreencopySessions,
 };
@@ -10,12 +10,9 @@ use apply::Apply;
 use calloop::LoopHandle;
 use cosmic::{
     iced::{id::Id, widget as iced_widget},
-    iced_core::{alignment, renderer::BorderRadius, Background, Color, Length, Size as IcedSize},
+    iced_core::{renderer::BorderRadius, Background, Color, Length},
     iced_runtime::Command,
-    iced_widget::{
-        rule::FillMode,
-        scrollable::{AbsoluteOffset, Viewport},
-    },
+    iced_widget::scrollable::AbsoluteOffset,
     theme, widget as cosmic_widget, Element as CosmicElement,
 };
 use cosmic_protocols::screencopy::v1::server::zcosmic_screencopy_session_v1::InputType;
@@ -51,6 +48,15 @@ use std::{
     },
 };
 
+mod tab;
+mod tab_text;
+mod tabs;
+
+use self::{
+    tab::{Tab, TabMessage},
+    tabs::Tabs,
+};
+
 static SCROLLABLE_ID: Lazy<Id> = Lazy::new(|| Id::new("scrollable"));
 
 #[derive(Clone, PartialEq, Eq, Hash)]
@@ -70,6 +76,7 @@ pub struct CosmicStackInternal {
     active: Arc<AtomicUsize>,
     activated: Arc<AtomicBool>,
     group_focused: Arc<AtomicBool>,
+    scroll_to_focus: Arc<AtomicBool>,
     previous_keyboard: Arc<AtomicUsize>,
     pointer_entered: Arc<AtomicU8>,
     previous_pointer: Arc<AtomicUsize>,
@@ -77,7 +84,6 @@ pub struct CosmicStackInternal {
     last_location: Arc<Mutex<Option<(Point<f64, Logical>, Serial, u32)>>>,
     geometry: Arc<Mutex<Option<Rectangle<i32, Logical>>>>,
     mask: Arc<Mutex<Option<tiny_skia::Mask>>>,
-    scrollable_offset: Arc<Mutex<Option<AbsoluteOffset>>>,
 }
 
 impl CosmicStackInternal {
@@ -132,6 +138,7 @@ impl CosmicStack {
                 active: Arc::new(AtomicUsize::new(0)),
                 activated: Arc::new(AtomicBool::new(false)),
                 group_focused: Arc::new(AtomicBool::new(false)),
+                scroll_to_focus: Arc::new(AtomicBool::new(false)),
                 previous_keyboard: Arc::new(AtomicUsize::new(0)),
                 pointer_entered: Arc::new(AtomicU8::new(Focus::None as u8)),
                 previous_pointer: Arc::new(AtomicUsize::new(0)),
@@ -139,7 +146,6 @@ impl CosmicStack {
                 last_location: Arc::new(Mutex::new(None)),
                 geometry: Arc::new(Mutex::new(None)),
                 mask: Arc::new(Mutex::new(None)),
-                scrollable_offset: Arc::new(Mutex::new(None)),
             },
             (width, TAB_HEIGHT),
             handle,
@@ -159,6 +165,7 @@ impl CosmicStack {
                 windows.push(window);
                 p.active.store(windows.len() - 1, Ordering::SeqCst);
             }
+            p.scroll_to_focus.store(true, Ordering::SeqCst);
         });
         self.0.force_redraw()
     }
@@ -214,6 +221,7 @@ impl CosmicStack {
                     {
                         p.previous_keyboard.store(old, Ordering::SeqCst);
                         p.previous_pointer.store(old, Ordering::SeqCst);
+                        p.scroll_to_focus.store(true, Ordering::SeqCst);
                         true
                     } else {
                         false
@@ -237,6 +245,7 @@ impl CosmicStack {
                     {
                         p.previous_keyboard.store(old, Ordering::SeqCst);
                         p.previous_pointer.store(old, Ordering::SeqCst);
+                        p.scroll_to_focus.store(true, Ordering::SeqCst);
                         true
                     } else {
                         false
@@ -298,6 +307,7 @@ impl CosmicStack {
                 windows.swap(old, val);
                 p.previous_keyboard.store(old, Ordering::SeqCst);
                 p.previous_pointer.store(old, Ordering::SeqCst);
+                p.scroll_to_focus.store(true, Ordering::SeqCst);
                 MoveResult::Handled
             } else {
                 if windows.len() == 1 {
@@ -306,6 +316,7 @@ impl CosmicStack {
                 let window = windows.remove(active);
                 if active == windows.len() {
                     p.active.store(active - 1, Ordering::SeqCst);
+                    p.scroll_to_focus.store(true, Ordering::SeqCst);
                 }
                 window.try_force_undecorated(false);
                 window.set_tiled(false);
@@ -449,11 +460,50 @@ impl CosmicStack {
 #[derive(Debug, Clone, Copy)]
 pub enum Message {
     DragStart,
-    Activate(usize, Option<(f32, f32, f32)>),
+    Activate(usize),
     Close(usize),
-    ScrollForward(IcedSize),
+    ScrollForward,
     ScrollBack,
-    Scrolled(Viewport),
+    Scrolled,
+}
+
+impl TabMessage for Message {
+    fn activate(idx: usize) -> Self {
+        Message::Activate(idx)
+    }
+
+    fn is_activate(&self) -> Option<usize> {
+        match self {
+            Message::Activate(idx) => Some(*idx),
+            _ => None,
+        }
+    }
+
+    fn scroll_back() -> Self {
+        Message::ScrollBack
+    }
+
+    fn scroll_further() -> Self {
+        Message::ScrollForward
+    }
+
+    fn populate_scroll(&mut self, mut current_offset: AbsoluteOffset) -> Option<AbsoluteOffset> {
+        match self {
+            Message::ScrollBack => Some({
+                current_offset.x -= 10.;
+                current_offset
+            }),
+            Message::ScrollForward => Some({
+                current_offset.x += 10.;
+                current_offset
+            }),
+            _ => None,
+        }
+    }
+
+    fn scrolled() -> Self {
+        Message::Scrolled
+    }
 }
 
 impl Program for CosmicStackInternal {
@@ -477,47 +527,12 @@ impl Program for CosmicStackInternal {
                     }
                 }
             }
-            Message::Activate(idx, offsets) => {
+            Message::Activate(idx) => {
                 if self.windows.lock().unwrap().get(idx).is_some() {
                     let old = self.active.swap(idx, Ordering::SeqCst);
                     self.previous_keyboard.store(old, Ordering::SeqCst);
                     self.previous_pointer.store(old, Ordering::SeqCst);
-                }
-                if let Some((left_offset, right_offset, scroll_width)) = offsets {
-                    let current_offset = self
-                        .scrollable_offset
-                        .lock()
-                        .unwrap()
-                        .unwrap_or(AbsoluteOffset::default());
-                    let current_start = current_offset.x;
-                    let current_end = current_start + scroll_width;
-                    assert!((right_offset - left_offset) <= (current_end - current_start));
-                    if (left_offset - current_start).is_sign_negative()
-                        || (current_end - right_offset).is_sign_negative()
-                    {
-                        if (left_offset - current_start).abs() < (right_offset - current_end).abs()
-                        {
-                            let offset = AbsoluteOffset {
-                                x: left_offset,
-                                y: current_offset.y,
-                            };
-                            *self.scrollable_offset.lock().unwrap() = Some(offset);
-                            return iced_widget::scrollable::scroll_to::<Message>(
-                                SCROLLABLE_ID.clone(),
-                                offset,
-                            );
-                        } else {
-                            let offset = AbsoluteOffset {
-                                x: right_offset - scroll_width,
-                                y: current_offset.y,
-                            };
-                            *self.scrollable_offset.lock().unwrap() = Some(offset);
-                            return iced_widget::scrollable::scroll_to::<Message>(
-                                SCROLLABLE_ID.clone(),
-                                offset,
-                            );
-                        }
-                    }
+                    self.scroll_to_focus.store(true, Ordering::SeqCst);
                 }
             }
             Message::Close(idx) => {
@@ -525,35 +540,10 @@ impl Program for CosmicStackInternal {
                     val.close()
                 }
             }
-            Message::Scrolled(viewport) => {
-                *self.scrollable_offset.lock().unwrap() = Some(viewport.absolute_offset());
-            }
-            Message::ScrollForward(bounds) => {
-                let mut offset = self
-                    .scrollable_offset
-                    .lock()
-                    .unwrap()
-                    .unwrap_or(AbsoluteOffset::default());
-                offset.x = (offset.x + 10.).min(bounds.width);
-                *self.scrollable_offset.lock().unwrap() = Some(offset);
-                return iced_widget::scrollable::scroll_to::<Message>(
-                    SCROLLABLE_ID.clone(),
-                    offset,
-                );
-            }
-            Message::ScrollBack => {
-                let mut offset = self
-                    .scrollable_offset
-                    .lock()
-                    .unwrap()
-                    .unwrap_or(AbsoluteOffset::default());
-                offset.x = (offset.x - 10.).max(0.0);
-                *self.scrollable_offset.lock().unwrap() = Some(offset);
-                return iced_widget::scrollable::scroll_to::<Message>(
-                    SCROLLABLE_ID.clone(),
-                    offset,
-                );
+            Message::Scrolled => {
+                self.scroll_to_focus.store(false, Ordering::SeqCst);
             }
+            _ => unreachable!(),
         }
         Command::none()
     }
@@ -569,303 +559,53 @@ impl Program for CosmicStackInternal {
         else {
             return iced_widget::row(Vec::new()).into();
         };
-        let tab_region = width - 128 - 4; // 64 left, 64 right + last rule
         let active = self.active.load(Ordering::SeqCst);
-        let activated = self.activated.load(Ordering::SeqCst);
         let group_focused = self.group_focused.load(Ordering::SeqCst);
 
-        let mut elements = vec![cosmic_widget::icon("view-paged-symbolic", 16)
-            .force_svg(true)
-            .style(if group_focused {
-                theme::Svg::custom(|theme| iced_widget::svg::Appearance {
-                    color: Some(if theme.cosmic().is_dark {
-                        Color::BLACK
-                    } else {
-                        Color::WHITE
-                    }),
-                })
-            } else {
-                theme::Svg::Symbolic
-            })
-            .apply(iced_widget::container)
-            .padding([4, 24])
-            .center_y()
-            .apply(iced_widget::mouse_area)
-            .on_press(Message::DragStart)
-            .into()];
-
-        const ACTIVE_TAB_WIDTH: i32 = 140;
-        const MIN_TAB_WIDTH: i32 = 38;
-        let tab_width = if windows.len() == 1 {
-            tab_region
-        } else {
-            let potential_width = tab_region / windows.len() as i32;
-            if potential_width < ACTIVE_TAB_WIDTH {
-                (tab_region - ACTIVE_TAB_WIDTH) / (windows.len() - 1) as i32
-            } else {
-                potential_width
-            }
-        };
-        let scrolling = tab_width < MIN_TAB_WIDTH;
-        let full_width = ACTIVE_TAB_WIDTH + (windows.len() as i32 - 1) * MIN_TAB_WIDTH;
-        let scroll_region = tab_region - 40;
-
-        let mut tabs = Vec::new();
-        let mut offset = 0;
-        for (i, window) in windows.iter().enumerate() {
-            let mut tab_elements = Vec::new();
-
-            let app_id = window.app_id();
-            let title = window.title();
-            let is_active = i == active;
-            let was_previous_active = i.checked_sub(1).map(|i| i == active).unwrap_or(false);
-            let tab_width = tab_width.max(if is_active {
-                ACTIVE_TAB_WIDTH
-            } else {
-                MIN_TAB_WIDTH
-            });
-
-            tabs.push(
-                iced_widget::vertical_rule(4)
-                    .style(
-                        if is_active || was_previous_active || (i == 0 && group_focused) {
-                            if activated {
-                                theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                                    color: theme.cosmic().accent_color().into(),
-                                    width: 4,
-                                    radius: 0.,
-                                    fill_mode: FillMode::Full,
-                                })
-                            } else {
-                                theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                                    color: theme.cosmic().palette.neutral_5.into(),
-                                    width: 4,
-                                    radius: 0.,
-                                    fill_mode: FillMode::Full,
-                                })
-                            }
+        let elements = vec![
+            cosmic_widget::icon("window-stack-symbolic", 16)
+                .force_svg(true)
+                .style(if group_focused {
+                    theme::Svg::custom(|theme| iced_widget::svg::Appearance {
+                        color: Some(if theme.cosmic().is_dark {
+                            Color::BLACK
                         } else {
-                            theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                                color: theme.cosmic().palette.neutral_5.into(),
-                                width: 4,
-                                radius: 8.,
-                                fill_mode: FillMode::Padded(4),
-                            })
-                        },
-                    )
-                    .into(),
-            );
-
-            tab_elements.push(
-                cosmic_widget::icon(app_id, 16)
-                    .apply(iced_widget::container)
-                    .height(Length::Fill)
-                    .center_y()
-                    .into(),
-            );
-
-            let text_width = tab_width - if tab_width > 125 { 76 } else { 44 };
-            if text_width > 0 {
-                tab_elements.push(
-                    cosmic_widget::text(title)
-                        .size(14)
-                        .font(if is_active && self.activated.load(Ordering::SeqCst) {
-                            cosmic::font::FONT_SEMIBOLD
-                        } else {
-                            cosmic::font::FONT
-                        })
-                        .horizontal_alignment(alignment::Horizontal::Left)
-                        .vertical_alignment(alignment::Vertical::Center)
-                        .apply(tab_text)
-                        .height(Length::Fill)
-                        .width(text_width as u16)
-                        .into(),
-                );
-            }
-
-            if tab_width > 125 {
-                tab_elements.push(
-                    cosmic_widget::icon("window-close-symbolic", 16)
-                        .force_svg(true)
-                        .style(theme::Svg::Symbolic)
-                        .apply(iced_widget::button)
-                        .style(theme::Button::Text)
-                        .padding(0)
-                        .on_press(Message::Close(i))
-                        .apply(iced_widget::container)
-                        .height(Length::Fill)
-                        .center_y()
-                        .into(),
-                );
-            }
-
-            tabs.push(
-                iced_widget::row(tab_elements)
-                    .height(Length::Fill)
-                    .width(tab_width as u16 - 22)
-                    .spacing(8)
-                    .apply(iced_widget::container)
-                    .padding([2, 10])
-                    .center_y()
-                    .style(if is_active {
-                        if activated {
-                            theme::Container::custom(|theme| iced_widget::container::Appearance {
-                                text_color: Some(Color::from(theme.cosmic().accent_text_color())),
-                                background: Some(cosmic::iced::Background::Color(
-                                    Color::from_rgba(1.0, 1.0, 1.0, 0.1),
-                                )),
-                                border_radius: 0.0.into(),
-                                border_width: 0.0,
-                                border_color: Color::TRANSPARENT,
-                            })
-                        } else {
-                            theme::Container::custom(|_theme| iced_widget::container::Appearance {
-                                text_color: None,
-                                background: Some(cosmic::iced::Background::Color(
-                                    Color::from_rgba(1.0, 1.0, 1.0, 0.1),
-                                )),
-                                border_radius: 0.0.into(),
-                                border_width: 0.0,
-                                border_color: Color::TRANSPARENT,
-                            })
-                        }
-                    } else {
-                        theme::Container::Transparent
+                            Color::WHITE
+                        }),
                     })
-                    .apply(iced_widget::mouse_area)
-                    .on_press(Message::Activate(
-                        i,
-                        scrolling.then_some((
-                            offset as f32,
-                            (offset + tab_width + 4) as f32,
-                            scroll_region as f32,
-                        )),
-                    ))
-                    .into(),
-            );
-
-            offset += tab_width;
-        }
-
-        let last_was_active = active == windows.len() - 1;
-        let group_focused_clone = self.group_focused.clone();
-        tabs.push(
-            iced_widget::vertical_rule(4)
-                .style(
-                    if last_was_active || group_focused_clone.load(Ordering::SeqCst) {
-                        if activated {
-                            theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                                color: theme.cosmic().accent_color().into(),
-                                width: 4,
-                                radius: 0.,
-                                fill_mode: FillMode::Full,
-                            })
-                        } else {
-                            theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                                color: theme.cosmic().palette.neutral_5.into(),
-                                width: 4,
-                                radius: 0.,
-                                fill_mode: FillMode::Full,
-                            })
-                        }
-                    } else {
-                        theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                            color: theme.cosmic().palette.neutral_5.into(),
-                            width: 4,
-                            radius: 8.,
-                            fill_mode: FillMode::Padded(4),
-                        })
-                    },
-                )
+                } else {
+                    theme::Svg::Symbolic
+                })
+                .apply(iced_widget::container)
+                .padding([4, 24])
+                .center_y()
+                .apply(iced_widget::mouse_area)
+                .on_press(Message::DragStart)
                 .into(),
-        );
-
-        let tabs = iced_widget::row(tabs)
-            .apply(iced_widget::container)
-            .style(theme::Container::custom(|theme| {
-                iced_widget::container::Appearance {
-                    text_color: None,
-                    background: Some(cosmic::iced::Background::Color(Color::from(
-                        theme.cosmic().palette.neutral_3,
-                    ))),
-                    border_radius: 0.0.into(),
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                }
-            }))
-            .height((TAB_HEIGHT - 1) as u16);
-        if scrolling {
-            elements.push(
-                iced_widget::vertical_rule(4)
-                    .style(theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                        color: theme.cosmic().palette.neutral_5.into(),
-                        width: 4,
-                        radius: 8.,
-                        fill_mode: FillMode::Padded(4),
-                    }))
-                    .into(),
-            );
-            elements.push(
-                cosmic_widget::icon("go-previous-symbolic", 16)
-                    .force_svg(true)
-                    .style(theme::Svg::Symbolic)
-                    .apply(iced_widget::button)
-                    .style(theme::Button::Text)
-                    .on_press(Message::ScrollBack)
-                    .apply(iced_widget::container)
-                    .height(Length::Fill)
-                    .center_y()
-                    .into(),
-            );
-            elements.push(
-                iced_widget::Scrollable::new(tabs)
-                    .horizontal_scroll(
-                        iced_widget::scrollable::Properties::new()
-                            .margin(0.0)
-                            .scroller_width(1.0)
-                            .width(1.0),
-                    )
-                    .height(Length::Fill)
-                    .width(Length::Fill)
-                    .id(SCROLLABLE_ID.clone())
-                    .on_scroll(Message::Scrolled)
-                    .into(),
-            );
-            elements.push(
-                cosmic_widget::icon("go-next-symbolic", 16)
-                    .force_svg(true)
-                    .style(theme::Svg::Symbolic)
-                    .apply(iced_widget::button)
-                    .style(theme::Button::Text)
-                    .on_press(Message::ScrollForward(IcedSize {
-                        width: full_width as f32,
-                        height: TAB_HEIGHT as f32,
-                    }))
-                    .apply(iced_widget::container)
-                    .height(Length::Fill)
-                    .center_y()
-                    .into(),
-            );
-            elements.push(
-                iced_widget::vertical_rule(4)
-                    .style(theme::Rule::custom(|theme| iced_widget::rule::Appearance {
-                        color: theme.cosmic().palette.neutral_5.into(),
-                        width: 4,
-                        radius: 8.,
-                        fill_mode: FillMode::Padded(4),
-                    }))
-                    .into(),
-            );
-        } else {
-            elements.push(tabs.width(tab_region as u16).into());
-        }
-
-        elements.push(
+            CosmicElement::new(
+                Tabs::new(
+                    windows
+                        .iter()
+                        .enumerate()
+                        .map(|(i, w)| Tab::new(w.title(), w.app_id()).on_close(Message::Close(i))),
+                    active,
+                    windows[active].is_activated(false),
+                    group_focused,
+                )
+                .id(SCROLLABLE_ID.clone())
+                .force_visible(
+                    self.scroll_to_focus
+                        .load(Ordering::SeqCst)
+                        .then_some(active),
+                )
+                .height(Length::Fill)
+                .width(Length::Fill),
+            ),
             iced_widget::horizontal_space(64)
                 .apply(iced_widget::mouse_area)
                 .on_press(Message::DragStart)
                 .into(),
-        );
+        ];
 
         iced_widget::row(elements)
             .height(TAB_HEIGHT as u16)
diff --git a/src/shell/element/stack/tab.rs b/src/shell/element/stack/tab.rs
new file mode 100644
index 00000000..193f14a6
--- /dev/null
+++ b/src/shell/element/stack/tab.rs
@@ -0,0 +1,429 @@
+use apply::Apply;
+use cosmic::{
+    font::Font,
+    iced::{
+        widget::{
+            self, container::draw_background, rule::FillMode, text::StyleSheet as TextStyleSheet,
+        },
+        Element,
+    },
+    iced_core::{
+        alignment, event,
+        layout::{Layout, Limits, Node},
+        mouse, overlay, renderer,
+        widget::{
+            operation::{Operation, OperationOutputWrapper},
+            tree::Tree,
+            Widget,
+        },
+        Clipboard, Color, Length, Point, Rectangle, Shell, Size,
+    },
+    iced_style::{
+        button::StyleSheet as ButtonStyleSheet, container::StyleSheet as ContainerStyleSheet,
+        rule::StyleSheet as RuleStyleSheet,
+    },
+    iced_widget::scrollable::AbsoluteOffset,
+    theme,
+    widget::{icon, text, Icon},
+};
+
+use super::tab_text::tab_text;
+
+pub(super) enum TabRuleTheme {
+    ActiveActivated,
+    ActiveDeactivated,
+    Default,
+}
+
+impl Into<theme::Rule> for TabRuleTheme {
+    fn into(self) -> theme::Rule {
+        match self {
+            Self::ActiveActivated => theme::Rule::custom(|theme| widget::rule::Appearance {
+                color: theme.cosmic().accent_color().into(),
+                width: 4,
+                radius: 0.,
+                fill_mode: FillMode::Full,
+            }),
+            Self::ActiveDeactivated => theme::Rule::custom(|theme| widget::rule::Appearance {
+                color: theme.cosmic().palette.neutral_5.into(),
+                width: 4,
+                radius: 0.,
+                fill_mode: FillMode::Full,
+            }),
+            Self::Default => theme::Rule::custom(|theme| widget::rule::Appearance {
+                color: theme.cosmic().palette.neutral_5.into(),
+                width: 4,
+                radius: 8.,
+                fill_mode: FillMode::Padded(4),
+            }),
+        }
+    }
+}
+
+pub(super) enum TabBackgroundTheme {
+    ActiveActivated,
+    ActiveDeactivated,
+    Default,
+}
+
+impl Into<theme::Container> for TabBackgroundTheme {
+    fn into(self) -> theme::Container {
+        match self {
+            Self::ActiveActivated => {
+                theme::Container::custom(|theme| widget::container::Appearance {
+                    text_color: Some(Color::from(theme.cosmic().accent_text_color())),
+                    background: Some(cosmic::iced::Background::Color(Color::from_rgba(
+                        1.0, 1.0, 1.0, 0.1,
+                    ))),
+                    border_radius: 0.0.into(),
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                })
+            }
+            Self::ActiveDeactivated => {
+                theme::Container::custom(|_theme| widget::container::Appearance {
+                    text_color: None,
+                    background: Some(cosmic::iced::Background::Color(Color::from_rgba(
+                        1.0, 1.0, 1.0, 0.1,
+                    ))),
+                    border_radius: 0.0.into(),
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                })
+            }
+            Self::Default => theme::Container::Transparent,
+        }
+    }
+}
+
+pub trait TabMessage {
+    fn activate(idx: usize) -> Self;
+    fn is_activate(&self) -> Option<usize>;
+
+    fn scroll_further() -> Self;
+    fn scroll_back() -> Self;
+    fn populate_scroll(&mut self, current_offset: AbsoluteOffset) -> Option<AbsoluteOffset>;
+    fn scrolled() -> Self;
+}
+
+pub struct Tab<'a, Message: TabMessage> {
+    app_icon: Icon<'a>,
+    title: String,
+    font: Font,
+    close_message: Option<Message>,
+    rule_theme: TabRuleTheme,
+    background_theme: TabBackgroundTheme,
+    active: bool,
+}
+
+impl<'a, Message: TabMessage> Tab<'a, Message> {
+    pub fn new(title: impl Into<String>, app_id: impl Into<String>) -> Self {
+        Tab {
+            app_icon: icon(app_id.into(), 16),
+            title: title.into(),
+            font: cosmic::font::FONT,
+            close_message: None,
+            rule_theme: TabRuleTheme::Default,
+            background_theme: TabBackgroundTheme::Default,
+            active: false,
+        }
+    }
+
+    pub fn on_close(mut self, message: Message) -> Self {
+        self.close_message = Some(message);
+        self
+    }
+
+    pub(super) fn font(mut self, font: Font) -> Self {
+        self.font = font;
+        self
+    }
+
+    pub(super) fn rule_style(mut self, theme: TabRuleTheme) -> Self {
+        self.rule_theme = theme;
+        self
+    }
+
+    pub(super) fn background_style(mut self, theme: TabBackgroundTheme) -> Self {
+        self.background_theme = theme;
+        self
+    }
+
+    pub(super) fn non_active(mut self) -> Self {
+        self.active = false;
+        self
+    }
+
+    pub(super) fn active(mut self) -> Self {
+        self.active = true;
+        self
+    }
+
+    pub(super) fn internal<Renderer>(self, idx: usize) -> TabInternal<'a, Message, Renderer>
+    where
+        Renderer: cosmic::iced_core::Renderer + 'a,
+        Renderer: cosmic::iced_core::text::Renderer<Font = Font>,
+        Renderer::Theme: ButtonStyleSheet<Style = theme::Button>,
+        Renderer::Theme: ContainerStyleSheet,
+        Renderer::Theme: RuleStyleSheet<Style = theme::Rule>,
+        Renderer::Theme: TextStyleSheet,
+        Message: 'a,
+        widget::Button<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
+        widget::Container<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
+        Icon<'a>: Into<Element<'a, Message, Renderer>>,
+    {
+        let mut close_button = icon("window-close-symbolic", 16)
+            .force_svg(true)
+            .style(theme::Svg::Symbolic)
+            .apply(widget::button)
+            .padding(0)
+            .style(theme::Button::Text);
+        if let Some(close_message) = self.close_message {
+            close_button = close_button.on_press(close_message);
+        }
+
+        let mut items = vec![
+            widget::vertical_rule(4).style(self.rule_theme).into(),
+            self.app_icon
+                .apply(widget::container)
+                .height(Length::Fill)
+                .width(Length::Shrink)
+                .padding([2, 4])
+                .center_y()
+                .into(),
+        ];
+        items.push(
+            text(self.title)
+                .size(14)
+                .font(self.font)
+                .horizontal_alignment(alignment::Horizontal::Left)
+                .vertical_alignment(alignment::Vertical::Center)
+                .apply(tab_text)
+                .height(Length::Fill)
+                .width(Length::Fill)
+                .into(),
+        );
+        items.push(
+            close_button
+                .apply(widget::container)
+                .height(Length::Fill)
+                .width(Length::Shrink)
+                .padding([2, 4])
+                .center_y()
+                .align_x(alignment::Horizontal::Right)
+                .into(),
+        );
+
+        TabInternal {
+            idx,
+            active: self.active,
+            background: self.background_theme.into(),
+            elements: items,
+        }
+    }
+}
+
+const TAB_HEIGHT: i32 = 24;
+pub const MIN_ACTIVE_TAB_WIDTH: i32 = 140;
+const MIN_TAB_WIDTH: i32 = 38;
+
+const TEXT_BREAKPOINT: i32 = 44;
+const CLOSE_BREAKPOINT: i32 = 125;
+
+pub(super) struct TabInternal<'a, Message: TabMessage, Renderer> {
+    idx: usize,
+    active: bool,
+    background: theme::Container,
+    elements: Vec<Element<'a, Message, Renderer>>,
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for TabInternal<'a, Message, Renderer>
+where
+    Renderer: cosmic::iced_core::Renderer,
+    Renderer::Theme: ContainerStyleSheet<Style = theme::Container>,
+    Message: TabMessage,
+{
+    fn children(&self) -> Vec<Tree> {
+        self.elements.iter().map(Tree::new).collect()
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        tree.diff_children(&mut self.elements)
+    }
+
+    fn width(&self) -> Length {
+        Length::Fill
+    }
+
+    fn height(&self) -> Length {
+        Length::Fill
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
+        let min_size = Size {
+            height: TAB_HEIGHT as f32,
+            width: if self.active {
+                MIN_ACTIVE_TAB_WIDTH as f32
+            } else {
+                MIN_TAB_WIDTH as f32
+            },
+        };
+        let limits = limits
+            .min_width(min_size.width)
+            .min_height(min_size.height)
+            .width(Length::Fill)
+            .height(Length::Fill);
+        let size = limits.resolve(min_size).max(min_size);
+
+        let limits = Limits::new(size, size)
+            .min_width(size.width)
+            .min_height(size.height)
+            .width(size.width)
+            .height(size.height);
+        cosmic::iced_core::layout::flex::resolve(
+            cosmic::iced_core::layout::flex::Axis::Horizontal,
+            renderer,
+            &limits,
+            0.into(),
+            8.,
+            cosmic::iced::Alignment::Center,
+            if size.width >= CLOSE_BREAKPOINT as f32 {
+                &self.elements
+            } else if size.width >= TEXT_BREAKPOINT as f32 {
+                &self.elements[0..3]
+            } else {
+                &self.elements[0..2]
+            },
+        )
+    }
+
+    fn operate(
+        &self,
+        tree: &mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
+    ) {
+        operation.container(None, &mut |operation| {
+            self.elements
+                .iter()
+                .zip(&mut tree.children)
+                .zip(layout.children())
+                .for_each(|((child, state), layout)| {
+                    child
+                        .as_widget()
+                        .operate(state, layout, renderer, operation);
+                })
+        });
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: event::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        let status = self
+            .elements
+            .iter_mut()
+            .zip(&mut tree.children)
+            .zip(layout.children())
+            .map(|((child, state), layout)| {
+                child.as_widget_mut().on_event(
+                    state,
+                    event.clone(),
+                    layout,
+                    cursor_position,
+                    renderer,
+                    clipboard,
+                    shell,
+                )
+            })
+            .fold(event::Status::Ignored, event::Status::merge);
+
+        if status == event::Status::Ignored
+            && layout.bounds().contains(cursor_position)
+            && matches!(
+                event,
+                event::Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
+            )
+        {
+            shell.publish(Message::activate(self.idx));
+            return event::Status::Captured;
+        }
+
+        status
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        self.elements
+            .iter()
+            .zip(&tree.children)
+            .zip(layout.children())
+            .map(|((child, state), layout)| {
+                child.as_widget().mouse_interaction(
+                    state,
+                    layout,
+                    cursor_position,
+                    viewport,
+                    renderer,
+                )
+            })
+            .max()
+            .unwrap_or_default()
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        renderer_style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+    ) {
+        let style = theme.appearance(&self.background);
+
+        draw_background(renderer, &style, layout.bounds());
+
+        for ((child, state), layout) in self
+            .elements
+            .iter()
+            .zip(&tree.children)
+            .zip(layout.children())
+        {
+            child.as_widget().draw(
+                state,
+                renderer,
+                theme,
+                &renderer::Style {
+                    text_color: style.text_color.unwrap_or(renderer_style.text_color),
+                },
+                layout,
+                cursor_position,
+                viewport,
+            );
+        }
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        overlay::from_children(&mut self.elements, tree, layout, renderer)
+    }
+}
diff --git a/src/utils/iced/tab_text.rs b/src/shell/element/stack/tab_text.rs
similarity index 93%
rename from src/utils/iced/tab_text.rs
rename to src/shell/element/stack/tab_text.rs
index da31b59e..416fe18c 100644
--- a/src/utils/iced/tab_text.rs
+++ b/src/shell/element/stack/tab_text.rs
@@ -78,10 +78,11 @@ where
     fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
         let limits = limits.width(self.width).height(self.height);
         let child_limits = Limits::new(
-            Size::new(limits.min().width, limits.min().height),
-            Size::new(limits.max().width * 2., limits.max().height),
+            Size::new(limits.min().width, limits.min().height - 4.),
+            Size::new(limits.max().width * 2., limits.max().height - 4.),
         );
-        let content = self.text.as_widget().layout(renderer, &child_limits);
+        let mut content = self.text.as_widget().layout(renderer, &child_limits);
+        content.move_to(Point::new(0., 2.));
         let size = limits.resolve(content.size());
 
         Node::with_children(size, vec![content])
diff --git a/src/shell/element/stack/tabs.rs b/src/shell/element/stack/tabs.rs
new file mode 100644
index 00000000..c2daf8dd
--- /dev/null
+++ b/src/shell/element/stack/tabs.rs
@@ -0,0 +1,778 @@
+use super::tab::{Tab, TabBackgroundTheme, TabMessage, TabRuleTheme, MIN_ACTIVE_TAB_WIDTH};
+use apply::Apply;
+use cosmic::{
+    font::Font,
+    iced::{id::Id, widget, Element},
+    iced_core::{
+        event,
+        layout::{Layout, Limits, Node},
+        mouse, overlay, renderer,
+        widget::{
+            operation::{
+                scrollable::{AbsoluteOffset, RelativeOffset},
+                Operation, OperationOutputWrapper, Scrollable,
+            },
+            text::StyleSheet as TextStyleSheet,
+            tree::{self, Tree},
+            Widget,
+        },
+        Background, Clipboard, Color, Length, Point, Rectangle, Shell, Size, Vector,
+    },
+    iced_style::{
+        button::StyleSheet as ButtonStyleSheet, container::StyleSheet as ContainerStyleSheet,
+        rule::StyleSheet as RuleStyleSheet,
+    },
+    iced_widget::container::draw_background,
+    theme,
+    widget::{icon, Icon},
+};
+
+pub struct Tabs<'a, Message, Renderer>
+where
+    Renderer: cosmic::iced_core::Renderer,
+    Renderer::Theme: RuleStyleSheet,
+{
+    elements: Vec<Element<'a, Message, Renderer>>,
+    id: Option<Id>,
+    height: Length,
+    width: Length,
+    group_focused: bool,
+    scroll_to: Option<usize>,
+}
+
+/// The local state of [`Tabs`].
+#[derive(Debug, Clone, Copy)]
+pub struct State {
+    offset_x: Offset,
+    scroll_to: Option<usize>,
+}
+
+impl Scrollable for State {
+    fn snap_to(&mut self, offset: RelativeOffset) {
+        self.offset_x = Offset::Relative(offset.x.clamp(0.0, 1.0));
+    }
+
+    fn scroll_to(&mut self, offset: AbsoluteOffset) {
+        self.offset_x = Offset::Absolute(offset.x.max(0.0));
+    }
+}
+
+impl Default for State {
+    fn default() -> Self {
+        State {
+            offset_x: Offset::Absolute(0.),
+            scroll_to: None,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Offset {
+    Absolute(f32),
+    Relative(f32),
+}
+
+impl Offset {
+    fn absolute(self, viewport: f32, content: f32) -> f32 {
+        match self {
+            Offset::Absolute(absolute) => absolute.min((content - viewport).max(0.0)),
+            Offset::Relative(percentage) => ((content - viewport) * percentage).max(0.0),
+        }
+    }
+}
+
+impl<'a, Message, Renderer> Tabs<'a, Message, Renderer>
+where
+    Renderer: cosmic::iced_core::Renderer + 'a,
+    Renderer: cosmic::iced_core::text::Renderer<Font = Font>,
+    Renderer::Theme: ButtonStyleSheet<Style = theme::Button>,
+    Renderer::Theme: ContainerStyleSheet<Style = theme::Container>,
+    Renderer::Theme: RuleStyleSheet<Style = theme::Rule>,
+    Renderer::Theme: TextStyleSheet,
+    Message: TabMessage + 'a,
+    widget::Button<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
+    widget::Container<'a, Message, Renderer>: Into<Element<'a, Message, Renderer>>,
+    Icon<'a>: Into<Element<'a, Message, Renderer>>,
+{
+    pub fn new(
+        tabs: impl IntoIterator<Item = Tab<'a, Message>>,
+        active: usize,
+        activated: bool,
+        group_focused: bool,
+    ) -> Self {
+        let mut tabs = tabs
+            .into_iter()
+            .enumerate()
+            .map(|(i, tab)| {
+                let rule = if activated {
+                    TabRuleTheme::ActiveActivated
+                } else {
+                    TabRuleTheme::ActiveDeactivated
+                };
+
+                let tab = if i == active {
+                    tab.rule_style(rule)
+                        .background_style(if activated {
+                            TabBackgroundTheme::ActiveActivated
+                        } else {
+                            TabBackgroundTheme::ActiveDeactivated
+                        })
+                        .font(cosmic::font::FONT_SEMIBOLD)
+                        .active()
+                } else if i.checked_sub(1) == Some(active) {
+                    tab.rule_style(rule).non_active()
+                } else {
+                    tab.non_active()
+                };
+
+                Element::new(tab.internal(i))
+            })
+            .collect::<Vec<_>>();
+
+        tabs.push(
+            widget::vertical_rule(4)
+                .style(if tabs.len() - 1 == active {
+                    if activated {
+                        TabRuleTheme::ActiveActivated
+                    } else {
+                        TabRuleTheme::ActiveDeactivated
+                    }
+                } else {
+                    TabRuleTheme::Default
+                })
+                .into(),
+        );
+
+        Tabs {
+            elements: vec![
+                widget::vertical_rule(4)
+                    .style(if group_focused {
+                        TabRuleTheme::ActiveActivated
+                    } else {
+                        TabRuleTheme::Default
+                    })
+                    .into(),
+                icon("go-previous-symbolic", 16)
+                    .force_svg(true)
+                    .style(theme::Svg::Symbolic)
+                    .apply(widget::button)
+                    .style(theme::Button::Text)
+                    .on_press(Message::scroll_back())
+                    .into(),
+            ]
+            .into_iter()
+            .chain(tabs)
+            .chain(vec![
+                icon("go-next-symbolic", 16)
+                    .force_svg(true)
+                    .style(theme::Svg::Symbolic)
+                    .apply(widget::button)
+                    .style(theme::Button::Text)
+                    .on_press(Message::scroll_further())
+                    .into(),
+                widget::vertical_rule(4)
+                    .style(if group_focused {
+                        TabRuleTheme::ActiveActivated
+                    } else {
+                        TabRuleTheme::Default
+                    })
+                    .into(),
+            ])
+            .collect(),
+            id: None,
+            width: Length::Fill,
+            height: Length::Shrink,
+            group_focused,
+            scroll_to: None,
+        }
+    }
+
+    pub fn id(mut self, id: impl Into<Id>) -> Self {
+        self.id = Some(id.into());
+        self
+    }
+
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    pub fn force_visible(mut self, idx: Option<usize>) -> Self {
+        self.scroll_to = idx;
+        self
+    }
+}
+
+impl State {
+    pub fn offset(&self, bounds: Rectangle, content_bounds: Size) -> Vector {
+        Vector::new(
+            self.offset_x.absolute(bounds.width, content_bounds.width),
+            0.,
+        )
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for Tabs<'a, Message, Renderer>
+where
+    Renderer: cosmic::iced_core::Renderer,
+    Renderer::Theme: ContainerStyleSheet<Style = theme::Container> + RuleStyleSheet,
+    Message: TabMessage,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn id(&self) -> Option<Id> {
+        self.id.clone()
+    }
+
+    fn set_id(&mut self, id: Id) {
+        self.id = Some(id);
+    }
+
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::Some(Box::new(State::default()))
+    }
+
+    fn children(&self) -> Vec<Tree> {
+        self.elements.iter().map(|elem| Tree::new(elem)).collect()
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        tree.diff_children(&mut self.elements)
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
+        let limits = limits.width(self.width).height(self.height);
+
+        // calculate the smallest possible size
+        let child_limits = Limits::new(
+            Size::new(0.0, limits.min().height),
+            Size::new(f32::INFINITY, limits.max().height),
+        )
+        .width(Length::Shrink)
+        .height(Length::Shrink);
+
+        let mut nodes = self.elements[2..self.elements.len() - 2]
+            .iter()
+            .map(|tab| tab.as_widget().layout(renderer, &child_limits))
+            .collect::<Vec<_>>();
+
+        // sum up
+        let min_size = nodes
+            .iter()
+            .map(|node| node.size())
+            .fold(Size::new(0., 0.), |a, b| Size {
+                width: a.width + b.width,
+                height: a.height.max(b.height),
+            });
+        let size = limits.resolve(min_size);
+
+        if min_size.width <= size.width {
+            // we don't need to scroll
+
+            // can we make every tab equal weight and keep the active large enough?
+            let children = if (size.width / (self.elements.len() as f32 - 5.)).ceil() as i32
+                >= MIN_ACTIVE_TAB_WIDTH
+            {
+                // just use a flex layout
+                cosmic::iced_core::layout::flex::resolve(
+                    cosmic::iced_core::layout::flex::Axis::Horizontal,
+                    renderer,
+                    &limits,
+                    0.into(),
+                    0.,
+                    cosmic::iced::Alignment::Center,
+                    &self.elements[2..self.elements.len() - 2],
+                )
+                .children()
+                .to_vec()
+            } else {
+                // otherwise we need a more manual approach
+                let min_width = (size.width - MIN_ACTIVE_TAB_WIDTH as f32 - 4.)
+                    / (self.elements.len() as f32 - 6.);
+                let mut offset = 0.;
+
+                let mut nodes = self.elements[2..self.elements.len() - 3]
+                    .iter()
+                    .map(|tab| {
+                        let child_limits = Limits::new(
+                            Size::new(min_width, limits.min().height),
+                            Size::new(f32::INFINITY, limits.max().height),
+                        )
+                        .width(Length::Shrink)
+                        .height(Length::Shrink);
+
+                        let mut node = tab.as_widget().layout(renderer, &child_limits);
+                        node.move_to(Point::new(offset, 0.));
+                        offset += node.bounds().width;
+                        node
+                    })
+                    .collect::<Vec<_>>();
+                nodes.push({
+                    let mut node = Node::new(Size::new(4., limits.max().height));
+                    node.move_to(Point::new(offset, 0.));
+                    node
+                });
+                nodes
+            };
+
+            // and add placeholder nodes for the not rendered scroll-buttons/rules
+            Node::with_children(
+                size,
+                vec![
+                    Node::new(Size::new(0., 0.)),
+                    Node::with_children(Size::new(0., 0.), vec![Node::new(Size::new(0., 0.))]),
+                ]
+                .into_iter()
+                .chain(children)
+                .chain(vec![
+                    Node::with_children(Size::new(0., 0.), vec![Node::new(Size::new(0., 0.))]),
+                    Node::new(Size::new(0., 0.)),
+                ])
+                .collect::<Vec<_>>(),
+            )
+        } else {
+            // we scroll, so use the computed min size, but add scroll buttons.
+            let mut offset = 30.;
+            for node in &mut nodes {
+                node.move_to(Point::new(offset, 0.));
+                offset += node.bounds().width;
+            }
+            let last_position = Point::new(size.width - 34., 0.);
+            nodes.remove(nodes.len() - 1);
+
+            Node::with_children(
+                size,
+                vec![Node::new(Size::new(4., size.height)), {
+                    let mut node = Node::with_children(
+                        Size::new(16., 16.),
+                        vec![Node::new(Size::new(16., 16.))],
+                    );
+                    node.move_to(Point::new(9., (size.height - 16.) / 2.));
+                    node
+                }]
+                .into_iter()
+                .chain(nodes)
+                .chain(vec![
+                    {
+                        let mut node = Node::new(Size::new(4., size.height));
+                        node.move_to(last_position);
+                        node
+                    },
+                    {
+                        let mut node = Node::with_children(
+                            Size::new(16., 16.),
+                            vec![Node::new(Size::new(16., 16.))],
+                        );
+                        node.move_to(last_position + Vector::new(9., (size.height - 16.) / 2.));
+                        node
+                    },
+                    {
+                        let mut node = Node::new(Size::new(4., size.height));
+                        node.move_to(last_position + Vector::new(30., 0.));
+                        node
+                    },
+                ])
+                .collect(),
+            )
+        }
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &<Renderer as cosmic::iced_core::Renderer>::Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+    ) {
+        let state = tree.state.downcast_ref::<State>();
+
+        let mut bounds = layout.bounds();
+        let content_bounds = layout
+            .children()
+            .skip(2)
+            .take(self.elements.len() - 5)
+            .fold(Size::new(0., 0.), |a, b| Size {
+                width: a.width + b.bounds().width,
+                height: b.bounds().height,
+            });
+
+        let background_style = ContainerStyleSheet::appearance(
+            theme,
+            &theme::Container::custom(|theme| widget::container::Appearance {
+                text_color: None,
+                background: Some(Background::Color(Color::from(
+                    theme.cosmic().palette.neutral_3,
+                ))),
+                border_radius: 0.0.into(),
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+            }),
+        );
+        draw_background(renderer, &background_style, bounds);
+
+        let scrolling = content_bounds.width.floor() > bounds.width;
+        if scrolling {
+            bounds.width -= 64.;
+            bounds.x += 30.;
+        }
+        let offset = state.offset(bounds, content_bounds);
+        let offset_viewport = Rectangle {
+            x: bounds.x + offset.x,
+            y: bounds.y + offset.y,
+            ..bounds
+        };
+
+        if scrolling {
+            // we have scroll buttons
+            for ((scroll, state), layout) in self
+                .elements
+                .iter()
+                .take(2)
+                .zip(&tree.children)
+                .zip(layout.children())
+            {
+                scroll.as_widget().draw(
+                    state,
+                    renderer,
+                    theme,
+                    style,
+                    layout,
+                    cursor_position,
+                    viewport,
+                );
+            }
+        }
+
+        renderer.with_layer(bounds, |renderer| {
+            renderer.with_translation(Vector::new(-offset.x, -offset.y), |renderer| {
+                for ((tab, state), layout) in self.elements[2..self.elements.len() - 3]
+                    .iter()
+                    .zip(tree.children.iter().skip(2))
+                    .zip(layout.children().skip(2))
+                {
+                    tab.as_widget().draw(
+                        state,
+                        renderer,
+                        theme,
+                        style,
+                        layout,
+                        cursor_position + offset,
+                        &offset_viewport,
+                    );
+                }
+            });
+        });
+        self.elements[self.elements.len() - 3].as_widget().draw(
+            &tree.children[self.elements.len() - 3],
+            renderer,
+            theme,
+            style,
+            layout.children().nth(self.elements.len() - 3).unwrap(),
+            cursor_position,
+            viewport,
+        );
+
+        if !scrolling && self.group_focused {
+            // HACK, overdraw our rule at the edges
+            self.elements[0].as_widget().draw(
+                &tree.children[2].children[0],
+                renderer,
+                theme,
+                style,
+                layout.children().nth(2).unwrap().children().nth(0).unwrap(),
+                cursor_position,
+                viewport,
+            );
+            self.elements[self.elements.len() - 1].as_widget().draw(
+                &tree.children[self.elements.len() - 3],
+                renderer,
+                theme,
+                style,
+                layout.children().nth(self.elements.len() - 3).unwrap(),
+                cursor_position,
+                viewport,
+            );
+        }
+
+        if scrolling {
+            // we have scroll buttons
+            for ((scroll, state), layout) in self.elements
+                [self.elements.len() - 2..self.elements.len()]
+                .iter()
+                .zip(tree.children.iter().skip(self.elements.len() - 2))
+                .zip(layout.children().skip(self.elements.len() - 2))
+            {
+                scroll.as_widget().draw(
+                    state,
+                    renderer,
+                    theme,
+                    style,
+                    layout,
+                    cursor_position,
+                    viewport,
+                );
+            }
+        }
+    }
+
+    fn operate(
+        &self,
+        tree: &mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
+    ) {
+        let state = tree.state.downcast_mut::<State>();
+
+        operation.scrollable(state, self.id.as_ref());
+
+        operation.container(self.id.as_ref(), &mut |operation| {
+            self.elements[2..self.elements.len() - 3]
+                .iter()
+                .zip(tree.children.iter_mut().skip(2))
+                .zip(layout.children().skip(2))
+                .for_each(|((child, state), layout)| {
+                    child
+                        .as_widget()
+                        .operate(state, layout, renderer, operation);
+                })
+        });
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: event::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        let state = tree.state.downcast_mut::<State>();
+
+        let mut bounds = layout.bounds();
+        let content_bounds = layout.children().fold(Size::new(0., 0.), |a, b| Size {
+            width: a.width + b.bounds().width,
+            height: b.bounds().height,
+        });
+        let scrolling = content_bounds.width.floor() > bounds.width;
+
+        if scrolling {
+            bounds.x += 30.;
+            bounds.width -= 64.;
+        }
+        let offset = state.offset(bounds, content_bounds);
+
+        if let Some(idx) = self.scroll_to {
+            state.scroll_to = Some(idx);
+        }
+        if let Some(idx) = state.scroll_to.take() {
+            if scrolling {
+                let tab_bounds = layout.children().nth(idx + 2).unwrap().bounds();
+                let left_offset = tab_bounds.x - layout.bounds().x - 30.;
+                let right_offset = left_offset + tab_bounds.width + 4.;
+                let scroll_width = bounds.width;
+                let current_start = offset.x;
+                let current_end = current_start + scroll_width;
+
+                assert!((right_offset - left_offset) <= (current_end - current_start));
+                if (left_offset - current_start).is_sign_negative()
+                    || (current_end - right_offset).is_sign_negative()
+                {
+                    let offset = if (left_offset - current_start).abs()
+                        < (right_offset - current_end).abs()
+                    {
+                        AbsoluteOffset {
+                            x: left_offset,
+                            y: 0.,
+                        }
+                    } else {
+                        AbsoluteOffset {
+                            x: right_offset - scroll_width,
+                            y: 0.,
+                        }
+                    };
+
+                    state.offset_x = Offset::Absolute(offset.x);
+                }
+            }
+            shell.publish(Message::scrolled());
+        }
+
+        let mut messages = Vec::new();
+        let mut internal_shell = Shell::new(&mut messages);
+
+        let len = self.elements.len();
+        let result = if scrolling && cursor_position.x < bounds.x {
+            self.elements[0..2]
+                .iter_mut()
+                .zip(&mut tree.children)
+                .zip(layout.children())
+                .map(|((child, state), layout)| {
+                    child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        layout,
+                        cursor_position,
+                        renderer,
+                        clipboard,
+                        &mut internal_shell,
+                    )
+                })
+                .fold(event::Status::Ignored, event::Status::merge)
+        } else if scrolling && cursor_position.x >= bounds.x + bounds.width {
+            self.elements[len - 3..len]
+                .iter_mut()
+                .zip(tree.children.iter_mut().skip(len - 3))
+                .zip(layout.children().skip(len - 3))
+                .map(|((child, state), layout)| {
+                    child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        layout,
+                        cursor_position,
+                        renderer,
+                        clipboard,
+                        &mut internal_shell,
+                    )
+                })
+                .fold(event::Status::Ignored, event::Status::merge)
+        } else {
+            self.elements[2..len - 3]
+                .iter_mut()
+                .zip(tree.children.iter_mut().skip(2))
+                .zip(layout.children().skip(2))
+                .map(|((child, state), layout)| {
+                    child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        layout,
+                        cursor_position + offset,
+                        renderer,
+                        clipboard,
+                        &mut internal_shell,
+                    )
+                })
+                .fold(event::Status::Ignored, event::Status::merge)
+        };
+
+        std::mem::drop(internal_shell);
+        for mut message in messages {
+            if let Some(offset) = message.populate_scroll(AbsoluteOffset {
+                x: state.offset_x.absolute(bounds.width, content_bounds.width),
+                y: 0.,
+            }) {
+                state.scroll_to(offset);
+                continue;
+            }
+
+            shell.publish(message);
+        }
+
+        result
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        let state = tree.state.downcast_ref::<State>();
+
+        let mut bounds = layout.bounds();
+        let content_bounds = layout.children().fold(Size::new(0., 0.), |a, b| Size {
+            width: a.width + b.bounds().width,
+            height: b.bounds().height,
+        });
+        let scrolling = content_bounds.width.floor() > bounds.width;
+
+        if scrolling {
+            bounds.width -= 64.;
+            bounds.x += 30.;
+        }
+        let offset = state.offset(bounds, content_bounds);
+        let offset_viewport = &Rectangle {
+            y: bounds.y + offset.y,
+            x: bounds.x + offset.x,
+            ..bounds
+        };
+
+        if scrolling && cursor_position.x < bounds.x {
+            self.elements[0..2]
+                .iter()
+                .zip(&tree.children)
+                .zip(layout.children())
+                .map(|((child, state), layout)| {
+                    child.as_widget().mouse_interaction(
+                        state,
+                        layout,
+                        cursor_position,
+                        viewport,
+                        renderer,
+                    )
+                })
+                .max()
+        } else if scrolling && cursor_position.x >= bounds.x + bounds.width {
+            self.elements[self.elements.len() - 3..self.elements.len()]
+                .iter()
+                .zip(tree.children.iter().skip(self.elements.len() - 3))
+                .zip(layout.children().skip(self.elements.len() - 3))
+                .map(|((child, state), layout)| {
+                    child.as_widget().mouse_interaction(
+                        state,
+                        layout,
+                        cursor_position,
+                        viewport,
+                        renderer,
+                    )
+                })
+                .max()
+        } else {
+            self.elements[2..self.elements.len() - 3]
+                .iter()
+                .zip(tree.children.iter().skip(2))
+                .zip(layout.children().skip(2))
+                .map(|((child, state), layout)| {
+                    child.as_widget().mouse_interaction(
+                        state,
+                        layout,
+                        cursor_position + offset,
+                        offset_viewport,
+                        renderer,
+                    )
+                })
+                .max()
+        }
+        .unwrap_or_default()
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        overlay::from_children(&mut self.elements, tree, layout, renderer)
+    }
+}
diff --git a/src/utils/iced/mod.rs b/src/utils/iced.rs
similarity index 99%
rename from src/utils/iced/mod.rs
rename to src/utils/iced.rs
index 16882109..e0d08edc 100644
--- a/src/utils/iced/mod.rs
+++ b/src/utils/iced.rs
@@ -28,8 +28,6 @@ use iced_tiny_skia::{
 };
 pub type Element<'a, Message> = cosmic::iced::Element<'a, Message, IcedRenderer>;
 
-pub mod tab_text;
-
 use ordered_float::OrderedFloat;
 use smithay::{
     backend::{