// ==UserScript==
// @name     Move controls in Mattermost
// @version  1
// @grant    none
// @include  https://chat.collabora.com/*
// ==/UserScript==

defaultNickColour = "inherit"

let styleOverrides = document.createElement("style")
// These are nicknames are coloured badly in Mattermost
// (dark on grey or light on white).
// Expand as needed.
styleOverrides.innerText = `
.user-popover[aria-label=zlatan] {
    color: ${defaultNickColour} !important
}


#statusDropdownMenu[role=menu] {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  bottom: 100% !important;
}

// don’t break menu:
#statusDropdownMenu[role=menu] .dropdown-menu {
  top: auto !important;
  // this doesn't work:
  // bottom: calc(100% + 4px) !important;
}
`
document.head.append(styleOverrides)

function moveControlbar() {
    console.log("moving control bar")
        try {
            // move the profile and other controls into the "spaces" sidebar
            let controlbar = document.getElementById("RightControlsContainer")
            let sidebar = document.getElementsByClassName("team-sidebar")[0]
            sidebar.append(controlbar)

            // make it go vertical
            controlbar.style.display = "block"
            controlbar.style.height = "auto"
            controlbar.firstChild.style.marginLeft = "8px"

            // replace Insights with Search
            let insightsbox = document.getElementById("sidebar-insights-button")
            let insights = document.getElementById("sidebarItem_insights")
            insights.style.display = "none"

            let searchbox = document.getElementById("searchbarContainer")
            insightsbox.append(searchbox)

            // remove the global header
            let header = document.getElementById("global-header")
            header.style.display = "none"

        } catch (e) {
            console.log(e)
                setTimeout(moveControlbar, 1000)
        }
}

setTimeout(moveControlbar, 500)