Tweaking search sort dropdown

- Array destructuring instead of object

src/js/components/SearchResults.js

@@ -10,13 +10,15 @@ import { I18n } from '../locale';
 import Button from './Button';
 import { makeSearchResultsSelector, getSortSelector } from '../util/selectors';
 
+const SORT_KEY = 'search_results';
+
 const SearchResults = ({
   type,
   all,
 }) => {
   const { term } = useParams();
-  const { sortField, sortReverse } = useSelector(
-    (state) => getSortSelector(state, 'search_results'),
+  const [sortField, sortReverse] = useSelector(
+    (state) => getSortSelector(state, SORT_KEY, 'name'),
   );
   const searchResultsSelector = makeSearchResultsSelector(term, type);
   const rawResults = useSelector(searchResultsSelector);

src/js/services/core/middleware.js

@@ -180,9 +180,10 @@ const CoreMiddleware = (function () {
         const {
           ui: {
             allow_reporting,
-            uri_schemes_search_enabled = [],
-            search_settings,
           },
+          mopidy: {
+            uri_schemes = [],
+          } = {},
         } = store.getState();
 
         if (allow_reporting) {
@@ -198,15 +199,13 @@ const CoreMiddleware = (function () {
         // Trigger reducer immediately; this will hose out any previous results
         next(action);
 
-        if (uri_schemes_search_enabled.includes('spotify:')) {
-          if (!search_settings || search_settings.spotify) {
-            store.dispatch(spotifyActions.getSearchResults(query));
-          }
+        if (uri_schemes.includes('spotify:')) {
+          store.dispatch(spotifyActions.getSearchResults(query));
         }
         store.dispatch(mopidyActions.getSearchResults(
           query,
           100,
-          uri_schemes_search_enabled.filter((i) => i !== 'spotify:'), // Omit Spotify; handled above
+          uri_schemes.filter((i) => i !== 'spotify:'), // Omit Spotify; handled above
         ));
         break;
       }

src/js/services/mopidy/middleware.js

@@ -848,12 +848,6 @@ const MopidyMiddleware = (function () {
               // Enable Iris providers when the backend is available
               store.dispatch(spotifyActions.set({ enabled: uri_schemes.includes('spotify:') }));
               store.dispatch(googleActions.set({ enabled: uri_schemes.includes('gmusic:') }));
-
-              // If we haven't customised our search schemes, add all to search
-              if (store.getState().ui.uri_schemes_search_enabled === undefined) {
-                store.dispatch(uiActions.set({ uri_schemes_search_enabled: uri_schemes }));
-              }
-
               store.dispatch({ type: 'MOPIDY_URI_SCHEMES', uri_schemes });
             },
           );

src/js/views/Library/Artists.js

@@ -20,7 +20,6 @@ import {
   makeProvidersSelector,
   getSortSelector,
 } from '../../util/selectors';
-import { formatSimpleObject } from '../../util/format';
 
 const SORT_KEY = 'library_artists';
 const processKeys = [

src/js/views/Modals/ShareConfig.js

@@ -124,7 +124,6 @@ const ShareConfig = () => {
         'grid_glow_enabled',
         'sort',
         'initial_setup_complete',
-        'uri_schemes_search_enabled',
       ],
     ),
     snapcast: pick(snapcast, ['enabled', 'host', 'port', 'ssl']),

src/js/views/Search.js

@@ -8,20 +8,22 @@ import SearchForm from '../components/Fields/SearchForm';
 import { AllSearchResults, SearchResults } from '../components/SearchResults';
 import { startSearch } from '../services/core/actions';
 import {
-  set,
+  setSort,
   hideContextMenu,
   setWindowTitle,
 } from '../services/ui/actions';
 import { i18n } from '../locale';
 import { getSortSelector } from '../util/selectors';
 
+const SORT_KEY = 'search_results';
+
 const Search = () => {
   const { term, type = 'all' } = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const lastQuery = useSelector((state) => state.core?.search_results?.query);
-  const { sortField, sortReverse } = useSelector(
-    (state) => getSortSelector(state, 'search_results'),
+  const [sortField, sortReverse] = useSelector(
+    (state) => getSortSelector(state, SORT_KEY, 'name'),
   );
 
   useEffect(() => {
@@ -43,14 +45,19 @@ const Search = () => {
 
   const onReset = () => navigate('/search');
 
-  const onSortChange = (value) => {
-    dispatch(set({ uri_schemes_search_enabled: value }));
+  const onSortChange = (field) => {
+    let reverse = false;
+    if (field !== null && sortField === field) {
+      reverse = !sortReverse;
+    }
+    dispatch(setSort(SORT_KEY, field, reverse));
     dispatch(hideContextMenu());
   }
 
   const sortOptions = [
-    { value: 'followers', label: i18n('common.popularity') },
     { value: 'name', label: i18n('common.name') },
+    { value: 'uri', label: i18n('fields.filters.source') },
+    { value: 'followers', label: i18n('common.popularity') },
     { value: 'artist', label: i18n('common.artist') },
     { value: 'duration', label: i18n('common.duration') },
   ];

src/scss/views/_search.scss

@@ -5,18 +5,18 @@
     position: absolute;
     top: 30px;
     left: 90px;
-    right: 170px;
+    right: 150px;
 
     input {
       @include feature_font();
-      padding: 6px 0 4px 0;
+      padding: 6px 0 0 0;
       width: 100%;
       font-size: 3rem;
       font-weight: 700;
-      height: 4rem;
+      height: 1em;
       background: transparent;
       border: 0;
-      border-bottom: 2px solid colour('grey');
+      border-bottom: 2px solid rgba(128,128,128,0.3);
       border-radius: 0;
       letter-spacing: -0.15rem;
 
@@ -24,6 +24,11 @@
       &:not(:root:root) {
         height: 4.6rem;
         margin-top: -0.5rem;
+
+        @include responsive($bp_medium) {
+          height: 2.6rem;
+          margin-top: 0;
+        }
       }
 
       &:focus,