From 8b031d12b828eff94ef5174250605d186ea60559 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sat, 16 Oct 2021 22:31:15 +1300
Subject: [PATCH] Fully-functioning server controller and switcher

---
 src/js/components/Fields/OutputControl.js | 19 ++++++++++---------
 src/js/components/Sidebar.js              |  4 ----
 src/scss/components/_output-control.scss  | 19 +++++++++++--------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/js/components/Fields/OutputControl.js b/src/js/components/Fields/OutputControl.js
index edf594de..0a95bfad 100755
--- a/src/js/components/Fields/OutputControl.js
+++ b/src/js/components/Fields/OutputControl.js
@@ -25,6 +25,11 @@ const Header = ({ stream, server }) => {
     name,
     current_track,
   } = server || {};
+  const canBeSelected = id && id !== current_server
+  const onClick = () => {
+    if (!canBeSelected) return;
+    dispatch(mopidyActions.setCurrentServer(server));
+  }
   return (
     <div className="output-control__output__header">
       <Thumbnail
@@ -33,17 +38,13 @@ const Header = ({ stream, server }) => {
         className="output-control__output__header__thumbnail"
       />
       <div className="output-control__output__header__content">
-        <h5 className="output-control__output__header__title">
+        <h5
+          className="output-control__output__header__title"
+          onClick={onClick}
+          style={{ cursor: canBeSelected ? 'pointer' : 'default' }}
+        >
           {name || stream.id}
           {stream.status === 'playing' && <Icon name="play_arrow" />}
-          {id && id !== current_server && (
-            <span
-              className="flag flag--default"
-              onClick={() => dispatch(mopidyActions.setCurrentServer(server))}
-            >
-              SWITCH TO THIS SERVER
-            </span>
-          )}
         </h5>
         {current_track && (
           <ul className="details">
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 973aa22a..b5f59fc4 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -159,10 +159,6 @@ class Sidebar extends React.Component {
                 <I18n path="sidebar.settings" />
                 {this.renderStatusIcon()}
               </Link>
-              <Link to="/servers" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
-                <Icon name="dns" type="material" />
-                <I18n path="sidebar.servers" />
-              </Link>
             </section>
 
           </nav>
diff --git a/src/scss/components/_output-control.scss b/src/scss/components/_output-control.scss
index e6c7ed01..d299bfd7 100755
--- a/src/scss/components/_output-control.scss
+++ b/src/scss/components/_output-control.scss
@@ -59,8 +59,6 @@
 	}
 
 	&__output {
-		padding-top: 1px;
-
 		&__header {
 			margin: 0.8rem;
 			display: flex;
@@ -160,9 +158,15 @@
 	}
 
 	&__commands {
-		padding: 12px 18px 8px;
-		position: relative;
+		padding: 12px 12px 8px 12px;
+		border-radius: 3px 3px 0 0;
+		position: relative;	
+		background: colour('off_white');
+		
 		@include clearfix();
+		@include theme('dark') {
+			background: colour('grey');
+		}
 	}
 
 	@include responsive($bp_medium){
@@ -176,7 +180,7 @@
 			display: none;
 		}
 
-		&__items {
+		&__inner {
 			top: auto;
 			right: 0;
 			bottom: 0;
@@ -184,7 +188,6 @@
 			width: auto;
 			padding: 0;
 			border-radius: 0;
-			max-height: 50vh;
 
 			@include theme('dark') {
 				box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);
@@ -203,9 +206,9 @@
 			}
 		}
 
-		&__item {
+		&__output {
 			@include clearfix();
-			padding: 10px 18px 6px;
+			padding: 0;
 
 			&:not(:first-child){
 				border-color: rgba(128,128,128,0.05);