Handling of search filters

- Always display "no results" when a query is present
- Placeholder path for no sources selected (ensures URL retains structure)
- Fixes comment https://github.com/jaedb/Iris/issues/906#issuecomment-1776667496

src/js/App.js

@@ -55,6 +55,7 @@ const Content = () => (
         <Route path="settings/*" element={<Settings />} />
         <Route path="search" element={<Search />} />
         <Route path="search/:type/:providers/:term" element={<Search />} />
+        <Route path="search/:type/:providers" element={<Search />} />
         <Route path="artist/:uri/*" element={<Artist />} />
         <Route path="album/:uri/" element={<Album />} />
         <Route path="album/:uri/:name" element={<Album />} />

src/js/components/SearchResults.js

@@ -38,8 +38,6 @@ const SearchResults = ({
     results = results.slice(0, 6);
   }
 
-  if (all && !results.length) return null;
-
   return (
     <div>
       <h4>
@@ -60,7 +58,7 @@ const SearchResults = ({
           </URILink>
         )}
       </h4>
-      {results.length > 0 && (
+      {results.length > 0 ? (
         <section className="grid-wrapper">
           {type === 'artists' && <Grid items={results} show_source_icon mini={all} />}
           {type === 'albums' && <Grid items={results} show_source_icon mini={all} />}
@@ -84,6 +82,10 @@ const SearchResults = ({
             </Button>
           )}
         </section>
+      ) : (
+        <span style={{ opacity: 0.5 }}>
+          <I18n key="search.no_results" />
+        </span>
       )}
     </div>
   );

src/js/locale/en.yaml

@@ -339,6 +339,7 @@ search:
     sort: Sort
     source: Sources
   placeholder: Search
+  no_results: No results
   all:
     title: All
   artists:

src/js/views/Search.js

@@ -50,7 +50,7 @@ const Search = () => {
 
   const updateSearchQuery = (term, providers) => {
     const encodedTerm = encodeURIComponent(term);
-    navigate(`/search/${type}/${providers.join(',')}/${encodedTerm || ''}`);
+    navigate(`/search/${type}/${providers.join(',') || 'none'}/${encodedTerm || ''}`);
   }
 
   const onReset = () => navigate('/search');
@@ -113,13 +113,15 @@ const Search = () => {
         onReset={onReset}
       />
 
-      <div className="content-wrapper">
-        {type != 'all' ? (
-          <SearchResults type={type} />
-        ) : (
-          <AllSearchResults />
-        )}
-      </div>
+      {term && (
+        <div className="content-wrapper">
+          {type != 'all' ? (
+            <SearchResults type={type} />
+          ) : (
+            <AllSearchResults />
+          )}
+        </div>
+      )}
     </div>
   );
 }