UI: Add close button to tab bar

res/rml/tabbing.rcss

@@ -1,10 +1,21 @@
 tab-bar {
     display: flex;
+    position: relative;
     min-width: 0;
     overflow: auto hidden;
+    clip: always;
     text-transform: uppercase;
 }
 
+tab-bar scrollbarhorizontal,
+tab-bar scrollbarhorizontal sliderarrowdec,
+tab-bar scrollbarhorizontal sliderarrowinc,
+tab-bar scrollbarhorizontal slidertrack,
+tab-bar scrollbarhorizontal sliderbar {
+    width: 0;
+    height: 0;
+}
+
 tab-bar tab {
     flex: 0 0 auto;
     padding: 0 24dp;
@@ -31,3 +42,42 @@ tab-bar tab:hover {
 tab-bar tab:active {
     decorator: vertical-gradient(#c2a42d10 #c2a42d40);
 }
+
+tab-bar[closable] tab-end-spacer {
+    display: block;
+    flex: 0 0 64dp;
+    width: 64dp;
+    pointer-events: none;
+}
+
+tab-bar[closable] close {
+    display: block;
+    position: fixed;
+    top: 8dp;
+    right: 8dp;
+    z-index: 1;
+    width: 48dp;
+    height: 48dp;
+    font-family: "Material Symbols Rounded";
+    font-weight: normal;
+    font-size: 24dp;
+    line-height: 48dp;
+    text-align: center;
+    text-transform: none;
+    color: rgba(224, 219, 200, 70%);
+    backdrop-filter: blur(2dp);
+    border-radius: 6dp;
+    transition: color background-color 0.12s linear-in-out;
+    cursor: pointer;
+}
+
+tab-bar[closable] close:hover,
+tab-bar[closable] close:focus-visible {
+    color: #fff;
+    background-color: rgba(194, 164, 45, 24%);
+}
+
+tab-bar[closable] close:active {
+    color: #fff;
+    background-color: rgba(194, 164, 45, 40%);
+}

src/dusk/ui/popup.cpp

@@ -31,18 +31,21 @@ const Rml::String kDocumentSource = R"RML(
 }
 
 Popup::Popup() : Document(kDocumentSource), mRoot(mDocument->GetElementById("popup")) {
-    mTabBar = std::make_unique<TabBar>(mRoot, TabBar::Props{.autoSelect = false});
+    mTabBar = std::make_unique<TabBar>(mRoot, TabBar::Props{
+                                                  .onClose = [this] { hide(false); },
+                                                  .autoSelect = false,
+                                              });
     mTabBar->add_tab("Settings", [] { push_document(std::make_unique<SettingsWindow>()); });
-    mTabBar->add_tab("Warp", [] {
-        // TODO
-    });
+    // mTabBar->add_tab("Warp", [] {
+    //     // TODO
+    // });
     mTabBar->add_tab("Editor", [] { push_document(std::make_unique<EditorWindow>()); });
     mTabBar->add_tab("Reset", [this] {
         JUTGamePad::C3ButtonReset::sResetSwitchPushing = true;
         mTabBar->set_active_tab(-1);
         hide(false);
     });
-    mTabBar->add_tab("Exit", [] { IsRunning = false; });
+    mTabBar->add_tab("Quit", [] { IsRunning = false; });
 
     // Hide document after transition completion
     listen(mRoot, Rml::EventId::Transitionend, [this](Rml::Event& event) {
@@ -106,6 +109,11 @@ void Popup::update_safe_area() noexcept {
         Rml::PropertyId::PaddingRight, Rml::Property(safeInsets.right, Rml::Unit::PX));
     tabBar->SetProperty(
         Rml::PropertyId::PaddingLeft, Rml::Property(safeInsets.left, Rml::Unit::PX));
+    if (auto* close = tabBar->QuerySelector("close")) {
+        close->SetProperty(Rml::PropertyId::Right,
+            Rml::Property(safeInsets.right + 8.0f * context->GetDensityIndependentPixelRatio(),
+                Rml::Unit::PX));
+    }
 }
 
 bool Popup::visible() const {

src/dusk/ui/tab_bar.cpp

@@ -9,16 +9,78 @@ Rml::Element* createRoot(Rml::Element* parent) {
     return parent->AppendChild(std::move(elem));
 }
 
+int key_modifiers_from_event(const Rml::Event& event) {
+    int modifiers = 0;
+    if (event.GetParameter("ctrl_key", 0)) {
+        modifiers |= Rml::Input::KM_CTRL;
+    }
+    if (event.GetParameter("shift_key", 0)) {
+        modifiers |= Rml::Input::KM_SHIFT;
+    }
+    if (event.GetParameter("alt_key", 0)) {
+        modifiers |= Rml::Input::KM_ALT;
+    }
+    if (event.GetParameter("meta_key", 0)) {
+        modifiers |= Rml::Input::KM_META;
+    }
+    if (event.GetParameter("caps_lock_key", 0)) {
+        modifiers |= Rml::Input::KM_CAPSLOCK;
+    }
+    if (event.GetParameter("num_lock_key", 0)) {
+        modifiers |= Rml::Input::KM_NUMLOCK;
+    }
+    if (event.GetParameter("scroll_lock_key", 0)) {
+        modifiers |= Rml::Input::KM_SCROLLLOCK;
+    }
+    return modifiers;
+}
+
 }  // namespace
 
 TabBar::TabBar(Rml::Element* parent, Props props)
     : FluentComponent(createRoot(parent)), mProps(std::move(props)) {
+    if (mProps.onClose) {
+        mRoot->SetAttribute("closable", "");
+        auto& closeButton =
+            add_child<Button>(Button::Props{}, "close").on_pressed([this] { mProps.onClose(); });
+        closeButton.root()->SetInnerRML("&#xe5cd;");
+        mEndSpacer = append(mRoot, "tab-end-spacer");
+    }
+
     listen(Rml::EventId::Keydown, [this](Rml::Event& event) {
         const auto cmd = map_nav_event(event);
         if (cmd != NavCommand::None && handle_nav_command(event, cmd)) {
             event.StopPropagation();
         }
     });
+
+    // Remap vertical scroll events into horizontal scroll events
+    listen(Rml::EventId::Mousescroll, [this](Rml::Event& event) {
+        if (mRedirectingScroll) {
+            return;
+        }
+        if (mRoot->GetScrollWidth() <= mRoot->GetClientWidth() + 0.5f) {
+            return;
+        }
+
+        const float wheelDeltaX = event.GetParameter("wheel_delta_x", 0.0f);
+        const float wheelDeltaY = event.GetParameter("wheel_delta_y", 0.0f);
+        const float absWheelDeltaX = wheelDeltaX < 0.0f ? -wheelDeltaX : wheelDeltaX;
+        const float absWheelDeltaY = wheelDeltaY < 0.0f ? -wheelDeltaY : wheelDeltaY;
+        if (absWheelDeltaY == 0.0f || absWheelDeltaX >= absWheelDeltaY) {
+            return;
+        }
+
+        auto* context = mRoot->GetContext();
+        if (context == nullptr) {
+            return;
+        }
+
+        mRedirectingScroll = true;
+        context->ProcessMouseWheel({wheelDeltaY, 0.0f}, key_modifiers_from_event(event));
+        mRedirectingScroll = false;
+        event.StopPropagation();
+    });
 }
 
 bool TabBar::focus() {
@@ -48,6 +110,10 @@ void TabBar::add_tab(const Rml::String& title, TabCallback callback) {
     if (selected) {
         button.set_selected(true);
     }
+    if (mEndSpacer != nullptr) {
+        auto spacer = mRoot->RemoveChild(mEndSpacer);
+        mEndSpacer = mRoot->AppendChild(std::move(spacer));
+    }
     mTabs.emplace_back(Tab{
         .title = title,
         .button = button,
@@ -58,8 +124,8 @@ void TabBar::add_tab(const Rml::String& title, TabCallback callback) {
 bool TabBar::set_active_tab(int index) {
     if (index == -1) {
         // Clear currently selected tab
-        for (int i = 0; i < static_cast<int>(mTabs.size()); ++i) {
-            mTabs[i].button.set_selected(false);
+        for (auto& tab : mTabs) {
+            tab.button.set_selected(false);
         }
         mProps.selectedTabIndex = -1;
         return true;

src/dusk/ui/tab_bar.hpp

@@ -36,6 +36,8 @@ private:
 
     Props mProps;
     std::vector<Tab> mTabs;
+    Rml::Element* mEndSpacer = nullptr;
+    bool mRedirectingScroll = false;
 };
 
 }  // namespace dusk::ui

src/dusk/ui/ui.cpp

@@ -38,6 +38,7 @@ bool initialize() noexcept {
     load_font("FiraSansCondensed-Bold.ttf");
     load_font("AlegreyaSC-Regular.ttf");
     load_font("AlegreyaSC-Bold.ttf");
+    load_font("MaterialSymbolsRounded-Regular.ttf");
 
     sInitialized = true;
     return true;

src/dusk/ui/window.cpp

@@ -40,6 +40,7 @@ const Rml::String kDocumentSource = R"RML(
 
 Window::Window() : Document(kDocumentSource), mRoot(mDocument->GetElementById("window")) {
     mTabBar = std::make_unique<TabBar>(mRoot, TabBar::Props{
+                                                  .onClose = [this] { pop(); },
                                                   .selectedTabIndex = 0,
                                                   .autoSelect = true,
                                               });